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

const rows = [
  {
    eyebrow: "Schema",
    title: "It reads the database you already have",
    body: "Point Acme at a connection string and it walks the schema — tables, columns, foreign keys, constraints — and serves the API that describes it. There is no separate model to keep in sync, because there is no separate model.",
    action: "How introspection works",
    art: `acme link postgres://…

  ✓ 14 tables
  ✓ 38 endpoints
  ✓ 6 relations inferred`,
  },
  {
    eyebrow: "Policies",
    title: "Access rules live next to the data",
    body: "A policy is a single expression evaluated per row. It applies the same way to a REST call, a GraphQL query and a direct SQL session, so there is no path around it and nothing to remember to apply twice.",
    action: "Read the policy reference",
    art: `policy "own rows" on orders
  for select
  using (customer_id = auth.uid())`,
  },
]

export default function FeaturesAlternating() {
  return (
    <section className="mx-auto max-w-5xl space-y-20 px-6 py-20">
      {rows.map((row, index) => (
        <div key={row.title} className="grid items-center gap-10 md:grid-cols-2">
          <div className={index % 2 === 1 ? "md:order-2" : undefined}>
            <Badge variant="outline">{row.eyebrow}</Badge>
            <h3 className="mt-5 text-2xl font-semibold tracking-tight">
              {row.title}
            </h3>
            <p className="mt-4 text-sm leading-relaxed text-muted">{row.body}</p>
            <Button variant="ghost" size="sm" className="mt-5 -ml-3">
              {row.action} →
            </Button>
          </div>

          <div className="overflow-hidden rounded-xl border border-border bg-border/20">
            <pre className="overflow-x-auto p-5 font-mono text-xs leading-relaxed text-muted">
              {row.art}
            </pre>
          </div>
        </div>
      ))}
    </section>
  )
}