// KPIBanner.jsx — structural counts, one surface, six cells.
// Left three (Roles · Docs · Cycles) = the three domains.
// Right three (Initiative · Epic · Card statuses) = the Board's shape.
// A subtle vertical divider separates the two groups; a header row
// above lets us label each group without stacking two wells.
function KPIBanner() {
  const cells = [
    { n: "9",  l: "Roles",              sub: "3 tiers — Leadership, Delivery, IC" },
    { n: "6",  l: "Docs",               sub: "4 carried · 2 derived" },
    { n: "5",  l: "Cycles",             sub: "Product · Customer · Eng · QA · Ops" },
    { n: "5",  l: "Initiative", sub: "Milestone-authoring arc", divider: true },
    { n: "5",  l: "Epic",       sub: "Spec-authoring arc" },
    { n: "11", l: "Card",       sub: "Build · test · release arc" },
  ];

  return (
    <div>
      {/* Group labels aligned over the six cells */}
      <div className="hidden lg:grid grid-cols-6 gap-px mb-3 px-1">
        <div className="col-span-3 flex items-baseline justify-between pr-4">
          <div className="eyebrow">The three domains, counted</div>
          <div className="font-mono text-[10px] uppercase tracking-[0.22em] text-[color:var(--ink-faint)]">Who · What · When</div>
        </div>
        <div className="col-span-3 flex items-baseline justify-between pl-4">
          <div className="eyebrow">Statuses, by hierarchy level</div>
          <div className="font-mono text-[10px] uppercase tracking-[0.22em] text-[color:var(--ink-faint)]">The shape of the Board</div>
        </div>
      </div>

      {/* Single well, six cells, one border */}
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-px surface rounded-xl overflow-hidden">
        {cells.map((s, i) => (
          <div key={i}
            className={`px-5 py-6 bg-[color:var(--bg-2)]/40 ${s.divider ? "lg:relative lg:before:content-[''] lg:before:absolute lg:before:left-0 lg:before:top-3 lg:before:bottom-3 lg:before:w-px lg:before:bg-[color:var(--accent-soft)]" : ""}`}>
            <div className="font-display text-[42px] leading-none spectrum-text-sm inline-block">{s.n}</div>
            <div className="eyebrow mt-2.5">{s.l}</div>
            <div className="font-mono text-[10px] text-[color:var(--ink-faint)] mt-1 tracking-[0.06em]">{s.sub}</div>
          </div>
        ))}
      </div>
    </div>
  );
}
window.KPIBanner = KPIBanner;