KPI overview

import { DeltaBadge, MetricCard, Sparkline } from "@nexera-ui/react";

const KPIS = [
  {
    label: "Headcount",
    value: "248",
    delta: "+5.1%",
    trend: "up-good",
    caption: "vs 236 at the end of Q2",
    data: [214, 217, 219, 222, 226, 229, 231, 234, 236, 241, 245, 248],
    spark: "Headcount over the last 12 months, rising from 214 to 248",
  },
  {
    label: "Hires this quarter",
    value: "18",
    delta: "+3",
    trend: "up-good",
    caption: "vs 15 in Q2",
    data: [4, 5, 3, 6, 4, 5, 6, 4, 5, 7, 5, 6],
    spark: "Hires per month over the last 12 months, between 3 and 7",
  },
  {
    label: "Voluntary attrition",
    value: "8.4%",
    delta: "-1.2 pts",
    trend: "down-good",
    caption: "Rolling 12 months",
    data: [10.1, 10.0, 9.9, 9.8, 9.6, 9.6, 9.4, 9.2, 9.0, 8.8, 8.6, 8.4],
    spark: "Voluntary attrition over the last 12 months, falling from 10.1% to 8.4%",
  },
  {
    label: "Time to hire",
    value: "32 days",
    delta: "-4 days",
    trend: "down-good",
    caption: "Median, offer accepted",
    data: [41, 40, 39, 38, 38, 37, 36, 36, 35, 34, 33, 32],
    spark: "Median time to hire over the last 12 months, falling from 41 to 32 days",
  },
] as const;

const PLAN = [
  { label: "Headcount", value: "+2", trend: "up-good" },
  { label: "Hires", value: "-3", trend: "down-bad" },
  { label: "Attrition", value: "-0.6 pts", trend: "down-good" },
  { label: "Time to hire", value: "+2 days", trend: "up-bad" },
] as const;

/** KPI overview: four headline workforce metrics with a 12-month trend, the change since last quarter and the gap to plan. */
export default function KpiOverview() {
  return (
    <div className="@container bg-page px-4 py-8 @3xl:px-8">
      <div className="mx-auto grid max-w-6xl gap-6">
        <header className="flex flex-wrap items-end justify-between gap-2">
          <div className="grid gap-1">
            <h2 className="text-heading-h2 text-primary">Workforce overview</h2>
            <p className="text-body-default text-secondary">
              Northwind, all locations · Q3 2026, updated 1 October
            </p>
          </div>
          <a
            href="#people-report"
            className="text-body-small text-brand-text underline underline-offset-4"
          >
            Open full people report
          </a>
        </header>

        <div className="grid gap-4 @xl:grid-cols-2 @5xl:grid-cols-4">
          {KPIS.map((kpi) => (
            <MetricCard
              key={kpi.label}
              type="sparkline"
              label={kpi.label}
              value={kpi.value}
              delta={kpi.delta}
              trend={kpi.trend}
              caption={kpi.caption}
              sparkline={<Sparkline data={kpi.data} aria-label={kpi.spark} smooth />}
            />
          ))}
        </div>

        <section
          aria-labelledby="kpi-plan"
          className="grid gap-3 rounded-lg border border-default bg-surface p-4"
        >
          <h3 id="kpi-plan" className="text-heading-h4 text-primary">
            Against the FY2026 plan
          </h3>
          <ul className="flex flex-wrap gap-x-6 gap-y-3">
            {PLAN.map((item) => (
              <li
                key={item.label}
                className="flex items-center gap-2 text-body-small text-secondary"
              >
                {item.label}
                <DeltaBadge value={item.value} trend={item.trend} />
              </li>
            ))}
          </ul>
        </section>
      </div>
    </div>
  );
}