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

import Link from "next/link";
import { API_URL } from "@/config/constants";
import type { FacilityRecord } from "@/app/facilityData";
import InfoPageShell from "@/components/InfoPageShell";
import {
  createBreadcrumbJsonLd,
  createCollectionPageJsonLd,
  createPageMetadata,
} from "@/app/seo";

export const dynamic = "force-dynamic";

const pageTitle = "Turneringer";
const pageDescription =
  "Oversikt over norske golfklubber som har publisert turneringslenker via Golfbox, samlet på TeeOff.";

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

export default async function TournamentsPage() {
  let facilities: FacilityRecord[] = [];

  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 turneringsdata:", error);
    facilities = [];
  }

  const listings = facilities
    .filter(
      (facility): facility is FacilityRecord & { golfbox_tournament_url: string } =>
        Boolean(facility.slug && facility.golfbox_tournament_url),
    )
    .sort((a, b) => a.name.localeCompare(b.name, "nb-NO"));

  const collectionJsonLd = createCollectionPageJsonLd({
    name: pageTitle,
    description: pageDescription,
    path: "/turneringer",
  });
  const breadcrumbJsonLd = createBreadcrumbJsonLd([
    { name: "Hjem", path: "/" },
    { name: "Turneringer", path: "/turneringer" },
  ]);

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(collectionJsonLd) }}
      />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbJsonLd) }}
      />
      <InfoPageShell
        eyebrow="Turneringer"
        title="Turneringslenker fra norske klubber"
        intro="Denne siden samler klubber som allerede har en turneringslenke registrert i TeeOff. Det gjør siden nyttig fra første versjon, samtidig som den kan utvides senere med større kalendere og kuraterte turneringsguider."
      >
        <div className="grid gap-6 xl:grid-cols-[0.85fr,1.15fr]">
          <article className="surface-card rounded-[2rem] p-6 sm:p-8">
            <p className="text-[11px] font-black uppercase tracking-[0.24em] text-[#8BC34A]">
              Klubber med lenke
            </p>
            <p className="mt-4 text-5xl font-black text-[#112015]">{listings.length}</p>
            <p className="mt-4 text-sm leading-6 text-[#4F5F50]">
              Hver oppføring peker direkte til klubbens turneringsside i Golfbox og videre til
              TeeOffs egen baneside.
            </p>
          </article>

          <article className="surface-card rounded-[2rem] p-6 sm:p-8">
            <p className="text-[11px] font-black uppercase tracking-[0.24em] text-[#FF5722]">
              Veien videre
            </p>
            <h2 className="mt-4 text-2xl font-black text-[#112015]">
              God nok nytteverdi nå, enkel å bygge videre på senere
            </h2>
            <p className="mt-4 text-sm leading-6 text-[#4F5F50]">
              Neste naturlige steg er filtrering på område, åpne eller kommende turneringer og
              egne redaksjonelle anbefalinger for turneringer det faktisk er verdt å følge med på.
            </p>
          </article>
        </div>

        {listings.length > 0 ? (
          <div className="mt-8 grid gap-4 md:grid-cols-2 2xl:grid-cols-3">
            {listings.map((facility) => (
              <article key={facility.slug} className="surface-card rounded-[1.75rem] p-5">
                <p className="text-[11px] font-black uppercase tracking-[0.22em] text-[#8BC34A]">
                  {[facility.county, facility.city].filter(Boolean).join(" • ") || "Norge"}
                </p>
                <h2 className="mt-3 text-2xl font-black text-[#112015]">{facility.name}</h2>
                <p className="mt-3 text-sm leading-6 text-[#5B675C]">
                  Gå rett til klubbens turneringer i Golfbox, eller åpne TeeOff-siden for resten av
                  klubbinfoen.
                </p>
                <div className="mt-5 flex flex-wrap gap-3">
                  <a
                    href={facility.golfbox_tournament_url}
                    target="_blank"
                    rel="noreferrer"
                    className="btn btn-sm btn-primary"
                  >
                    Turneringer i Golfbox
                  </a>
                  <Link
                    href={`/golfbaner/${facility.slug}`}
                    className="btn btn-sm btn-secondary"
                  >
                    Baneprofil
                  </Link>
                </div>
              </article>
            ))}
          </div>
        ) : (
          <article className="surface-card mt-8 rounded-[2rem] p-6 sm:p-8">
            <h2 className="text-2xl font-black text-[#112015]">Ingen turneringslenker registrert ennå</h2>
            <p className="mt-4 max-w-3xl text-sm leading-6 text-[#4F5F50]">
              Når klubbene får lagt inn turneringslenker i TeeOff-datagrunnlaget, dukker de opp
              her automatisk.
            </p>
          </article>
        )}
      </InfoPageShell>
    </>
  );
}