Testimonial — quote with logo and results

import { ArrowRight } from "lucide-react";

const study = {
  company: "northfold",
  quote: "Forty retainer clients bill themselves on the first of the month. Our team got a full working day back, and we finally know who owes what without opening a spreadsheet.",
  name: "Kwame Mensah",
  role: "Operations lead, Northfold Studio",
  href: "/customers/northfold",
  results: [
    { value: "9", unit: "days", label: "Average days to get paid, down from 24" },
    { value: "8", unit: "hrs", label: "Hours saved on billing each month" },
    { value: "71%", label: "Invoices paid by the first reminder" },
  ],
};

export function TestimonialWithMetrics() {
  return (
    <section aria-label="Case study" className="bg-surface px-5 py-16 font-sans sm:px-10 sm:py-20">
      <figure className="mx-auto grid max-w-6xl overflow-hidden rounded-xl border border-border bg-bg md:grid-cols-[1.65fr_1fr]">
        <div className="flex flex-col justify-between gap-8 p-7 md:p-12">
          <span className="inline-flex items-center gap-2 text-lg font-bold tracking-tighter text-fg">
            <span className="size-5 rounded-full border-[5px] border-fg" aria-hidden />
            {study.company}
          </span>
          <blockquote className="text-xl font-medium leading-snug tracking-tight text-fg sm:text-2xl">
            <p>“{study.quote}”</p>
          </blockquote>
          <figcaption className="flex flex-wrap items-center justify-between gap-4">
            <div className="flex items-center gap-3">
              <span className="grid size-12 place-items-center rounded-full bg-primary-soft font-medium text-primary-soft-fg" aria-hidden>KM</span>
              <div>
                <p className="text-sm font-semibold text-fg">{study.name}</p>
                <p className="text-[13px] text-fg-muted">{study.role}</p>
              </div>
            </div>
            <a href={study.href} className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline">
              Read the case study <ArrowRight className="size-4" aria-hidden />
            </a>
          </figcaption>
        </div>
        <dl className="grid divide-y divide-border border-t border-border bg-surface md:border-l md:border-t-0">
          {study.results.map((r) => (
            <div key={r.label} className="flex flex-col-reverse justify-center gap-2 px-7 py-7 md:px-9">
              <dt className="text-[13.5px] text-fg-muted">{r.label}</dt>
              <dd className="text-4xl font-semibold tracking-tighter tabular-nums text-fg lg:text-5xl">
                {r.value}
                {r.unit && <span className="ml-1 text-lg font-medium tracking-normal text-fg-subtle">{r.unit}</span>}
              </dd>
            </div>
          ))}
        </dl>
      </figure>
    </section>
  );
}