import { Accordion } from "@/registry/ui/accordion"
import { Button } from "@/registry/ui/button"

const items = [
  {
    value: "own-data",
    title: "Who owns the database?",
    content:
      "You do. Acme connects to a Postgres instance you control and never copies it. Point the connection string somewhere else and the API follows.",
  },
  {
    value: "migrate",
    title: "What happens to my existing API?",
    content:
      "Nothing, until you turn it off. Most teams run both for a release or two, compare responses, and then delete the old service once the diff is empty.",
  },
  {
    value: "limits",
    title: "Is there a request limit?",
    content:
      "Plans include a monthly allowance and then bill per million. There is no hard cut-off — traffic is never dropped because of billing.",
  },
  {
    value: "regions",
    title: "Where does it run?",
    content:
      "Reads are served from the closest of eighteen regions. Writes go to the primary you chose when you linked the database.",
  },
  {
    value: "leave",
    title: "How do I leave?",
    content:
      "Delete the project. There is nothing to export, because everything of yours was already in your own database.",
  },
]

export default function FaqAccordion() {
  return (
    <section className="mx-auto max-w-3xl px-6 py-20">
      <h2 className="text-3xl font-semibold tracking-tight">
        Questions we get asked first
      </h2>
      <p className="mt-4 text-sm leading-relaxed text-muted">
        If yours isn't here, the answer is usually one email away.
      </p>

      <Accordion className="mt-10" name="faq" items={items} defaultOpen="own-data" />

      <div className="mt-8 flex flex-wrap items-center gap-3">
        <Button variant="outline" size="sm">
          Talk to an engineer
        </Button>
        <span className="text-xs text-muted">Usually answered same day.</span>
      </div>
    </section>
  )
}