import { Avatar } from "@/registry/ui/avatar"
import { Separator } from "@/registry/ui/separator"

export default function TestimonialsQuote() {
  return (
    <section className="border-y border-border px-6 py-24">
      <figure className="mx-auto max-w-3xl text-center">
        <blockquote className="text-2xl leading-snug font-medium tracking-tight text-balance sm:text-3xl">
          “We moved forty million rows and the read path over a weekend. The
          part I keep telling people about is that nothing interesting happened
          — no incident, no migration window, no war room. It just started
          serving.”
        </blockquote>

        {/* The width goes on a wrapper: Separator sets w-full itself, and
            overriding it from className would be a stylesheet-order coin
            toss rather than a decision. */}
        <div className="mx-auto my-10 w-16">
          <Separator />
        </div>

        <figcaption className="flex items-center justify-center gap-3">
          <Avatar size="lg" fallback="MA" />
          <span className="text-left text-sm">
            <span className="block font-medium">Mara Aldrich</span>
            <span className="text-muted">VP Engineering, Monolith</span>
          </span>
        </figcaption>
      </figure>
    </section>
  )
}