Stats — four big numbers

// Template figures — replace with your own, and say where they come from.
const stats = [
  { value: "11", unit: "days", label: "sooner, on average, once reminders are on" },
  { value: "82", unit: "%", label: "of invoices paid by the due date" },
  { value: "2", unit: "days", label: "from a client paying to money in your bank" },
  { value: "6", unit: "hrs", label: "saved on admin each month" },
];

export function StatsBigNumbers() {
  return (
    <section aria-labelledby="stats-title" className="bg-bg font-sans">
      <div className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:py-24">
        <h2 id="stats-title" className="mx-auto mb-12 max-w-2xl text-balance text-center text-2xl font-semibold tracking-tight text-fg sm:text-3xl">
          What changes when the chasing stops
        </h2>
        <dl className="grid grid-cols-2 gap-y-7 lg:grid-cols-4">
          {stats.map((s, i) => (
            <div
              key={s.label}
              className={[
                "flex flex-col items-center gap-2.5 px-5 py-2 text-center",
                i % 2 === 1 ? "border-l border-border" : "",
                i === 2 ? "lg:border-l" : "",
              ].join(" ")}
            >
              <dt className="order-2 max-w-[22ch] text-sm leading-snug text-fg-muted">{s.label}</dt>
              <dd className="order-1 text-5xl font-medium leading-none tracking-[-0.055em] tabular-nums text-fg sm:text-6xl lg:text-7xl">
                {s.value}
                <span className="ml-1 text-[0.38em] tracking-tight text-primary">{s.unit}</span>
              </dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}