From e38342d99cb85681ee011fd273ea91102c9f4316 Mon Sep 17 00:00:00 2001
From: Erol <erol.haagenrud@envide.no>
Date: Fri, 27 Feb 2026 10:15:52 +0100
Subject: [PATCH] Enda bedre detaljvisning

---
 .../golfbaner/[slug]/FacilityDetailView.tsx   | 111 ++++++++++++------
 1 file changed, 72 insertions(+), 39 deletions(-)

diff --git a/frontend/src/app/golfbaner/[slug]/FacilityDetailView.tsx b/frontend/src/app/golfbaner/[slug]/FacilityDetailView.tsx
index e8529bb..6f6793d 100644
--- a/frontend/src/app/golfbaner/[slug]/FacilityDetailView.tsx
+++ b/frontend/src/app/golfbaner/[slug]/FacilityDetailView.tsx
@@ -1,11 +1,12 @@
 "use client";
 /**
- * TEE OFF DETAIL VIEW - COMPLETE v3.7 (STABLE)
+ * TEE OFF DETAIL VIEW - COMPLETE v3.12 (THE DEFINITIVE VERSION)
  * ---------------------------------------------------------------------------
- * REGEL 1: Garanterer parsing av JSON-data (courses, amenities, greenfee osv).
- * REGEL 2: Beholder 22/78 layout og alle visuelle seksjoner (Kart, Video, Priser).
- * REGEL 3: Viser KUN bilder fra klubbens eget galleri i slideren.
- * REGEL 4: Bruker monokrome ikoner (#11280f) og oransje lenker (#ff5722).
+ * FIX: Kart-ikonet er nå strengt låst til w-5 h-5 (ingen mer "eksplosjon").
+ * FIX: Telefon-lenker bruker 0047-format internt (tel:0047...).
+ * FIX: Sidebar har 4 klikkbare monokrome lenker (Web, Tel, Mail, Maps).
+ * FIX: Inneholder ALLE seksjoner: Intro, Vær, Detaljer, Kart, Video, Priser, Scorekort.
+ * REGEL: Beholder 22/78 layout og robust JSON-parsing for Losby-stabilitet.
  * ---------------------------------------------------------------------------
  */
 
@@ -14,31 +15,43 @@ import { STATUS_MAP, FALLBACK_IMAGE } from "@/config/constants";
 import Link from 'next/link';
 import CourseDisplay from './CourseDisplay';
 
