Testimonials — case study cards

import { ArrowRight } from "lucide-react";

const cases = [
  { company: "Fernhill Dental", industry: "Clinic", problem: "Front desk spent mornings phoning patients to confirm the day’s appointments.", result: "−42%", resultLabel: "missed appointments in the first quarter", href: "/customers/fernhill" },
  { company: "Saltmarsh", industry: "Bakery", problem: "Weekend pre-orders arrived by text, email and phone, and some were lost.", result: "6 hrs", resultLabel: "saved every week on taking orders", href: "/customers/saltmarsh" },
  { company: "Brasswork", industry: "Barber", problem: "Walk-in queues meant long waits and regulars going elsewhere on Saturdays.", result: "2×", resultLabel: "repeat bookings within six months", href: "/customers/brasswork" },
];

export function TestimonialsCaseStudies() {
  return (
    <section aria-labelledby="cases-title" className="bg-surface px-5 py-12 font-sans sm:px-10 sm:py-20">
      <div className="mx-auto max-w-6xl">
        <div className="mx-auto mb-11 grid max-w-2xl justify-items-center gap-3.5 text-center">
          <p className="text-[13px] font-medium text-primary">Case studies</p>
          <h2 id="cases-title" className="text-balance text-3xl font-semibold tracking-tight text-fg sm:text-4xl">From the problem to the result</h2>
          <p className="text-base text-fg-muted">How three small businesses changed the way they take bookings.</p>
        </div>
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {cases.map((c) => (
            <article key={c.company} className="group grid grid-rows-[auto_auto_1fr_auto] gap-[18px] rounded-xl border border-border bg-bg p-6 transition hover:border-border-strong hover:shadow-lg">
              <div className="flex flex-wrap items-center justify-between gap-2.5">
                <p className="text-[17px] font-bold tracking-tight text-fg">{c.company}</p>
                <span className="inline-flex h-[22px] items-center rounded-full bg-surface-2 px-2 text-xs font-medium text-fg-muted">{c.industry}</span>
              </div>
              <div>
                <h3 className="mb-1 text-xs font-medium uppercase tracking-wider text-fg-subtle">The problem</h3>
                <p className="text-sm leading-relaxed text-fg-muted">{c.problem}</p>
              </div>
              <div className="self-end rounded-lg bg-surface p-4">
                <p className="text-[38px] font-semibold leading-none tracking-tighter tabular-nums text-primary">{c.result}</p>
                <p className="mt-1.5 text-[13px] text-fg-muted">{c.resultLabel}</p>
              </div>
              <a href={c.href} className="flex items-center justify-between border-t border-border pt-4 text-sm font-medium text-fg">
                Read the story
                <ArrowRight className="size-4 text-primary transition-transform group-hover:translate-x-0.5" aria-hidden />
              </a>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}