// GuestMaker CRM B2B · analytics · DARK FUCHSIA telemetry dashboard.
// Same visual language, palette and chart craft as the CDP analytics artifact,
// but every metric is B2B sales: pipeline, gates, team, attributed production.

const { useState: daUseState, useEffect: daUseEffect, useRef: daUseRef } = React;

// ── palette (identical to the CDP dashboard) ──
const DA_BG      = "#120912";
const DA_PANEL   = "#1a0f1a";
const DA_PANEL_2 = "#22142a";
const DA_RULE    = "#3a1f3a";
const DA_RULE_S  = "#2a172a";
const DA_INK     = "#f5e6f0";
const DA_MUTED   = "#a896a6";
const DA_DIM     = "#7a6a78";
const DA_FUCHSIA = "#ff4d97";
const DA_F_DEEP  = "#d63d80";
const DA_F_LIGHT = "#ff8fbc";
const DA_PINK    = "#ff7ab8";
const DA_MAGENTA = "#c235a3";
const DA_ROSE    = "#ff5577";
const DA_PLUM    = "#8a3a78";
const DA_HOT     = "#ff2d7c";
const DA_POS     = "#5cd0a0";
const DA_NEG     = "#ff8068";
const DA_AMBER   = "#ffb35c";
const DA_MONO    = "'JetBrains Mono', ui-monospace, monospace";
const DA_SERIF   = "'Source Serif 4', Georgia, serif";
const DA_SANS    = "'Inter', system-ui, sans-serif";

const DAMono = ({ children, size = 11, color = DA_MUTED, style }) => (
  <span style={{ fontFamily: DA_MONO, fontSize: size, color, letterSpacing: "0.04em", ...style }}>{children}</span>
);

function daLiveFloat(seed, jitter = 0.06, interval = 2400, min = 0, max = 100, dec = 1) {
  const [v, setV] = daUseState(seed);
  daUseEffect(() => {
    const t = setInterval(() => setV(x => {
      const n = x + (Math.random() * jitter * 2 - jitter);
      return Math.max(min, Math.min(max, +n.toFixed(dec)));
    }), interval);
    return () => clearInterval(t);
  }, []);
  return v;
}

