// b2b-dashboard.jsx
// Premium executive dashboard mock used as the hero visual + product showcase.
// Tone target: Linear / Ramp / Stripe - restrained, monochrome with a single accent.

// ─────────────────────────────────────────────────────────────────────
// Primitives
// ─────────────────────────────────────────────────────────────────────

function DashCard({ title, kicker, action, children, style, padded = true, dataLabel }) {
  return (
    <div data-screen-label={dataLabel} style={{
      background: "#FFFFFF",
      border: "1px solid var(--b2b-hair)",
      borderRadius: 14,
      overflow: "hidden",
      display: "flex",
      flexDirection: "column",
      ...style
    }}>
      {(title || kicker) && (
        <div style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: "16px 20px 12px",
          borderBottom: "1px solid var(--b2b-hair)",
          gap: 12
        }}>
          <div style={{ minWidth: 0 }}>
            {kicker && <div className="kicker" style={{ marginBottom: 4 }}>{kicker}</div>}
            {title && (
              <div style={{
                fontFamily: "var(--font-sans)",
                fontWeight: 600,
                fontSize: 14,
                color: "var(--b2b-ink)",
                letterSpacing: "-0.005em",
                whiteSpace: "nowrap",
                overflow: "hidden",
                textOverflow: "ellipsis"
              }}>{title}</div>
            )}
          </div>
          {action && (
            <div style={{ flexShrink: 0, fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--b2b-meta)" }}>
              {action}
            </div>
          )}
        </div>
      )}
      <div style={{ padding: padded ? "18px 20px 20px" : 0, flex: 1 }}>
        {children}
      </div>
    </div>
  );
}

// Sparkline (tiny line chart) - animates in on scroll
function Sparkline({ data, color = "var(--b2b-accent-deep)", height = 36, width = 120 }) {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    if (!ref.current) return;
    if (typeof IntersectionObserver === "undefined") { setVisible(true); return; }
    const obs = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setVisible(true);
          obs.disconnect();
        }
      },
      { threshold: 0.25 }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  const min = Math.min(...data);
  const max = Math.max(...data);
  const range = max - min || 1;
  const step = width / (data.length - 1);
  const pts = data.map((v, i) => [i * step, height - ((v - min) / range) * (height - 4) - 2]);
  const path = pts.map((p, i) => (i === 0 ? "M" : "L") + p[0].toFixed(1) + " " + p[1].toFixed(1)).join(" ");
  const area = path + ` L${width} ${height} L0 ${height} Z`;
  const gradId = `spark-${color.replace(/[^a-z0-9]/gi, "")}`;
  return (
    <svg ref={ref} width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
      <defs>
        <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.18" />
          <stop offset="100%" stopColor={color} stopOpacity="0" />
        </linearGradient>
      </defs>
      <path
        className="sparkline-area"
        d={area}
        fill={`url(#${gradId})`}
        style={{
          opacity: visible ? 1 : 0,
          transition: "opacity .5s var(--ease-out) .9s"
        }}
      />
      <path
        className="sparkline-path"
        d={path}
        fill="none"
        stroke={color}
        strokeWidth="1.6"
        strokeLinecap="round"
        strokeLinejoin="round"
        pathLength="1"
        style={{
          strokeDasharray: 1,
          strokeDashoffset: visible ? 0 : 1,
          transition: "stroke-dashoffset 1.1s var(--ease-out)"
        }}
      />
      <circle
        className="sparkline-dot"
        cx={pts[pts.length - 1][0]}
        cy={pts[pts.length - 1][1]}
        r="2.4"
        fill={color}
        style={{
          opacity: visible ? 1 : 0,
          transform: visible ? "scale(1)" : "scale(0)",
          transformOrigin: `${pts[pts.length - 1][0]}px ${pts[pts.length - 1][1]}px`,
          transition: "transform .35s var(--ease-out) 1.05s, opacity .35s var(--ease-out) 1.05s"
        }}
      />
    </svg>
  );
}

