import { Badge } from "@/registry/ui/badge"

const features = [
  {
    title: "Typed endpoints",
    body: "Every route is generated from the schema, so the types and the database never drift apart.",
  },
  {
    title: "Row-level rules",
    body: "Write the policy once. It runs on every read and every write, including the ones you forgot.",
  },
  {
    title: "Instant rollback",
    body: "Every deploy keeps its predecessor warm. Reverting is one command and takes under a second.",
  },
  {
    title: "Edge cache",
    body: "Reads are served from the nearest region and invalidated by the write that made them stale.",
  },
  {
    title: "Audit log",
    body: "Who changed what, when, and from where — retained for a year and exportable as JSON.",
  },
  {
    title: "No lock-in",
    body: "It's your Postgres. Point the connection string elsewhere and everything keeps working.",
  },
]

export default function FeaturesGrid() {
  return (
    <section className="px-6 py-20">
      <div className="mx-auto max-w-2xl text-center">
        <Badge variant="outline">Platform</Badge>
        <h2 className="mt-5 text-3xl font-semibold tracking-tight">
          Everything the API layer needed anyway
        </h2>
        <p className="mt-4 text-sm leading-relaxed text-muted">
          Six things you would have built yourself in the first month, already
          built and already tested.
        </p>
      </div>

      <div className="mx-auto mt-14 grid max-w-5xl gap-x-10 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">
        {features.map((feature, index) => (
          <div key={feature.title}>
            <span className="font-mono text-xs text-muted">
              {String(index + 1).padStart(2, "0")}
            </span>
            <h3 className="mt-3 text-base font-semibold">{feature.title}</h3>
            <p className="mt-2 text-sm leading-relaxed text-muted">{feature.body}</p>
          </div>
        ))}
      </div>
    </section>
  )
}