Testimonials List

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

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

const DEFAULT_ITEMS = [
  { quote: "Our portfolio finally loads faster than our clients can scroll.", name: "Kasper Holm", studio: "Kasa", city: "Copenhagen" },
  { quote: "The typography controls are better than in most design tools.", name: "Mira Tanaka", studio: "Ortho", city: "Tokyo" },
  { quote: "We moved from a custom build and cut maintenance to zero.", name: "Lars Werner", studio: "Werk", city: "Berlin" },
  { quote: "Password pages for pitches changed how we present work.", name: "Hanne Lund", studio: "Hanne Lund Photo", city: "Aarhus" },
];

/** Testimonials as an editorial ruled list: each row pairs a mono index + name/studio/city on the left with the quote on the right in a larger size; rows separated by hairlines. */
export function TestimonialsList({ title = "What studios say", items = DEFAULT_ITEMS, className }: TestimonialsListProps) {
  return (
    <section aria-labelledby="mc-tl-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <h2 id="mc-tl-title" className="font-da-display text-[clamp(2rem,4vw,3rem)] leading-none font-medium tracking-da-display">
          {title}
        </h2>
        <ul className="mt-12 border-t border-da-border-strong">
          {items.map((t, i) => (
            <li key={t.name} className="border-b border-da-border py-8">
              <figure className="grid gap-4 md:grid-cols-12">
                <figcaption className="font-da-mono text-xs tracking-da-label uppercase md:col-span-4">
                  <span className="text-da-muted-fg">{String(i + 1).padStart(2, "0")} — </span>
                  {t.name}
                  <span className="block text-da-muted-fg">
                    {t.studio}, {t.city}
                  </span>
                </figcaption>
                <blockquote className="font-da-display text-2xl leading-snug tracking-[-0.02em] md:col-span-8">“{t.quote}”</blockquote>
              </figure>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default TestimonialsList;