Testimonials Classic Dark

// Dark testimonial grid: heading with a star rating, then six quote cards
// with coloured initial avatars. Pure Tailwind, no dependencies. Works with Tailwind v3 and v4.

type Testimonial = { quote: string; name: string; role: string; color: string };

type Props = {
  eyebrow?: string;
  heading?: [string, string];
  rating?: string;
  testimonials?: Testimonial[];
};

const DEFAULT_TESTIMONIALS: Testimonial[] = [
  { quote: "Saved us weeks of work. The code is clean, the docs are clear and everything just fits together.", name: "Marcus Webb", role: "Founder, Austin TX", color: "bg-lime-400/20 text-lime-400" },
  { quote: "The first product I've used that felt like it was built by someone who understands how people search.", name: "Priya Nair", role: "Marketing lead, Chicago", color: "bg-blue-400/20 text-blue-400" },
  { quote: "Enquiries doubled in the first month after launch. The contact flow alone was worth it.", name: "Jake Sorensen", role: "Contractor, Denver", color: "bg-violet-400/20 text-violet-400" },
  { quote: "Honestly one of the best purchases I've made for my business. Setup took under an hour.", name: "Tara Collins", role: "Business owner, Nashville", color: "bg-orange-400/20 text-orange-400" },
  { quote: "Top-tier documentation. Every question I had was answered before I thought to ask it.", name: "Ben Hartley", role: "Freelance developer", color: "bg-pink-400/20 text-pink-400" },
  { quote: "We launched three client sites with it. The clients are thrilled, and so are we.", name: "Sofia Morales", role: "Agency owner, Miami", color: "bg-teal-400/20 text-teal-400" },
];

const initials = (name: string) =>
  name
    .split(" ")
    .map((n) => n[0])
    .join("")
    .slice(0, 2);

export default function TestimonialsClassicDark({
  eyebrow = "What clients say",
  heading = ["Trusted by builders", "all over the world."],
  rating = "4.9 / 5.0",
  testimonials = DEFAULT_TESTIMONIALS,
}: Props) {
  return (
    <section className="bg-zinc-950 px-6 py-24 font-sans antialiased md:px-12">
      <div className="mx-auto max-w-7xl">
        <div className="mb-16 flex flex-col justify-between gap-6 md:flex-row md:items-end">
          <div>
            <div className="mb-4 flex items-center gap-2 font-mono text-xs uppercase tracking-[0.18em] text-lime-400">
              <span className="h-px w-5 bg-lime-400" />
              {eyebrow}
            </div>
            <h2 className="max-w-xl text-[clamp(36px,5vw,60px)] font-bold leading-[1.05] tracking-[-0.02em] text-white">
              {heading[0]} <span className="text-zinc-500">{heading[1]}</span>
            </h2>
          </div>
          <div className="flex items-center gap-1" aria-label={`Rated ${rating}`}>
            {Array.from({ length: 5 }).map((_, i) => (
              <span key={i} aria-hidden className="text-xl text-lime-400">
                ★
              </span>
            ))}
            <span className="ml-3 font-mono text-sm text-zinc-400">{rating}</span>
          </div>
        </div>

        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
          {testimonials.map((t) => (
            <figure key={t.name} className="flex flex-col justify-between rounded-2xl border border-transparent bg-zinc-900 p-6 transition-colors duration-200 hover:border-zinc-700">
              <blockquote className="mb-6 text-[15px] leading-[1.75] text-zinc-300">&ldquo;{t.quote}&rdquo;</blockquote>
              <figcaption className="flex items-center gap-3">
                <div className={`flex h-9 w-9 items-center justify-center rounded-full text-xs font-bold ${t.color}`}>{initials(t.name)}</div>
                <div>
                  <div className="text-sm font-medium text-white">{t.name}</div>
                  <div className="text-xs text-zinc-500">{t.role}</div>
                </div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}