Testimonials Wall

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

export interface TestimonialsWallItem {
  quote: string;
  name: string;
  role: string;
  company: string;
  /** Optional metric shown as a sticker, e.g. "−6h / week". */
  metric?: string;
}

export interface TestimonialsWallProps {
  kicker?: string;
  title?: string;
  testimonials?: TestimonialsWallItem[];
  className?: string;
}

const DEFAULT_TESTIMONIALS: TestimonialsWallItem[] = [
  {
    quote: "We used to spend Friday afternoons writing release notes nobody read. Now they write themselves from our PR labels and our churn survey stopped mentioning “missing features” that already existed.",
    name: "Maya Okafor",
    role: "Head of Product",
    company: "Ledgerline",
    metric: "−6h / week",
  },
  {
    quote: "The in-app widget doubled the adoption of our new reporting module in two weeks. Same feature, people just finally knew it was there.",
    name: "Tomás Varga",
    role: "Growth PM",
    company: "Parcelo",
    metric: "2× adoption",
  },
  {
    quote: "Our changelog is now the third most visited page on the marketing site. Sales sends it to prospects instead of a deck.",
    name: "Priya Raman",
    role: "VP Marketing",
    company: "Kitewire",
  },
  {
    quote: "Setup took eleven minutes, including the custom domain. The Slack digest alone was worth the switch.",
    name: "Jonas Lindqvist",
    role: "Staff Engineer",
    company: "Northdesk",
  },
  {
    quote: "Localized release notes in German and Japanese without a translation agency. Our support tickets after launches dropped by a third.",
    name: "Aiko Tanaka",
    role: "Customer Success Lead",
    company: "Formbase",
    metric: "−33% tickets",
  },
  {
    quote: "Finally a tool engineers don't hate. It's just labels on PRs — no new workflow to learn.",
    name: "Sam Whitfield",
    role: "CTO",
    company: "Queuebird",
  },
];

const CARD_TONES = [
  "bg-da-surface text-da-surface-fg",
  "bg-da-primary text-da-primary-fg",
  "bg-da-surface text-da-surface-fg",
  "bg-da-accent text-da-accent-fg",
  "bg-da-secondary text-da-secondary-fg",
  "bg-da-surface text-da-surface-fg",
];

function initials(name: string): string {
  return name
    .split(" ")
    .map((p) => p[0])
    .join("")
    .slice(0, 2)
    .toUpperCase();
}

export function TestimonialsWall({
  kicker = "[ 05 ] Receipts",
  title = "Teams that stopped writing release notes by hand.",
  testimonials = DEFAULT_TESTIMONIALS,
  className,
}: TestimonialsWallProps) {
  return (
    <section className={cn("da-section da-stroke-b bg-da-bg text-da-fg", className)} aria-labelledby="testimonials-wall-title">
      <div className="da-container">
        <p className="font-da-mono text-xs font-bold tracking-da-label text-da-muted-fg uppercase">{kicker}</p>
        <h2
          id="testimonials-wall-title"
          className="mt-3 max-w-3xl font-da-display text-[clamp(2rem,5vw,3.5rem)] leading-[0.95] tracking-da-display uppercase"
        >
          {title}
        </h2>

        <ul className="mt-12 grid items-start gap-6 sm:grid-cols-2 lg:grid-cols-3">
          {testimonials.map((t, i) => (
            <li key={t.name}>
              <figure className={cn("da-stroke relative p-6 shadow-da-md", CARD_TONES[i % CARD_TONES.length])}>
                {t.metric && (
                  <p className="da-stroke absolute -top-3 right-4 rotate-3 bg-da-fg px-2 py-0.5 font-da-mono text-[11px] font-bold tracking-da-label text-da-bg uppercase">
                    {t.metric}
                  </p>
                )}
                <span aria-hidden className="block font-da-display text-5xl leading-none">
                  “
                </span>
                <blockquote className="mt-1 text-base leading-relaxed font-medium">{t.quote}</blockquote>
                <figcaption className="mt-6 flex items-center gap-3 border-t-[length:var(--da-border-width)] border-current pt-4">
                  <span aria-hidden className="da-stroke grid size-10 shrink-0 place-items-center bg-da-bg font-da-mono text-xs font-bold text-da-fg">
                    {initials(t.name)}
                  </span>
                  <span className="text-sm">
                    <span className="block font-bold">{t.name}</span>
                    <span className="block opacity-80">
                      {t.role}, {t.company}
                    </span>
                  </span>
                </figcaption>
              </figure>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default TestimonialsWall;