Stats — in a brand band

// Template figures — replace with your own and keep the source line honest.
const band = {
  title: "Freelancers get paid faster on Fernbill",
  note: "Median figures across Fernbill accounts, January – June 2026.",
  stats: [
    { value: "9", label: "days to get paid, down from 23" },
    { value: "71%", label: "of reminders end in a payment" },
    { value: "186k", label: "invoices sent every month" },
  ],
};

export function StatsBrandBand() {
  return (
    <section aria-labelledby="band-title" className="relative isolate overflow-hidden bg-primary font-sans text-primary-fg">
      <div aria-hidden className="absolute inset-0 -z-10 bg-[radial-gradient(60%_120%_at_0%_0%,color-mix(in_srgb,var(--tst-primary-fg)_14%,transparent),transparent_60%)]" />
      <div className="mx-auto grid max-w-6xl items-center gap-7 px-4 py-14 sm:px-6 lg:grid-cols-[0.9fr_2fr] lg:gap-12">
        <div>
          <h2 id="band-title" className="text-balance text-xl font-semibold tracking-tight sm:text-2xl">{band.title}</h2>
          <p className="mt-2.5 text-sm leading-relaxed opacity-80">{band.note}</p>
        </div>
        <dl className="grid gap-[18px] md:grid-cols-3 md:gap-0">
          {band.stats.map((s) => (
            <div key={s.label} className="flex flex-col gap-1.5 border-l border-primary-fg/25 pl-4 md:px-6 md:py-1">
              <dt className="order-2 text-[13.5px] leading-snug opacity-80">{s.label}</dt>
              <dd className="order-1 text-4xl font-semibold leading-none tracking-[-0.045em] tabular-nums lg:text-5xl">{s.value}</dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}