// ── chart atoms ──
function DASparkline({ data, color, height = 32, gid }) {
  const max = Math.max(...data), min = Math.min(...data);
  const pts = data.map((v, i) => [(i / (data.length - 1)) * 100, height - 4 - ((v - min) / (max - min || 1)) * (height - 8)]);
  const d = pts.map((p, i) => `${i === 0 ? "M" : "L"} ${p[0]} ${p[1]}`).join(" ");
  const id = `dspk-${gid}`;
  return (
    <svg width="100%" height={height} viewBox={`0 0 100 ${height}`} preserveAspectRatio="none">
      <defs><linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stopColor={color} stopOpacity="0.45" /><stop offset="100%" stopColor={color} stopOpacity="0" />
      </linearGradient></defs>
      <path d={`${d} L 100 ${height} L 0 ${height} Z`} fill={`url(#${id})`} />
      <path d={d} fill="none" stroke={color} strokeWidth="1.4" strokeLinejoin="round" vectorEffect="non-scaling-stroke" />
      <circle cx={pts[pts.length - 1][0]} cy={pts[pts.length - 1][1]} r="1.4" fill={color} vectorEffect="non-scaling-stroke">
        <animate attributeName="r" values="1.4;2.6;1.4" dur="1.8s" repeatCount="indefinite" />
      </circle>
    </svg>
  );
}
function DAAreaChart({ data, secondary, color = DA_FUCHSIA, height = 216, gid, fmt = v => v }) {
  const max = Math.max(...data, ...(secondary || []));
  const line = arr => arr.map((v, i) => [(i / (arr.length - 1)) * 100, height - 26 - (v / (max || 1)) * (height - 46)]);
  const pts = line(data), sec = secondary ? line(secondary) : null;
  const path = p => p.map((x, i) => `${i === 0 ? "M" : "L"} ${x[0]} ${x[1]}`).join(" ");
  const id = `dar-${gid}`;
  return (
    <div style={{ position: "relative" }}>
      <svg width="100%" height={height} viewBox={`0 0 100 ${height}`} preserveAspectRatio="none" style={{ display: "block" }}>
        <defs><linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.5" /><stop offset="100%" stopColor={color} stopOpacity="0" />
        </linearGradient></defs>
        {[0.25, 0.5, 0.75, 1].map((g, i) => (
          <line key={i} x1="0" x2="100" y1={(height - 26) * (1 - g)} y2={(height - 26) * (1 - g)}
            stroke={DA_RULE} strokeWidth="0.4" strokeDasharray="1 1.4" vectorEffect="non-scaling-stroke" />
        ))}
        <path d={`${path(pts)} L 100 ${height - 26} L 0 ${height - 26} Z`} fill={`url(#${id})`} />
        <path d={path(pts)} fill="none" stroke={color} strokeWidth="1.8" strokeLinejoin="round" vectorEffect="non-scaling-stroke" />
        {sec && <path d={path(sec)} fill="none" stroke={DA_F_LIGHT} strokeWidth="1.4" strokeDasharray="3 2" opacity="0.75" vectorEffect="non-scaling-stroke" />}
        {pts.map((p, i) => <circle key={i} cx={p[0]} cy={p[1]} r="1" fill={color} vectorEffect="non-scaling-stroke" />)}
      </svg>
      <div style={{ position: "absolute", top: 0, right: 0 }}><DAMono size={10} color={DA_DIM}>MAX {fmt(max)}</DAMono></div>
    </div>
  );
}
function DAColumns({ data, height = 210, color = DA_FUCHSIA, fmt = v => v, accentFirst }) {
  const max = Math.max(...data.map(d => d[1])) || 1;
  return (
    <div style={{ display: "flex", alignItems: "flex-end", gap: 7, height }}>
      {data.map(([l, v], i) => {
        const c = accentFirst && i === accentFirst ? DA_HOT : color;
        return (
          <div key={l + i} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-end", gap: 6, height: "100%" }}>
            <DAMono size={9.5} color={DA_MUTED} style={{ fontWeight: 600 }}>{fmt(v)}</DAMono>
            <div style={{
              width: "100%", height: `${Math.max(1.5, (v / max) * 100)}%`, minHeight: 3, borderRadius: "3px 3px 0 0",
              background: `linear-gradient(180deg, ${c}, ${c}33)`, boxShadow: `0 0 14px -4px ${c}aa`,
              transition: "height .5s cubic-bezier(.2,.8,.2,1)",
            }} />
            <DAMono size={9} color={DA_DIM}>{l}</DAMono>
          </div>
        );
      })}
    </div>
  );
}
function DABars({ rows, color = DA_FUCHSIA, fmt = v => v, showRank }) {
  const max = Math.max(...rows.map(r => r[1])) || 1;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      {rows.map(([l, v, meta, c], i) => {
        const col = c || (i === 0 ? color : `${color}cc`);
        return (
          <div key={l + i} style={{ animation: `gm-fadein .35s ease ${i * 0.04}s both` }}>
            <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 5 }}>
              {showRank && <DAMono size={10} color={DA_DIM} style={{ width: 12 }}>{i + 1}</DAMono>}
              <span style={{ fontSize: 12.5, color: DA_INK, fontWeight: 500, flex: 1, fontFamily: DA_SANS }}>{l}</span>
              {meta && <DAMono size={10} color={DA_DIM}>{meta}</DAMono>}
              <DAMono size={11.5} color={col} style={{ fontWeight: 600, fontVariantNumeric: "tabular-nums" }}>{fmt(v)}</DAMono>
            </div>
            <div style={{ height: 6, background: DA_RULE_S, borderRadius: 3, overflow: "hidden" }}>
              <div style={{ height: "100%", width: `${(v / max) * 100}%`, background: `linear-gradient(90deg,${col},${col}88)`, boxShadow: `0 0 10px ${col}70`, transition: "width .6s cubic-bezier(.2,.8,.2,1)" }} />
            </div>
          </div>
        );
      })}
    </div>
  );
}
function DADonut({ segments, size = 190, thickness = 24, label, sublabel }) {
  const r = (size - thickness) / 2, cx = size / 2, C = 2 * Math.PI * r;
  const total = segments.reduce((a, s) => a + s.value, 0);
  let off = 0;
  return (
    <div style={{ position: "relative", width: size, height: size, margin: "0 auto" }}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ transform: "rotate(-90deg)" }}>
        <circle cx={cx} cy={cx} r={r} fill="none" stroke={DA_RULE_S} strokeWidth={thickness} />
        {segments.map((s, i) => {
          const len = (s.value / total) * C, dash = `${len} ${C - len}`, dOff = -off;
          off += len;
          return <circle key={i} cx={cx} cy={cx} r={r} fill="none" stroke={s.color} strokeWidth={thickness}
            strokeDasharray={dash} strokeDashoffset={dOff} style={{ filter: i === 0 ? `drop-shadow(0 0 7px ${s.color}90)` : "none", transition: "stroke-dasharray .6s ease" }} />;
        })}
      </svg>
      <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
        <div style={{ fontFamily: DA_SERIF, fontSize: 28, fontWeight: 500, color: DA_INK, letterSpacing: "-0.02em", lineHeight: 1 }}>{label}</div>
        <DAMono size={10.5} color={DA_DIM} style={{ marginTop: 5 }}>{sublabel}</DAMono>
      </div>
    </div>
  );
}
function DAKPI({ lbl, value, delta, deltaColor = DA_POS, sublabel, spark, color = DA_FUCHSIA, gid }) {
  return (
    <div style={{ background: DA_PANEL, border: `1px solid ${DA_RULE_S}`, borderRadius: 10, padding: "16px 18px 14px", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 1, background: `linear-gradient(90deg, transparent, ${color}80, transparent)` }} />
      <DAMono size={10.5} color={DA_DIM} style={{ letterSpacing: "0.14em", textTransform: "uppercase", display: "block" }}>{lbl}</DAMono>
      <div style={{ fontFamily: DA_MONO, fontSize: 26, fontWeight: 500, color: DA_INK, letterSpacing: "-0.02em", lineHeight: 1.1, margin: "6px 0 4px", fontVariantNumeric: "tabular-nums" }}>{value}</div>
      <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
        {delta && <span style={{ fontFamily: DA_MONO, fontSize: 11, color: deltaColor, fontWeight: 600 }}>{delta}</span>}
        <DAMono size={10.5} color={DA_DIM}>{sublabel}</DAMono>
      </div>
      {spark && <div style={{ marginTop: 8, marginBottom: -4 }}><DASparkline data={spark} color={color} gid={gid} /></div>}
    </div>
  );
}
function DACard({ title, subtitle, action, children, pad = true, style }) {
  return (
    <div style={{ background: DA_PANEL, border: `1px solid ${DA_RULE_S}`, borderRadius: 10, ...style }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 10, padding: "15px 18px 12px", borderBottom: `1px solid ${DA_RULE_S}` }}>
        <div>
          <div style={{ fontFamily: DA_SANS, fontSize: 14, fontWeight: 600, color: DA_INK, letterSpacing: "-0.005em" }}>{title}</div>
          {subtitle && <DAMono size={10.5} color={DA_DIM} style={{ display: "block", marginTop: 3, letterSpacing: "0.1em", textTransform: "uppercase" }}>{subtitle}</DAMono>}
        </div>
        {action}
      </div>
      <div style={{ padding: pad ? 18 : 0 }}>{children}</div>
    </div>
  );
}
function DALegend({ items }) {
  return (
    <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
      {items.map((i, k) => (
        <span key={k} style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
          {i.dashed ? <span style={{ width: 12, height: 0, borderTop: `1.5px dashed ${i.c}` }} /> : <span style={{ width: 8, height: 8, borderRadius: 2, background: i.c, boxShadow: `0 0 8px ${i.c}90` }} />}
          <DAMono size={10.5} color={DA_MUTED}>{i.lbl}</DAMono>
        </span>
      ))}
    </div>
  );
}
const daEur = n => "€" + (Math.abs(n) >= 1000 ? (Math.abs(n / 1000) >= 100 ? Math.round(n / 1000) : Math.round(n / 100) / 10) + "K" : Math.round(n));