// AIQ Distribution mini histogram with five archetype bins
function DistributionMini({ highlight = 3, compact = false }) {
  const bins = [
    { name: "Beginner",  v: 8,  range: "0–20" },
    { name: "Learner",   v: 22, range: "21–40" },
    { name: "Adopting",  v: 38, range: "41–60" },
    { name: "Proficient",v: 24, range: "61–80" },
    { name: "AI-Native", v: 8,  range: "81–100" }
  ];
  const max = Math.max(...bins.map(b => b.v));
  const H = compact ? 56 : 86;
  return (
    <div className="distribution-mini">
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 6, alignItems: "end", height: H, marginBottom: 8 }}>
        {bins.map((b, i) => {
          const h = (b.v / max) * (H - 4);
          const isAccent = i === highlight;
          return (
            <div key={b.name} style={{ position: "relative", display: "flex", flexDirection: "column", justifyContent: "flex-end", height: "100%" }}>
              <div style={{
                height: h,
                background: isAccent ? "var(--b2b-accent)" : "#E8E5DC",
                borderRadius: "4px 4px 0 0",
                position: "relative"
              }}>
                {isAccent && (
                  <div style={{
                    position: "absolute",
                    top: -22,
                    left: "50%",
                    transform: "translateX(-50%)",
                    fontFamily: "var(--font-mono)",
                    fontSize: 9.5,
                    letterSpacing: ".1em",
                    textTransform: "uppercase",
                    color: "var(--b2b-accent-deep)",
                    fontWeight: 600,
                    whiteSpace: "nowrap"
                  }}>You · 41%</div>
                )}
              </div>
            </div>
          );
        })}
      </div>
      <div className="distribution-labels" style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 6 }}>
        {bins.map((b, i) => (
          <div key={b.name} style={{
            fontFamily: "var(--font-mono)",
            fontSize: 9.5,
            letterSpacing: ".08em",
            textTransform: "uppercase",
            color: i === highlight ? "var(--b2b-ink)" : "var(--b2b-meta)",
            textAlign: "center",
            lineHeight: 1.3
          }}>
            <span className="dl-full">{b.name}</span>
            <span className="dl-short" style={{ display: "none" }}>
              {b.name === "AI-Native" ? "AI" : b.name.charAt(0)}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

// Department row - used in dept comparison card
function DeptRow({ name, score, delta, n, highlight = false, tag = null }) {
  const pos = delta >= 0;
  const tagStyles = {
    leading: { color: "var(--b2b-positive)", border: "1px solid rgba(31,138,91,0.28)", background: "rgba(31,138,91,0.08)" },
    behind:  { color: "var(--b2b-attention)", border: "1px solid rgba(180,83,9,0.30)", background: "rgba(180,83,9,0.08)" }
  };
  return (
    <div className="dept-row" style={{
      display: "grid",
      gridTemplateColumns: "1.6fr 1.8fr 50px 46px",
      alignItems: "center",
      gap: 12,
      padding: "10px 0",
      borderBottom: "1px solid var(--b2b-hair)"
    }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, minWidth: 0 }}>
        <div style={{
          width: 6, height: 6, borderRadius: 99,
          background: highlight ? "var(--b2b-accent)" : "#C9C4B8",
          flexShrink: 0
        }} />
        <span style={{
          fontFamily: "var(--font-sans)",
          fontSize: 13,
          fontWeight: highlight ? 600 : 500,
          color: "var(--b2b-ink)",
          whiteSpace: "nowrap",
          overflow: "hidden",
          textOverflow: "ellipsis"
        }}>{name}</span>
        {tag && (
          <span style={{
            fontFamily: "var(--font-mono)",
            fontSize: 8.5,
            letterSpacing: ".10em",
            textTransform: "uppercase",
            fontWeight: 600,
            padding: "2px 6px",
            borderRadius: 4,
            whiteSpace: "nowrap",
            flexShrink: 0,
            ...(tagStyles[tag] || {})
          }}>{tag === "leading" ? "Leading" : "Falling behind"}</span>
        )}
      </div>
      <div style={{ position: "relative", height: 5, background: "rgba(11,11,12,0.06)", borderRadius: 99, overflow: "hidden" }}>
        <div style={{
          position: "absolute", inset: 0, width: score + "%",
          background: highlight ? "var(--b2b-accent)" : "var(--b2b-ink)",
          borderRadius: 99,
          opacity: highlight ? 1 : 0.78
        }} />
      </div>
      <div style={{
        fontFamily: "var(--font-mono)",
        fontSize: 12,
        fontWeight: 600,
        color: "var(--b2b-ink)",
        textAlign: "right",
        fontVariantNumeric: "tabular-nums"
      }}>{score}</div>
      <div style={{
        fontFamily: "var(--font-mono)",
        fontSize: 11,
        color: pos ? "var(--b2b-positive)" : "var(--b2b-attention)",
        textAlign: "right",
        fontVariantNumeric: "tabular-nums"
      }}>{pos ? "↑" : "↓"}{Math.abs(delta)}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────
// COMPOSED LAYOUTS
// ─────────────────────────────────────────────────────────────────────

// Hero dashboard - a single product-UI panel with hairline-separated sections.
// Three editorial moments stacked: readiness score, token usage, score by department.
function HeroDashboard() {
  const tokenSplit = [
    { name: "Anthropic", pct: 42, color: "var(--b2b-accent)" },
    { name: "OpenAI",    pct: 31, color: "var(--b2b-ink)" },
    { name: "Cursor",    pct: 19, color: "#8A847A" },
    { name: "Other",     pct: 8,  color: "#C9C4B8" }
  ];

  const deptScores = [
    { name: "Product",     score: 78, delta: 6,  highlight: true },
    { name: "Engineering", score: 72, delta: 4 },
    { name: "Design",      score: 66, delta: 3 },
    { name: "Marketing",   score: 58, delta: 2 },
    { name: "Sales",       score: 51, delta: -3 }
  ];

  // Compact kicker styling reused across sections
  const sectionKicker = {
    fontFamily: "var(--font-mono)",
    fontSize: 10,
    letterSpacing: ".14em",
    textTransform: "uppercase",
    color: "var(--b2b-meta)",
    fontWeight: 600
  };

  const HAIR = "1px solid var(--b2b-hair)";

  return (
    <div className="hero-dashboard-grid" style={{
      position: "relative",
      width: "100%",
      maxWidth: 620,
      background: "#F2EFE8",
      border: HAIR,
      borderRadius: 20,
      overflow: "hidden",
      boxShadow: "0 40px 80px -30px rgba(40,20,5,.22), 0 8px 24px -10px rgba(40,20,5,.10)"
    }}>
      {/* ── Window chrome ───────────────────────────────────────── */}
      <div style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        padding: "12px 18px",
        borderBottom: HAIR
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <div style={{ display: "flex", gap: 5 }}>
            <span style={{ width: 8, height: 8, borderRadius: 99, background: "#D6D2C7" }} />
            <span style={{ width: 8, height: 8, borderRadius: 99, background: "#D6D2C7" }} />
            <span style={{ width: 8, height: 8, borderRadius: 99, background: "#D6D2C7" }} />
          </div>
          <span style={{
            fontFamily: "var(--font-mono)",
            fontSize: 10,
            color: "var(--b2b-meta)",
            letterSpacing: ".06em",
            whiteSpace: "nowrap"
          }}>stack.expert/business · acme inc</span>
        </div>
      </div>

      {/* ── §1 · AI READINESS ───────────────────────────────────── */}
      <div style={{ padding: "28px 28px", borderBottom: HAIR }}>
        <div style={{ ...sectionKicker, marginBottom: 16 }}>AI Readiness</div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "auto 1fr auto",
          alignItems: "end",
          gap: 22
        }}>
          {/* Score */}
          <div style={{
            fontFamily: "var(--font-display)",
            fontWeight: 500,
            fontSize: 104,
            lineHeight: 0.82,
            letterSpacing: "-0.045em",
            color: "var(--b2b-ink)"
          }}>67</div>

          {/* Label */}
          <div style={{ paddingBottom: 8 }}>
            <div style={{
              fontFamily: "var(--font-sans)",
              fontSize: 15, fontWeight: 600,
              color: "var(--b2b-accent-deep)",
              lineHeight: 1.1
            }}>Adopting</div>
            <div style={{
              fontFamily: "var(--font-mono)",
              fontSize: 10.5,
              color: "var(--b2b-meta)",
              letterSpacing: ".08em",
              marginTop: 5,
              textTransform: "uppercase"
            }}>743 employees</div>
          </div>

          {/* Sparkline + delta */}
          <div style={{ paddingBottom: 4, textAlign: "right" }}>
            <Sparkline data={[52, 54, 55, 58, 57, 60, 63, 65, 67]} width={140} height={42} />
            <div style={{
              fontFamily: "var(--font-mono)",
              fontSize: 10.5,
              color: "var(--b2b-positive)",
              fontWeight: 600,
              letterSpacing: ".08em",
              textTransform: "uppercase",
              marginTop: 4,
              fontVariantNumeric: "tabular-nums"
            }}>↑ 13 pts · 90d</div>
          </div>
        </div>
      </div>

      {/* ── §2 · SCORE BY DEPARTMENT ────────────────────────────── */}
      <div style={{ padding: "24px 28px", borderBottom: HAIR }}>
        <div style={{ ...sectionKicker, marginBottom: 18 }}>Score by Department</div>

        <div className="hero-depts-row" style={{
          display: "grid",
          gridTemplateColumns: "repeat(5, 1fr)",
          gap: 18
        }}>
          {deptScores.map((d) => {
            const pos = d.delta >= 0;
            return (
              <div key={d.name} style={{
                display: "flex",
                flexDirection: "column",
                gap: 8,
                minWidth: 0
              }}>
                <div style={{
                  fontFamily: "var(--font-mono)",
                  fontSize: 9.5,
                  letterSpacing: ".10em",
                  textTransform: "uppercase",
                  fontWeight: 600,
                  color: d.highlight ? "var(--b2b-accent-deep)" : "var(--b2b-meta)",
                  whiteSpace: "nowrap",
                  overflow: "hidden",
                  textOverflow: "ellipsis"
                }}>{d.name}</div>

                <div style={{ display: "flex", alignItems: "baseline", gap: 5 }}>
                  <span style={{
                    fontFamily: "var(--font-display)",
                    fontWeight: 500,
                    fontSize: 30,
                    lineHeight: 0.95,
                    letterSpacing: "-0.03em",
                    color: "var(--b2b-ink)",
                    fontVariantNumeric: "tabular-nums"
                  }}>{d.score}</span>
                  <span style={{
                    fontFamily: "var(--font-mono)",
                    fontSize: 10,
                    color: pos ? "var(--b2b-positive)" : "var(--b2b-attention)",
                    fontVariantNumeric: "tabular-nums",
                    fontWeight: 600
                  }}>{pos ? "↑" : "↓"}{Math.abs(d.delta)}</span>
                </div>

              </div>
            );
          })}
        </div>
      </div>

      {/* ── §3 · TOKEN USAGE ────────────────────────────────────── */}
      <div style={{ padding: "24px 28px 28px" }}>
        <div style={{ ...sectionKicker, marginBottom: 18 }}>Token Usage</div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "auto 1fr",
          gap: 22,
          alignItems: "center"
        }}>
          {/* Big metric */}
          <div style={{
            display: "flex",
            alignItems: "baseline",
            gap: 10,
            paddingRight: 22,
            borderRight: HAIR,
            whiteSpace: "nowrap"
          }}>
            <span style={{
              fontFamily: "var(--font-display)",
              fontWeight: 500,
              fontSize: 48,
              lineHeight: 0.9,
              letterSpacing: "-0.04em",
              color: "var(--b2b-ink)"
            }}>580<span style={{ fontSize: 22, color: "var(--b2b-meta)", marginLeft: 2 }}>M</span></span>
            <span style={{
              fontFamily: "var(--font-mono)",
              fontSize: 10.5,
              color: "var(--b2b-positive)",
              fontWeight: 600,
              fontVariantNumeric: "tabular-nums"
            }}>↑ 38%</span>
          </div>

          {/* Tool split */}
          <div>
            <div style={{
              display: "flex",
              height: 6,
              borderRadius: 99,
              overflow: "hidden"
            }}>
              {tokenSplit.map((s) => (
                <div key={s.name} style={{
                  width: s.pct + "%",
                  background: s.color
                }} />
              ))}
            </div>
            <div style={{
              display: "flex",
              gap: 14,
              marginTop: 10,
              flexWrap: "wrap"
            }}>
              {tokenSplit.map((s) => (
                <div key={s.name} style={{
                  display: "flex",
                  alignItems: "center",
                  gap: 6
                }}>
                  <span style={{
                    width: 7, height: 7, borderRadius: 2,
                    background: s.color
                  }} />
                  <span style={{
                    fontFamily: "var(--font-mono)",
                    fontSize: 10,
                    color: "var(--b2b-ink)",
                    fontWeight: 600,
                    letterSpacing: ".04em"
                  }}>{s.name}</span>
                  <span style={{
                    fontFamily: "var(--font-mono)",
                    fontSize: 10,
                    color: "var(--b2b-meta)",
                    fontVariantNumeric: "tabular-nums"
                  }}>{s.pct}%</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

    </div>
  );
}

// Big product showcase - used in the dedicated "Product Visual" section
function ProductDashboard() {
  const depts = [
    { name: "Product",         score: 78, delta: 6,  highlight: true },
    { name: "Engineering",     score: 72, delta: 4 },
    { name: "Data & Analytics",score: 70, delta: 5 },
    { name: "Design",          score: 66, delta: 3 },
    { name: "Marketing",       score: 64, delta: 2 },
    { name: "Customer Success",score: 58, delta: 1 },
    { name: "Sales",           score: 51, delta: -3 },
    { name: "Operations",      score: 44, delta: -2 },
    { name: "Finance",         score: 41, delta: -1 }
  ];

  const champions = [
    { initials: "MR", name: "Maya R.",    role: "Marketing Lead",     score: 92 },
    { initials: "JT", name: "Jordan T.",  role: "Staff Engineer",     score: 89 },
    { initials: "AS", name: "Anika S.",   role: "Product Lead",       score: 87 },
    { initials: "DL", name: "Diego L.",   role: "Ops Manager",        score: 85 }
  ];

  // Tag taxonomy - muted tints tuned to the warm palette
  const TAGS = {
    "Cost Leak":              { fg: "#9A6700", bg: "#F4ECD8", dot: "#C08A1E" },
    "Best Practice":          { fg: "#1F5A2E", bg: "#E3EEE2", dot: "#3C8049" },
    "Risk Signal":            { fg: "#A33A28", bg: "#F3E1DB", dot: "#C4543C" },
    "Growth Gap":             { fg: "#2B5A8A", bg: "#E1E9F2", dot: "#4A7CB0" },
    "Automation Opportunity": { fg: "#574094", bg: "#E8E3F3", dot: "#7A63B8" }
  };

  const actions = [
    {
      tag: "Cost Leak",
      title: "Reduce Support's AI spend by 24%",
      desc: "Move routine support workflows from premium models to lower-cost models while keeping quality stable."
    },
    {
      tag: "Best Practice",
      title: "Scale Product's best AI workflow company-wide",
      desc: "Product's research-to-PRD workflow is driving the fastest AIQ improvement. Reuse it across Marketing, Ops, and CS."
    },
    {
      tag: "Risk Signal",
      title: "Standardize AI usage in Customer Support",
      desc: "Support has high AI usage but inconsistent tools. Create approved workflows before customer-data risk scales."
    },
    {
      tag: "Growth Gap",
      title: "Train Finance on high-ROI AI workflows",
      desc: "Finance has low usage but high automation potential. Start with reporting, forecasting, reconciliation, and analysis."
    },
    {
      tag: "Automation Opportunity",
      title: "Automate weekly Ops reporting",
      desc: "Ops repeatedly uses AI to summarize updates and dashboards. Turn this into a reusable workflow and save 40+ hours/month."
    }
  ];

  return (
    <div style={{
      width: "100%",
      background: "#F2EFE8",
      border: "1px solid var(--b2b-hair)",
      borderRadius: 24,
      padding: 18,
      boxShadow: "0 50px 100px -40px rgba(40,20,5,.30), 0 10px 30px -12px rgba(40,20,5,.12)"
    }}>
      {/* App-style top strip */}
      <div style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        padding: "4px 10px 12px"
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <div style={{ display: "flex", gap: 6 }}>
            <span style={{ width: 9, height: 9, borderRadius: 99, background: "#D6D2C7" }} />
            <span style={{ width: 9, height: 9, borderRadius: 99, background: "#D6D2C7" }} />
            <span style={{ width: 9, height: 9, borderRadius: 99, background: "#D6D2C7" }} />
          </div>
          <span className="meta dashboard-url" style={{ fontSize: 10.5 }}>stack.expert/business · acme inc</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{
            fontFamily: "var(--font-mono)",
            fontSize: 10,
            letterSpacing: ".12em",
            textTransform: "uppercase",
            color: "var(--b2b-positive)",
            padding: "3px 8px",
            background: "rgba(31,138,91,0.08)",
            borderRadius: 99,
            display: "inline-flex",
            alignItems: "center",
            gap: 6
          }}>
            <span style={{ width: 5, height: 5, borderRadius: 99, background: "var(--b2b-positive)" }} />
            Live
          </span>
        </div>
      </div>

      <div className="product-dashboard-grid" style={{
        display: "grid",
        gridTemplateColumns: "1.1fr 1fr 0.95fr",
        gap: 14
      }}>
        {/* Hero readiness card - top-left */}
        <DashCard kicker="AI Readiness Score" style={{ gridColumn: 1, gridRow: 1 }}>
          <div style={{ display: "flex", alignItems: "flex-end", gap: 14 }}>
            <div style={{
              fontFamily: "var(--font-display)",
              fontWeight: 500,
              fontSize: 88,
              lineHeight: 0.88,
              letterSpacing: "-0.045em",
              color: "var(--b2b-ink)"
            }}>67</div>
            <div style={{ paddingBottom: 8, flex: 1 }}>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 16, fontWeight: 600, color: "var(--b2b-ink)" }}>Adopting</div>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, color: "var(--b2b-meta)", marginTop: 2 }}>743 employees · 12 depts</div>
            </div>
          </div>
          <div style={{ marginTop: 16, paddingTop: 14, borderTop: "1px solid var(--b2b-hair)" }}>
            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
              <span className="meta" style={{ fontSize: 10 }}>Trend · 8 wks</span>
              <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--b2b-positive)", fontVariantNumeric: "tabular-nums" }}>↑ 13 pts</span>
            </div>
            <Sparkline data={[54, 56, 55, 58, 60, 62, 65, 67]} width={260} height={48} />
          </div>
        </DashCard>

        {/* Champions list - top-left middle */}
        <DashCard kicker="AI Champions" action="View all" style={{ gridColumn: 2, gridRow: 1 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            {champions.map((c, i) => (
              <div key={c.name} style={{
                display: "flex",
                alignItems: "center",
                gap: 10,
                paddingBottom: i < champions.length - 1 ? 12 : 0,
                borderBottom: i < champions.length - 1 ? "1px solid var(--b2b-hair)" : "none"
              }}>
                <div style={{
                  width: 32, height: 32, borderRadius: 99,
                  background: i === 0 ? "var(--b2b-accent)" : "#E8E5DC",
                  color: i === 0 ? "#fff" : "var(--b2b-ink)",
                  display: "grid", placeItems: "center",
                  fontFamily: "var(--font-sans)",
                  fontSize: 11.5, fontWeight: 600,
                  flexShrink: 0
                }}>{c.initials}</div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontFamily: "var(--font-sans)",
                    fontSize: 13, fontWeight: 600,
                    color: "var(--b2b-ink)",
                    whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis"
                  }}>{c.name}</div>
                  <div style={{
                    fontFamily: "var(--font-sans)",
                    fontSize: 11.5, color: "var(--b2b-meta)",
                    whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis"
                  }}>{c.role}</div>
                </div>
                <div style={{
                  fontFamily: "var(--font-mono)",
                  fontSize: 13, fontWeight: 600,
                  color: "var(--b2b-ink)",
                  fontVariantNumeric: "tabular-nums"
                }}>{c.score}</div>
              </div>
            ))}
          </div>
        </DashCard>

        {/* Departments - wide, bottom-left spanning 2 cols */}
        <DashCard kicker="Departments · AIQ" action="Sorted by score" style={{ gridColumn: "1 / span 2", gridRow: 2 }}>
          <div className="dept-header" style={{ display: "grid", gridTemplateColumns: "44px 1fr", gap: 14, marginBottom: 10 }}>
            <span className="meta" style={{ fontSize: 9.5 }}>Dept.</span>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 56px 52px", gap: 14 }}>
              <span />
              <span className="meta" style={{ fontSize: 9.5, textAlign: "right" }}>Score</span>
              <span className="meta" style={{ fontSize: 9.5, textAlign: "right" }}>Δ Q</span>
            </div>
          </div>
          <div>
            {depts.map((d) => <DeptRow key={d.name} {...d} />)}
          </div>
        </DashCard>

        {/* Recommended actions - right column, full height top to bottom */}
        <DashCard kicker="Recommended actions" style={{ gridColumn: 3, gridRow: "1 / span 2" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 9, marginTop: 4 }}>
            {actions.map((a, i) => {
              const t = TAGS[a.tag] || { fg: "var(--b2b-meta)", bg: "#F0EDE6", dot: "var(--b2b-meta)" };
              return (
                <div key={i} style={{
                  padding: "14px 15px",
                  background: "var(--b2b-surface)",
                  border: "1px solid var(--b2b-hair)",
                  borderRadius: 12
                }}>
                  <div style={{ marginBottom: 9 }}>
                    <span style={{
                      display: "inline-flex",
                      alignItems: "center",
                      gap: 6,
                      padding: "4px 9px 4px 8px",
                      background: t.bg,
                      borderRadius: 99,
                      fontFamily: "var(--font-mono)",
                      fontSize: 9.5,
                      letterSpacing: ".1em",
                      textTransform: "uppercase",
                      fontWeight: 600,
                      color: t.fg,
                      whiteSpace: "nowrap"
                    }}>
                      <span style={{ width: 6, height: 6, borderRadius: 99, background: t.dot, flexShrink: 0 }} />
                      {a.tag}
                    </span>
                  </div>
                  <div style={{
                    fontFamily: "var(--font-sans)",
                    fontSize: 13.5, fontWeight: 600,
                    color: "var(--b2b-ink)",
                    lineHeight: 1.3,
                    marginBottom: 4,
                    textWrap: "pretty"
                  }}>{a.title}</div>
                  <div style={{
                    fontFamily: "var(--font-sans)",
                    fontSize: 12, fontWeight: 400,
                    color: "var(--b2b-meta)",
                    lineHeight: 1.45,
                    textWrap: "pretty"
                  }}>{a.desc}</div>
                </div>
              );
            })}
          </div>
        </DashCard>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────
