---
import BaseLayout from "../layouts/BaseLayout.astro";
import Breadcrumbs from "../components/Breadcrumbs.astro";
import { SITE } from "../lib/blog-data.js";

// Plain-text answers so the visible content exactly matches the FAQPage schema.
// Replace these placeholders with your own questions in app/src/pages/faq.astro.
const faqs = [
  {
    q: "What is this site about?",
    a: "Replace this with a short description of what your site covers and who it is for.",
  },
  {
    q: "How often is it updated?",
    a: "Tell visitors how frequently you publish and what they can expect from new content.",
  },
  {
    q: "How can I get in touch?",
    a: "Point people to your contact page or email, and update this answer to match how you prefer to be reached.",
  },
];

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "@id": `${SITE.url}/faq#faq`,
  mainEntity: faqs.map((f) => ({
    "@type": "Question",
    name: f.q,
    acceptedAnswer: { "@type": "Answer", text: f.a },
  })),
};
---

<BaseLayout
  title={`FAQ - ${SITE.name}`}
  description={`Frequently asked questions about ${SITE.name}.`}
  canonical="/faq"
  jsonLd={jsonLd}
>
  <div class="mx-auto max-w-3xl px-5 py-12">
    <Breadcrumbs items={[{ label: "Home", to: "/" }, { label: "FAQ" }]} />

    <header class="mt-6">
      <div class="text-xs font-medium uppercase tracking-[0.2em] text-primary">FAQ</div>
      <h1 class="mt-2 font-serif text-4xl font-semibold tracking-tight sm:text-5xl">
        Frequently asked questions
      </h1>
      <p class="mt-4 max-w-xl text-muted-foreground">
        Quick answers to common questions. Edit these in <code>app/src/pages/faq.astro</code>.
      </p>
    </header>

    <div class="mt-10 divide-y divide-border">
      {
        faqs.map((f) => (
          <details class="group py-5">
            <summary class="flex cursor-pointer items-center justify-between gap-4 font-serif text-lg font-semibold tracking-tight marker:content-['']">
              {f.q}
              <span class="text-muted-foreground transition-transform group-open:rotate-45">+</span>
            </summary>
            <p class="mt-3 leading-relaxed text-muted-foreground">{f.a}</p>
          </details>
        ))
      }
    </div>
  </div>
</BaseLayout>