// ── data ──
const DA_WEEKS = ["W23","W24","W25","W26","W27","W28","W29","W30","W31","W32","W33","W34"];
const DA_CREATED_V = [86, 124, 62, 148, 96, 172, 132, 74, 156, 198, 108, 142];
const DA_WON_V     = [42, 66, 18, 74, 38, 96, 52, 22, 88, 108, 46, 72];
const DA_OPEN_SPARK = [372, 388, 402, 396, 418, 432, 428, 446, 452, 461, 466, 470];
const DA_WEIGHT_SPARK = [168, 174, 181, 178, 189, 196, 194, 202, 208, 210, 212, 214];
const DA_WIN_SPARK = [38, 39, 40, 41, 42, 43, 42, 44, 45, 45, 46, 46];
const DA_CYCLE_SPARK = [66, 65, 63, 62, 61, 60, 58, 57, 56, 55, 54, 54];
const DA_FUNNEL = [
  { stage: "Qualification", count: 3, value: 172000, days: 15.5, conv: 67, color: DA_PLUM },
  { stage: "RFP Received",  count: 2, value: 70000,  days: 8.0,  conv: 150, color: DA_MAGENTA },
  { stage: "Proposal Sent", count: 3, value: 124500, days: 14.6, conv: 33, color: DA_F_DEEP },
  { stage: "Quote Sent",    count: 1, value: 37500,  days: 8.5,  conv: 400, color: DA_ROSE },
  { stage: "Negotiation",   count: 4, value: 298000, days: 7.3,  conv: null, color: DA_FUCHSIA },
];
const DA_FORECAST = [["Aug 26", 60700], ["Sep 26", 188600], ["Oct 26", 10400], ["Nov 26", 74300], ["Dec 26", 32800], ["Jan 27", 18900]];
const DA_LOSS = [["Price", 6], ["No response", 4], ["Competitor", 3], ["Availability", 2], ["Event cancelled", 1], ["Other", 1]];
const DA_RISK = [
  ["Continental Corporate, Madrid corporate rate", "Negotiation", "34d in stage · 33d silent", DA_NEG, "ROTTING"],
  ["Helvia Medical Congress Oct 2026", "RFP Received", "48d in stage · no reply", DA_AMBER, "WILTING"],
  ["Nordwind Travel Group, 2027 master contract", "Negotiation", "approval pending · Rubén Calbet", DA_FUCHSIA, "GATED"],
  ["Vega Air Corporate, crew programme", "Qualification", "no next action planned", DA_AMBER, "NO ACTION"],
];
const DA_BOARD = [
  ["Adriana Vestri", "AV", 108000, 2, 1, 0, 46],
  ["Rubén Calbet", "RC", 84000, 1, 2, 0, 36],
  ["Damià Solans", "DS", 42000, 1, 0, 0, 18],
  ["Noelia Ferrán", "NF", 0, 0, 2, 5, 0],
];
const DA_ACTS = [["Email", 3, DA_FUCHSIA], ["Call", 2, DA_PINK], ["Virtual meeting", 2, DA_MAGENTA], ["Task", 1, DA_PLUM]];
const DA_HEAT = [
  [1, 3, 2, 4, 2, 0, 0], [2, 5, 3, 6, 4, 1, 0], [0, 2, 4, 3, 5, 2, 0], [3, 6, 5, 7, 6, 1, 1], [1, 4, 3, 5, 3, 0, 0],
];
const DA_TOP = [["Nordwind Travel Group", 179200, "655 RN · 78 res"], ["Viajes Altamar", 138500, "438 RN · 64 res"], ["Meridian Business Travel", 111400, "349 RN · 42 res"],
  ["Continental Corporate", 98000, "302 RN · 51 res"], ["Vega Air Corporate", 84000, "288 RN · 66 res"], ["Nordwind España", 76500, "241 RN · 33 res"],
  ["Talora DMC Madrid", 74000, "168 RN · 24 res"], ["Helvia Congresses", 61400, "142 RN · 19 res"]];
const DA_RN = [["Sep", 1824], ["Oct", 380], ["Nov", 1504], ["Dec", 737], ["Jan", 612], ["Feb", 1180], ["Mar", 940], ["Apr", 1320], ["May", 1610], ["Jun", 1780], ["Jul", 2040], ["Aug", 1120]];
const DA_LEDGER = [["Accrued", 35200, DA_FUCHSIA], ["Invoiced", 28600, DA_MAGENTA], ["Settled", 67100, DA_POS], ["Cancelled", 0, DA_NEG]];

