import { Avatar } from "@/registry/ui/avatar"
import { Card } from "@/registry/ui/card"

const quotes = [
  {
    body: "We deleted the service that used to sit in front of the database. That was four thousand lines and one on-call rotation.",
    name: "Priya Raman",
    role: "Staff engineer, Northwind",
    initials: "PR",
  },
  {
    body: "The row policies were the thing. Once they were written down in one place, the security review stopped being a two-week event.",
    name: "Tomas Ek",
    role: "CTO, Kestrel",
    initials: "TE",
  },
  {
    body: "I expected to hit the wall in month three. We're eighteen months in and the wall keeps not being there.",
    name: "Dana Whitfield",
    role: "Founder, Fathom",
    initials: "DW",
  },
]

export default function TestimonialsGrid() {
  return (
    <section className="px-6 py-20">
      <div className="mx-auto max-w-2xl text-center">
        <h2 className="text-3xl font-semibold tracking-tight">
          Read it from someone else
        </h2>
        <p className="mt-4 text-sm leading-relaxed text-muted">
          Three teams who moved a production workload over and stayed.
        </p>
      </div>

      <div className="mx-auto mt-12 grid max-w-5xl gap-4 md:grid-cols-3">
        {quotes.map((quote) => (
          <Card key={quote.name} className="flex flex-col p-6">
            <p className="flex-1 text-sm leading-relaxed">“{quote.body}”</p>

            <div className="mt-6 flex items-center gap-3">
              <Avatar size="sm" fallback={quote.initials} />
              <span className="text-xs">
                <span className="block font-medium">{quote.name}</span>
                <span className="text-muted">{quote.role}</span>
              </span>
            </div>
          </Card>
        ))}
      </div>
    </section>
  )
}