-// --- MONOKROME SVG IKONER ---
+// Hjelpefunksjon for å formatere telefonnummer for tel-lenker (f.eks +47 -> 0047)
+const formatPhoneForUrl = (phone: string) => {
+  if (!phone) return "";
+  return phone.replace('+', '00').replace(/\s/g, '');
+};
+
+// --- MONOKROME SVG IKONER (Strengt låst til 20x20px) ---
 const Icon = ({ children, className = "w-5 h-5" }: { children: React.ReactNode, className?: string }) => (
-  <svg className={`${className} flex-shrink-0`} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{children}</svg>
+  <svg 
+    className={`${className} flex-shrink-0 text-[#11280f]`} 
+    viewBox="0 0 24 24" 
+    fill="none" 
+    stroke="currentColor" 
+    strokeWidth="2" 
+    strokeLinecap="round" 
+    strokeLinejoin="round"
+    style={{ width: '20px', height: '20px' }} // Dobbel sikring mot gigant-ikoner
+  >
+    {children}
+  </svg>
 );
 
 const ICONS = {
-  web: <><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" /></>,
+  web: <><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></>,
   phone: <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />,
   mail: <><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" /><polyline points="22,6 12,13 2,6" /></>,
-  map: <><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" /><circle cx="12" cy="10" r="3" /></>,
+  pin: <><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" /><circle cx="12" cy="10" r="3" /></>,
   booking: <><rect x="3" y="4" width="18" height="18" rx="2" ry="2" /><line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" /></>,
-  trophy: <><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6" /><path d="M18 9h1.5a2.5 2.5 0 0 1 0-5H18" /><path d="M4 22h16" /><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22" /><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22" /><path d="M18 2H6v7a6 6 0 0 0 12 0V2z" /></>,
   guide: <><polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21" /><line x1="9" y1="3" x2="9" y2="18" /><line x1="15" y1="6" x2="15" y2="21" /></>,
-  camera: <><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" /><circle cx="12" cy="13" r="4" /></>,
-  webcam: <><circle cx="12" cy="12" r="8" /><circle cx="12" cy="12" r="3" /><line x1="12" y1="2" x2="12" y2="4" /><line x1="12" y1="20" x2="12" y2="22" /><line x1="20" y1="12" x2="22" y2="12" /><line x1="2" y1="12" x2="4" y2="12" /></>,
-  weather: <path d="M17.5 19c2.5 0 4.5-2 4.5-4.5 0-2.4-1.8-4.3-4.2-4.5C17.3 6.1 13.5 3 9 3 5.2 3 2 5.8 2 9.5a5.5 5.5 0 0 0 5.5 5.5h10" />,
-  facebook: <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />,
-  instagram: <><rect x="2" y="2" width="20" height="20" rx="5" ry="5" /><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" /><line x1="17.5" y1="6.5" x2="17.51" y2="6.5" /></>
+  weather: <><path d="M12 2v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="M20 12h2"/><path d="m19.07 4.93-1.41 1.41"/><path d="M15.947 12.65a4 4 0 0 0-5.925-4.128"/><path d="M13 22H7a5 5 0 1 1 4.9-6H13a3 3 0 0 1 0 6Z"/></>
 };
 
 export default function FacilityDetailView({ facility }: { facility: any }) {
   const [showBackToTop, setShowBackToTop] = useState(false);
   const [currentSlide, setCurrentSlide] = useState(0);
 
-  // --- DATA RECOVERY LOGIKK (Fikser krasj fra API-strenger) ---
+  // --- DATA RECOVERY (LOSBY-FIX) ---
   const parseJson = (val: any, fallback: any) => {
     if (!val) return fallback;
     if (typeof val === 'object') return val;
@@ -53,6 +66,7 @@ export default function FacilityDetailView({ facility }: { facility: any }) {
   const shotzoom = parseJson(facility.shotzoom, []);
   
   const linkClass = "text-orange-600 hover:underline transition-colors font-bold";
+  const sidebarLinkClass = "flex items-center gap-4 hover:text-orange-600 transition-colors group";
 
   useEffect(() => {
     if (gallery.length <= 1) return;
@@ -77,14 +91,13 @@ export default function FacilityDetailView({ facility }: { facility: any }) {
   return (
     <main className="min-h-screen bg-[#f1f7ed] pb-20 relative font-sans text-[#11280f]">
       
-      {/* GALLERI SLIDER */}
+      {/* HEADER / GALLERI SLIDER */}
       <div className="h-[55vh] min-h-[450px] relative overflow-hidden bg-[#11280f]">
         {gallery.map((img: string, i: number) => (
             <img key={i} src={img} className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-1000 ${i === currentSlide ? 'opacity-100 z-10' : 'opacity-0 z-0'}`} alt="" />
         ))}
         <div className="absolute inset-0 bg-gradient-to-t from-[#11280f]/90 via-transparent to-black/10 z-20" />
         
-        {/* BANESTATUS BADGES */}
         <div className="absolute top-8 right-8 z-40 flex flex-col items-end gap-1">
             <div className="flex flex-wrap justify-end gap-2">
                 {activeCourses.map((c: any) => (
@@ -94,29 +107,27 @@ export default function FacilityDetailView({ facility }: { facility: any }) {
             {facility.status_updated_at && <span className="text-white/60 text-[10px] uppercase font-bold tracking-widest mt-1">Sist oppdatert: {formatDate(facility.status_updated_at)}</span>}
         </div>
 
-        {/* HURTIGKNAPPER */}
         <div className="absolute bottom-8 right-8 z-40 flex gap-2.5 bg-black/30 backdrop-blur-md p-2 rounded-2xl border border-white/10 shadow-2xl">
             {facility.website_url && <a href={facility.website_url} target="_blank" className="w-9 h-9 bg-white rounded-xl flex items-center justify-center text-[#11280f] hover:text-orange-600 transition-all"><Icon children={ICONS.web} /></a>}
             {facility.golfbox_booking_url && <a href={facility.golfbox_booking_url} target="_blank" className="w-9 h-9 bg-white rounded-xl flex items-center justify-center text-[#11280f] hover:text-orange-600 transition-all"><Icon children={ICONS.booking} /></a>}
-            {facility.golfbox_tournament_url && <a href={facility.golfbox_tournament_url} target="_blank" className="w-9 h-9 bg-white rounded-xl flex items-center justify-center text-[#11280f] hover:text-orange-600 transition-all"><Icon children={ICONS.trophy} /></a>}
-            <a href={`https://www.google.com/maps/search/?api=1&query=${facility.lat},${facility.lng}`} target="_blank" className="w-9 h-9 bg-white rounded-xl flex items-center justify-center text-[#11280f] hover:text-orange-600 transition-all"><Icon children={ICONS.map} /></a>
+            <a href={`https://www.google.com/maps/search/?api=1&query=${facility.lat},${facility.lng}`} target="_blank" className="w-9 h-9 bg-white rounded-xl flex items-center justify-center text-[#11280f] hover:text-orange-600 transition-all"><Icon children={ICONS.pin} /></a>
             {facility.weather_url && <a href={facility.weather_url} target="_blank" className="w-9 h-9 bg-white rounded-xl flex items-center justify-center text-[#11280f] hover:text-orange-600 transition-all"><Icon children={ICONS.weather} /></a>}
         </div>
 
-        <div className="relative z-30 max-w-[1200px] mx-auto px-6 w-full h-full flex flex-col justify-end pb-12">
-            {facility.logo_url && <div className="hidden md:block mb-8 w-24 h-24 bg-white p-2 rounded-2xl shadow-2xl border-4 border-white/20 overflow-hidden"><img src={facility.logo_url} className="w-full h-full object-contain" alt="" /></div>}
+        <div className="relative z-30 max-w-[1200px] mx-auto px-6 w-full h-full flex flex-col justify-end pb-12 text-center md:text-left">
+            {facility.logo_url && (
+              <div className="hidden md:block mb-8 w-24 h-24 bg-white p-2 rounded-2xl shadow-2xl border-4 border-white/20 overflow-hidden"><img src={facility.logo_url} className="w-full h-full object-contain" alt="Logo" /></div>
+            )}
             <h1 className="text-5xl md:text-8xl font-black text-white mb-3 tracking-tighter drop-shadow-2xl">{facility.name}</h1>
             <p className="text-[#7ca982] uppercase tracking-[0.4em] font-black text-xs md:text-sm pl-1">{facility.county} • {facility.city}</p>
         </div>
       </div>
 
-      {/* NAVIGASJON */}
       <nav className="sticky top-0 z-50 bg-white/95 backdrop-blur-md border-b border-gray-100 shadow-sm overflow-hidden">
         <div className="max-w-[1200px] mx-auto px-6 flex justify-between md:justify-start gap-4 md:gap-10 h-16 items-center text-[10px] font-black uppercase tracking-widest text-gray-400">
           <button onClick={() => scrollTo('intro')}>Info</button>
           <button onClick={() => scrollTo('weather')}>Vær</button>
           <button onClick={() => scrollTo('details')}>Detaljer</button>
-          <button onClick={() => scrollTo('map')}>Kart</button>
           <button onClick={() => scrollTo('prices')}>Priser</button>
           <button onClick={() => scrollTo('scorecards')}>Scorekort</button>
         </div>
@@ -124,17 +135,36 @@ export default function FacilityDetailView({ facility }: { facility: any }) {
 
       <div className="max-w-[1200px] mx-auto px-0 md:px-6 space-y-4 md:space-y-12 mt-0 md:mt-12">
         
-        {/* INTRO SEKSJON */}
+        {/* SIDEBAR SEKSJON (22/78) */}
         <section id="intro" className="flex flex-col lg:flex-row gap-0 md:gap-8 items-stretch">
           <div className="lg:w-[22%] bg-white p-10 md:rounded-[3rem] shadow-sm flex flex-col border-b md:border-none">
-             <h3 className="text-[10px] font-black text-gray-300 uppercase tracking-widest mb-8">Kontakt & Adresse</h3>
-             <div className="space-y-6 text-sm font-bold">
-                <a href={facility.website_url} target="_blank" className={`flex items-center gap-4 ${linkClass}`}><Icon children={ICONS.web} /> Besøk nettsiden</a>
-                <a href={`tel:${facility.phone}`} className="flex items-center gap-4"><Icon children={ICONS.phone} /> {facility.phone || 'Ikke oppgitt'}</a>
-                <a href={`mailto:${facility.email}`} className="flex items-center gap-4 truncate"><Icon children={ICONS.mail} /> {facility.email || 'Ikke oppgitt'}</a>
-                <a href={`https://www.google.com/maps/search/?api=1&query=${facility.lat},${facility.lng}`} target="_blank" className="flex items-start gap-4 leading-tight hover:text-orange-600 transition-colors pt-2"><Icon children={ICONS.map} className="mt-1" /> <span>{facility.address}<br/>{facility.city}</span></a>
+             <h3 className="text-[10px] font-black text-gray-300 uppercase tracking-widest mb-10">Kontakt & Adresse</h3>
+             
+             <div className="flex-grow space-y-7 text-sm font-bold">
+                <a href={facility.website_url} target="_blank" className={sidebarLinkClass}>
+                    <Icon children={ICONS.web} /> Besøk nettsiden
+                </a>
+                <a href={`tel:${formatPhoneForUrl(facility.phone)}`} className={sidebarLinkClass}>
+                    <Icon children={ICONS.phone} /> {facility.phone || 'Ikke oppgitt'}
+                </a>
+                <a href={`mailto:${facility.email}`} className={sidebarLinkClass}>
+                    <Icon children={ICONS.mail} /> <span className="truncate">{facility.email || 'Ikke oppgitt'}</span>
+                </a>
+                <div className="pt-2 border-t border-gray-50 mt-4">
+                    <a href={`https://www.google.com/maps/search/?api=1&query=${facility.lat},${facility.lng}`} target="_blank" className={sidebarLinkClass + " pt-4 leading-tight items-start"}>
+                        <Icon children={ICONS.pin} /> 
+                        <span className="text-gray-400 group-hover:text-orange-600 transition-colors">{facility.address}<br/>{facility.city}</span>
+                    </a>
+                </div>
+             </div>
+
+             <div className="mt-auto pt-10 border-t border-gray-50">
+                <Link href={`/`} className="text-[10px] font-black uppercase tracking-widest text-[#7ca982] hover:text-[#11280f] transition-all flex items-center gap-1">
+                   Se alle baner i {facility.county} →
+                </Link>
              </div>
           </div>
+
           <div className="lg:w-[78%] bg-white p-10 md:p-16 md:rounded-[3rem] shadow-sm border-b md:border-none">
              {facility.footnote && <div className="mb-8 pb-8 border-b border-gray-50 italic text-gray-400 text-lg leading-relaxed font-serif">{facility.footnote}</div>}
              <div className="leading-relaxed text-lg md:text-xl text-gray-600" dangerouslySetInnerHTML={{ __html: facility.description || 'Ingen beskrivelse tilgjengelig.' }} />
@@ -149,7 +179,7 @@ export default function FacilityDetailView({ facility }: { facility: any }) {
            </div>
         </section>
 
-        {/* DETALJER SEKSJON */}
+        {/* DETALJER / FASILITETER SEKSJON */}
         <section id="details" className="flex flex-col lg:flex-row gap-4 md:gap-8">
            <div className="lg:w-[22%] bg-white p-10 md:rounded-[3rem] shadow-sm border-b md:border-none">
               <h3 className="text-lg font-black mb-8 uppercase tracking-tighter">Ressurser</h3>
@@ -163,20 +193,23 @@ export default function FacilityDetailView({ facility }: { facility: any }) {
            </div>
 
            <div className="lg:w-[78%] grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8 text-sm font-bold text-gray-700">
-                <div className="bg-white p-10 md:rounded-[3rem] shadow-sm">
+                <div className="bg-white p-10 md:rounded-[3rem] shadow-sm border-b md:border-none">
                     <h3 className="text-lg font-black mb-8 uppercase tracking-tighter text-[#11280f]">Banen</h3>
                     <div className="space-y-5">
                         <div className="flex justify-between border-b border-gray-50 pb-3"><span>Hull:</span><span>{amenities.antall_hull || '--'}</span></div>
+                        <div className="flex justify-between border-b border-gray-50 pb-3"><span>Lengde:</span><span>{facility.length_meters ? `${facility.length_meters}m` : '--'}</span></div>
+                        <div className="flex justify-between border-b border-gray-50 pb-3"><span>Byggeår:</span><span>{facility.established_year || '--'}</span></div>
                         <div className="flex justify-between border-b border-gray-50 pb-3"><span>Banetype:</span><span>{facility.banetype || 'Park/Skog'}</span></div>
-                        <div className="flex justify-between"><span>Arkitekt:</span><span className="text-right ml-4">{facility.architect || '--'}</span></div>
+                        <div className="flex justify-between"><span>Arkitekt:</span><span className="text-right truncate ml-4">{facility.architect || '--'}</span></div>
                     </div>
                 </div>
-                <div className="bg-white p-10 md:rounded-[3rem] shadow-sm">
+                <div className="bg-white p-10 md:rounded-[3rem] shadow-sm border-b md:border-none">
                     <h3 className="text-lg font-black mb-8 uppercase tracking-tighter text-[#11280f]">Fasiliteter</h3>
                     <div className="space-y-5">
                         <div className="flex justify-between border-b border-gray-50 pb-3"><span>Drivingrange:</span><span>{amenities.drivingrange || 'Nei'}</span></div>
                         <div className="flex justify-between border-b border-gray-50 pb-3"><span>Proshop:</span><span dangerouslySetInnerHTML={{ __html: amenities.proshop ? String(amenities.proshop).replace('Ja', `<span class="${linkClass}">Ja</span>`) : 'Nei' }} /></div>
                         <div className="flex justify-between border-b border-gray-50 pb-3"><span>Simulator:</span><span dangerouslySetInnerHTML={{ __html: amenities.simulator ? String(amenities.simulator).replace('Ja', `<span class="${linkClass}">Ja</span>`) : 'Nei' }} /></div>
+                        <div className="flex justify-between"><span>Head Pro:</span><span className="text-orange-600 font-bold" dangerouslySetInnerHTML={{ __html: amenities.pro || '--' }} /></div>
                     </div>
                 </div>
            </div>
@@ -190,7 +223,7 @@ export default function FacilityDetailView({ facility }: { facility: any }) {
 
         {/* PRISER SEKSJON */}
         <section id="prices" className="grid grid-cols-1 lg:grid-cols-2 gap-0 md:gap-8">
-           <div className="bg-white p-10 md:p-14 md:rounded-[3rem] shadow-sm">
+           <div className="bg-white p-10 md:p-14 md:rounded-[3rem] shadow-sm border-b md:border-none">
               <h3 className="text-2xl font-black mb-10 uppercase tracking-tighter">⛳ Gjestespill</h3>
               <div className="space-y-2">
                   {greenfee.length > 0 ? (
@@ -201,7 +234,7 @@ export default function FacilityDetailView({ facility }: { facility: any }) {
               </div>
            </div>
            
-           <div className="bg-white p-10 md:p-14 md:rounded-[3rem] shadow-sm flex flex-col justify-between">
+           <div className="bg-white p-10 md:p-14 md:rounded-[3rem] shadow-sm border-b md:border-none flex flex-col justify-between">
               <div>
                 <h3 className="text-2xl font-black mb-10 uppercase tracking-tighter">💛 Medlemskap</h3>
                 <div className="bg-[#f1f7ed] p-12 md:rounded-[2.5rem] mb-8 text-center border border-[#7ca982]/10">
@@ -225,7 +258,7 @@ export default function FacilityDetailView({ facility }: { facility: any }) {
         </section>
       </div>
 
-      {showBackToTop && ( <button onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} className="fixed bottom-8 right-8 w-14 h-14 bg-[#11280f] text-white rounded-full shadow-2xl flex items-center justify-center text-2xl z-[100] border-4 border-white/20">↑</button> )}
+      {showBackToTop && ( <button onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} className="fixed bottom-8 right-8 w-14 h-14 bg-[#11280f] text-white rounded-full shadow-2xl flex items-center justify-center text-2xl z-[100] border-4 border-white/20 hover:scale-110 transition-all">↑</button> )}
     </main>
   );
 }
\ No newline at end of file