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

const pageTitle = "FAQ / Om TeeOff";
const pageDescription =
  "Hva TeeOff er, hva slags golfinformasjon siden samler, og hvorfor produktet er bygget som en praktisk arbeidsflate for norske golfspillere.";

const faqItems = [
  {
    question: "Hva er TeeOff?",
    answer:
      "TeeOff er en norsk oversiktstjeneste for golfbaner, medlemskap, banestatus, Veien til Golf og annen praktisk klubbinfo.",
  },
  {
    question: "Hva skiller TeeOff fra klubb- og Golfbox-sider?",
    answer:
      "TeeOff samler informasjon på tvers av klubbene, slik at du kan sammenligne og orientere deg raskere før du klikker deg videre.",
  },
  {
    question: "Skal TeeOff også ha redaksjonelt innhold?",
    answer:
      "Ja. Banebesøk og utvalgte ressursflater skal gi siden mer personlighet og mer verdi enn en ren katalog.",
  },
];

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="TeeOff skal være nyttig før det skal være pyntet"
        intro="Kjernen i TeeOff er å gjøre golfinformasjon enklere å finne, sammenligne og bruke. Derfor er de viktigste flatene bygd som arbeidsverktøy først, og markedsføring etterpå."
      >
        <div className="grid gap-4">
          {faqItems.map((item) => (
            <article key={item.question} 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]">{item.question}</h2>
              <p className="mt-4 max-w-4xl text-sm leading-7 text-[#4F5F50]">{item.answer}</p>
            </article>
          ))}
        </div>
      </InfoPageShell>
    </>
  );
}