// ── live attribution feed ──
const DA_ACC_POOL = [["Nordwind Travel Group", "NW"], ["Viajes Altamar", "VA"], ["Meridian Business Travel", "MB"], ["Continental Corporate", "CC"], ["Talora DMC Madrid", "TD"], ["Vega Air Corporate", "VC"], ["Nordwind España", "NE"], ["Boreal Incentives", "BI"]];
const DA_HOTELS = ["Marea Sierra Blanca", "Marea Club Marbella", "Marea Cala Blava", "Marea Nerja Beach", "Marea Bahía Norte", "Marea Jardines del Sur"];
const DA_RULES = [["P1", "agency code · IATA", DA_POS], ["P2", "promo code · rate plan", DA_FUCHSIA], ["P3", "engine agency id", DA_MAGENTA], ["P4", "email domain · suggested", DA_AMBER]];
function daMakeMatch(i) {
  const acc = DA_ACC_POOL[Math.floor(Math.random() * DA_ACC_POOL.length)];
  const r = Math.random();
  const rule = r < 0.5 ? DA_RULES[0] : r < 0.79 ? DA_RULES[1] : r < 0.93 ? DA_RULES[2] : DA_RULES[3];
  const rn = 2 + Math.floor(Math.random() * 9);
  const adr = 84 + Math.floor(Math.random() * 96);
  return {
    id: `M-${20000 + i}`, loc: "PMS-" + (4200000 + Math.floor(Math.random() * 99999)),
    acc: acc[0], init: acc[1], hotel: DA_HOTELS[Math.floor(Math.random() * DA_HOTELS.length)],
    rn, revenue: rn * adr, rule, commission: Math.round(rn * adr * 0.11),
  };
}
function DAMatchFeed() {
  const [rows, setRows] = daUseState(() => Array.from({ length: 7 }, (_, i) => daMakeMatch(i)));
  const idx = daUseRef(7);
  daUseEffect(() => {
    const t = setInterval(() => setRows(p => [daMakeMatch(idx.current++), ...p].slice(0, 7)), 2100);
    return () => clearInterval(t);
  }, []);
  return (
    <DACard title="Reservation matcher · live" subtitle="every 10 minutes · 90-day rolling window" pad={false}
      action={<span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><span style={{ width: 7, height: 7, borderRadius: "50%", background: DA_POS, animation: "gm-dot-pulse 2s infinite" }} /><DAMono size={10.5} color={DA_POS}>MATCHING</DAMono></span>}>
      <div>
        {rows.map((r, i) => (
          <div key={r.id} style={{
            display: "flex", alignItems: "center", gap: 11, padding: "10px 18px",
            borderBottom: `1px solid ${DA_RULE_S}`, animation: i === 0 ? "gm-fadein .4s ease" : "none",
            background: i === 0 ? `linear-gradient(90deg, ${DA_FUCHSIA}12, transparent)` : "transparent",
          }}>
            <span style={{ width: 26, height: 26, borderRadius: 7, flexShrink: 0, background: `${r.rule[2]}1f`, border: `1px solid ${r.rule[2]}55`, color: r.rule[2], fontFamily: DA_MONO, fontSize: 9.5, fontWeight: 700, display: "grid", placeItems: "center" }}>{r.init}</span>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12.5, color: DA_INK, fontWeight: 500, fontFamily: DA_SANS, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.acc}</div>
              <DAMono size={9.5} color={DA_DIM}>{r.loc} · {r.hotel}</DAMono>
            </div>
            <div style={{ textAlign: "right" }}>
              <DAMono size={11.5} color={DA_INK} style={{ fontWeight: 600 }}>{daEur(r.revenue)}</DAMono>
              <div><DAMono size={9.5} color={DA_DIM}>{r.rn} RN · comm {daEur(r.commission)}</DAMono></div>
            </div>
            <span style={{ background: `${r.rule[2]}18`, border: `1px solid ${r.rule[2]}55`, color: r.rule[2], borderRadius: 5, padding: "3px 7px", fontFamily: DA_MONO, fontSize: 9, fontWeight: 700, letterSpacing: "0.08em", whiteSpace: "nowrap" }}>
              {r.rule[0]} {r.rule[0] === "P4" ? "SUGGEST" : "LINKED"}
            </span>
          </div>
        ))}
      </div>
    </DACard>
  );
}

// ── views ──
function DAOverview() {
  const open = daLiveFloat(470, 1.4, 3000, 440, 500, 0);
  const conv = daLiveFloat(46.2, 0.12, 3400, 44, 49, 1);
  return (
    <div style={{ padding: 20, display: "grid", gap: 14 }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 14 }}>
        <DAKPI lbl="Open pipeline" value={`€${Math.round(open)}K`} delta="▲ 12.4%" sublabel="14 open deals" spark={DA_OPEN_SPARK} gid="op" color={DA_FUCHSIA} />
        <DAKPI lbl="Weighted forecast" value="€214.3K" delta="▲ 8.1%" sublabel="by stage probability" spark={DA_WEIGHT_SPARK} gid="wf" color={DA_PINK} />
        <DAKPI lbl="Win rate" value={`${conv.toFixed(1)}%`} delta="▲ 6.4 pp" sublabel="vs previous period" spark={DA_WIN_SPARK} gid="wr" color={DA_MAGENTA} />
        <DAKPI lbl="Avg sales cycle" value="54d" delta="▼ 7d" sublabel="qualification → won" spark={DA_CYCLE_SPARK} gid="cy" color={DA_HOT} />
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1.55fr 1fr", gap: 14 }}>
        <DACard title="Pipeline movement" subtitle="created vs won value · 12 weeks"
          action={<DALegend items={[{ lbl: "Created", c: DA_FUCHSIA }, { lbl: "Won", c: DA_F_LIGHT, dashed: true }]} />}>
          <DAAreaChart data={DA_CREATED_V} secondary={DA_WON_V} gid="mv" height={230} fmt={v => `€${v}K`} />
          <div style={{ display: "flex", justifyContent: "space-between", marginTop: 6 }}>
            {DA_WEEKS.filter((_, i) => i % 2 === 0).map(w => <DAMono key={w} size={9.5} color={DA_DIM}>{w}</DAMono>)}
          </div>
        </DACard>
        <DACard title="Corporate versus MICE" subtitle="open value by pipeline">
          <DADonut label="€587K" sublabel="OPEN + PROPOSED" segments={[{ value: 356000, color: DA_FUCHSIA }, { value: 231500, color: DA_MAGENTA }]} />
          <div style={{ marginTop: 16, display: "grid", gap: 9 }}>
            {[["Corporate / FIT", 356000, DA_FUCHSIA, "9 deals"], ["Groups & Events", 231500, DA_MAGENTA, "6 deals"]].map(([l, v, c, m]) => (
              <div key={l} style={{ display: "flex", alignItems: "center", gap: 9 }}>
                <span style={{ width: 8, height: 8, borderRadius: 2, background: c, boxShadow: `0 0 8px ${c}90` }} />
                <span style={{ flex: 1, fontSize: 12.5, color: DA_INK, fontFamily: DA_SANS }}>{l}</span>
                <DAMono size={10} color={DA_DIM}>{m}</DAMono>
                <DAMono size={11.5} color={c} style={{ fontWeight: 600 }}>{daEur(v)}</DAMono>
              </div>
            ))}
          </div>
        </DACard>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.55fr", gap: 14 }}>
        <DACard title="Loss reasons" subtitle="typed causes · closed in period">
          <DABars rows={DA_LOSS.map(([l, v], i) => [l, v, null, [DA_HOT, DA_ROSE, DA_MAGENTA, DA_PLUM, DA_F_DEEP, DA_DIM][i]])} fmt={v => v} />
          <div style={{ marginTop: 14, paddingTop: 12, borderTop: `1px solid ${DA_RULE_S}` }}>
            <DAMono size={10.5} color={DA_DIM} style={{ lineHeight: 1.6 }}>
              A deal cannot be closed as lost without one of these six causes and a comment, which is why this chart is worth reading.
            </DAMono>
          </div>
        </DACard>
        <DACard title="Deals the board is flagging" subtitle="rotting · unattended · gated" pad={false}>
          {DA_RISK.map(([t, stage, why, c, tag]) => (
            <div key={t} style={{ display: "flex", alignItems: "center", gap: 11, padding: "12px 18px", borderBottom: `1px solid ${DA_RULE_S}` }}>
              <span style={{ width: 3, height: 30, borderRadius: 2, background: c, boxShadow: `0 0 10px ${c}90`, flexShrink: 0 }} />
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12.5, color: DA_INK, fontWeight: 500, fontFamily: DA_SANS }}>{t}</div>
                <DAMono size={9.5} color={DA_DIM}>{stage} · {why}</DAMono>
              </div>
              <span style={{ background: `${c}18`, border: `1px solid ${c}55`, color: c, borderRadius: 5, padding: "3px 7px", fontFamily: DA_MONO, fontSize: 9, fontWeight: 700, letterSpacing: "0.08em" }}>{tag}</span>
            </div>
          ))}
        </DACard>
      </div>
    </div>
  );
}

