Testimonials Case Studies

import { ArrowUpRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface TestimonialsCaseStudy {
  company: string;
  industry: string;
  metric: string;
  metricLabel: string;
  quote: string;
  author: string;
  role: string;
  href: string;
}

export interface TestimonialsCaseStudiesProps {
  eyebrow?: string;
  title?: string;
  cta?: { label: string; href: string };
  studies?: TestimonialsCaseStudy[];
  className?: string;
}

const DEFAULT_STUDIES: TestimonialsCaseStudy[] = [
  {
    company: "Northwind",
    industry: "Fintech · 900 engineers",
    metric: "−71%",
    metricLabel: "pages per engineer",
    quote: "Alert grouping alone paid for Tracewise in the first month.",
    author: "Priya Raman",
    role: "VP Engineering",
    href: "#northwind",
  },
  {
    company: "Parcel",
    industry: "Logistics · 240 engineers",
    metric: "6 min",
    metricLabel: "median time to resolve SEV2",
    quote: "War rooms spin up before anyone has asked who’s leading.",
    author: "Hannah Weiss",
    role: "Head of Support",
    href: "#parcel",
  },
  {
    company: "Heliograph",
    industry: "Developer tools · 120 engineers",
    metric: "1 PR",
    metricLabel: "to migrate 40 rotations",
    quote: "Config as code means our on-call is reviewed like the rest of our infra.",
    author: "Tomás Herrera",
    role: "Platform Lead",
    href: "#heliograph",
  },
];

/** Three case-study cards led by a big metric, then a short quote, author and a “Read story” link. */
export function TestimonialsCaseStudies({
  eyebrow = "Customer stories",
  title = "Results teams measure, not just feel",
  cta = { label: "All customer stories", href: "#customers" },
  studies = DEFAULT_STUDIES,
  className,
}: TestimonialsCaseStudiesProps) {
  return (
    <section aria-labelledby="testimonials-cases-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
          <div className="max-w-2xl">
            <p className="font-da-mono text-xs text-da-accent-fg">{eyebrow}</p>
            <h2 id="testimonials-cases-title" className="mt-3 text-[clamp(1.875rem,4vw,2.75rem)] leading-[1.1] font-semibold tracking-da-display text-balance">
              {title}
            </h2>
          </div>
          <a
            href={cta.href}
            className="da-focus da-transition group inline-flex shrink-0 items-center gap-1 rounded-da-sm text-sm font-medium text-da-muted-fg hover:text-da-fg"
          >
            {cta.label}
            <ArrowUpRight aria-hidden className="da-transition size-4 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
          </a>
        </div>
        <ul className="mt-12 grid gap-4 lg:grid-cols-3">
          {studies.map((s) => (
            <li key={s.company}>
              <article className="da-stroke da-transition group relative flex h-full flex-col rounded-da-lg bg-da-surface p-6 text-da-surface-fg hover:border-da-border-strong hover:shadow-da-md">
                <header className="flex items-baseline justify-between gap-3">
                  <h3 className="text-[17px] font-semibold tracking-tight">{s.company}</h3>
                  <p className="text-[12px] text-da-muted-fg">{s.industry}</p>
                </header>
                <p className="mt-8 font-da-mono text-5xl font-medium tracking-tight text-da-accent-fg">{s.metric}</p>
                <p className="mt-1 text-sm text-da-muted-fg">{s.metricLabel}</p>
                <blockquote className="mt-8 border-t border-da-border pt-5 text-[15px] leading-relaxed">“{s.quote}”</blockquote>
                <p className="mt-3 text-[13px] text-da-muted-fg">
                  {s.author}, {s.role}
                </p>
                <a
                  href={s.href}
                  className="da-focus mt-6 inline-flex items-center gap-1 rounded-da-sm text-sm font-medium after:absolute after:inset-0 after:rounded-da-lg"
                >
                  Read the story<span className="sr-only">: {s.company}</span>
                  <ArrowUpRight aria-hidden className="da-transition size-4 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
                </a>
              </article>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

export default TestimonialsCaseStudies;