Nye-TeeOff/frontend/src/app/medlemskap/page.tsx

import { API_URL } from "@/config/constants";
import MembershipExplorer, { type MembershipFacility } from "./MembershipExplorer";
import {
  createBreadcrumbJsonLd,
  createCollectionPageJsonLd,
  createPageMetadata,
} from "@/app/seo";

export const dynamic = "force-dynamic";

const pageTitle = "Medlemskap i norske golfklubber";
const pageDescription =
  "Sammenlign priser på medlemskap i norske golfklubber, både full spillerett og rimeligste nasjonale alternativ.";

export const metadata = createPageMetadata({
  title: pageTitle,
  description: pageDescription,
  path: "/medlemskap",
});

export default async function MembershipPage() {
  let facilities: MembershipFacility[] = [];

  try {
    const res = await fetch(`${API_URL}/facilities`, {
      next: { revalidate: 0 },
      cache: "no-store",
    });

    if (!res.ok) {
      throw new Error(`API returnerte status ${res.status}`);
    }

    const data = await res.json();
    facilities = Array.isArray(data) ? data : [];
  } catch (error) {
    console.error("Kunne ikke hente medlemsdata:", error);
    facilities = [];
  }

  const visibleFacilities = facilities.filter(
    (facility) =>
      typeof facility.standard_medlemskap === "number" ||
      typeof facility.rimeligste_alternativ === "number",
  );
  const collectionJsonLd = createCollectionPageJsonLd({
    name: pageTitle,
    description: pageDescription,
    path: "/medlemskap",
  });
  const breadcrumbJsonLd = createBreadcrumbJsonLd([
    { name: "Hjem", path: "/" },
    { name: "Medlemskap", path: "/medlemskap" },
  ]);

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(collectionJsonLd) }}
      />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbJsonLd) }}
      />
      <main className="site-shell min-h-screen">
        <section className="border-b border-[#112015]/8 bg-[linear-gradient(135deg,rgba(139,195,74,0.16),rgba(255,255,255,0.92))]">
          <div className="mx-auto max-w-[1400px] px-4 py-14 sm:px-6 lg:px-8 lg:py-20">
            <p className="mb-4 text-[11px] font-black uppercase tracking-[0.28em] text-[#8BC34A]">
              Medlemskap
            </p>
            <h1 className="text-5xl font-black text-[#112015] sm:text-6xl">
              Dette koster medlemskap i norske golfklubber
            </h1>
            <p className="mt-6 text-base leading-7 text-[#4F5F50] sm:text-lg">
              Velg hvilken type medlemskap du vil sammenligne under. Hver rad kan åpnes for flere
              detaljer, sist oppdatert-dato og lenke til klubbens egen innmelding.
            </p>
          </div>
        </section>

        <section className="mx-auto max-w-[1400px] px-4 py-8 sm:px-6 lg:px-8 lg:py-10">
          <MembershipExplorer facilities={visibleFacilities} />
        </section>
      </main>
    </>
  );
}