// Tool adoption - list of AI tools with % of workforce and trend
// ─────────────────────────────────────────────────────────────────────
function ToolAdoptionList() {
  const tools = [
    { name: "Claude",     pct: 78, delta: 12, scope: "All depts" },
    { name: "ChatGPT",    pct: 64, delta: 6,  scope: "All depts" },
    { name: "Cursor",     pct: 42, delta: 18, scope: "Engineering · Product" },
    { name: "Copilot",    pct: 31, delta: 0,  scope: "Engineering" },
    { name: "Perplexity", pct: 18, delta: 5,  scope: "Marketing · Research" }
  ];
  return (
    <div>
      <div className="tool-row tool-header" style={{
        display: "grid",
        gridTemplateColumns: "150px 1fr 56px 52px",
        gap: 14,
        marginBottom: 10
      }}>
        <span className="meta" style={{ fontSize: 9.5 }}>Tool</span>
        <span className="meta" style={{ fontSize: 9.5 }}>Adoption · % of employees</span>
        <span className="meta" style={{ fontSize: 9.5, textAlign: "right" }}>%</span>
        <span className="meta" style={{ fontSize: 9.5, textAlign: "right" }}>Δ Q</span>
      </div>
      {tools.map((t, i) => {
        const pos = t.delta >= 0;
        return (
          <div key={t.name} className="tool-row" style={{
            display: "grid",
            gridTemplateColumns: "150px 1fr 56px 52px",
            alignItems: "center",
            gap: 14,
            padding: "10px 0",
            borderBottom: i < tools.length - 1 ? "1px solid var(--b2b-hair)" : "none"
          }}>
            <div style={{ minWidth: 0 }}>
              <div style={{
                fontFamily: "var(--font-sans)",
                fontSize: 13,
                fontWeight: 600,
                color: "var(--b2b-ink)"
              }}>{t.name}</div>
            </div>
            <div style={{ position: "relative", height: 5, background: "rgba(11,11,12,0.06)", borderRadius: 99, overflow: "hidden" }}>
              <div style={{
                position: "absolute", inset: 0, width: t.pct + "%",
                background: i === 0 ? "var(--b2b-accent)" : "var(--b2b-ink)",
                borderRadius: 99,
                opacity: i === 0 ? 1 : 0.78
              }} />
            </div>
            <div style={{
              fontFamily: "var(--font-mono)",
              fontSize: 12,
              fontWeight: 600,
              color: "var(--b2b-ink)",
              textAlign: "right",
              fontVariantNumeric: "tabular-nums"
            }}>{t.pct}%</div>
            <div style={{
              fontFamily: "var(--font-mono)",
              fontSize: 11,
              color: t.delta === 0 ? "var(--b2b-meta)" : (pos ? "var(--b2b-positive)" : "var(--b2b-attention)"),
              textAlign: "right",
              fontVariantNumeric: "tabular-nums"
            }}>{t.delta === 0 ? "–" : (pos ? "↑" : "↓") + Math.abs(t.delta)}</div>
          </div>
        );
      })}
    </div>
  );
}