function DAPipeline() {
  const max = Math.max(...DA_FUNNEL.map(f => f.value));
  return (
    <div style={{ padding: 20, display: "grid", gap: 14 }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 14 }}>
        <DAKPI lbl="Open deals" value="14" sublabel="both pipelines" color={DA_FUCHSIA} />
        <DAKPI lbl="Rotting" value="1" delta="idle past stage limit" deltaColor={DA_AMBER} sublabel="" color={DA_AMBER} />
        <DAKPI lbl="Avg deal size" value="€60.4K" delta="▲ €4.2K" sublabel="won in period" color={DA_PINK} />
        <DAKPI lbl="Forecast slippage" value="8d" delta="▼ 3d" sublabel="close date drift" color={DA_MAGENTA} />
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 14 }}>
        <DACard title="Stage funnel" subtitle="count · value · stage-to-stage conversion"
          action={<DAMono size={10} color={DA_DIM}>AVG DAYS IN STAGE</DAMono>}>
          <div style={{ display: "grid", gap: 4 }}>
            {DA_FUNNEL.map((f, i) => (
              <div key={f.stage}>
                <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <div style={{ flex: 1 }}>
                    <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 5 }}>
                      <span style={{ fontSize: 13, color: DA_INK, fontWeight: 500, flex: 1, fontFamily: DA_SANS }}>{f.stage}</span>
                      <DAMono size={10} color={DA_DIM}>{f.count} deals</DAMono>
                      <DAMono size={12} color={f.color} style={{ fontWeight: 600 }}>{daEur(f.value)}</DAMono>
                    </div>
                    <div style={{ height: 10, background: DA_RULE_S, borderRadius: 5, overflow: "hidden" }}>
                      <div style={{ height: "100%", width: `${(f.value / max) * 100}%`, background: `linear-gradient(90deg,${f.color},${f.color}66)`, boxShadow: `0 0 14px ${f.color}70` }} />
                    </div>
                  </div>
                  <DAMono size={11} color={DA_MUTED} style={{ width: 42, textAlign: "right" }}>{f.days}d</DAMono>
                </div>
                {f.conv != null && (
                  <div style={{ display: "flex", alignItems: "center", gap: 7, padding: "7px 0 9px", marginLeft: 2 }}>
                    <span style={{ width: 1, height: 12, background: DA_RULE }} />
                    <span style={{ background: `${f.conv >= 100 ? DA_POS : DA_AMBER}14`, border: `1px solid ${f.conv >= 100 ? DA_POS : DA_AMBER}44`, color: f.conv >= 100 ? DA_POS : DA_AMBER, borderRadius: 5, padding: "2px 7px", fontFamily: DA_MONO, fontSize: 9.5, fontWeight: 700 }}>↓ {f.conv}%</span>
                    <DAMono size={9.5} color={DA_DIM}>to {DA_FUNNEL[i + 1].stage.toLowerCase()}</DAMono>
                  </div>
                )}
              </div>
            ))}
          </div>
        </DACard>
        <div style={{ display: "grid", gap: 14 }}>
          <DACard title="Forecast by close month" subtitle="weighted value · next 6 months">
            <DAColumns data={DA_FORECAST} height={196} fmt={daEur} accentFirst={1} />
          </DACard>
          <DACard title="Gross versus weighted" subtitle="probability applied per stage">
            <DABars rows={[["Unweighted open", 470000, null, DA_PLUM], ["Probability weighted", 214300, null, DA_FUCHSIA]]} fmt={daEur} />
          </DACard>
        </div>
      </div>
      <DACard title="Time in stage" subtitle="average days · both pipelines · gates make this measurable">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 14 }}>
          {DA_FUNNEL.map(f => (
            <div key={f.stage} style={{ textAlign: "center" }}>
              <div style={{ position: "relative", height: 96, display: "flex", alignItems: "flex-end", justifyContent: "center" }}>
                <div style={{ width: 46, height: `${(f.days / 16) * 100}%`, borderRadius: "5px 5px 0 0", background: `linear-gradient(180deg,${f.color},${f.color}22)`, boxShadow: `0 0 18px -4px ${f.color}` }} />
                <span style={{ position: "absolute", top: 0, left: 0, right: 0 }}><DAMono size={11} color={DA_INK} style={{ fontWeight: 600 }}>{f.days}d</DAMono></span>
              </div>
              <DAMono size={9.5} color={DA_DIM} style={{ display: "block", marginTop: 7 }}>{f.stage.toUpperCase()}</DAMono>
            </div>
          ))}
        </div>
      </DACard>
    </div>
  );
}

