import { faqLd } from "@/lib/seo";

const FAQ_ITEMS = [
  {
    question: "Is Markdown Viewer free?",
    answer:
      "Yes. Markdown Viewer is free to use, has no signup, and is open source under the MIT license. There are no ads, trackers, or paywalls.",
  },
  {
    question: "Do you store my Markdown documents?",
    answer:
      "No. Everything runs in your browser. Your drafts are saved to your browser's local storage and never uploaded to our servers.",
  },
  {
    question: "Which Markdown flavor does the editor support?",
    answer:
      "Markdown Viewer supports GitHub Flavored Markdown (GFM) — tables, task lists, strikethrough, autolinks, fenced code blocks with syntax highlighting, and footnotes.",
  },
  {
    question: "Can I export my Markdown to HTML or PDF?",
    answer:
      "Yes. Use the toolbar to download as `.md`, export the rendered preview to a standalone HTML file, or print to PDF using your browser's native dialog.",
  },
  {
    question: "Does it work offline?",
    answer:
      "After your first visit, the app is cacheable. For a guaranteed offline experience, install it as a Progressive Web App from your browser's address bar.",
  },
  {
    question: "Can I share a Markdown preview link?",
    answer:
      "Yes. Click the Share button in the editor toolbar to copy a self-contained URL. Anyone with the link can open the same draft.",
  },
] as const;

export function Faq() {
  return (
    <section className="container py-16 sm:py-20" aria-labelledby="faq-title">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: faqLd([...FAQ_ITEMS]) }}
      />
      <div className="mx-auto max-w-2xl text-center">
        <h2 id="faq-title" className="text-3xl font-semibold tracking-tight sm:text-4xl">
          Frequently asked questions
        </h2>
        <p className="mt-3 text-muted-foreground">
          Quick answers about how the editor works and how your data is handled.
        </p>
      </div>

      <dl className="mx-auto mt-10 max-w-3xl divide-y divide-border rounded-xl border bg-card">
        {FAQ_ITEMS.map((item) => (
          <details
            key={item.question}
            className="group px-6 py-5 [&_summary]:cursor-pointer"
          >
            <summary className="flex items-center justify-between text-base font-medium">
              {item.question}
              <span
                aria-hidden
                className="ml-4 inline-block transition-transform group-open:rotate-45"
              >
                +
              </span>
            </summary>
            <dd className="mt-3 text-sm text-muted-foreground">{item.answer}</dd>
          </details>
        ))}
      </dl>
    </section>
  );
}