Testimonials Grid

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

export interface TestimonialsGridItem {
  quote: string;
  name: string;
  title: string;
  company: string;
}

export interface TestimonialsGridProps {
  eyebrow?: string;
  title?: string;
  featured?: TestimonialsGridItem & { stat: { value: string; label: string } };
  testimonials?: TestimonialsGridItem[];
  className?: string;
}

const DEFAULT_FEATURED: NonNullable<TestimonialsGridProps["featured"]> = {
  quote:
    "We replaced three tools and a very long Notion runbook with Tracewise. Our first SEV1 after the switch was resolved in eleven minutes, and nobody had to ask “who's on call?” in Slack.",
  name: "Elena Marsh",
  title: "VP Engineering",
  company: "Northwind Pay",
  stat: { value: "−71%", label: "time to acknowledge" },
};

const DEFAULT_TESTIMONIALS: TestimonialsGridItem[] = [
  {
    quote: "The AI postmortem draft is scarily good. It pulls the timeline from Slack and Datadog and we just fix the wording.",
    name: "Ravi Menon",
    title: "SRE Lead",
    company: "Loomcast",
  },
  {
    quote: "Our status page finally reflects reality without someone remembering to update it at 3 a.m.",
    name: "Chloé Bernard",
    title: "Head of Support",
    company: "Ledgerly",
  },
  {
    quote: "Fair on-call reports ended the “I'm always paged” debate. The data made the rotation obvious.",
    name: "Marcus Hale",
    title: "Engineering Manager",
    company: "Brightpath",
  },
  {
    quote: "Setup took an afternoon. Terraform provider, PagerDuty import, done.",
    name: "Yuki Sato",
    title: "Platform Engineer",
    company: "Kumo Labs",
  },
];

function Avatar({ name }: { name: string }) {
  const initials = name
    .split(" ")
    .map((p) => p[0])
    .join("")
    .slice(0, 2);
  return (
    <span aria-hidden className="grid size-9 shrink-0 place-items-center rounded-full bg-gradient-to-br from-da-muted to-da-surface-2 text-xs font-medium text-da-muted-fg ring-1 ring-da-border">
      {initials}
    </span>
  );
}

export function TestimonialsGrid({
  eyebrow = "Customers",
  title = "Trusted by the teams who carry the pager",
  featured = DEFAULT_FEATURED,
  testimonials = DEFAULT_TESTIMONIALS,
  className,
}: TestimonialsGridProps) {
  return (
    <section className={cn("da-section bg-da-bg text-da-fg", className)} aria-labelledby="testimonials-grid-title">
      <div className="da-container">
        <p className="font-da-mono text-xs text-da-accent-fg">{eyebrow}</p>
        <h2 id="testimonials-grid-title" className="mt-3 max-w-xl text-[clamp(1.875rem,4vw,2.75rem)] leading-[1.1] font-semibold tracking-da-display text-balance">
          {title}
        </h2>

        <div className="mt-14 grid gap-4 lg:grid-cols-5">
          <figure className="da-stroke flex flex-col justify-between rounded-da-lg bg-da-surface p-8 text-da-surface-fg shadow-da-md lg:col-span-3">
            <blockquote className="text-xl leading-relaxed font-medium tracking-tight text-pretty sm:text-2xl">“{featured.quote}”</blockquote>
            <div className="mt-10 flex flex-wrap items-end justify-between gap-6">
              <figcaption className="flex items-center gap-3">
                <Avatar name={featured.name} />
                <span className="text-sm">
                  <span className="block font-medium">{featured.name}</span>
                  <span className="text-da-muted-fg">
                    {featured.title}, {featured.company}
                  </span>
                </span>
              </figcaption>
              <p className="text-right">
                <span className="block text-3xl font-semibold tracking-da-display">{featured.stat.value}</span>
                <span className="text-xs text-da-muted-fg">{featured.stat.label}</span>
              </p>
            </div>
          </figure>

          <ul className="grid gap-4 sm:grid-cols-2 lg:col-span-2 lg:grid-cols-1">
            {testimonials.slice(0, 2).map((t) => (
              <li key={t.name}>
                <Quote t={t} />
              </li>
            ))}
          </ul>
          <ul className="grid gap-4 sm:grid-cols-2 lg:col-span-5">
            {testimonials.slice(2).map((t) => (
              <li key={t.name}>
                <Quote t={t} />
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

function Quote({ t }: { t: TestimonialsGridItem }) {
  return (
    <figure className="da-stroke flex h-full flex-col justify-between gap-6 rounded-da-lg bg-da-surface/60 p-6 text-da-surface-fg">
      <blockquote className="text-[15px] leading-relaxed text-da-fg/90">“{t.quote}”</blockquote>
      <figcaption className="flex items-center gap-3 text-sm">
        <Avatar name={t.name} />
        <span>
          <span className="block font-medium">{t.name}</span>
          <span className="text-da-muted-fg">
            {t.title}, {t.company}
          </span>
        </span>
      </figcaption>
    </figure>
  );
}

export default TestimonialsGrid;