function DATeam() {
  const openRate = daLiveFloat(80.8, 0.2, 3200, 76, 86, 1);
  const maxWon = 108000;
  return (
    <div style={{ padding: 20, display: "grid", gap: 14 }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 14 }}>
        <DAKPI lbl="Overdue activities" value="2" delta="past due, not done" deltaColor={DA_NEG} sublabel="" color={DA_NEG} />
        <DAKPI lbl="Emails sent" value="125" delta="▲ 18" sublabel="one-to-one, in period" spark={[62, 71, 78, 84, 92, 99, 104, 110, 115, 119, 122, 125]} gid="es" color={DA_FUCHSIA} />
        <DAKPI lbl="Open rate" value={`${openRate.toFixed(1)}%`} delta="▲ 3.2 pp" sublabel="verified senders only" spark={[71, 73, 74, 76, 77, 78, 79, 80, 80, 81, 81, 81]} gid="or" color={DA_PINK} />
        <DAKPI lbl="Click rate" value="29.6%" delta="▲ 1.8 pp" sublabel="proposal links" spark={[22, 23, 24, 25, 26, 27, 27, 28, 29, 29, 30, 30]} gid="cr" color={DA_MAGENTA} />
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 14 }}>
        <DACard title="Leaderboard" subtitle="won value in period · top owners" pad={false}>
          <div style={{ display: "flex", gap: 14, padding: "10px 18px 6px", justifyContent: "flex-end" }}>
            {["WON €", "WON", "OPEN", "ACT", "SHARE"].map(h => <DAMono key={h} size={9} color={DA_DIM} style={{ letterSpacing: "0.12em", fontWeight: 700, width: h === "WON €" ? 50 : 30, textAlign: "right" }}>{h}</DAMono>)}
          </div>
          {DA_BOARD.map(([name, init, won, w, o, a, share], i) => (
            <div key={name} style={{ display: "flex", alignItems: "center", gap: 11, padding: "11px 18px", borderTop: `1px solid ${DA_RULE_S}` }}>
              <DAMono size={10} color={DA_DIM} style={{ width: 10 }}>{i + 1}</DAMono>
              <span style={{ width: 26, height: 26, borderRadius: "50%", flexShrink: 0, background: `${[DA_FUCHSIA, DA_PINK, DA_MAGENTA, DA_PLUM][i]}1f`, border: `1px solid ${[DA_FUCHSIA, DA_PINK, DA_MAGENTA, DA_PLUM][i]}66`, color: [DA_FUCHSIA, DA_PINK, DA_MAGENTA, DA_PLUM][i], fontFamily: DA_MONO, fontSize: 9.5, fontWeight: 700, display: "grid", placeItems: "center" }}>{init}</span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12.5, color: DA_INK, fontWeight: 500, fontFamily: DA_SANS }}>{name}</div>
                <div style={{ height: 5, marginTop: 5, background: DA_RULE_S, borderRadius: 3, overflow: "hidden" }}>
                  <div style={{ height: "100%", width: `${Math.max(2, (won / maxWon) * 100)}%`, background: `linear-gradient(90deg,${DA_FUCHSIA},${DA_F_LIGHT})`, boxShadow: `0 0 10px ${DA_FUCHSIA}70` }} />
                </div>
              </div>
              <DAMono size={11.5} color={DA_INK} style={{ fontWeight: 600, width: 50, textAlign: "right" }}>{daEur(won)}</DAMono>
              {[w, o, a].map((v, k) => <DAMono key={k} size={11} color={DA_MUTED} style={{ width: 30, textAlign: "right" }}>{v}</DAMono>)}
              <DAMono size={11} color={DA_FUCHSIA} style={{ width: 30, textAlign: "right", fontWeight: 700 }}>{share}%</DAMono>
            </div>
          ))}
        </DACard>
        <DACard title="Email funnel" subtitle="sent → opened → clicked">
          <svg viewBox="0 0 300 150" style={{ width: "100%", height: 150 }}>
            <defs>
              <linearGradient id="dafun" x1="0" y1="0" x2="1" y2="0">
                <stop offset="0%" stopColor={DA_FUCHSIA} stopOpacity="0.85" /><stop offset="100%" stopColor={DA_MAGENTA} stopOpacity="0.5" />
              </linearGradient>
            </defs>
            <path d="M6 18 L294 40 L294 110 L6 132 Z" fill="url(#dafun)" opacity="0.22" />
            <path d="M6 18 L294 40" stroke={DA_FUCHSIA} strokeWidth="1.5" fill="none" />
            <path d="M6 132 L294 110" stroke={DA_MAGENTA} strokeWidth="1.5" fill="none" />
            {[[6, "125", "SENT"], [150, "101", "OPENED"], [290, "37", "CLICKED"]].map(([x, v, l], i) => (
              <g key={l}>
                <line x1={x} x2={x} y1={18 + i * 11} y2={132 - i * 11} stroke={DA_RULE} strokeDasharray="2 2" />
                <text x={i === 2 ? x - 6 : x + 6} y={68} fill={DA_INK} fontFamily="JetBrains Mono, monospace" fontSize="18" fontWeight="600" textAnchor={i === 2 ? "end" : "start"}>{v}</text>
                <text x={i === 2 ? x - 6 : x + 6} y={84} fill={DA_DIM} fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="1.4" textAnchor={i === 2 ? "end" : "start"}>{l}</text>
              </g>
            ))}
          </svg>
          <div style={{ display: "flex", justifyContent: "space-around", marginTop: 8, paddingTop: 12, borderTop: `1px solid ${DA_RULE_S}` }}>
            {[["81%", "opened", DA_POS], ["37%", "clicked", DA_AMBER]].map(([a, b, c]) => (
              <div key={b} style={{ textAlign: "center" }}>
                <DAMono size={14} color={c} style={{ fontWeight: 600 }}>{a}</DAMono>
                <div><DAMono size={9.5} color={DA_DIM}>{b.toUpperCase()}</DAMono></div>
              </div>
            ))}
          </div>
        </DACard>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: 14 }}>
        <DACard title="Activities logged" subtitle="in period · by type">
          <DABars rows={DA_ACTS.map(([l, v, c]) => [l, v, null, c])} fmt={v => v} />
        </DACard>
        <DACard title="Activity heat" subtitle="last 5 weeks · monday to sunday">
          <div style={{ display: "grid", gridTemplateColumns: "34px repeat(7,1fr)", gap: 4, alignItems: "center" }}>
            <span />
            {["M", "T", "W", "T", "F", "S", "S"].map((d, i) => <DAMono key={i} size={9.5} color={DA_DIM} style={{ textAlign: "center" }}>{d}</DAMono>)}
            {DA_HEAT.map((row, r) => (
              <React.Fragment key={r}>
                <DAMono size={9} color={DA_DIM}>W{30 + r}</DAMono>
                {row.map((v, c) => (
                  <span key={c} title={`${v} activities`} style={{
                    height: 22, borderRadius: 4, background: v === 0 ? DA_RULE_S : `${DA_FUCHSIA}${Math.min(255, 40 + v * 30).toString(16).padStart(2, "0")}`,
                    boxShadow: v > 4 ? `0 0 12px -2px ${DA_FUCHSIA}` : "none",
                  }} />
                ))}
              </React.Fragment>
            ))}
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 14, paddingTop: 12, borderTop: `1px solid ${DA_RULE_S}` }}>
            <DAMono size={10} color={DA_DIM}>QUIET</DAMono>
            {[1, 2, 3, 4, 5, 6].map(v => <span key={v} style={{ width: 16, height: 8, borderRadius: 2, background: `${DA_FUCHSIA}${(40 + v * 30).toString(16)}` }} />)}
            <DAMono size={10} color={DA_DIM}>BUSY</DAMono>
            <div style={{ flex: 1 }} />
            <DAMono size={10} color={DA_DIM}>ANY LOGGED ACTIVITY RESETS A DEAL'S ROTTING CLOCK</DAMono>
          </div>
        </DACard>
      </div>
    </div>
  );
}

