Stats band

// Put the source of your numbers under them. Never round up.
const stats = [
  { value: "11 days", label: "sooner, on average, once reminders are on" },
  { value: "24", label: "currencies you can bill and be paid in" },
  { value: "2 days", label: "from your client paying to money in your bank" },
  { value: "5 min", label: "to send your first invoice" },
];

export function StatsBand() {
  return (
    <section aria-labelledby="stats-title" className="bg-bg font-sans">
      <div className="mx-auto max-w-6xl px-4 py-20 sm:px-6">
        <h2 id="stats-title" className="max-w-xl text-balance text-3xl font-semibold tracking-tight text-fg">
          Built for people who’d rather be working
        </h2>
        <dl className="mt-10 grid grid-cols-2 gap-px overflow-hidden rounded-xl border border-border bg-border lg:grid-cols-4">
          {stats.map((s) => (
            <div key={s.label} className="flex flex-col-reverse justify-end gap-2 bg-bg p-6">
              <dt className="text-sm leading-snug text-fg-muted">{s.label}</dt>
              <dd className="text-3xl font-semibold tracking-tight tabular-nums text-fg sm:text-4xl">{s.value}</dd>
            </div>
          ))}
        </dl>
        <p className="mt-3 text-[13px] text-fg-subtle">Figures from Fernbill accounts, January to June 2026.</p>
      </div>
    </section>
  );
}