/* eslint-disable */
/* ============================================================
   projects-deepdive.jsx
   ------------------------------------------------------------
   Five per-project deep-dive sections, plus the OpenClaw / Hermes
   "agentic workforce" closer. Each has its own visual demo so the
   page reads as a tour, not a repeating template.

   Order on the page:
     03  Commander            (already in components.jsx)
     04  ReadyIQ              (consulting · dashboard demo)
     05  DMHub                (SaaS · WhatsApp chat mock)
     06  MyWiFi Networks      (hospitality · captive portal mock)
     07  Guest Networks       (data layer · sensor query terminal)
     08  OpenClaw + Hermes    (workforce-replacement closer)
   ============================================================ */

const Reveal = window.Reveal;
const AsciiBadge = window.AsciiBadge;
const IconGithub = window.IconGithub;

/* shared section head — keeps numbering consistent */
function SectionHead({ num, label, glyph = "diamond" }) {
  return (
    <div className="box-head">
      <AsciiBadge glyph={glyph} count={3} />
      <span>// {num} — {label}</span>
      <span className="rule" />
    </div>
  );
}

/* shared CTA row */
function VisitCTA({ href, label = "visit live site", note }) {
  return (
    <div className="row gap-12 mt-24">
      <a className="btn btn-primary" href={href} target="_blank" rel="noreferrer"
         style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
        ↗ {label}
      </a>
      {note && <span className="dim" style={{ fontSize: 12 }}>{note}</span>}
    </div>
  );
}