function DAProduction() {
  const coverage = daLiveFloat(99.6, 0.1, 3000, 98.4, 100, 1);
  const ledgerTotal = DA_LEDGER.reduce((a, l) => a + l[1], 0);
  return (
    <div style={{ padding: 20, display: "grid", gap: 14 }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 14 }}>
        <DAKPI lbl="New accounts" value="9" delta="▲ 3" sublabel="created in period" color={DA_FUCHSIA} />
        <DAKPI lbl="Attribution coverage" value={`${coverage.toFixed(1)}%`} delta="▲ 1.4 pp" sublabel="agency bookings matched" spark={[92, 93, 95, 96, 97, 98, 98, 99, 99, 100, 100, 100]} gid="cov" color={DA_POS} />
        <DAKPI lbl="MICE won revenue" value="€94K" delta="▲ €18K" sublabel="won in period" color={DA_MAGENTA} />
        <DAKPI lbl="Commission cost" value="€130.9K" delta="▲ €12.4K" deltaColor={DA_AMBER} sublabel="accrued in period" color={DA_PINK} />
        <DAKPI lbl="Penalties collected" value="€0" sublabel="from cancelled groups" color={DA_HOT} />
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1.35fr 1fr", gap: 14 }}>
        <DAMatchFeed />
        <DACard title="Commission ledger" subtitle="one entry per reservation at check-out">
          <div style={{ display: "flex", height: 26, borderRadius: 6, overflow: "hidden", border: `1px solid ${DA_RULE_S}` }}>
            {DA_LEDGER.filter(l => l[1] > 0).map(([l, v, c]) => (
              <div key={l} style={{ width: `${(v / ledgerTotal) * 100}%`, background: `linear-gradient(180deg,${c},${c}99)`, boxShadow: `0 0 16px -6px ${c}`, display: "grid", placeItems: "center" }}>
                <DAMono size={9.5} color="#150d15" style={{ fontWeight: 700 }}>{daEur(v)}</DAMono>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 16, display: "grid", gap: 10 }}>
            {DA_LEDGER.map(([l, v, c]) => (
              <div key={l} style={{ display: "flex", alignItems: "center", gap: 9 }}>
                <span style={{ width: 8, height: 8, borderRadius: 2, background: c, boxShadow: `0 0 8px ${c}90` }} />
                <span style={{ flex: 1, fontSize: 12.5, color: DA_INK, fontFamily: DA_SANS }}>{l}</span>
                <DAMono size={11.5} color={c} style={{ fontWeight: 600 }}>{daEur(v)}</DAMono>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 14, paddingTop: 12, borderTop: `1px solid ${DA_RULE_S}` }}>
            <DAMono size={10.5} color={DA_DIM} style={{ lineHeight: 1.6 }}>
              Accrued → invoiced → settled, forward only. A cancelled reservation reverses its own entry automatically.
            </DAMono>
          </div>
        </DACard>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 14 }}>
        <DACard title="Top accounts" subtitle="attributed revenue in period · top 8">
          <DABars showRank rows={DA_TOP.map(([l, v, m], i) => [l, v, m, [DA_FUCHSIA, DA_HOT, DA_PINK, DA_MAGENTA, DA_ROSE, DA_F_DEEP, DA_PLUM, DA_PLUM][i]])} fmt={daEur} />
        </DACard>
        <DACard title="Room nights attributed" subtitle="last 12 months">
          <DAColumns data={DA_RN} height={226} color={DA_MAGENTA} fmt={v => v.toLocaleString()} accentFirst={10} />
        </DACard>
      </div>
      <DACard title="Why each booking matched" subtitle="four priorities · highest wins · ties never auto-link">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 14 }}>
          {[[...DA_RULES[0], 62], [...DA_RULES[1], 26], [...DA_RULES[2], 9], [...DA_RULES[3], 3]].map(([k, label, c, share]) => (
            <div key={k} style={{ border: `1px solid ${DA_RULE_S}`, borderRadius: 9, padding: "13px 14px", background: `linear-gradient(160deg, ${c}12, transparent)` }}>
              <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
                <span style={{ background: `${c}20`, border: `1px solid ${c}66`, color: c, borderRadius: 5, padding: "2px 6px", fontFamily: DA_MONO, fontSize: 9.5, fontWeight: 700 }}>{k}</span>
                <DAMono size={10} color={DA_DIM}>{k === "P4" ? "SUGGESTION" : "AUTO-LINK"}</DAMono>
              </div>
              <div style={{ fontFamily: DA_MONO, fontSize: 22, color: DA_INK, fontWeight: 500, marginTop: 9 }}>{share}%</div>
              <DAMono size={10.5} color={DA_MUTED} style={{ display: "block", marginTop: 2 }}>{label}</DAMono>
              <div style={{ height: 5, marginTop: 9, background: DA_RULE_S, borderRadius: 3, overflow: "hidden" }}>
                <div style={{ height: "100%", width: `${share}%`, background: c, boxShadow: `0 0 10px ${c}` }} />
              </div>
            </div>
          ))}
        </div>
      </DACard>
    </div>
  );
}

