Testimonials Case Study

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

export interface TestimonialsCaseStudyProps {
  company?: string;
  industry?: string;
  quote?: string;
  author?: { name: string; role: string; initials: string };
  metrics?: { value: string; label: string }[];
  href?: string;
  className?: string;
}

/** Featured customer story: bordered card split into a company quote (logo wordmark, quote, author) and a tinted column of three big result metrics with a “Read the case study” link. */
export function TestimonialsCaseStudy({
  company = "Northwind Logistics",
  industry = "Logistics · 1,200 employees · 6 entities",
  quote = "We closed our books in four days instead of twelve the first month after switching. Our controllers finally spend their time on analysis instead of chasing bank lines.",
  author = { name: "Priya Raman", role: "VP Finance, Northwind", initials: "PR" },
  metrics = [
    { value: "67%", label: "faster month-end close" },
    { value: "$2.1M", label: "cash freed from receivables" },
    { value: "18 days", label: "DSO, down from 41" },
  ],
  href = "#case-study",
  className,
}: TestimonialsCaseStudyProps) {
  return (
    <section aria-labelledby="nc-case-title" className={cn("da-section bg-da-bg text-da-fg", className)}>
      <div className="da-container">
        <p className="text-xs font-semibold tracking-da-label text-da-primary uppercase">Customer story</p>
        <h2 id="nc-case-title" className="sr-only">
          How {company} uses Ledgerly
        </h2>
        <figure className="da-stroke mt-6 grid overflow-hidden rounded-da-lg bg-da-surface text-da-surface-fg shadow-da-md lg:grid-cols-[1.6fr_1fr]">
          <div className="p-8 sm:p-10">
            <p className="font-da-display text-xl font-extrabold tracking-da-display">{company}</p>
            <p className="text-sm text-da-muted-fg">{industry}</p>
            <blockquote className="mt-8 font-da-display text-[clamp(1.25rem,2.4vw,1.75rem)] leading-snug font-semibold text-pretty">“{quote}”</blockquote>
            <figcaption className="mt-8 flex items-center gap-3">
              <span aria-hidden className="grid size-11 place-items-center rounded-full bg-da-accent font-semibold text-da-accent-fg">
                {author.initials}
              </span>
              <span>
                <span className="block font-semibold">{author.name}</span>
                <span className="block text-sm text-da-muted-fg">{author.role}</span>
              </span>
            </figcaption>
          </div>
          <div className="flex flex-col border-t border-da-border bg-da-surface-2 p-8 sm:p-10 lg:border-t-0 lg:border-l">
            <dl className="grid gap-6 max-lg:sm:grid-cols-3">
              {metrics.map((m) => (
                <div key={m.label} className="flex flex-col">
                  <dt className="order-2 text-sm text-da-muted-fg">{m.label}</dt>
                  <dd className="order-1 font-da-display text-4xl font-extrabold tracking-da-display text-da-primary">{m.value}</dd>
                </div>
              ))}
            </dl>
            <a
              href={href}
              className="da-focus da-transition mt-8 inline-flex items-center gap-1.5 self-start rounded-da-sm font-semibold text-da-primary hover:gap-2 lg:mt-auto"
            >
              Read the case study <ArrowRight aria-hidden className="size-4" />
            </a>
          </div>
        </figure>
      </div>
    </section>
  );
}

export default TestimonialsCaseStudy;