FAQ Accordion

import Link from "next/link";

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

const faqs = [
  {
    question: "How long does setup take?",
    answer:
      "Most teams are live in under ten minutes: install the CLI, connect your repo, push. The first deploy configures everything else.",
  },
  {
    question: "Can I bring my own domain?",
    answer:
      "Yes — add it in settings and we handle DNS verification and certificates automatically, including wildcard subdomains.",
  },
  {
    question: "What happens if I exceed my plan?",
    answer:
      "Nothing breaks. We notify you at 80% and 100% of quota, and you choose whether to upgrade or throttle. No surprise invoices.",
  },
  {
    question: "Do you support monorepos?",
    answer:
      "First-class. Point us at the workspace root and each app gets its own pipeline, previews and environment variables.",
  },
];

export default function FaqAccordion() {
  return (
    <section className="bg-background">
      <div className="mx-auto w-full max-w-2xl px-6 py-20 sm:py-24">
        <h2 className="text-center text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
          Questions, answered
        </h2>

        <Accordion className="mt-10">
          {faqs.map((faq) => (
            <AccordionItem key={faq.question} value={faq.question}>
              <AccordionTrigger>{faq.question}</AccordionTrigger>
              <AccordionContent className="text-muted-foreground">
                {faq.answer}
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>

        <p className="mt-8 text-center text-sm text-muted-foreground">
          Still stuck?{" "}
          <Link
            href="#"
            className="font-medium text-foreground underline-offset-4 hover:underline"
          >
            Talk to a human
          </Link>{" "}
          — we answer within a day.
        </p>
      </div>
    </section>
  );
}