// ── section shell ──
function B2BAnalyticsSection() {
  const [tab, setTab] = daUseState("overview");
  const [range, setRange] = daUseState("12M");
  const tabs = [["overview", "Overview"], ["pipeline", "Pipeline"], ["team", "Team"], ["production", "Production"]];
  const Body = tab === "overview" ? DAOverview : tab === "pipeline" ? DAPipeline : tab === "team" ? DATeam : DAProduction;
  return (
    <section style={{ background: DA_BG, padding: "80px 24px 84px", color: DA_INK }}>
      <div style={{ maxWidth: 1100, margin: "0 auto 38px", textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 10, marginBottom: 16 }}>
          <span style={{ width: 16, height: 1.5, background: DA_FUCHSIA }} />
          <DAMono size={11} color={DA_FUCHSIA} style={{ letterSpacing: "0.22em", textTransform: "uppercase", fontWeight: 600 }}>05 · Analytics</DAMono>
          <span style={{ width: 16, height: 1.5, background: DA_FUCHSIA }} />
        </div>
        <h2 style={{ fontFamily: DA_SERIF, fontWeight: 400, fontSize: "clamp(28px, 3.3vw, 46px)", letterSpacing: "-0.028em", lineHeight: 1.06, margin: 0, color: "#fff" }}>
          Eighteen metrics, one query.{" "}
          <span style={{ fontStyle: "italic", color: DA_F_LIGHT, display: "block" }}>Including the ones a CRM without your bookings cannot compute.</span>
        </h2>
        <p style={{ fontSize: 15, color: DA_MUTED, lineHeight: 1.65, maxWidth: 760, margin: "20px auto 0" }}>
          Four views inside the pipeline page, pipeline health, forecast, team activity and real attributed production, filterable by period, pipeline and owner. Revenue, room nights, ADR and commission cost are not typed in by a
          sales rep: they are the hotel's own reservations, matched to the account that produced them, in the same database.
        </p>
      </div>

      <div style={{
        maxWidth: 1320, margin: "0 auto", background: DA_PANEL, borderRadius: 14, border: `1px solid ${DA_RULE}`,
        boxShadow: `0 30px 80px -30px rgba(0,0,0,0.7), 0 0 60px -20px ${DA_FUCHSIA}25`, overflow: "hidden", position: "relative",
      }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0 24px", borderBottom: `1px solid ${DA_RULE_S}`, background: `linear-gradient(180deg, ${DA_PANEL_2}, ${DA_PANEL})`, flexWrap: "wrap", gap: 10 }}>
          <div style={{ display: "flex" }}>
            {tabs.map(([id, label]) => (
              <button key={id} onClick={() => setTab(id)} style={{
                padding: "16px 18px", background: "transparent", border: "none", cursor: "pointer", position: "relative",
                fontFamily: DA_SANS, fontSize: 13.5, fontWeight: tab === id ? 600 : 500, letterSpacing: "-0.005em",
                color: tab === id ? DA_INK : DA_MUTED, transition: "color .2s ease",
              }}>
                {label}
                {tab === id && <span style={{ position: "absolute", left: 18, right: 18, bottom: -1, height: 2, background: DA_FUCHSIA, borderRadius: 1, boxShadow: `0 0 10px ${DA_FUCHSIA}` }} />}
              </button>
            ))}
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <div style={{ display: "flex", padding: 2, borderRadius: 999, background: DA_PANEL, border: `1px solid ${DA_RULE_S}` }}>
              {["7D", "30D", "90D", "12M"].map(r => (
                <button key={r} onClick={() => setRange(r)} style={{
                  padding: "5px 12px", borderRadius: 999, border: "none", cursor: "pointer", fontFamily: DA_MONO, fontSize: 11, fontWeight: 500,
                  background: range === r ? DA_FUCHSIA : "transparent", color: range === r ? "#fff" : DA_MUTED,
                  boxShadow: range === r ? `0 0 12px ${DA_FUCHSIA}80` : "none", transition: "all .18s ease",
                }}>{r}</button>
              ))}
            </div>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <span style={{ width: 7, height: 7, borderRadius: "50%", background: DA_POS, animation: "gm-dot-pulse 2s infinite" }} />
              <DAMono size={11} color={DA_POS}>Live</DAMono>
            </span>
          </div>
        </div>
        <style>{`
          .da-body{scrollbar-width:thin;scrollbar-color:${DA_F_DEEP}88 transparent}
          .da-body::-webkit-scrollbar{width:8px}
          .da-body::-webkit-scrollbar-track{background:transparent}
          .da-body::-webkit-scrollbar-thumb{background:${DA_F_DEEP}55;border-radius:4px;border:2px solid transparent;background-clip:padding-box}
          .da-body::-webkit-scrollbar-thumb:hover{background:${DA_FUCHSIA}aa;background-clip:padding-box}
        `}</style>
        <div key={tab} className="da-body" style={{ animation: "gm-fadein .3s ease", maxHeight: 1080, overflowY: "auto", overflowX: "hidden" }}>
          <Body />
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "12px 24px", background: DA_PANEL_2, borderTop: `1px solid ${DA_RULE_S}`, gap: 12, flexWrap: "wrap" }}>
          <div style={{ display: "flex", gap: 18, flexWrap: "wrap" }}>
            <DAMono size={10.5} color={DA_DIM}><span style={{ color: DA_FUCHSIA }}>●</span> snapshot · {range}</DAMono>
            <DAMono size={10.5} color={DA_DIM}><span style={{ color: DA_POS }}>●</span> matcher · every 10 min</DAMono>
            <DAMono size={10.5} color={DA_DIM}><span style={{ color: DA_PINK }}>●</span> 9 accounts · 2 pipelines</DAMono>
            <DAMono size={10.5} color={DA_DIM}><span style={{ color: DA_HOT }}>●</span> 4 attribution rules</DAMono>
          </div>
          <DAMono size={10.5} color={DA_DIM}>Export · CSV · PDF · Schedule report</DAMono>
        </div>
      </div>
    </section>
  );
}

window.B2BAnalyticsSection = B2BAnalyticsSection;