envide/Nye-TeeOff
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Detaljsiden virker godt nok til fint å kunne jobbes videre med.

Browse source
This commit is contained in:
Erol 2026-02-27 09:49:42 +01:00
parent 14226321a8
commit 20fe116179
1 changed files with 56 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

112
frontend/src/app/golfbaner/[slug]/FacilityDetailView.tsx
View file

@ -1,11 +1,20 @@
"use client"; "use client";
/**
* TEE OFF DETAIL VIEW - COMPLETE v3.7 (STABLE)
* ---------------------------------------------------------------------------
* 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).
* ---------------------------------------------------------------------------
*/
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import { STATUS_MAP, FALLBACK_IMAGE } from "@/config/constants"; import { STATUS_MAP, FALLBACK_IMAGE } from "@/config/constants";
import Link from 'next/link'; import Link from 'next/link';
import CourseDisplay from './CourseDisplay'; import CourseDisplay from './CourseDisplay';
// --- MONOKROME SVG IKONER (#11280f) --- // --- MONOKROME SVG IKONER ---
const Icon = ({ children, className = "w-5 h-5" }: { children: React.ReactNode, className?: string }) => ( 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`} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">{children}</svg>
); );
@ -29,10 +38,20 @@ export default function FacilityDetailView({ facility }: { facility: any }) {
const [showBackToTop, setShowBackToTop] = useState(false); const [showBackToTop, setShowBackToTop] = useState(false);
const [currentSlide, setCurrentSlide] = useState(0); const [currentSlide, setCurrentSlide] = useState(0);
const activeCourses = (facility.courses || []).filter((c: any) => c.holes && c.holes.length > 0); // --- DATA RECOVERY LOGIKK (Fikser krasj fra API-strenger) ---
const amenities = facility.amenities || {}; const parseJson = (val: any, fallback: any) => {
const gallery = Array.isArray(facility.gallery) && facility.gallery.length > 0 ? facility.gallery : [facility.image_url || FALLBACK_IMAGE]; if (!val) return fallback;
const shotzoom = Array.isArray(facility.shotzoom) ? facility.shotzoom : []; if (typeof val === 'object') return val;
try { return JSON.parse(val); } catch (e) { return fallback; }
};
const rawCourses = parseJson(facility.courses, []);
const activeCourses = Array.isArray(rawCourses) ? rawCourses.filter((c: any) => c.holes && (typeof c.holes === 'string' || c.holes.length > 0)) : [];
const amenities = parseJson(facility.amenities, {});
const gallery = parseJson(facility.gallery, [facility.image_url || FALLBACK_IMAGE]);
const greenfee = parseJson(facility.greenfee, []);
const shotzoom = parseJson(facility.shotzoom, []);
const linkClass = "text-orange-600 hover:underline transition-colors font-bold"; const linkClass = "text-orange-600 hover:underline transition-colors font-bold";
useEffect(() => { useEffect(() => {
@ -53,18 +72,19 @@ export default function FacilityDetailView({ facility }: { facility: any }) {
}; };
const formatDate = (d: string) => d ? new Date(d).toLocaleDateString('nb-NO', { day: 'numeric', month: 'long', year: 'numeric' }) : null; const formatDate = (d: string) => d ? new Date(d).toLocaleDateString('nb-NO', { day: 'numeric', month: 'long', year: 'numeric' }) : null;
const weatherImg = facility.weather_url?.replace("/graf/dag/", "/innhold/").replace(/\/$/, "") + "/meteogram.svg"; const weatherImg = facility.weather_url?.replace("/graf/dag/", "/innhold/").replace(/\/$/, "") + "/meteogram.svg";
return ( return (
<main className="min-h-screen bg-[#f1f7ed] pb-20 relative font-sans text-[#11280f]"> <main className="min-h-screen bg-[#f1f7ed] pb-20 relative font-sans text-[#11280f]">
{/* GALLERI SLIDER */}
<div className="h-[55vh] min-h-[450px] relative overflow-hidden bg-[#11280f]"> <div className="h-[55vh] min-h-[450px] relative overflow-hidden bg-[#11280f]">
{gallery.map((img: string, i: number) => ( {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="" /> <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" /> <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="absolute top-8 right-8 z-40 flex flex-col items-end gap-1">
<div className="flex flex-wrap justify-end gap-2"> <div className="flex flex-wrap justify-end gap-2">
{activeCourses.map((c: any) => ( {activeCourses.map((c: any) => (
@ -74,6 +94,7 @@ 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>} {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> </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"> <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.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_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>}
@ -82,20 +103,20 @@ export default function FacilityDetailView({ facility }: { facility: any }) {
{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>} {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>
<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"> <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>} {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>}
<h1 className="text-5xl md:text-8xl font-black text-white mb-3 tracking-tighter drop-shadow-2xl">{facility.name}</h1> <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> <p className="text-[#7ca982] uppercase tracking-[0.4em] font-black text-xs md:text-sm pl-1">{facility.county} • {facility.city}</p>
</div> </div>
</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"> <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"> <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('intro')}>Info</button>
<button onClick={() => scrollTo('weather')}>Vær</button> <button onClick={() => scrollTo('weather')}>Vær</button>
<button onClick={() => scrollTo('details')}>Detaljer</button> <button onClick={() => scrollTo('details')}>Detaljer</button>
<button onClick={() => scrollTo('map')}>Kart</button> <button onClick={() => scrollTo('map')}>Kart</button>
<button onClick={() => scrollTo('video')}>Video</button>
<button onClick={() => scrollTo('prices')}>Priser</button> <button onClick={() => scrollTo('prices')}>Priser</button>
<button onClick={() => scrollTo('scorecards')}>Scorekort</button> <button onClick={() => scrollTo('scorecards')}>Scorekort</button>
</div> </div>
@ -103,6 +124,7 @@ 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"> <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 */}
<section id="intro" className="flex flex-col lg:flex-row gap-0 md:gap-8 items-stretch"> <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"> <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> <h3 className="text-[10px] font-black text-gray-300 uppercase tracking-widest mb-8">Kontakt & Adresse</h3>
@ -111,18 +133,15 @@ export default function FacilityDetailView({ facility }: { facility: any }) {
<a href={`tel:${facility.phone}`} className="flex items-center gap-4"><Icon children={ICONS.phone} /> {facility.phone || 'Ikke oppgitt'}</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={`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> <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>
<div className="pt-6 border-t border-gray-50 flex gap-5">
{facility.facebook_url && <a href={facility.facebook_url} target="_blank" className="hover:text-orange-600 transition-all"><Icon children={ICONS.facebook} className="w-6 h-6" /></a>}
{facility.instagram_url && <a href={facility.instagram_url} target="_blank" className="hover:text-orange-600 transition-all"><Icon children={ICONS.instagram} className="w-6 h-6" /></a>}
</div>
</div> </div>
</div> </div>
<div className="lg:w-[78%] bg-white p-10 md:p-16 md:rounded-[3rem] shadow-sm border-b md:border-none"> <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>} {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 }} /> <div className="leading-relaxed text-lg md:text-xl text-gray-600" dangerouslySetInnerHTML={{ __html: facility.description || 'Ingen beskrivelse tilgjengelig.' }} />
</div> </div>
</section> </section>
{/* VÆR SEKSJON */}
<section id="weather" className="bg-white p-0 md:p-12 md:rounded-[3rem] shadow-sm border-b md:border-none overflow-hidden text-center"> <section id="weather" className="bg-white p-0 md:p-12 md:rounded-[3rem] shadow-sm border-b md:border-none overflow-hidden text-center">
<h3 className="text-[10px] font-black text-gray-300 uppercase tracking-[0.2em] py-8 md:py-0 md:mb-10 flex items-center justify-center gap-3"><Icon children={ICONS.weather} /> Vær for {facility.name}</h3> <h3 className="text-[10px] font-black text-gray-300 uppercase tracking-[0.2em] py-8 md:py-0 md:mb-10 flex items-center justify-center gap-3"><Icon children={ICONS.weather} /> Vær for {facility.name}</h3>
<div className="w-full flex justify-center px-4 md:px-0"> <div className="w-full flex justify-center px-4 md:px-0">
@ -130,89 +149,70 @@ export default function FacilityDetailView({ facility }: { facility: any }) {
</div> </div>
</section> </section>
{/* DETALJER SEKSJON */}
<section id="details" className="flex flex-col lg:flex-row gap-4 md:gap-8"> <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"> <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">Andre ressurser</h3> <h3 className="text-lg font-black mb-8 uppercase tracking-tighter">Ressurser</h3>
<div className="space-y-2.5 text-[#11280f]"> <div className="space-y-2.5 text-[#11280f]">
{facility.golfbox_booking_url && <a href={facility.golfbox_booking_url} target="_blank" className="flex justify-between items-center p-4 bg-gray-50 rounded-2xl text-[11px] font-black uppercase hover:bg-orange-600 hover:text-white transition-all"><span><Icon children={ICONS.booking} className="inline mr-3" /> Book Starttid</span><span>→</span></a>} {facility.golfbox_booking_url && <a href={facility.golfbox_booking_url} target="_blank" className="flex justify-between items-center p-4 bg-gray-50 rounded-2xl text-[11px] font-black uppercase hover:bg-orange-600 hover:text-white transition-all"><span><Icon children={ICONS.booking} className="inline mr-3" /> Book Starttid</span><span>→</span></a>}
{facility.golfbox_tournament_url && <a href={facility.golfbox_tournament_url} target="_blank" className="flex justify-between items-center p-4 bg-gray-50 rounded-2xl text-[11px] font-black uppercase hover:bg-orange-600 hover:text-white transition-all"><span><Icon children={ICONS.trophy} className="inline mr-3" /> Turneringer</span><span>→</span></a>}
{facility.baneguide_url && <a href={facility.baneguide_url} target="_blank" className="flex justify-between items-center p-4 bg-gray-50 rounded-2xl text-[11px] font-black uppercase hover:bg-orange-600 hover:text-white transition-all"><span><Icon children={ICONS.guide} className="inline mr-3" /> Baneguide</span><span>→</span></a>} {facility.baneguide_url && <a href={facility.baneguide_url} target="_blank" className="flex justify-between items-center p-4 bg-gray-50 rounded-2xl text-[11px] font-black uppercase hover:bg-orange-600 hover:text-white transition-all"><span><Icon children={ICONS.guide} className="inline mr-3" /> Baneguide</span><span>→</span></a>}
{facility.flyfoto_url && <a href={facility.flyfoto_url} target="_blank" className="flex justify-between items-center p-4 bg-gray-50 rounded-2xl text-[11px] font-black uppercase hover:bg-orange-600 hover:text-white transition-all"><span><Icon children={ICONS.camera} className="inline mr-3" /> Flyfoto</span><span>→</span></a>}
{facility.webcam_url && <a href={facility.webcam_url} target="_blank" className="flex justify-between items-center p-4 bg-gray-50 rounded-2xl text-[11px] font-black uppercase hover:bg-orange-600 hover:text-white transition-all"><span><Icon children={ICONS.webcam} className="inline mr-3" /> Webkamera</span><span>→</span></a>}
{shotzoom.map((sz: any, i: number) => ( {shotzoom.map((sz: any, i: number) => (
<a key={i} href={sz.shotzoom_url} target="_blank" title="Statistikk fra Shotzoom" className="flex justify-between items-center p-4 bg-gray-50 rounded-2xl text-[11px] font-black uppercase text-orange-600 hover:bg-orange-600 hover:text-white transition-all border border-orange-50 shadow-sm"><span>📊 Statistikk: {sz.shotzoom_beskrivelse?.replace('&nbsp;', ' ')}</span><span>→</span></a> <a key={i} href={sz.shotzoom_url} target="_blank" className="flex justify-between items-center p-4 bg-gray-50 rounded-2xl text-[11px] font-black uppercase text-orange-600 border border-orange-50 shadow-sm"><span>📊 Statistikk: {sz.shotzoom_beskrivelse?.replace('&nbsp;', ' ')}</span><span>→</span></a>
))} ))}
</div> </div>
</div> </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="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 border-b md:border-none"> <div className="bg-white p-10 md:rounded-[3rem] shadow-sm">
<h3 className="text-lg font-black mb-8 uppercase tracking-tighter text-[#11280f]">Banen</h3> <h3 className="text-lg font-black mb-8 uppercase tracking-tighter text-[#11280f]">Banen</h3>
<div className="space-y-5"> <div className="space-y-5">
<div className="flex justify-between border-b border-gray-50 pb-3"><span className="text-gray-400 font-medium">Hull:</span><span>{amenities.antall_hull || '--'}</span></div> <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 className="text-gray-400 font-medium">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>Banetype:</span><span>{facility.banetype || 'Park/Skog'}</span></div>
<div className="flex justify-between border-b border-gray-50 pb-3"><span className="text-gray-400 font-medium">Sesong:</span><span>{facility.season || '--'}</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 border-b border-gray-50 pb-3"><span className="text-gray-400 font-medium">Byggeår:</span><span>{facility.established_year || '--'}</span></div>
<div className="flex justify-between border-b border-gray-50 pb-3"><span className="text-gray-400 font-medium">Banetype:</span><span>{facility.banetype || 'Park/Skog'}</span></div>
<div className="flex justify-between pb-1"><span className="text-gray-400 font-medium">Arkitekt:</span><span className="text-right truncate ml-4">{facility.architect || '--'}</span></div>
</div> </div>
</div> </div>
<div className="bg-white p-10 md:rounded-[3rem] shadow-sm border-b md:border-none"> <div className="bg-white p-10 md:rounded-[3rem] shadow-sm">
<h3 className="text-lg font-black mb-8 uppercase tracking-tighter text-[#11280f]">Fasiliteter</h3> <h3 className="text-lg font-black mb-8 uppercase tracking-tighter text-[#11280f]">Fasiliteter</h3>
<div className="space-y-5"> <div className="space-y-5">
<div className="flex justify-between border-b border-gray-50 pb-3"><span className="text-gray-400 font-medium">Drivingrange:</span><span>{amenities.drivingrange || 'Nei'}</span></div> <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 className="text-gray-400 font-medium">Nærspill:</span><span>Ja</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 className="text-gray-400 font-medium">Proshop:</span><span className="text-right ml-4" 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 border-b border-gray-50 pb-3"><span className="text-gray-400 font-medium">Kølleutleie:</span><span>{amenities.kolleutleie || 'Nei'}</span></div>
<div className="flex justify-between border-b border-gray-50 pb-3"><span className="text-gray-400 font-medium">Simulator:</span><span className="text-right ml-4" dangerouslySetInnerHTML={{ __html: amenities.simulator ? String(amenities.simulator).replace('Ja', `<span class="${linkClass}">Ja</span>`) : 'Nei' }} /></div>
<div className="flex justify-between border-b border-gray-50 pb-3"><span className="text-gray-400 font-medium">Head Pro:</span><span className="text-orange-600 text-right ml-4 font-bold" dangerouslySetInnerHTML={{ __html: amenities.pro || '--' }} /></div>
<div className="flex justify-between pb-1"><span className="text-gray-400 font-medium">Kafé:</span><span className="text-orange-600 text-right ml-4 font-bold" dangerouslySetInnerHTML={{ __html: amenities.kafe || '--' }} /></div>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
{/* KART SEKSJON */}
<section id="map" className="space-y-6"> <section id="map" className="space-y-6">
<h2 className="text-3xl md:text-4xl font-black uppercase tracking-tighter flex items-center gap-5 ml-6 md:ml-0">Kart <span className="h-1 flex-grow bg-gray-100 rounded-full" /></h2> <h2 className="text-3xl md:text-4xl font-black uppercase tracking-tighter flex items-center gap-5 ml-6 md:ml-0">Kart <span className="h-1 flex-grow bg-gray-100 rounded-full" /></h2>
<div className="w-full md:rounded-[3rem] overflow-hidden shadow-xl h-[450px] md:h-[650px] border-y-4 md:border-[12px] border-white bg-gray-100"><iframe width="100%" height="100%" style={{ border: 0 }} src={`https://maps.google.com/maps?q=${facility.lat},${facility.lng}&t=k&z=15&ie=UTF8&iwloc=&output=embed`} allowFullScreen /></div> <div className="w-full md:rounded-[3rem] overflow-hidden shadow-xl h-[450px] md:h-[650px] border-y-4 md:border-[12px] border-white bg-gray-100"><iframe width="100%" height="100%" style={{ border: 0 }} src={`https://maps.google.com/maps?q=${facility.lat},${facility.lng}&t=k&z=15&ie=UTF8&iwloc=&output=embed`} allowFullScreen /></div>
</section> </section>
{facility.video_url && ( {/* PRISER SEKSJON */}
<section id="video" className="space-y-6">
<h2 className="text-3xl md:text-4xl font-black uppercase tracking-tighter flex items-center gap-5 ml-6 md:ml-0">Video <span className="h-1 flex-grow bg-gray-100 rounded-full" /></h2>
<div className="w-full md:rounded-[3rem] overflow-hidden shadow-2xl aspect-video bg-black border-y-4 md:border-[12px] border-white"><iframe src={facility.video_url} className="w-full h-full" allowFullScreen /></div>
</section>
)}
<section id="prices" className="grid grid-cols-1 lg:grid-cols-2 gap-0 md:gap-8"> <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 border-b md:border-none"> <div className="bg-white p-10 md:p-14 md:rounded-[3rem] shadow-sm">
<h3 className="text-2xl font-black mb-10 uppercase tracking-tighter flex items-center gap-4"><span>⛳</span> Gjestespill</h3> <h3 className="text-2xl font-black mb-10 uppercase tracking-tighter">⛳ Gjestespill</h3>
<div className="space-y-2"> <div className="space-y-2">
{Array.isArray(facility.greenfee) && facility.greenfee.length > 0 ? ( {greenfee.length > 0 ? (
facility.greenfee.map((g: any, i: number) => ( greenfee.map((g: any, i: number) => (
<div key={i} className="flex justify-between py-4 border-b border-gray-50 font-bold text-lg"><span className="text-gray-400 font-medium">{g.priskategori}</span><span className="text-[#11280f]">kr {g.pris_voksne || '--'},-</span></div> <div key={i} className="flex justify-between py-4 border-b border-gray-50 font-bold text-lg"><span>{g.priskategori}</span><span>kr {g.pris_voksne || '--'},-</span></div>
)) ))
) : <p className="text-gray-400 italic py-6">Ingen priser funnet.</p>} ) : <p className="text-gray-400 italic py-6">Ingen priser funnet.</p>}
</div> </div>
<p className="mt-10 text-[10px] text-gray-300 font-black uppercase tracking-widest">Krav: {facility.guest_requirements || 'Klubbhandicap'}</p>
</div> </div>
<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 className="bg-white p-10 md:p-14 md:rounded-[3rem] shadow-sm flex flex-col justify-between">
<div> <div>
<h3 className="text-2xl font-black mb-10 uppercase tracking-tighter flex items-center gap-4"><span>💛</span> Medlemskap</h3> <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"> <div className="bg-[#f1f7ed] p-12 md:rounded-[2.5rem] mb-8 text-center border border-[#7ca982]/10">
<p className="text-[#7ca982] text-[11px] font-black uppercase mb-3 tracking-widest">{facility.navn_standard_medlemskap || "Standard"}</p> <p className="text-6xl font-black text-[#11280f]">kr {facility.standard_medlemskap || '--'},-</p>
<p className="text-6xl md:text-7xl font-black text-[#11280f] tracking-tighter">kr {facility.standard_medlemskap || '--'},-</p>
{facility.standard_medlemskap_kommentarer && <p className="text-[11px] text-gray-400 mt-5 uppercase font-bold italic tracking-tight leading-relaxed">{facility.standard_medlemskap_kommentarer}</p>}
</div> </div>
{facility.navn_rimeligste_alternativ && (
<div className="px-8 py-5 bg-gray-50 rounded-2xl border border-gray-100 flex justify-between items-center text-sm font-bold shadow-sm"><span className="text-gray-400 uppercase text-[10px] tracking-widest">{facility.navn_rimeligste_alternativ}</span><span className="text-[#11280f]">kr {facility.rimeligste_alternativ},-</span></div>
)}
</div> </div>
<a href={facility.medlemskap_url} target="_blank" className="mt-10 block w-full text-center bg-[#11280f] text-white p-7 rounded-2xl font-black uppercase text-xs tracking-widest hover:bg-black transition-all shadow-xl">Se alle alternativer</a> <a href={facility.medlemskap_url} target="_blank" className="mt-10 block w-full text-center bg-[#11280f] text-white p-7 rounded-2xl font-black uppercase text-xs tracking-widest shadow-xl">Se alle alternativer</a>
</div> </div>
</section> </section>
{/* SCOREKORT SEKSJON */}
<section id="scorecards" className="pt-10 space-y-20 overflow-hidden"> <section id="scorecards" className="pt-10 space-y-20 overflow-hidden">
<h3 className="text-center text-3xl md:text-5xl font-black uppercase tracking-tighter">Scorekort</h3> <h3 className="text-center text-3xl md:text-5xl font-black uppercase tracking-tighter">Scorekort</h3>
<div className="w-full flex flex-col items-center gap-20"> <div className="w-full flex flex-col items-center gap-20">
@ -225,7 +225,7 @@ export default function FacilityDetailView({ facility }: { facility: any }) {
</section> </section>
</div> </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] hover:scale-110 transition-all 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">↑</button> )}
</main> </main>
); );
} }