FAQ Cards

const faqs = [
  {
    tag: "billing",
    question: "What happens when my trial ends?",
    answer:
      "Your projects keep running read-only for 30 days. Nothing is deleted until you say so.",
  },
  {
    tag: "security",
    question: "Where does my data live?",
    answer:
      "EU or US region of your choice, encrypted at rest and in transit. We publish our subprocessor list.",
  },
  {
    tag: "product",
    question: "Can I self-host?",
    answer:
      "The runner can live in your VPC on any plan; the full control plane self-hosts on Enterprise.",
  },
  {
    tag: "billing",
    question: "Do you charge per seat?",
    answer:
      "No. Seats are free on every plan — you pay for usage, not for inviting your team.",
  },
  {
    tag: "product",
    question: "What's the migration path in?",
    answer:
      "A CLI that imports from the big three platforms, and an engineer on the call if you're 50+ services.",
  },
  {
    tag: "support",
    question: "What does support actually mean?",
    answer:
      "Engineers answer tickets — median first response 3 hours, and it's a human every time.",
  },
];

export default function FaqCards() {
  return (
    <section className="border-y border-border/60 bg-muted/30">
      <div className="mx-auto w-full max-w-5xl px-6 py-20 sm:py-24">
        <div className="mb-12 text-center">
          <h2 className="text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
            Asked constantly, answered honestly
          </h2>
        </div>

        <dl className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {faqs.map((faq) => (
            <div
              key={faq.question}
              className="rounded-xl border border-border/60 bg-background p-5"
            >
              <p className="font-mono text-[11px] tracking-wide text-muted-foreground uppercase">
                {faq.tag}
              </p>
              <dt className="mt-2.5 text-sm font-medium">{faq.question}</dt>
              <dd className="mt-1.5 text-sm text-muted-foreground">
                {faq.answer}
              </dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}