/* shared feature list */
function FeatureList({ items }) {
  return (
    <div className="feat-list mt-32">
      {items.map((f, i) => (
        <div className="feat-row" key={i}>
          <span className="glyph">{f.g}</span>
          <div>
            <h4>{f.t}</h4>
            <p>{f.d}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

/* ============================================================
   04 — ReadyIQ · AI consulting & training (dashboard demo)
   ============================================================ */
function ReadyIQ() {
  const features = [
    { g: "[01]", t: "AI Readiness Audit", d: "Where AI is leverage vs theatre." },
    { g: "[02]", t: "Operator Training", d: "Live cohorts for non-technical execs." },
    { g: "[03]", t: "Custom Deployment", d: "Working agents in your business in 30 days." },
    { g: "[04]", t: "Fractional CAIO", d: "Your AI counterpart, 1 day/week." }
  ];

  return (
    <section id="readyiq" data-section="readyiq" data-screen-label="04 ReadyIQ" className="section-pad"
      style={{ "--amber": "#7C3AED", "--amber-d": "#5b25c9" }}>
      <div className="container">
        <SectionHead num="04" label="readyiq · ai consulting" glyph="diamond" />

        <Reveal>
          <div className="cmd-grid">
            <div>
              <h2 className="h-section">
                ReadyIQ.<br />
                <span className="dim2" style={{ fontWeight: 600 }}>{">"} AI deployment for non-technical CEOs.</span>
              </h2>
              <p className="lede mt-20" style={{ maxWidth: "48ch" }}>
                Not another strategy deck. Working agents shipped, your team trained, in 30 days.
              </p>

              <VisitCTA href="https://readyiq.ai" label="readyiq.ai" note="· 40+ orgs · book a call →" />

              <FeatureList items={features} />
            </div>

            <Reveal delay={120}>
              <ReadyIQDashboard />
            </Reveal>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* small dashboard mock — KPI tiles + horizontal bars */
function ReadyIQDashboard() {
  return (
    <div className="win" style={{ background: "var(--bg-1)" }}>
      <div className="win-title">
        <div className="lights"><span className="r" /><span className="a" /><span className="g" /></div>
        <span>readyiq · client portal</span>
        <span className="meta">Q2 · 2026</span>
      </div>
      <div style={{ padding: 18 }}>
        {/* KPI row */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--line)", border: "1px solid var(--line-strong)" }}>
          {[
            { k: "AGENTS LIVE",     v: "12",     d: "across 4 depts" },
            { k: "HOURS / WK SAVED", v: "184",    d: "avg per client" },
            { k: "READINESS SCORE",  v: "8.6",    d: "/ 10 · +1.4 mom" }
          ].map((kpi, i) => (
            <div key={i} style={{ background: "var(--bg-1)", padding: "14px 14px 12px" }}>
              <div style={{ fontSize: 9, color: "var(--fg-4)", letterSpacing: "0.22em", textTransform: "uppercase" }}>{kpi.k}</div>
              <div style={{ fontFamily: "var(--mono)", fontWeight: 700, fontSize: 22, color: "var(--amber)", marginTop: 4, letterSpacing: "-0.04em" }}>{kpi.v}</div>
              <div style={{ fontSize: 10, color: "var(--fg-3)", marginTop: 2 }}>{kpi.d}</div>
            </div>
          ))}
        </div>

        {/* readiness pillars */}
        <div style={{ marginTop: 18, fontSize: 10, color: "var(--fg-4)", letterSpacing: "0.22em", textTransform: "uppercase", marginBottom: 10 }}>
          ── readiness pillars ───────────────────
        </div>
        {[
          { label: "Data hygiene",     pct: 92, status: "ok" },
          { label: "Tooling parity",   pct: 81, status: "ok" },
          { label: "Workflow clarity", pct: 74, status: "ok" },
          { label: "Eval discipline",  pct: 56, status: "warn" },
          { label: "Org velocity",     pct: 38, status: "fix" }
        ].map((row, i) => {
          const c = row.status === "ok" ? "var(--green)" : row.status === "warn" ? "var(--amber)" : "var(--red)";
          return (
            <div key={i} style={{ display: "grid", gridTemplateColumns: "120px 1fr 60px 40px", gap: 10, alignItems: "center", padding: "5px 0", fontSize: 11 }}>
              <span style={{ color: "var(--fg-2)" }}>{row.label}</span>
              <div style={{ height: 8, background: "var(--bg-3)", border: "1px solid var(--line)", position: "relative" }}>
                <div style={{ position: "absolute", inset: 0, width: row.pct + "%", background: c, opacity: 0.85 }} />
              </div>
              <span style={{ fontFamily: "var(--mono)", color: c, textAlign: "right" }}>{row.pct}%</span>
              <span style={{ fontSize: 9, color: c, letterSpacing: "0.18em", textTransform: "uppercase", textAlign: "right" }}>{row.status}</span>
            </div>
          );
        })}

        <div style={{ marginTop: 14, padding: "10px 0 0", borderTop: "1px dashed var(--line)", display: "flex", justifyContent: "space-between", fontSize: 10, color: "var(--fg-4)", letterSpacing: "0.18em", textTransform: "uppercase" }}>
          <span>▸ next milestone · evals workshop</span>
          <span style={{ color: "var(--amber)" }}>05.18 →</span>
        </div>
      </div>
    </div>
  );
}


/* ============================================================
   05 — DMHub · WhatsApp-first SaaS (chat mock)
   ============================================================ */
function DMHub() {
  const features = [
    { g: "[01]", t: "WhatsApp-First", d: "SMS, IG, Messenger as fallbacks." },
    { g: "[02]", t: "AI Personality", d: "Sounds like your best front-desk hire." },
    { g: "[03]", t: "Voice + Booking", d: "Calls answered, transcribed, booked." },
    { g: "[04]", t: "SMB-Native Pricing", d: "$49/mo flat. No per-seat gotchas." }
  ];

  return (
    <section id="dmhub" data-section="dmhub" data-screen-label="05 DMHub" className="section-pad"
      style={{ "--amber": "#00DC82", "--amber-d": "#00a563" }}>
      <div className="container">
        <SectionHead num="05" label="dmhub · whatsapp ai for smbs" glyph="block" />

        <Reveal>
          <div className="cmd-grid">
            <div>
              <h2 className="h-section">
                DMHub.<br />
                <span className="dim2" style={{ fontWeight: 600 }}>{">"} the AI front desk built for WhatsApp.</span>
              </h2>
              <p className="lede mt-20" style={{ maxWidth: "48ch" }}>
                Books, confirms, recovers — on WhatsApp, 24/7. The AI front desk owner-operators actually trust.
              </p>

              <VisitCTA href="https://dmhub.ai" label="dmhub.ai" note="· $49/mo · start free →" />

              <FeatureList items={features} />
            </div>

            <Reveal delay={120}>
              <DMHubChat />
            </Reveal>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* WhatsApp-style chat mock — green bubbles + agent typing */
function DMHubChat() {
  const messages = [
    { who: "them", t: "20:42", body: "Hey do you have any tables for 4 tonight at 8?" },
    { who: "ai",   t: "20:42", body: "Hi! Yes — one 4-top open at 8:15. Want me to hold it?", tag: "Aida · DMHub" },
    { who: "them", t: "20:43", body: "Yes please. Anniversary, can we do something nice?" },
    { who: "ai",   t: "20:43", body: "Booked under Sarah · 8:15 · 4 guests. I've added a note for the kitchen and prepped a complimentary dessert plate. 🎉", tag: "Aida · DMHub" },
    { who: "them", t: "20:44", body: "You're a lifesaver" }
  ];
  return (
    <div className="win" style={{ background: "var(--bg-1)" }}>
      <div className="win-title">
        <div className="lights"><span className="r" /><span className="a" /><span className="g" /></div>
        <span>dmhub · live thread · +1 (305) 555-0142</span>
        <span className="meta">RES · 0114</span>
      </div>
      <div style={{ padding: 18, display: "flex", flexDirection: "column", gap: 10, background: "var(--bg-2)" }}>
        {messages.map((m, i) => (
          <div key={i} style={{
            alignSelf: m.who === "them" ? "flex-start" : "flex-end",
            maxWidth: "78%",
            background: m.who === "them" ? "var(--bg-3)" : "color-mix(in oklch, var(--green) 22%, var(--bg-3))",
            border: "1px solid " + (m.who === "them" ? "var(--line)" : "color-mix(in oklch, var(--green) 30%, var(--line))"),
            padding: "8px 12px",
            fontSize: 12.5, lineHeight: 1.45, color: "var(--fg)",
            position: "relative"
          }}>
            {m.tag && (
              <div style={{ fontSize: 9, color: "var(--green)", letterSpacing: "0.18em", textTransform: "uppercase", marginBottom: 4 }}>
                ◆ {m.tag}
              </div>
            )}
            <div>{m.body}</div>
            <div style={{ fontSize: 9, color: "var(--fg-4)", marginTop: 4, textAlign: m.who === "them" ? "left" : "right", letterSpacing: "0.05em" }}>
              {m.t}{m.who === "ai" ? " · ✓✓ delivered" : ""}
            </div>
          </div>
        ))}

        {/* typing indicator */}
        <div style={{
          alignSelf: "flex-start",
          background: "var(--bg-3)", border: "1px solid var(--line)",
          padding: "6px 12px",
          fontFamily: "var(--mono)", fontSize: 11, color: "var(--fg-3)",
          display: "inline-flex", alignItems: "center", gap: 6
        }}>
          <span>they're typing</span>
          <span className="blink">●●●</span>
        </div>
      </div>
      <div className="win-foot" style={{ justifyContent: "space-between" }}>
        <span>▸ ai handled · escalate at confidence &lt; 0.6</span>
        <span style={{ color: "var(--green)" }}>0.94 confidence</span>
      </div>
    </div>
  );
}


/* ============================================================
   06 — MyWiFi Networks · global hospitality (captive portal)
   ============================================================ */
function MyWiFi() {
  const features = [
    { g: "[01]", t: "Global Reseller Network", d: "40+ countries since 2010." },
    { g: "[02]", t: "Captive Portal Engine", d: "Branded splash, social login, vouchers." },
    { g: "[03]", t: "Marketing Layer", d: "Email + SMS + WhatsApp re-engagement." },
    { g: "[04]", t: "Hardware-Agnostic", d: "Cisco, Aruba, UniFi, Ruckus, MikroTik." }
  ];

  return (
    <section id="mywifi" data-section="mywifi" data-screen-label="06 MyWiFi Networks" className="section-pad"
      style={{ "--amber": "#0096FF", "--amber-d": "#0070cc" }}>
      <div className="container">
        <SectionHead num="06" label="mywifi networks · hospitality wifi marketing" glyph="bracket" />

        <Reveal>
          <div className="cmd-grid">
            <div>
              <h2 className="h-section">
                MyWiFi Networks.<br />
                <span className="dim2" style={{ fontWeight: 600 }}>{">"} white-label WiFi marketing platform.</span>
              </h2>
              <p className="lede mt-20" style={{ maxWidth: "48ch" }}>
                Hospitality WiFi marketing in 40+ countries. ROI from week one.
              </p>

              <VisitCTA href="https://mywifinetworks.com" label="mywifinetworks.com" note="· become a reseller →" />

              <FeatureList items={features} />
            </div>

            <Reveal delay={120}>
              <CaptivePortal />
            </Reveal>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* captive-portal "splash" mock — venue brand, social login, fine print */
function CaptivePortal() {
  return (
    <div className="win" style={{ background: "var(--bg-1)" }}>
      <div className="win-title">
        <div className="lights"><span className="r" /><span className="a" /><span className="g" /></div>
        <span>guest device · splash.hotelsantorini.com</span>
        <span className="meta">202 OK</span>
      </div>
      <div style={{
        background: "linear-gradient(160deg, color-mix(in oklch, var(--amber) 12%, var(--bg-2)) 0%, var(--bg-2) 70%)",
        padding: "28px 22px",
        position: "relative",
        minHeight: 320
      }}>
        {/* venue brand */}
        <div style={{ fontSize: 10, color: "var(--fg-4)", letterSpacing: "0.28em", textTransform: "uppercase" }}>
          ── powered by mywifi ───────────
        </div>
        <div style={{ marginTop: 14, fontFamily: "var(--mono)", fontWeight: 700, fontSize: 22, letterSpacing: "-0.03em", color: "var(--fg)" }}>
          Hotel Santorini
        </div>
        <div style={{ fontSize: 11, color: "var(--fg-3)", marginTop: 4 }}>
          γ · Santorini, Greece · est. 1974
        </div>

        <div style={{ marginTop: 22, padding: "14px 14px 12px", border: "1px solid var(--line-strong)", background: "var(--bg-1)" }}>
          <div style={{ fontSize: 10, color: "var(--amber)", letterSpacing: "0.22em", textTransform: "uppercase", marginBottom: 10 }}>
            ▸ free wifi · 60 minutes
          </div>
          <div style={{ display: "grid", gap: 8 }}>
            {["Continue with Email", "Continue with Google", "Continue with WhatsApp", "Voucher code"].map((opt, i) => (
              <div key={i} style={{
                padding: "10px 14px",
                border: "1px solid " + (i === 0 ? "var(--amber)" : "var(--line)"),
                background: i === 0 ? "color-mix(in oklch, var(--amber) 8%, transparent)" : "transparent",
                fontSize: 12, color: i === 0 ? "var(--amber)" : "var(--fg-2)",
                display: "flex", justifyContent: "space-between", alignItems: "center"
              }}>
                <span>{opt}</span>
                <span style={{ color: "var(--fg-4)" }}>→</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 10, fontSize: 9, color: "var(--fg-4)", letterSpacing: "0.05em" }}>
            By connecting you accept the terms and the venue's marketing list. GDPR-compliant.
          </div>
        </div>

        {/* metric strip */}
        <div style={{ marginTop: 18, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, fontSize: 10, color: "var(--fg-3)" }}>
          {[
            { k: "DEVICES TODAY", v: "284" },
            { k: "RETURN RATE",   v: "62%" },
            { k: "OPT-INS",       v: "71%" }
          ].map((m, i) => (
            <div key={i} style={{ border: "1px solid var(--line)", padding: "8px 10px", background: "var(--bg-1)" }}>
              <div style={{ fontSize: 9, color: "var(--fg-4)", letterSpacing: "0.2em", textTransform: "uppercase" }}>{m.k}</div>
              <div style={{ fontFamily: "var(--mono)", color: "var(--amber)", fontWeight: 700, fontSize: 16 }}>{m.v}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}


/* ============================================================
   07 — Guest Networks · physical-space data layer (sensor query)
   ============================================================ */
function GuestNetworks() {
  const features = [
    { g: "[01]", t: "Vendor-Agnostic Ingest", d: "APs, cams, beacons → one event stream." },
    { g: "[02]", t: "Query in English", d: "AI agents translate to time-bucketed SQL." },
    { g: "[03]", t: "Real Metrics", d: "Footfall, dwell, return rate. Not page views." },
    { g: "[04]", t: "Privacy-First", d: "On-prem. Aggregates only. GDPR-ready." }
  ];

  return (
    <section id="guestnetworks" data-section="guestnetworks" data-screen-label="07 Guest Networks" className="section-pad"
      style={{ "--amber": "#FF1E56", "--amber-d": "#cc0033" }}>
      <div className="container">
        <SectionHead num="07" label="guest networks · physical-space data layer" glyph="pixel" />

        <Reveal>
          <div className="cmd-grid">
            <div>
              <h2 className="h-section">
                Guest Networks.<br />
                <span className="dim2" style={{ fontWeight: 600 }}>{">"} the data layer for physical spaces.</span>
              </h2>
              <p className="lede mt-20" style={{ maxWidth: "48ch" }}>
                Every device in your venue, one queryable surface. Ask in English, get answers.
              </p>

              <VisitCTA href="https://guestnetworks.com" label="guestnetworks.com" note="· enterprise / venue ops" />

              <FeatureList items={features} />
            </div>

            <Reveal delay={120}>
              <SensorQuery />
            </Reveal>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* sensor-query "ask in english" terminal — query → bar chart */
function SensorQuery() {
  const hours = [
    { h: "11", v: 18 }, { h: "12", v: 42 }, { h: "13", v: 56 },
    { h: "14", v: 38 }, { h: "15", v: 24 }, { h: "16", v: 31 },
    { h: "17", v: 49 }, { h: "18", v: 78 }, { h: "19", v: 92 },
    { h: "20", v: 88 }, { h: "21", v: 64 }, { h: "22", v: 22 }
  ];
  const max = 100;
  return (
    <div className="terminal" style={{ background: "#08090a", border: "1px solid var(--line-strong)" }}>
      <div className="win-title">
        <div className="lights"><span className="r" /><span className="a" /><span className="g" /></div>
        <span>guestnet · query console</span>
        <span className="meta">conn · westfield-mall-01</span>
      </div>
      <div className="body" style={{ padding: 18, fontFamily: "var(--mono)", fontSize: 12.5, lineHeight: 1.65, color: "var(--fg-2)" }}>
        <div><span className="term-prompt">guestnet</span> <span className="term-amber">›</span> what was footfall yesterday by hour, just main entrance</div>
        <div className="dim" style={{ fontSize: 11, marginTop: 4 }}>↻ resolving sensors · 12 nodes · range 11:00–22:00</div>
        <div><span className="term-ok">✓</span> <span className="dim">ap.main</span> · 1 ap</div>
        <div><span className="term-ok">✓</span> <span className="dim">cam.entry</span> · 2 cams</div>
        <div><span className="term-ok">✓</span> <span className="dim">beacon.foyer</span> · 4 ble</div>

        <div style={{ marginTop: 14, fontSize: 10, color: "var(--fg-4)", letterSpacing: "0.22em", textTransform: "uppercase" }}>
          ── unique devices · per hour ───────────
        </div>

        {/* bar chart */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 4, alignItems: "end", height: 110, marginTop: 10 }}>
          {hours.map((b, i) => {
            const peak = b.v >= 80;
            return (
              <div key={i} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4 }}>
                <div style={{
                  width: "100%",
                  height: (b.v / max * 100) + "%",
                  background: peak ? "var(--amber)" : "color-mix(in oklch, var(--amber) 45%, var(--bg-3))",
                  border: "1px solid " + (peak ? "var(--amber)" : "var(--line-strong)"),
                  boxShadow: peak ? "0 0 12px color-mix(in oklch, var(--amber) 35%, transparent)" : "none"
                }} />
                <div style={{ fontSize: 9, color: peak ? "var(--amber)" : "var(--fg-4)" }}>{b.h}</div>
              </div>
            );
          })}
        </div>

        <div style={{ marginTop: 14, padding: "10px 0 0", borderTop: "1px dashed var(--line)", fontSize: 11, color: "var(--fg-3)" }}>
          <span className="amber">▸</span> peak <span className="amber">19:00 · 92 devices</span> · dwell median 11.4 min ·
          <span style={{ color: "var(--green)" }}> +18% vs last tue</span>
        </div>
        <div className="mt-12"><span className="term-prompt">guestnet</span> <span className="term-amber">›</span><span className="cursor" /></div>
      </div>
    </div>
  );
}


/* ============================================================
   08 — OpenClaw + Hermes · agentic workforce (closer)
   ============================================================ */
function OpenClawHermes() {
  const features = [
    { g: "[01]", t: "Replace, Don't Augment", d: "Agents do the job, end-to-end. Audited." },
    { g: "[02]", t: "Multi-Channel", d: "Email, Slack, WhatsApp, voice, tickets." },
    { g: "[03]", t: "Hermes Memory", d: "1.1 GB long-context. Never forgets." },
    { g: "[04]", t: "AI Readiness Audit", d: "Per agent, all-in. Beats any FTE." }
  ];

  return (
    <section id="openclaw" data-section="openclaw" data-screen-label="08 OpenClaw + Hermes" className="section-pad"
      style={{ "--amber": "#F5A623", "--amber-d": "#c98010" }}>
      <div className="container">
        <SectionHead num="08" label="openclaw + hermes · agentic workforces" glyph="diamond" />

        <Reveal>
          <div className="cmd-grid">
            <div>
              <h2 className="h-section">
                OpenClaw + Hermes.<br />
                <span className="dim2" style={{ fontWeight: 600 }}>{">"} when an agents ARE the entire workforce.</span>
              </h2>
              <p className="lede mt-20" style={{ maxWidth: "48ch" }}>
                The stack I run my own companies on — now packaged for yours. Costs in dollars/day, not salaries/month.
              </p>

              <VisitCTA href="https://github.com/KevinZai/openclaw-automation" label="github · openclaw-automation" note="· book a workforce audit →" />

              <FeatureList items={features} />
            </div>

            <Reveal delay={120}>
              <AgentTopology />
            </Reveal>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* agent topology + cost summary — node graph in ASCII */
function AgentTopology() {
  return (
    <div className="win" style={{ background: "var(--bg-1)" }}>
      <div className="win-title">
        <div className="lights"><span className="r" /><span className="a" /><span className="g" /></div>
        <span>openclaw · live cluster</span>
        <span className="meta">38 / 38 ok</span>
      </div>
      <div style={{ padding: 18 }}>
        {/* topology ASCII */}
        <pre style={{ fontFamily: "var(--mono)", fontSize: 11, lineHeight: 1.4, color: "var(--fg-2)", margin: 0, whiteSpace: "pre" }}>
{`           ┌──────────────┐
           │  HERMES · LCM│  ← 1.1 GB long-context
           │  ████████░░░░│     persistent memory
           └──────┬───────┘
                  │
       ┌──────────┼──────────┐
       ▼          ▼          ▼
   ┌───────┐ ┌───────┐ ┌───────┐
   │ SUPV  │ │ SUPV  │ │ SUPV  │   peer-triage layer
   │ ◆◆◆   │ │ ◆◆◆   │ │ ◆◆◆   │   (3 supervisors)
   └───┬───┘ └───┬───┘ └───┬───┘
       ▼         ▼         ▼
   ╔═══════════════════════════╗
   ║ AGENTS · ACTIVE           ║
   ║ ████████████████████████  ║
   ║ inbox · slack · wa · voice║
   ║ tickets · ops             ║
   ╚═══════════════════════════╝`}
        </pre>

        {/* cost panel */}
        <div style={{ marginTop: 16, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "var(--line)", border: "1px solid var(--line-strong)" }}>
          {[
            { k: "AGENTS",   v: "38",      d: "live · 6 channels" },
            { k: "UPTIME",   v: "99.97%",  d: "30d rolling" },
            { k: "TOK/DAY",  v: "2.4M",    d: "in · out aggregate" },
            { k: "VS · FTE", v: "−96%",    d: "monthly burn" }
          ].map((kpi, i) => (
            <div key={i} style={{ background: "var(--bg-1)", padding: "12px 12px 10px" }}>
              <div style={{ fontSize: 9, color: "var(--fg-4)", letterSpacing: "0.2em", textTransform: "uppercase" }}>{kpi.k}</div>
              <div style={{ fontFamily: "var(--mono)", fontWeight: 700, fontSize: 18, color: i === 3 ? "var(--green)" : "var(--amber)", marginTop: 2, letterSpacing: "-0.04em" }}>{kpi.v}</div>
              <div style={{ fontSize: 9, color: "var(--fg-3)", marginTop: 2 }}>{kpi.d}</div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 12, padding: "10px 0 0", borderTop: "1px dashed var(--line)", display: "flex", justifyContent: "space-between", fontSize: 10, color: "var(--fg-4)", letterSpacing: "0.18em", textTransform: "uppercase" }}>
          <span><span className="amber">▸</span> last spawn · 14:22 · agent-39 (trial)</span>
          <span style={{ color: "var(--green)" }}>healthy</span>
        </div>
      </div>
    </div>
  );
}


/* expose to window so app.jsx can mount them */
Object.assign(window, {
  ReadyIQ,
  DMHub,
  MyWiFi,
  GuestNetworks,
  OpenClawHermes
});