Testimonial Cards

import { Star } from "lucide-react";

const testimonials = [
  { quote: "Shipped a client site in a day — the blocks themed straight to our tokens.", name: "Alex Rivera", role: "Founder, Studio North" },
  { quote: "The closest thing to a senior designer on tap. Genuinely production-ready.", name: "Priya Shah", role: "Design Lead, Loop" },
  { quote: "We stopped rebuilding the same sections and just compose them now.", name: "Marcus Lee", role: "Engineer, Fold" },
];

export function TestimonialCards() {
  return (
    <section className="mx-auto max-w-6xl px-6 py-16 md:py-24">
      <div className="mx-auto mb-14 max-w-lg text-center">
        <h2 className="text-4xl font-bold tracking-tight">What builders say</h2>
      </div>
      <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
        {testimonials.map((t) => (
          <div key={t.name} className="rounded-2xl border border-border bg-card p-6">
            <div className="mb-5 flex gap-1">
              {Array.from({ length: 5 }).map((_, i) => (
                <Star key={i} className="size-5 fill-foreground text-foreground" />
              ))}
            </div>
            <p className="text-lg">"{t.quote}"</p>
            <div className="mt-6 flex items-center gap-3">
              <div className="size-10 rounded-full bg-muted" />
              <div>
                <p className="font-semibold">{t.name}</p>
                <p className="text-sm text-muted-foreground">{t.role}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}