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

import FacilitySearch from "@/app/FacilitySearch";
import type { FacilityRecord } from "@/app/facilityData";
import { fetchPublicFacilities } from "@/app/publicFacilities";
import { resolveSitePageSeo } from "@/app/pageSeo";
import {
  createBreadcrumbJsonLd,
  createCollectionPageJsonLd,
  createItemListJsonLd,
  createPageMetadata,
} from "@/app/seo";

export const revalidate = 900;
export const dynamic = "force-dynamic";

const fallbackPageTitle = "Alle norske golfbaner: Finn din neste runde på gress | TeeOff.no";
const fallbackPageDescription =
  "Planlegg din neste golfrunde. Se komplett oversikt over alle norske golfbaner med oppdatert banestatus, greenfee-priser og kart på TeeOff.no.";

export async function generateMetadata() {
  const seo = await resolveSitePageSeo("golfbaner", fallbackPageTitle, fallbackPageDescription);
  const metadata = createPageMetadata({
    title: seo.title,
    description: seo.description,
    path: "/golfbaner",
  });
  return {
    ...metadata,
    alternates: {
      canonical: "/",
    },
  };
}

export default async function GolfCoursesIndexPage() {
  const seo = await resolveSitePageSeo("golfbaner", fallbackPageTitle, fallbackPageDescription);
  const safeData = await fetchPublicFacilities<FacilityRecord>("search", revalidate);
  const collectionJsonLd = createCollectionPageJsonLd({
    name: seo.title,
    description: seo.description,
    path: "/golfbaner",
  });
  const itemListJsonLd = createItemListJsonLd({
    name: seo.title,
    path: "/golfbaner",
    items: safeData
      .filter((facility) => facility?.slug && facility?.name)
      .map((facility) => ({
        name: facility.name,
        path: `/golfbaner/${facility.slug}`,
        description: facility.description,
      })),
  });
  const breadcrumbJsonLd = createBreadcrumbJsonLd([
    { name: "Hjem", path: "/" },
    { name: "Golfbaner", path: "/golfbaner" },
  ]);

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(collectionJsonLd) }}
      />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(itemListJsonLd) }}
      />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbJsonLd) }}
      />
      <main className="site-shell min-h-screen">
        <section className="mx-auto max-w-[1400px] px-4 pt-6 sm:px-6 sm:pt-8 lg:px-8 lg:pt-10">
          <div className="mb-2 max-w-4xl">
            <p className="mb-3 text-[11px] font-extrabold uppercase tracking-[0.3em] text-[#6FA786]">Golfbaner</p>
            <h1 className="section-title text-4xl text-[#112015] sm:text-5xl lg:text-6xl">Golfbaner i Norge</h1>
            <p className="mt-4 max-w-3xl text-base leading-8 text-[#617063]">
              Filtrer norske golfbaner etter område, banestatus, antall hull og fasiliteter, og gå videre til hver baneprofil.
            </p>
          </div>
        </section>
        <FacilitySearch
          initialFacilities={safeData}
          variant="home"
          hideTitleBlock
          filterHeading="Filtrer golfbaner"
        />
      </main>
    </>
  );
}