218 lines
16 KiB
TypeScript
218 lines
16 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import { STATUS_MAP, FALLBACK_IMAGE } from "@/config/constants";
|
|||
|
|
import Link from 'next/link';
|
|||
|
|
import CourseDisplay from './CourseDisplay';
|
|||
|
|
|
|||
|
|
const formatTel = (phone: string) => {
|
|||
|
|
if (!phone) return "";
|
|||
|
|
const clean = phone.replace(/\s+/g, '').replace('+', '00');
|
|||
|
|
return `00${clean.replace(/^00/, '')}`; // Sikrer 0047 format
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default function FacilityDetailView({ facility }: { facility: any }) {
|
|||
|
|
const activeCourses = (facility.courses || []).filter((c: any) => c.holes && c.holes.length > 0);
|
|||
|
|
const amenities = facility.amenities || {};
|
|||
|
|
const nsg = facility.nsg_data || {};
|
|||
|
|
|
|||
|
|
const weatherImg = facility.weather_url?.replace("/graf/dag/", "/innhold/").replace(/\/$/, "") + "/meteogram.svg";
|
|||
|
|
const googleMapsUrl = `https://www.google.com/maps/search/?api=1&query=${facility.lat},${facility.lng}`;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<main className="min-h-screen bg-[#f1f7ed] pb-20">
|
|||
|
|
|
|||
|
|
{/* HERO SEKSJON */}
|
|||
|
|
<div className="h-[50vh] min-h-[500px] relative flex flex-col justify-end">
|
|||
|
|
<img src={facility.image_url || FALLBACK_IMAGE} alt="" className="absolute inset-0 w-full h-full object-cover z-0" />
|
|||
|
|
<div className="absolute inset-0 bg-gradient-to-t from-[#11280f]/90 via-transparent to-black/20 z-10" />
|
|||
|
|
|
|||
|
|
<div className="relative z-20 max-w-[1400px] mx-auto px-6 w-full pb-12">
|
|||
|
|
<div className="flex flex-col md:flex-row items-end justify-between gap-8">
|
|||
|
|
<div>
|
|||
|
|
<h1 className="text-6xl md:text-8xl font-black text-white mb-2 tracking-tighter drop-shadow-2xl">{facility.name}</h1>
|
|||
|
|
<p className="text-[#7ca982] uppercase tracking-[0.4em] font-black text-xs md:text-sm mb-6">{facility.city} • {facility.county}</p>
|
|||
|
|
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
{activeCourses.map((c: any) => (
|
|||
|
|
<span key={c.id} className="px-4 py-2 rounded-lg text-[10px] font-black uppercase bg-[#7ca982] text-white shadow-xl">
|
|||
|
|
{activeCourses.length === 1 ? STATUS_MAP[c.status] || c.status : `${c.name}: ${STATUS_MAP[c.status] || c.status}`}
|
|||
|
|
</span>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* DE 5 IKON-KNAPPENE (Gjeninnført nøyaktig) */}
|
|||
|
|
<div className="flex gap-2 bg-white/10 backdrop-blur-md p-2 rounded-2xl border border-white/20 shadow-2xl">
|
|||
|
|
{facility.website_url && <a href={facility.website_url} target="_blank" className="w-12 h-12 bg-white hover:bg-[#7ca982] hover:text-white text-[#11280f] rounded-xl flex items-center justify-center transition-all shadow-md text-xl">🏠</a>}
|
|||
|
|
{facility.golfbox_booking_url && <a href={facility.golfbox_booking_url} target="_blank" className="w-12 h-12 bg-white hover:bg-[#7ca982] hover:text-white text-[#11280f] rounded-xl flex items-center justify-center transition-all shadow-md text-xl">🕒</a>}
|
|||
|
|
{facility.golfbox_tournament_url && <a href={facility.golfbox_tournament_url} target="_blank" className="w-12 h-12 bg-white hover:bg-[#7ca982] hover:text-white text-[#11280f] rounded-xl flex items-center justify-center transition-all shadow-md text-xl">🏆</a>}
|
|||
|
|
<a href={googleMapsUrl} target="_blank" className="w-12 h-12 bg-white hover:bg-[#7ca982] hover:text-white text-[#11280f] rounded-xl flex items-center justify-center transition-all shadow-md text-xl">📍</a>
|
|||
|
|
{facility.weather_url && <a href={facility.weather_url} target="_blank" className="w-12 h-12 bg-white hover:bg-[#7ca982] hover:text-white text-[#11280f] rounded-xl flex items-center justify-center transition-all shadow-md text-xl">☁️</a>}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="max-w-[1400px] mx-auto px-6 mt-12 grid grid-cols-12 gap-8 items-start">
|
|||
|
|
|
|||
|
|
{/* SIDEBAR */}
|
|||
|
|
<div className="col-span-12 lg:col-span-3 space-y-6 order-2 lg:order-1">
|
|||
|
|
<Link href="/" className="flex items-center justify-center bg-white p-5 rounded-2xl shadow-sm font-black text-[#7ca982] border border-gray-100 uppercase text-[10px] tracking-widest hover:bg-[#7ca982] hover:text-white transition-all">← Tilbake til kartet</Link>
|
|||
|
|
|
|||
|
|
<div className="bg-white p-8 rounded-[2rem] shadow-sm border border-gray-100 font-bold text-sm text-gray-700 space-y-6">
|
|||
|
|
<h3 className="text-[10px] font-black text-gray-300 uppercase tracking-widest">Kontakt & Adresse</h3>
|
|||
|
|
<a href={facility.website_url} target="_blank" className="block text-[#7ca982] hover:underline">🌐 Besøk nettsiden</a>
|
|||
|
|
<a href={`tel:${formatTel(facility.phone)}`} className="block">📞 {facility.phone}</a>
|
|||
|
|
<a href={`mailto:${facility.email}`} className="block truncate">✉️ {facility.email}</a>
|
|||
|
|
<div className="pt-4 border-t border-gray-50">
|
|||
|
|
<a href={googleMapsUrl} target="_blank" className="block hover:text-[#7ca982]">🏠 {facility.address || facility.city}</a>
|
|||
|
|
<Link href={`/?q=${facility.county}`} className="text-[#7ca982] text-[9px] uppercase font-black hover:underline mt-4 block">Se alle baner i {facility.county} →</Link>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* VÆR-WIDGET */}
|
|||
|
|
{facility.weather_url && (
|
|||
|
|
<div className="bg-white p-4 rounded-[2rem] shadow-sm border border-gray-100 overflow-hidden">
|
|||
|
|
<h3 className="text-[9px] font-black text-gray-300 uppercase tracking-widest mb-4 ml-4">Værvarsel (48t)</h3>
|
|||
|
|
<img src={weatherImg} className="w-full scale-110" alt="Vær" />
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* ANDRE RESSURSER */}
|
|||
|
|
<div className="bg-white p-8 rounded-[2rem] shadow-sm border border-gray-100">
|
|||
|
|
<h3 className="text-[10px] font-black text-gray-300 uppercase tracking-widest mb-6">Andre ressurser</h3>
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
{facility.flyfoto_url && <a href={facility.flyfoto_url} target="_blank" className="flex items-center justify-between p-4 bg-gray-50 rounded-xl text-[10px] font-black uppercase text-gray-500 hover:bg-[#7ca982] hover:text-white transition-all"><span>🚁 Flyfoto</span><span>→</span></a>}
|
|||
|
|
{facility.webcam_url && <a href={facility.webcam_url} target="_blank" className="flex items-center justify-between p-4 bg-gray-50 rounded-xl text-[10px] font-black uppercase text-gray-500 hover:bg-[#7ca982] hover:text-white transition-all"><span>📹 Webkamera</span><span>→</span></a>}
|
|||
|
|
{facility.baneguide_url && <a href={facility.baneguide_url} target="_blank" className="flex items-center justify-between p-4 bg-gray-50 rounded-xl text-[10px] font-black uppercase text-gray-500 hover:bg-[#7ca982] hover:text-white transition-all"><span>📖 Baneguide</span><span>→</span></a>}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* HOVEDINNHOLD */}
|
|||
|
|
<div className="col-span-12 lg:col-span-9 space-y-12 order-1 lg:order-2">
|
|||
|
|
<div className="bg-white p-10 md:p-16 rounded-[3rem] shadow-sm border border-gray-100 leading-relaxed text-xl text-gray-600" dangerouslySetInnerHTML={{ __html: facility.description }} />
|
|||
|
|
|
|||
|
|
{/* BANEDETALJER + ANDRE TILBUD (Nøyaktig som bildet) */}
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 font-bold text-sm text-gray-700">
|
|||
|
|
<div className="bg-white p-10 rounded-[2.5rem] shadow-sm border border-gray-100">
|
|||
|
|
<h3 className="text-2xl font-black mb-8 text-[#11280f] uppercase tracking-tighter">Banen</h3>
|
|||
|
|
<table className="w-full">
|
|||
|
|
<tbody>
|
|||
|
|
<tr className="border-b border-gray-50"><td className="py-4 text-gray-400">Hull:</td><td className="py-4 text-right">{amenities.antall_hull || '--'}</td></tr>
|
|||
|
|
<tr className="border-b border-gray-50"><td className="py-4 text-gray-400">Banetype:</td><td className="py-4 text-right">{facility.banetype || 'Park/Skog'}</td></tr>
|
|||
|
|
<tr className="border-b border-gray-50"><td className="py-4 text-gray-400">Lengde:</td><td className="py-4 text-right">{facility.length || '--'} meter</td></tr>
|
|||
|
|
<tr className="border-b border-gray-50"><td className="py-4 text-gray-400">Sesong:</td><td className="py-4 text-right">{facility.season}</td></tr>
|
|||
|
|
<tr className="border-b border-gray-50"><td className="py-4 text-gray-400">Byggeår:</td><td className="py-4 text-right">{facility.established_year || '--'}</td></tr>
|
|||
|
|
<tr><td className="py-4 text-gray-400">Arkitekt:</td><td className="py-4 text-right">{facility.architect || '--'}</td></tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
<div className="bg-white p-10 rounded-[2.5rem] shadow-sm border border-gray-100">
|
|||
|
|
<h3 className="text-2xl font-black mb-8 text-[#11280f] uppercase tracking-tighter">Andre Tilbud</h3>
|
|||
|
|
<table className="w-full">
|
|||
|
|
<tbody>
|
|||
|
|
<tr className="border-b border-gray-50"><td className="py-4 text-gray-400">Drivingrange:</td><td className="py-4 text-right">{amenities.drivingrange ? "Ja" : "Nei"}</td></tr>
|
|||
|
|
<tr className="border-b border-gray-50"><td className="py-4 text-gray-400">Nærspill:</td><td className="py-4 text-right">Ja ✓</td></tr>
|
|||
|
|
<tr className="border-b border-gray-50"><td className="py-4 text-gray-400">Head Pro:</td><td className="py-4 text-right text-orange-500" dangerouslySetInnerHTML={{ __html: amenities.pro }} /></tr>
|
|||
|
|
<tr className="border-b border-gray-50"><td className="py-4 text-gray-400">Proshop:</td><td className="py-4 text-right">Ja</td></tr>
|
|||
|
|
<tr className="border-b border-gray-50"><td className="py-4 text-gray-400">Kafé:</td><td className="py-4 text-right text-orange-500" dangerouslySetInnerHTML={{ __html: amenities.kafe }} /></tr>
|
|||
|
|
<tr><td className="py-4 text-gray-400">Bilutleie:</td><td className="py-4 text-right">Ja</td></tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* KART OG VIDEO */}
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|||
|
|
<div className="rounded-[3rem] overflow-hidden shadow-2xl h-96 border-8 border-white bg-gray-100">
|
|||
|
|
<iframe width="100%" height="100%" frameBorder="0" src={`https://maps.google.com/maps?q=${facility.lat},${facility.lng}&t=k&z=15&ie=UTF8&iwloc=&output=embed`} />
|
|||
|
|
</div>
|
|||
|
|
{facility.video_url && (
|
|||
|
|
<div className="rounded-[3rem] overflow-hidden shadow-2xl aspect-video bg-black border-8 border-white">
|
|||
|
|
<iframe src={facility.video_url} className="w-full h-full" allowFullScreen></iframe>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* SCOREKORT */}
|
|||
|
|
<div className="space-y-12">
|
|||
|
|
{activeCourses.map((c: any) => <CourseDisplay key={c.id} course={c} />)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* SLOPING TABELLER */}
|
|||
|
|
<div className="bg-white p-8 rounded-[2.5rem] shadow-sm border border-gray-100">
|
|||
|
|
<div className="flex justify-between items-center mb-8">
|
|||
|
|
<h3 className="text-xl font-black uppercase">Slopetabeller</h3>
|
|||
|
|
<span className="text-[9px] font-black text-gray-400 bg-gray-50 px-3 py-1 rounded-full uppercase">Gyldighet: {facility.gyldig_til_og_med || 'Ukjent'}</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
|
|||
|
|
{['herrer', 'damer'].map(gender => (
|
|||
|
|
<div key={gender} className="overflow-x-auto">
|
|||
|
|
<h4 className="text-[10px] font-black text-[#7ca982] uppercase mb-4 tracking-[0.2em]">{gender}</h4>
|
|||
|
|
<table className="w-full text-xs font-bold">
|
|||
|
|
<thead>
|
|||
|
|
<tr className="text-left text-gray-300 uppercase"><th className="pb-4">Utslag</th><th className="pb-4 text-center">CR</th><th className="pb-4 text-right">Slope</th></tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
{(activeCourses[0]?.tee_boxes?.[gender] || []).map((tee: any, i: number) => (
|
|||
|
|
<tr key={i} className="border-t border-gray-50">
|
|||
|
|
<td className="py-4 text-gray-800">{tee.navn_utslag || tee.navn_utslag_damer}</td>
|
|||
|
|
<td className="py-4 text-center text-[#7ca982]">{tee.baneverdi || tee.baneverdi_damer}</td>
|
|||
|
|
<td className="py-4 text-right text-gray-500">{tee.slopeverdi || tee.slopeverdi_damer}</td>
|
|||
|
|
</tr>
|
|||
|
|
))}
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* GJESTESPILL & MEDLEMSKAP */}
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|||
|
|
<div className="bg-white p-10 rounded-[2.5rem] shadow-sm border border-gray-100">
|
|||
|
|
<h3 className="text-xl font-black mb-6 uppercase">⛳ Gjestespill</h3>
|
|||
|
|
<div className="space-y-6">
|
|||
|
|
<div>
|
|||
|
|
<h4 className="text-[9px] font-black text-gray-300 uppercase mb-3 tracking-widest">Priser</h4>
|
|||
|
|
{facility.greenfee?.voksne?.map((g: any, i: number) => (
|
|||
|
|
<div key={i} className="flex justify-between py-3 border-b border-gray-50 font-bold text-sm">
|
|||
|
|
<span className="text-gray-500">{g.priskategori}</span>
|
|||
|
|
<span>kr {g.pris_voksne},-</span>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
{facility.greenfee?.junior?.map((g: any, i: number) => (
|
|||
|
|
<div key={i} className="flex justify-between py-3 border-b border-gray-50 font-bold text-sm">
|
|||
|
|
<span className="text-gray-400">{g.priskategori_junior} (Junior)</span>
|
|||
|
|
<span className="text-gray-400">kr {g.pris_junior},-</span>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<p className="mt-8 text-[10px] text-gray-400 font-black uppercase">Krav: {facility.guest_requirements}</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="bg-white p-10 rounded-[2.5rem] shadow-sm border border-gray-100 flex flex-col">
|
|||
|
|
<h3 className="text-xl font-black mb-6 uppercase">🤝 Medlemskap</h3>
|
|||
|
|
<div className="flex-grow space-y-6">
|
|||
|
|
<div className="p-8 bg-[#f1f7ed] rounded-[2rem]">
|
|||
|
|
<p className="text-[#7ca982] text-[10px] font-black uppercase mb-1">{facility.membership?.standard?.navn || "Standard"}</p>
|
|||
|
|
<p className="text-5xl font-black text-gray-800 tracking-tighter">kr {facility.membership?.standard?.pris || '--'},-</p>
|
|||
|
|
</div>
|
|||
|
|
{facility.membership?.rimeligste?.pris && (
|
|||
|
|
<div className="p-6 bg-gray-50 rounded-2xl border border-gray-100">
|
|||
|
|
<p className="text-gray-400 text-[9px] font-black uppercase">{facility.membership.rimeligste.navn}</p>
|
|||
|
|
<p className="text-2xl font-black text-gray-600">kr {facility.membership.rimeligste.pris},-</p>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<a href={facility.membership?.url} target="_blank" className="mt-8 block text-center bg-gray-900 text-white p-5 rounded-2xl font-black uppercase text-xs hover:bg-black transition">Se alle alternativer</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</main>
|
|||
|
|
);
|
|||
|
|
}
|