Stats — beside a quote

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

// Use a real customer's words and numbers, with their permission.
const story = {
  quote: "We used to spend the first week of every month chasing invoices. Now the money arrives before we’ve noticed it was due.",
  name: "Lena Marsh",
  role: "Studio manager, Blue Pine",
  initials: "LM",
  company: "Blue Pine",
  stats: [
    { value: "42", label: "clients billed every month" },
    { value: "8", label: "average days to get paid, from 31" },
    { value: "94%", label: "of invoices paid on time" },
    { value: "12", label: "hours of admin saved a month" },
  ],
};

export function StatsWithQuote() {
  return (
    <section aria-label="Customer story" className="bg-bg font-sans">
      <div className="mx-auto grid max-w-6xl items-center gap-10 px-4 py-16 sm:px-6 lg:grid-cols-[1.15fr_1fr] lg:gap-16 lg:py-24">
        <figure className="grid gap-6">
          <Quote className="size-8 text-primary" aria-hidden />
          <blockquote className="text-pretty text-xl font-medium leading-snug tracking-tight text-fg sm:text-2xl lg:text-[28px]">
            {story.quote}
          </blockquote>
          <figcaption className="flex items-center gap-3 text-sm text-fg-muted">
            <span className="grid size-9 place-items-center rounded-full bg-primary-soft text-[13px] font-medium text-primary-soft-fg">{story.initials}</span>
            <span><b className="block font-semibold text-fg">{story.name}</b>{story.role}</span>
            <span className="ml-auto hidden border-l border-border pl-4 text-[17px] font-medium tracking-wide text-fg-subtle min-[480px]:block">{story.company}</span>
          </figcaption>
        </figure>
        <dl className="grid grid-cols-2 gap-x-7 gap-y-8">
          {story.stats.map((s, i) => (
            <div key={s.label} className={cn("flex flex-col gap-1.5 border-t pt-4", i === 0 ? "border-t-2 border-fg" : "border-border")}>
              <dt className="order-2 text-[13.5px] leading-snug text-fg-muted">{s.label}</dt>
              <dd className="order-1 text-4xl font-semibold leading-none tracking-[-0.045em] tabular-nums text-fg">{s.value}</dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}