import Link from "next/link";
import InfoPageShell from "@/components/InfoPageShell";
import {
  createBreadcrumbJsonLd,
  createCollectionPageJsonLd,
  createPageMetadata,
} from "@/app/seo";

const pageTitle = "FAQ / Om TeeOff";
const pageDescription =
  "Hvorfor TeeOff finnes, hvilken informasjon som samles om norske golfanlegg, og hvordan siden brukes av både golfspillere og klubber.";

const sections = [
  {
    title: "Hvorfor dette nettstedet?",
    body: [
      "TeeOff startet i 2015 fordi det var unødvendig vanskelig å finne ut hvilke golfbaner som ligger hvor, hva de tilbyr, og hvilken bane som faktisk passer til turen du vurderer å ta. Ambisjonen var enkel: samle norske golfanlegg på ett sted og gjøre dem lettere å finne, forstå og sammenligne.",
      "Kjernen er den samme i dag: kjærlighet til golf, lysten til å vise hvor bra det er å spille i Norge, og behovet for en oversikt som faktisk er nyttig for greenfeespillere, klubbfolk og andre som vil oppdage nye baner.",
      "TeeOff er ikke laget for å erstatte klubbenes egne nettsider. Målet er å gjøre klubbene enklere å finne, og å gjøre terskelen lavere for å dra og spille et nytt sted.",
    ],
  },
  {
    title: "Hvilken informasjon finnes om banene?",
    items: [
      "adresse og plassering på kart",
      "bilder og video når det finnes",
      "kontaktinformasjon, hjemmeside og sosiale medier",
      "banestatus, vær, flyfoto og turneringslenker",
      "banebeskrivelse og praktisk info om fasiliteter",
      "head pro, greenfee, medlemskap og Veien til Golf",
      "scorekort, slope og annen nyttig banedata",
      "redaksjonelt innhold som banebesøk og meninger når det finnes",
    ],
  },
  {
    title: "Hvor kommer informasjonen fra?",
    body: [
      "Innholdet hentes fra klubbenes egne nettsider, Golfbox, Shotzoom, sosiale medier, direkte kontakt med klubbene og i noen tilfeller egne besøk og manuell research.",
      "Ambisjonen er at informasjonen skal være korrekt, oppdatert og praktisk anvendelig. Når noe endrer seg, er TeeOff avhengig av gode kilder og raske tilbakemeldinger. Oppdager du feil, er det derfor bare å si fra.",
    ],
  },
  {
    title: "Hvem holder TeeOff oppdatert?",
    body: [
      "TeeOff bygger videre på et mangeårig arbeid med å samle og rydde informasjon om norske golfanlegg. Den nye løsningen er laget for å gjøre det enklere å holde flere typer klubbdata oppdatert enn tidligere.",
      "Har du informasjon som bør endres, bilder som bør brukes, eller tips til innhold, kan du sende det inn via kontaktsiden.",
    ],
  },
  {
    title: "Hvordan bytte toppbildet på en klubbside?",
    body: [
      "Hvis du representerer en klubb og vil bytte hovedbildet som presenterer banen, er det bare å ta kontakt og sende over et godt bilde i bredt format. Fotograf krediteres når informasjonen følger med.",
    ],
  },
  {
    title: "Koster dette noe?",
    body: [
      "TeeOff er gratis å bruke for både golfspillere og klubber. Det ligger mye arbeid bak å samle, rydde og presentere informasjonen, men selve synligheten på TeeOff er ikke låst bak betaling.",
    ],
  },
  {
    title: "Drukner klubbene i spam hvis e-postadressen vises?",
    body: [
      "Nei, det er ikke meningen. Kontaktinformasjon publiseres fordi den skal være nyttig for vanlige mennesker, samtidig som løsningene rundt kontaktsiden og systemet er laget for å redusere automatisert misbruk og spam.",
    ],
  },
  {
    title: "Hva betyr TeeOff for klubbene egentlig?",
    body: [
      "Bruksmønsteret har lenge vært ganske tydelig: mange bruker TeeOff når de faktisk vurderer å dra og spille. De sammenligner anlegg, ser på praktisk informasjon, sjekker kart, turneringer og detaljer før de bestemmer seg.",
      "Det er den viktigste verdien TeeOff kan gi klubbene også i dag: gjøre det lettere for flere å oppdage nye golfanlegg, finne relevant informasjon og komme seg ut på banen.",
    ],
  },
  {
    title: "Sporing og analyse",
    body: [
      "TeeOff bruker analyseverktøy for å forstå hvilke sider som brukes, hvordan besøkende navigerer og hva som bør forbedres. I dag skjer dette med Matomo.",
      "Hvis du vil vite mer om personvern, cookies og analyse, finnes det en egen side for dette.",
    ],
    cta: { href: "/personvern-og-cookies", label: "Les om personvern og cookies" },
  },
  {
    title: "Turneringer, kurs og andre tilbud",
    body: [
      "Klubber har ofte behov for å løfte frem turneringer, VTG-kurs og andre tilbud. TeeOff har derfor egne flater for dette, og slike ting kan også løftes frem sammen med den enkelte klubbprofilen.",
    ],
    links: [
      { href: "/turneringer", label: "Se turneringer" },
      { href: "/vtg", label: "Se Veien til Golf" },
      { href: "/kontakt", label: "Kontakt TeeOff" },
    ],
  },
];

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

export default function AboutPage() {
  const collectionJsonLd = createCollectionPageJsonLd({
    name: pageTitle,
    description: pageDescription,
    path: "/om",
  });
  const breadcrumbJsonLd = createBreadcrumbJsonLd([
    { name: "Hjem", path: "/" },
    { name: "FAQ / Om", path: "/om" },
  ]);

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(collectionJsonLd) }}
      />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbJsonLd) }}
      />
      <InfoPageShell
        eyebrow="FAQ / Om"
        title="Hva TeeOff er, og hvorfor siden finnes"
        intro="Kortversjonen er fortsatt den samme: TeeOff bruker mye tid på å samle, rydde og presentere norske golfanlegg på en ordentlig måte, slik at det blir lettere å finne ut hvor man faktisk har lyst til å spille."
      >
        <div className="grid gap-4">
          {sections.map((section) => (
            <article key={section.title} className="surface-card rounded-[1.75rem] p-6 sm:p-8">
              <p className="text-[11px] font-black uppercase tracking-[0.24em] text-[#8BC34A]">
                FAQ
              </p>
              <h2 className="mt-3 text-2xl font-black text-[#112015]">{section.title}</h2>

              {section.body ? (
                <div className="mt-4 space-y-4 text-sm leading-7 text-[#4F5F50]">
                  {section.body.map((paragraph) => (
                    <p key={paragraph}>{paragraph}</p>
                  ))}
                </div>
              ) : null}

              {section.items ? (
                <ul className="mt-4 list-disc space-y-2 pl-5 text-sm leading-7 text-[#4F5F50]">
                  {section.items.map((item) => (
                    <li key={item}>{item}</li>
                  ))}
                </ul>
              ) : null}

              {section.cta ? (
                <div className="mt-6">
                  <Link href={section.cta.href} className="btn btn-md btn-primary">
                    {section.cta.label}
                  </Link>
                </div>
              ) : null}

              {section.links ? (
                <div className="mt-6 flex flex-wrap gap-3">
                  {section.links.map((link) => (
                    <Link key={link.href} href={link.href} className="btn btn-md btn-secondary">
                      {link.label}
                    </Link>
                  ))}
                </div>
              ) : null}
            </article>
          ))}
        </div>
      </InfoPageShell>
    </>
  );
}
