Stats — numbers with spark bars

import { cn } from "@/lib/utils";

// Template figures — replace with your own. "trend" is 12 monthly values scaled 0–100.
const stats = [
  { label: "Bookings made", value: "1.2M", change: "+34%", trend: [30, 34, 38, 36, 44, 48, 52, 50, 60, 66, 72, 80], highlight: true },
  { label: "No-show rate", value: "3.1%", change: "−58%", trend: [80, 74, 70, 62, 58, 50, 46, 40, 36, 32, 30, 26] },
  { label: "Deposits taken", value: "₹4.8Cr", change: "+41%", trend: [20, 26, 30, 34, 32, 40, 46, 50, 58, 62, 70, 76] },
  { label: "Studios", value: "3,040", change: "+22%", trend: [50, 52, 54, 58, 60, 62, 66, 68, 70, 74, 78, 82] },
];

export function StatsSparkbars() {
  return (
    <section aria-labelledby="stats-title" className="bg-surface font-sans">
      <div className="mx-auto max-w-6xl px-4 py-16 sm:px-6 lg:py-24">
        <div className="mb-8 grid items-end gap-4 lg:grid-cols-[1.1fr_1fr] lg:gap-12">
          <h2 id="stats-title" className="text-balance text-2xl font-semibold tracking-tight text-fg sm:text-3xl">A year of Slotwise, in four numbers</h2>
          <p className="text-[14.5px] leading-relaxed text-fg-muted">Across every studio on Slotwise, October 2025 to September 2026.</p>
        </div>
        <dl className="grid gap-3 min-[420px]:grid-cols-2 lg:grid-cols-4">
          {stats.map((s) => (
            <div key={s.label} className={cn("grid gap-1.5 rounded-xl border border-border bg-bg p-5", s.highlight && "border-primary/50 ring-[3px] ring-primary/10")}>
              <dt className="flex items-center justify-between gap-2 text-[13px] text-fg-muted">
                {s.label}
                <span className="rounded-full bg-success-soft px-2 py-0.5 text-xs font-medium text-success-fg">{s.change}</span>
              </dt>
              <dd className="text-3xl font-semibold tracking-tight tabular-nums text-fg">{s.value}</dd>
              <dd aria-hidden className="mt-2.5 flex h-11 items-end gap-[3px]">
                {s.trend.map((h, i) => (
                  <span key={i} style={{ height: h + "%" }} className={cn("flex-1 rounded-[2px]", i === s.trend.length - 1 ? "bg-primary" : "bg-primary/20")} />
                ))}
              </dd>
              <dd className="text-xs text-fg-subtle">vs the year before</dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  );
}