// Token usage - big number + sparkline + secondary stats + tool split
function TokenUsageStat() {
  const byTool = [
    { name: "Anthropic", pct: 42, color: "var(--b2b-accent)" },
    { name: "OpenAI",    pct: 31, color: "var(--b2b-ink)" },
    { name: "Cursor",    pct: 19, color: "#8A847A" },
    { name: "Other",     pct: 8,  color: "#C9C4B8" }
  ];
  return (
    <div>
      {/* Big number + sparkline */}
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 12 }}>
        <div>
          <div style={{
            fontFamily: "var(--font-display)",
            fontWeight: 500,
            fontSize: 52,
            lineHeight: 0.9,
            letterSpacing: "-0.04em",
            color: "var(--b2b-ink)"
          }}>580<span style={{ fontSize: 26, color: "var(--b2b-meta)", marginLeft: 4 }}>M</span></div>
          <div style={{ fontFamily: "var(--font-sans)", fontSize: 12, color: "var(--b2b-meta)", marginTop: 6 }}>
            tokens · last 30 days
          </div>
        </div>
        <Sparkline data={[235, 270, 320, 370, 420, 470, 525, 580]} width={96} height={42} />
      </div>

      {/* Secondary stats */}
      <div style={{
        marginTop: 18,
        paddingTop: 14,
        borderTop: "1px solid var(--b2b-hair)",
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        rowGap: 14,
        columnGap: 12
      }}>
        <div>
          <div className="meta" style={{ fontSize: 10 }}>QoQ</div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 14, fontWeight: 600, color: "var(--b2b-positive)", marginTop: 2 }}>↑ 38%</div>
        </div>
        <div>
          <div className="meta" style={{ fontSize: 10 }}>Active users</div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 14, fontWeight: 600, color: "var(--b2b-ink)", marginTop: 2 }}>557 <span style={{ color: "var(--b2b-meta)", fontWeight: 500 }}>· 75%</span></div>
        </div>
        <div>
          <div className="meta" style={{ fontSize: 10 }}>Per active user</div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 14, fontWeight: 600, color: "var(--b2b-ink)", marginTop: 2 }}>1.04M</div>
        </div>
        <div>
          <div className="meta" style={{ fontSize: 10 }}>Monthly spend</div>
          <div style={{ fontFamily: "var(--font-mono)", fontSize: 14, fontWeight: 600, color: "var(--b2b-ink)", marginTop: 2 }}>$62K</div>
        </div>
      </div>

      {/* Tool split bar */}
      <div style={{
        marginTop: 18,
        paddingTop: 14,
        borderTop: "1px solid var(--b2b-hair)"
      }}>
        <div className="meta" style={{ fontSize: 10, marginBottom: 8 }}>By tool</div>
        <div style={{
          display: "flex",
          height: 6,
          borderRadius: 99,
          overflow: "hidden",
          background: "rgba(11,11,12,0.05)"
        }}>
          {byTool.map((t) => (
            <div key={t.name} style={{
              width: t.pct + "%",
              background: t.color,
              height: "100%"
            }} />
          ))}
        </div>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 10 }}>
          {byTool.map((t) => (
            <div key={t.name} style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <span style={{ width: 8, height: 8, borderRadius: 2, background: t.color, flexShrink: 0 }} />
              <span style={{
                fontFamily: "var(--font-sans)",
                fontSize: 12,
                color: "var(--b2b-ink)"
              }}>{t.name}</span>
              <span style={{
                fontFamily: "var(--font-mono)",
                fontSize: 11,
                color: "var(--b2b-meta)",
                fontVariantNumeric: "tabular-nums"
              }}>{t.pct}%</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { DashCard, Sparkline, DistributionMini, DeptRow, HeroDashboard, ProductDashboard, ToolAdoptionList, TokenUsageStat });