Testimonials Grid

import { cn } from "@/lib/utils";

export interface TestimonialsGridProps {
  title?: string;
  items?: { quote: string; name: string; studio: string }[];
  className?: string;
}

const DEFAULT_ITEMS = [
  { quote: "Set up in an afternoon. Still impressed a year later.", name: "Kasper Holm", studio: "Kasa" },
  { quote: "Frame respects whitespace the way we do.", name: "Mira Tanaka", studio: "Ortho" },
  { quote: "Clients comment on the site before the work. In a good way.", name: "Lars Werner", studio: "Werk" },
  { quote: "The image pipeline alone is worth the subscription.", name: "Hanne Lund", studio: "Photography" },
  { quote: "Finally, a builder that doesn’t add rounded corners to everything.", name: "Theo Marsh", studio: "Marsh & Co" },
  { quote: "Our juniors publish case studies without asking a developer.", name: "Ines Duarte", studio: "Duarte Studio" },
];

/** Hairline grid of short quotes (gap-px on a border-colored background) — 3 columns desktop, each cell with the quote and mono attribution; no cards, no shadows. */
export function TestimonialsGrid({ title = "In their words", items = DEFAULT_ITEMS, className }: TestimonialsGridProps) {
  return (
    <section aria-labelledby="mc-tg-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <h2 id="mc-tg-title" className="font-da-display text-[clamp(2rem,4vw,3rem)] leading-none font-medium tracking-da-display">
          {title}
        </h2>
        <ul className="mt-12 grid gap-px border border-da-border bg-da-border sm:grid-cols-2 lg:grid-cols-3">
          {items.map((t) => (
            <li key={t.name} className="flex flex-col bg-da-bg p-8">
              <figure className="flex flex-1 flex-col">
                <blockquote className="flex-1 text-xl leading-snug">“{t.quote}”</blockquote>
                <figcaption className="mt-8 font-da-mono text-[11px] tracking-da-label uppercase">
                  {t.name} <span className="text-da-muted-fg">/ {t.studio}</span>
                </figcaption>
              </figure>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default TestimonialsGrid;