const faqs = [
  {
    question: "Do I need to change my schema?",
    answer:
      "No. Acme reads what is already there, including the constraints and the foreign keys it uses to infer relations.",
  },
  {
    question: "Does it support GraphQL?",
    answer:
      "Yes, over the same policies as REST. Both are generated from one schema, so neither can drift from the other.",
  },
  {
    question: "How are secrets handled?",
    answer:
      "Connection strings are encrypted at rest with a per-project key and are never written to logs or build output.",
  },
  {
    question: "Can I self-host?",
    answer:
      "The runtime ships as a single container on the Enterprise plan. The control plane stays with us.",
  },
  {
    question: "What about migrations?",
    answer:
      "Run them however you run them today. The API picks the new shape up on the next introspection, within a second.",
  },
  {
    question: "Is there a free tier?",
    answer:
      "One project, ten thousand requests a month, no card. It's the same runtime, just smaller.",
  },
]

export default function FaqColumns() {
  return (
    <section className="mx-auto max-w-5xl px-6 py-20">
      <div className="grid gap-12 md:grid-cols-[1fr_1.6fr]">
        <div>
          <h2 className="text-3xl font-semibold tracking-tight">
            Frequently asked
          </h2>
          <p className="mt-4 text-sm leading-relaxed text-muted">
            Everything open, because the list is short enough to read.
          </p>
        </div>

        <dl className="grid gap-x-10 gap-y-8 sm:grid-cols-2">
          {faqs.map((faq) => (
            <div key={faq.question}>
              <dt className="text-sm font-semibold">{faq.question}</dt>
              <dd className="mt-2 text-sm leading-relaxed text-muted">
                {faq.answer}
              </dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  )
}