import { Star } from "lucide-react";
import { TESTIMONIALS } from "@/lib/site";

export function Testimonials() {
  return (
    <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      {TESTIMONIALS.map((t) => (
        <figure
          key={t.name}
          className="rounded-2xl border border-border bg-card p-6 shadow-soft hover:shadow-elegant transition-shadow"
        >
          <div className="flex gap-0.5 text-emerald">
            {Array.from({ length: t.rating }).map((_, i) => (
              <Star key={i} className="h-4 w-4 fill-current" />
            ))}
          </div>
          <blockquote className="mt-4 text-foreground/90 leading-relaxed">"{t.text}"</blockquote>
          <figcaption className="mt-5 pt-5 border-t border-border">
            <div className="font-semibold text-foreground">{t.name}</div>
            <div className="text-sm text-muted-foreground">{t.role}</div>
          </figcaption>
        </figure>
      ))}
    </div>
  );
}