/* eslint-disable */

const { useEffect, useRef, useState, useMemo } = React;

/* eslint-disable */
/* ---------- ASCII deco glyphs (decorative section accents) ---------- */
const ASCII_GLYPHS = {
  diamond: "◆",
  block:   "▣",
  dots:    "▢",
  arrow:   "▸",
  bracket: "❯",
  square:  "□",
  pixel:   "▮",
  hash:    "▦",
};
function AsciiBadge({ glyph = "diamond", count = 3, color = "var(--amber)" }) {
  const g = ASCII_GLYPHS[glyph] || glyph;
  return (
    <span aria-hidden="true" style={{ color, letterSpacing: "0.15em", fontFamily: "var(--mono)", marginRight: 8 }}>
      {Array.from({ length: count }).map((_, i) => g).join("")}
    </span>
  );
}
function AsciiRule({ char = "─", color = "var(--line)", glow = false }) {
  /* full-width ascii horizontal rule */
  return (
    <div style={{
      fontFamily: "var(--mono)",
      fontSize: 11,
      color,
      whiteSpace: "nowrap",
      overflow: "hidden",
      letterSpacing: 0,
      textShadow: glow ? "0 0 6px " + color : "none",
      userSelect: "none",
      lineHeight: 1
    }}>
      {char.repeat(220)}
    </div>
  );
}
window.AsciiBadge = AsciiBadge;
window.AsciiRule = AsciiRule;

/* ---------- ASCII cover generator for writing posts ---------- */
function AsciiCover({ title = "untitled", tag = "POST", seed = 1, art = null }) {
  const cols = 40;

  // If concrete ASCII art is provided (a flowchart, diagram, etc.), render
  // that inside the cover frame instead of generating noise — same chrome,
  // real content. Lines are padded/truncated to the frame width and a few
  // "scanline" filler rows are appended to keep card heights consistent.
  if (art && typeof art === "string") {
    const raw = art.replace(/\t/g, "  ").split("\n");
    const target = 14; // rows in the cover, matches the noise variant
    const padded = [];
    for (let i = 0; i < target; i++) {
      const src = raw[i] || "";
      // truncate or right-pad to cols-2 (frame eats 2 chars)
      const inner = src.length > cols - 2 ? src.slice(0, cols - 2) : src + " ".repeat(cols - 2 - src.length);
      padded.push(inner);
    }
    return (
      <pre style={{
        margin: 0,
        fontFamily: "var(--mono)",
        fontSize: 9,
        lineHeight: 1.15,
        color: "var(--fg-2)",
        whiteSpace: "pre",
        letterSpacing: "0.04em"
      }}>
        <span style={{ color: "var(--amber)" }}>{`┌${"─".repeat(cols - 2)}┐`}</span>
        {"\n"}
        {padded.map((l, i) => (
          <span key={i}>
            <span style={{ color: "var(--amber)" }}>│</span>
            <span style={{ color: i < 2 ? "var(--fg)" : "var(--fg-2)" }}>{l}</span>
            <span style={{ color: "var(--amber)" }}>│</span>
            {"\n"}
          </span>
        ))}
        <span style={{ color: "var(--amber)" }}>{`└${"─".repeat(cols - 5)}<${tag.padEnd(2).slice(0, 2).toUpperCase()}┘`}</span>
      </pre>
    );
  }

  /* deterministic-ish noise pattern based on seed (fallback) */
  const rows = 14;
  const chars = ".·:-=+*x#@▓░▒█";
  const lines = [];
  for (let y = 0; y < rows; y++) {
    let line = "";
    for (let x = 0; x < cols; x++) {
      /* pseudo-noise: distance from a moving sine wave */
      const cx = cols / 2 + Math.sin(seed * 0.7 + y * 0.3) * 12;
      const cy = rows / 2 + Math.cos(seed * 0.9 + x * 0.2) * 4;
      const d = Math.hypot(x - cx, y - cy);
      const n = Math.floor((Math.sin(seed + x * 0.4) + Math.cos(seed + y * 0.5)) * 4 + d * 0.5);
      const idx = ((n % chars.length) + chars.length) % chars.length;
      line += chars[idx];
    }
    lines.push(line);
  }
  return (
    <pre style={{
      margin: 0,
      fontFamily: "var(--mono)",
      fontSize: 9,
      lineHeight: 1.1,
      color: "var(--fg-3)",
      whiteSpace: "pre",
      letterSpacing: "0.04em"
    }}>
      <span style={{ color: "var(--amber)" }}>{`┌${"─".repeat(cols - 2)}┐`}</span>
      {"\n"}
      {lines.map((l, i) => (
        <span key={i}>
          <span style={{ color: "var(--amber)" }}>│</span>
          <span style={{ color: i < 3 ? "var(--fg)" : "var(--fg-3)" }}>{l.slice(1, -1)}</span>
          <span style={{ color: "var(--amber)" }}>│</span>
          {"\n"}
        </span>
      ))}
      <span style={{ color: "var(--amber)" }}>{`└${"─".repeat(cols - 5)}<${tag.padEnd(2).slice(0, 2).toUpperCase()}┘`}</span>
    </pre>
  );
}
window.AsciiCover = AsciiCover;

/* ---------- Reveal-on-scroll ---------- */
function Reveal({ children, delay = 0, as: Tag = "div", className = "", ...rest }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    // If already in viewport on mount, show immediately
    const r = ref.current.getBoundingClientRect();
    if (r.top < window.innerHeight && r.bottom > 0) {
      setTimeout(() => setShown(true), delay);
      return;
    }
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          setTimeout(() => setShown(true), delay);
          obs.disconnect();
        }
      });
    }, { threshold: 0.05, rootMargin: "0px 0px -40px 0px" });
    obs.observe(ref.current);
    // Safety net: ensure visible after 1.5s no matter what
    const fallback = setTimeout(() => setShown(true), 1500 + delay);
    return () => {obs.disconnect();clearTimeout(fallback);};
  }, [delay]);
  return (
    <Tag ref={ref} className={`reveal ${shown ? "in" : ""} ${className}`} {...rest}>
      {children}
    </Tag>);

}

/* ---------- Counter ---------- */
function CountUp({ to, duration = 1200, suffix = "" }) {
  const [val, setVal] = useState(0);
  const ref = useRef(null);
  const started = useRef(false);
  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          const start = performance.now();
          const tick = (now) => {
            const t = Math.min(1, (now - start) / duration);
            const eased = 1 - Math.pow(1 - t, 3);
            setVal(Math.round(eased * to));
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, [to, duration]);
  return <span ref={ref}>{val.toLocaleString()}{suffix}</span>;
}

/* ---------- Typewriter ---------- */
function Typewriter({ phrases }) {
  const [idx, setIdx] = useState(0);
  const [text, setText] = useState("");
  const [phase, setPhase] = useState("typing");
  useEffect(() => {
    let t;
    const cur = phrases[idx];
    if (phase === "typing") {
      if (text.length < cur.length) t = setTimeout(() => setText(cur.slice(0, text.length + 1)), 50);else
      t = setTimeout(() => setPhase("hold"), 1700);
    } else if (phase === "hold") t = setTimeout(() => setPhase("deleting"), 1200);else
    if (phase === "deleting") {
      if (text.length > 0) t = setTimeout(() => setText(text.slice(0, -1)), 26);else
      {setPhase("typing");setIdx((i) => (i + 1) % phrases.length);}
    }
    return () => clearTimeout(t);
  }, [text, phase, idx, phrases]);
  return <span className="amber">{text}<span className="cursor" /></span>;
}

/* ---------- Heatmap (GitHub-contribution style) ----------
   `pattern` = string of digits 0-4 (one per cell, row-major over 7 rows × cols).
   `cols`    = number of columns; `rows` defaults to 7. If pattern shorter, repeats.
   `seed`    = if pattern omitted, generate a believable activity pattern. */
function Heatmap({ pattern, cols = 28, rows = 7, count, size = "", seed = 0, className = "", style, alive = true }) {
  // count mode: GitHub-contribution style. Every tile is a FIXED-SIZE grid
  // (7 rows × 40 cols = 280 cells). The first `count` cells are lit (with
  // varied intensity for the "alive" feel); the rest stay dim (l0). All 4
  // stats render at identical tile dimensions — only the fill density
  // changes. 5 lit = sparse scatter; 280 lit = full board.
  const COUNT_GRID = { rows: 7, cols: 40, total: 280 };
  const dims = useMemo(() => {
    if (count == null) return { c: cols, r: rows };
    return { c: COUNT_GRID.cols, r: COUNT_GRID.rows };
  }, [count, cols, rows]);
  const total = count != null ? COUNT_GRID.total : dims.c * dims.r;
  const baseCells = useMemo(() => {
    const out = [];
    if (count != null) {
      const lit = Math.min(COUNT_GRID.total, Math.max(0, count | 0));
      // Pick `lit` random cell positions to light up so the pattern looks
      // organic (not a left-anchored block). Use a deterministic PRNG so the
      // pattern is stable per stat across re-renders.
      let s = (lit + 7) * 9301 + 49297;
      const rand = () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
      // Fisher-Yates partial shuffle of indices 0..total-1, take first `lit`.
      const idx = new Array(COUNT_GRID.total);
      for (let i = 0; i < COUNT_GRID.total; i++) idx[i] = i;
      for (let i = 0; i < lit; i++) {
        const j = i + Math.floor(rand() * (COUNT_GRID.total - i));
        const tmp = idx[i]; idx[i] = idx[j]; idx[j] = tmp;
      }
      const litSet = new Set(idx.slice(0, lit));
      for (let i = 0; i < COUNT_GRID.total; i++) {
        if (litSet.has(i)) {
          const r = rand();
          out.push(r > 0.65 ? 4 : r > 0.35 ? 3 : 2);
        } else {
          out.push(0);
        }
      }
      return out;
    }
    if (pattern && pattern.length) {
      const clean = pattern.replace(/\s/g, "");
      for (let i = 0; i < total; i++) {
        out.push(parseInt(clean[i % clean.length], 10) || 0);
      }
      return out;
    }
    let s = seed * 9301 + 49297;
    const rand = () => {s = (s * 9301 + 49297) % 233280;return s / 233280;};
    for (let i = 0; i < total; i++) {
      const r = rand();
      out.push(r > 0.85 ? 4 : r > 0.65 ? 3 : r > 0.4 ? 2 : r > 0.18 ? 1 : 0);
    }
    return out;
  }, [pattern, dims.c, dims.r, total, count, seed]);

  const [cells, setCells] = useState(baseCells);
  useEffect(() => { setCells(baseCells); }, [baseCells]);

  // "Alive": every ~700-1100ms, pick 1-3 cells and bump them. Then decay.
  // Bump pool is bounded — in count mode only the first `count` cells animate
  // (so 280-cell heatmaps don't waste cycles on the dim trailing slots).
  useEffect(() => {
    if (!alive) return;
    let cancel = false;
    const pool = count != null ? Math.min(count, baseCells.length) : baseCells.length;
    if (pool < 1) return;
    const tick = () => {
      if (cancel) return;
      setCells((prev) => {
        const next = prev.slice();
        const bumps = 1 + Math.floor(Math.random() * 3);
        for (let b = 0; b < bumps; b++) {
          const i = Math.floor(Math.random() * pool);
          const base = baseCells[i] || 0;
          if (Math.random() > 0.4) {
            next[i] = Math.min(4, Math.max(next[i], base) + 1);
          } else if (next[i] > 0) {
            next[i] = Math.max(0, next[i] - 1);
          }
        }
        return next;
      });
      const wait = 600 + Math.random() * 700;
      setTimeout(tick, wait);
    };
    const id = setTimeout(tick, 400 + Math.random() * 600);
    return () => { cancel = true; clearTimeout(id); };
  }, [alive, baseCells, count]);

  return (
    <div
      className={`heatmap ${size} ${alive ? "alive" : ""} ${count != null ? "count-mode" : ""} ${className}`}
      style={count != null ? {
        // CSS handles layout in count-mode (see .heatmap.count-mode rule)
        ...style
      } : {
        gridTemplateRows: `repeat(${dims.r}, 1fr)`,
        ...style
      }}
      aria-hidden="true">
      {cells.map((lvl, i) =>
      <span key={i} className={`cell l${lvl}`} />
      )}
    </div>);

}

/* ---------- ASCII portrait of Kevin (charset rendered from headshot) ---------- */
const KEVIN_ASCII = `                                                                
                                                                
                                                                
                               .. ...                           
                        .. ...,::,,,. ..                        
                       . ,-==+++**+++=;,,;                      
                       ,---=+***xXXXxx*+;.                      
                    . ,;;;=+**xxX#@##Xxx*=,                     
                   :,:-:,;=+xxXX#@@@@@#Xx*=:,                   
                   ;,+=,,;=+xxxX#@#@@@@Xxx*;:                   
                  .,+x+,,;=*xXXXX##@@@#XXx*=:.                  
                  :;=X+,:;=*X##@#@#@@@##Xx*;,                   
                   ,+Xx:;==+*xX######@@##X*;                    
                   ,+#+.,:...:-+xx*+=-+xxx*-.                   
                 .,,+*..   ,   -##-,. ;;==++.;.                 
                  ,:x=...:=+-, -##X=;:;=;+X*;+,                 
                  :,X;;+****+:.-####XxxX##X*-*:                 
                  , =*-+XXX*-,,=#######@@#X*=+                  
                   ,-*:=*x+;.,;*#@##x=+x#XX+=:                  
                    --.;-;:.   -=*+*Xx-,=*x=;                   
                    :..,....   ,:=xXx**;,-+;                    
                    , ,=;.    .:-+==-.;-;==,                    
                     : ,=;,..:=x#@XX+xX*+=;                     
                     .. ,-,..,-+xxXxXXX*=;                      
                      :, .-;,:;--+xX#X*-;                       
                      :,. .;+=+xX###X*;:;                       
                      =,   .,-=++*x*=,,=-                       
                      ,.      ..  .,,;=+-,                      
                                  :=-=*+=;                      
                            ,,.   ,;=+*=+;                      
                           .:---::;=+*++*,                      
                             .:*=---+*=+,                       
                                  ,,::                          `;

const POST_ASCII = [
`     ┌──┐
     │ 1│ ──spawn──┐
     └──┘          │
                   ▼
              ┌──────┐
              │AGENT0│──┐
              └──────┘  │
        ┌──────┐  ┌─────┴┐ ┌──────┐
        │AGENT1│  │AGENT2│ │AGENT3│
        └──────┘  └──────┘ └──────┘
              │      │       │
              └──────┼───────┘
                     ▼
        ╔═══════════════════════╗
        ║  N=38 · 6 CHANNELS    ║
        ║  uptime 99.97%        ║
        ║  throughput 2.4M tok  ║
        ╚═══════════════════════╝`,

`            ╱╲
           ╱  ╲       ◉ kitchen.light    ok
          ╱    ╲      ◉ porch.cam        ok
         ╱      ╲     ◉ thermostat       ok
        ╱        ╲    ◉ garage.door      ok
       ╱──────────╲   ▣ utility.sensor   FIX
       │ ▣  ▣  ▣ │   ▣ basement.pump    FIX
       │          │   ▢ guest.wifi       —
       │ ▣ [▌] ▣ │   ▢ shed.cam          —
       │          │
       │ ▣  ▣  ▣ │   ──────────────────────
       └──────────┘   1119 entities · 30% off
       ════════════   ► AGENT REPAIRING ░░░`,

`  ┌─ FREE ──────────────────────────┐
  │ groq        ▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰ │
  │ cerebras    ▰▰▰▰▰▰▰▰▰▰▰▰▰▰▰     │
  │ workers.ai  ▰▰▰▰▰▰▰▰▰▰▰▰        │
  │ openrouter  ▰▰▰▰▰▰▰▰▰           │
  └────────────────────────────────┘
                  │
                  ▼  escalate
  ┌─ PAID ──────────────────────────┐
  │ sonnet      ▰▰▰▰▰▰▰▰▰           │
  │ gpt-4o      ▰▰▰▰▰               │
  │ opus        ▰▰                  │
  └────────────────────────────────┘
       200+ MODELS  · $0 → $X.XX`];


/* ---------- TOP BAR ---------- */
function TopBar() {
  const [time, setTime] = useState("");
  useEffect(() => {
    const tick = () => {
      const d = new Date();
      const rawH = d.getHours();
      const ampm = rawH >= 12 ? "PM" : "AM";
      const h12 = ((rawH + 11) % 12) + 1; // 0 → 12, 13 → 1
      const h = String(h12).padStart(2, "0");
      const m = String(d.getMinutes()).padStart(2, "0");
      const s = String(d.getSeconds()).padStart(2, "0");
      setTime(`${h}:${m}:${s} ${ampm}`);
    };
    tick();const id = setInterval(tick, 1000);return () => clearInterval(id);
  }, []);
  return (
    <div className="topbar">
      <div className="container topbar-inner">
        <a href="#" className="brand">
          <span className="sigil">KZ</span>
          <span>kevinz.ai</span>
        </a>
        <nav>
          <a href="#commander">commander</a>
          <a href="#projects">projects</a>
          <a href="#writing">writing</a>
          <a href="#newsletter">subscribe</a>
          <a href="#contact" className="gh-link">contact</a>
        </nav>
        <div className="status-cluster">
          <span><span className="led" />38/38 agents</span>
          <span className="dim">·</span>
          <span className="dim">{time} EST</span>
          <span className="dim">·</span>
          <span className="dim">YYZ</span>
        </div>
      </div>
    </div>);

}

/* ---------- HERO ---------- */
function Hero() {
  return (
    <section className="hero" data-section="hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="prompt-line" style={{ marginBottom: 28 }}>
              <span className="ps">kevin@toronto</span>
              <span className="dim">:</span>
              <span className="amber">~/kevinz.ai</span>
              <span className="dim"> $ </span>
              <span>whoami<span className="cursor" /></span>
            </div>

            {/* HERO COPY — locked PRIMARY. Reserves staged below; see Linear CC-490. */}
            {/* RESERVE A — operational-scale flex:
                  > I run 38 agents.
                    They run my company.                                          */}
            {/* RESERVE B — hire-AI hook:
                  > AI is a workforce.
                    I'm hiring.                                                   */}
            <h1 className="h-display">
              <span style={{ display: "block", fontFamily: "\"JetBrains Mono\"", fontSize: "clamp(2.4rem, 5.4vw, 4.1rem)", lineHeight: 1.0 }}>{">"} I deploy AI.</span>
              <span style={{ display: "block", color: "var(--fg-3)", paddingTop: 10, paddingLeft: "0.5em", letterSpacing: "-0.02em", fontWeight: 500, fontSize: "clamp(1.5rem, 3.0vw, 2.2rem)", lineHeight: 1.15 }}>{"  "}the code writes itself.</span>
            </h1>

            <div className="mt-32" style={{ fontSize: 14, color: "var(--fg-2)", maxWidth: "60ch", lineHeight: 1.7 }}>
              <div><span className="dim">$ cat ./bio.md</span></div>
              <div className="mt-8" style={{ color: "var(--fg-2)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                CEO · operator · architect of{" "}
                <Typewriter phrases={[
                  "Claude Code Commander",
                  "white-label WiFi marketing",
                  "no-human companies",
                  "Data layer for physical spaces",
                  "38 production agents on call",
                  "the AI command layer (OSS)",
                  "AI agents for WhatsApp",
                  "The Claude Code Bible"
                ]} />
              </div>
            </div>

            {/* CTA hierarchy: primary = newsletter (the asset that compounds).
                Secondary = ghost-style, muted weight, so the eye lands on primary first. */}
            <div className="row gap-12 mt-32" style={{ alignItems: "center" }}>
              <a className="btn btn-primary" href="#newsletter">▸ Get The Agent Report</a>
              <a href="#commander" style={{
                fontSize: 12, color: "var(--fg-3)", letterSpacing: "0.08em",
                textDecoration: "none", padding: "8px 4px",
                borderBottom: "1px dashed var(--line-strong)"
              }}>$ explore commander →</a>
              <a href="?view=ascii" style={{
                fontSize: 12, color: "var(--fg-3)", letterSpacing: "0.08em",
                textDecoration: "none", padding: "8px 4px",
                borderBottom: "1px dashed var(--line-strong)"
              }}>↗ try the ASCII tool</a>
            </div>

            {/* 5-brands social proof — above the fold, accent-tagged so each brand
                visually previews the per-section accent applied in the deep-dives.
                Squared tags (matches Projects-table style), label on its own line. */}
            <div style={{
              marginTop: 56, display: "flex", flexWrap: "wrap", alignItems: "center",
              gap: "10px 10px",
              fontSize: 11, fontFamily: "var(--mono)", letterSpacing: "0.06em"
            }}>
              <span className="dim" style={{ flexBasis: "100%", fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase", marginBottom: 2 }}>operating ▸</span>
              {[
                { n: "Commander", c: "#F5A623", anchor: "#commander" },
                { n: "ReadyIQ", c: "#7C3AED", anchor: "#readyiq" },
                { n: "DMHub", c: "#00DC82", anchor: "#dmhub" },
                { n: "MyWiFi", c: "#0096FF", anchor: "#mywifi" },
                { n: "Guest Networks", c: "#FF1E56", anchor: "#guestnetworks" }
              ].map((b) => (
                <a
                  key={b.n}
                  href={b.anchor}
                  className="brand-pill"
                  style={{ "--pill-c": b.c }}
                >{b.n}</a>
              ))}
            </div>
            <style>{`
              /* Match the Projects table .proj-row .tag style — squared, uppercase,
                 letter-spaced, color-mix tinted bg + border, with hover lift. */
              .brand-pill {
                display: inline-flex;
                align-items: center;
                color: var(--pill-c);
                border: 1px solid color-mix(in oklch, var(--pill-c) 55%, var(--line-strong));
                background: color-mix(in oklch, var(--pill-c) 10%, transparent);
                padding: 5px 10px;
                font-size: 11px;
                font-weight: 500;
                letter-spacing: 0.18em;
                text-transform: uppercase;
                text-decoration: none;
                line-height: 1;
                white-space: nowrap;
                transition:
                  background-color 160ms ease,
                  border-color 160ms ease,
                  transform 160ms ease,
                  color 160ms ease;
              }
              .brand-pill:hover {
                background: color-mix(in oklch, var(--pill-c) 22%, transparent);
                border-color: var(--pill-c);
                color: #fff;
                transform: translateY(-1px);
              }
              .brand-pill:focus-visible {
                outline: none;
                border-color: var(--pill-c);
                box-shadow: 0 0 0 2px color-mix(in oklch, var(--pill-c) 60%, transparent);
              }
              .brand-pill:active { transform: translateY(0); }
            `}</style>

            <div className="mt-20" style={{ display: "grid", gridTemplateColumns: "repeat(2, auto)", gap: "8px 20px", fontSize: 11, color: "var(--fg-3)", letterSpacing: "0.12em", textTransform: "uppercase", maxWidth: 460 }}>
              <span><span className="amber">»</span> Anthropic Partner</span>
              <span><span className="amber">»</span> OpenAI Builder</span>
              <span><span className="amber">»</span> 20+ Years CEO</span>
              <span><span className="amber">»</span> Author · Speaker</span>
            </div>
          </div>

          <div className="portrait-stack">
            <window.AsciiPortrait
              art={KEVIN_ASCII}
              photo="assets/headshot.jpg"
              fontSize={11}
              lineHeight={1.05}
              letterSpacing={0.05}
              force={140}
              radius={130}
              returnSpring={0.20}
              damping={0.74}
              jitter={0.4}
              revealRadius={120}
              label="ID · 0001 / Kevin Zicherman"
            />
            <div className="portrait-meta">
              <div className="meta-cell">
                <div className="k">status</div>
                <div className="v green"><span className="led" />ONLINE</div>
              </div>
              <div className="meta-cell">
                <div className="k">uptime</div>
                <div className="v amber">99.97%</div>
              </div>
              <div className="meta-cell">
                <div className="k">agents</div>
                <div className="v">38 / 38</div>
              </div>
              <div className="meta-cell">
                <div className="k">throughput</div>
                <div className="v amber">2.4M tok/d</div>
              </div>
            </div>
          </div>
        </div>

        {/* partner logos — real authentic brand marks */}
        <div className="mt-40" style={{ borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
          <div style={{ padding: "10px 0", borderBottom: "1px dashed var(--line)", fontSize: 10, color: "var(--fg-4)", letterSpacing: "0.22em", textTransform: "uppercase", display: "flex", justifyContent: "space-between" }}>
            <span><span className="amber">▸</span> partners / model_providers.toml</span>
            <span className="dim">[ 07 frontier labs · production traffic ]</span>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", borderTop: "1px solid var(--line)" }}>
            {[
            { k: "01", logo: "logos/anthropic.svg", name: "Anthropic", sub: "claude · cowork", status: "ACTIVE" },
            { k: "02", logo: "logos/claudecode.svg", name: "Claude Code", sub: "IDE · desktop", status: "ACTIVE" },
            { k: "03", logo: "logos/openai.svg", name: "OpenAI", sub: "gpt · agents", status: "ACTIVE" },
            { k: "04", logo: "logos/codex.svg", name: "Codex", sub: "oauth · computer", status: "ACTIVE" },
            { k: "05", logo: "logos/vertexai.svg", name: "Google AI", sub: "gemini · vertex", status: "ACTIVE" },
            { k: "06", logo: "logos/grok.svg", name: "xAI Grok", sub: "grok-fast", status: "ACTIVE" },
            { k: "07", logo: "logos/meta.svg", name: "Meta", sub: "llama · manus", status: "ACTIVE" }].
            map((p, i, arr) =>
            <div key={p.k} style={{
              padding: "44px 14px 26px",
              borderRight: i < arr.length - 1 ? "1px solid var(--line)" : "none",
              position: "relative",
              background: "var(--bg-1)",
              minHeight: 140,
              display: "flex", flexDirection: "column", justifyContent: "center"
            }}>
                <div style={{ position: "absolute", top: 12, left: 12, fontSize: 9, color: "var(--fg-4)", letterSpacing: "0.2em" }}>{p.k}</div>
                <div style={{ position: "absolute", top: 12, right: 12, fontSize: 8, color: "var(--green)", letterSpacing: "0.18em", display: "inline-flex", alignItems: "center", gap: 4 }}>
                  <span className="led" style={{ width: 5, height: 5 }} />
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <img src={p.logo} alt={p.name} style={{ width: 24, height: 24, objectFit: "contain", flexShrink: 0 }} />
                  <span style={{ fontSize: 13, fontWeight: 600, letterSpacing: "-0.01em", color: "var(--fg)", lineHeight: 1.15 }}>{p.name}</span>
                </div>
                <div style={{ marginTop: 10, fontSize: 9, color: "var(--fg-3)", letterSpacing: "0.14em", textTransform: "uppercase", lineHeight: 1.4 }}>
                  {p.sub}
                </div>
              </div>
            )}
          </div>
        </div>

      </div>
    </section>);

}

/* ---------- NVIDIA INCEPTION STRIP ----------
   Status (2026-04-25): Kevin has APPLIED to NVIDIA Inception (pending).
   Until accepted, copy stays soft: "Inception applicant" + "independent".
   When accepted, swap to: "NVIDIA Inception affiliated · not an official partnership."
   Tracked in Linear: CC-486 (A3).
   Logo: logos/nvidia.svg sourced from lobehub/lobe-icons (matches the rest of /logos/). */
function NvidiaStrip() {
  return (
    <section data-section="nvidia" style={{ padding: "0 0 24px" }}>
      <div className="container">
        <div style={{
          border: "1px solid var(--line)",
          background: "var(--bg-1)",
          padding: "16px 22px",
          display: "flex", alignItems: "center", justifyContent: "space-between", gap: 18, flexWrap: "wrap"
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <img
              src="logos/nvidia.svg"
              alt="NVIDIA"
              style={{ height: 22, width: "auto", color: "#76B900" }}
            />
            <div style={{ fontSize: 12, color: "var(--fg-2)", letterSpacing: "0.04em", lineHeight: 1.5 }}>
              <strong style={{ color: "var(--fg)", fontWeight: 600 }}>Inference partner · NVIDIA Inception applicant.</strong>
              <span className="dim" style={{ marginLeft: 8 }}>Built on NVIDIA's open inference stack — independent.</span>
            </div>
          </div>
          <a className="btn btn-ghost" href="https://build.nvidia.com/explore/discover" target="_blank" rel="noreferrer"
             style={{ fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", whiteSpace: "nowrap" }}>
            ↗ free LLMs · build.nvidia.com
          </a>
        </div>
      </div>
    </section>);
}

/* ---------- STATS ---------- */
function StatsBar() {
  // count-mode heatmap: each stat renders exactly N cells where N = the stat value.
  // 38 agents → 38 squares, 280 skills → 280 squares, 20 years → 20, 5 platforms → 5.
  // The Heatmap component picks rows automatically (1-5) so the strip stays ~16-20px tall.
  const stats = [
  { n: 38, l: "agents online", suffix: "", desc: "self-hosted + cloud" },
  { n: 280, l: "skills · commander", suffix: "+", desc: "open source" },
  { n: 20, l: "years building tech", suffix: "+", desc: "serial founder" },
  { n: 5, l: "agent platforms", suffix: "", desc: "in stack" }];

  return (
    <section data-section="stats" style={{ padding: "20px 0 60px" }}>
      <div className="container">
        <Reveal>
          <div className="stats-grid">
            {stats.map((s, i) =>
            <div className="stat-cell" key={i}>
                <div className="label">{`0${i + 1}`} / {s.l}</div>
                <div className="value"><CountUp to={s.n} />{s.suffix && <span className="plus">{s.suffix}</span>}</div>
                <div className="desc">{s.desc}</div>
                <div className="bars"><Heatmap count={s.n} size="sm" /></div>
              </div>
            )}
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ---------- TOOLCHAIN ---------- */
function Toolchain() {
  // Real logos in /logos/ folder. Tagged "have" = user provided the SVG; "suggest" = recommended addition.
  // Brands without an SVG asset render as a clean text-only chip (no fake icon — placeholders are honest).
  const groups = [
  {
    label: "Models · routed in production",
    tag: "[ inference ]",
    items: [
    { name: "Claude", logo: "logos/claude.svg", note: "primary reasoning", have: true },
    { name: "Gemma", logo: "logos/gemma.svg", note: "local / air-gapped", have: true },
    { name: "Mistral", logo: "logos/mistral.svg", note: "codestral · code spec", have: true },
    { name: "HuggingFace", logo: "logos/huggingface.svg", note: "121-model fallback", have: true },
    { name: "Nous Research", logo: "logos/nousresearch.svg", note: "open-weights research", have: true },
    { name: "Perplexity", logo: "logos/perplexity.svg", note: "research · grounded", have: true },
    { name: "Ollama", logo: "logos/ollama.svg", note: "local model runtime", have: true },
    { name: "Groq", logo: "logos/groq.svg", note: "22 bulk agents · llama", have: true },
    { name: "Cerebras", logo: "logos/cerebras.svg", note: "qwen · gpt-oss", have: true },
    { name: "Cloudflare AI", logo: "logos/cloudflare.svg", note: "edge inference · 25 models", have: true },
    { name: "OpenRouter", logo: "logos/openrouter.svg", note: "29-model fallback router", have: true },
    { name: "MiniMax", logo: "logos/minimax.svg", note: "long-context · multimodal", have: true },
    { name: "Portkey", note: "llm gateway" },
    { name: "Plausible", logo: "logos/plausibleanalytics.svg", note: "privacy-first analytics", have: true }]

  },
  {
    label: "Agents · build & dispatch",
    tag: "[ orchestration ]",
    items: [
    { name: "OpenClaw", logo: "logos/openclaw.svg", note: "self-hosted gateway", have: true },
    { name: "Claude Code", logo: "logos/claudecode.svg", note: "primary IDE", have: true },
    { name: "Codex CLI", logo: "logos/codex.svg", note: "oauth-only · never api key", have: true },
    { name: "Cursor", logo: "logos/cursor.svg", note: "rapid prototyping", have: true },
    { name: "Commander", note: "my own · 280+ skills" },
    { name: "Paperclip", note: "issue-first dispatch" },
    { name: "n8n", logo: "logos/n8n.svg", note: "self-hosted workflows", have: true },
    { name: "Langfuse", logo: "logos/langfuse.svg", note: "llm tracing · cost", have: true },
    { name: "Promptfoo", note: "eval framework · regression" },
    { name: "Datadog", logo: "logos/datadog.svg", note: "obs · alt to langfuse", have: true },
    { name: "OpenWebUI", logo: "logos/openwebui.svg", note: "local model UI", have: true },
    { name: "Copilot Studio", logo: "logos/copilot.svg", note: "microsoft · enterprise agents", have: true },
    { name: "Inngest", note: "durable workflows" },
    { name: "Logsnag", note: "event tracking · alerts" }]

  },
  {
    label: "Infra · where it runs",
    tag: "[ self-hosted ]",
    items: [
    { name: "AWS", logo: "logos/aws.svg", note: "infra · iam · primary cloud", have: true },
    { name: "Vercel", logo: "logos/vercel.svg", note: "frontend · next.js", have: true },
    { name: "Railway", logo: "logos/railway.svg", note: "backend services", have: true },
    { name: "Cloudflare", logo: "logos/cloudflare.svg", note: "tunnel · workers · cdn", have: true },
    { name: "Tailscale", logo: "logos/tailscale.svg", note: "sovereign mesh · zero-trust", have: true },
    { name: "Coolify", note: "self-hosted deploys" },
    { name: "Docker", logo: "logos/docker.svg", note: "containers · everywhere", have: true },
    { name: "BigQuery", logo: "logos/bigquery.svg", note: "vertex grounding · analytics", have: true },
    { name: "Supabase", logo: "logos/supabase.svg", note: "db + auth · postgres", have: true },
    { name: "Fly.io", logo: "logos/flydotio.svg", note: "backend region failover", have: true },
    { name: "OrbStack", note: "docker on macOS" },
    { name: "PM2", logo: "logos/pm2.svg", note: "20+ persistent services", have: true },
    { name: "Caddy", logo: "logos/caddy.svg", note: "reverse proxy", have: true },
    { name: "Redis", logo: "logos/redis.svg", note: "cache + job queue", have: true },
    { name: "GitHub", logo: "logos/github.svg", note: "source · ci · 31 repos", have: true },
    { name: "Sentry", logo: "logos/sentry.svg", note: "error tracking", have: true },
    { name: "Stripe", logo: "logos/stripe.svg", note: "billing · saas revenue", have: true },
    { name: "Resend", logo: "logos/resend.svg", note: "transactional email", have: true },
    { name: "PostHog", logo: "logos/posthog.svg", note: "product analytics", have: true },
    { name: "Twilio", logo: "logos/twilio.svg", note: "sms · voice agents", have: true },
    { name: "1Password", logo: "logos/1password.svg", note: "auth · op:// refs", have: true }]

  },
  {
    label: "Knowledge · think & write",
    tag: "[ workflow ]",
    items: [
    { name: "Obsidian", logo: "logos/obsidian.svg", note: "second brain · vault sync", have: true },
    { name: "Notion", logo: "logos/notion.svg", note: "specs · client docs", have: true },
    { name: "Slack", logo: "logos/slack.svg", note: "team comms · agent alerts", have: true },
    { name: "Discord", logo: "logos/discord.svg", note: "community · dev forums", have: true },
    { name: "Todoist", logo: "logos/todoist.svg", note: "personal tasks · agent inbox", have: true },
    { name: "Home Assistant", logo: "logos/homeassistant.svg", note: "local automations · mqtt", have: true },
    { name: "Linear", logo: "logos/linear.svg", note: "personal dev tasks · CC-", have: true },
    { name: "Attio", note: "crm · lead scoring" },
    { name: "Clay", note: "data enrichment · gtm ops" },
    { name: "HubSpot", logo: "logos/hubspot.svg", note: "breeze · marketing ops", have: true },
    { name: "Salesforce", logo: "logos/salesforce.svg", note: "agentforce · enterprise", have: true },
    { name: "Granola", note: "meeting → agent ingestion" },
    { name: "BlueBubbles", note: "imessage agent bridge" },
    { name: "Raycast", logo: "logos/raycast.svg", note: "launcher · ai snippets", have: true }]

  }];


  return (
    <section id="toolchain" data-section="toolchain" style={{ padding: "60px 0 40px" }}>
      <div className="container">
        <div className="box-head">
          <window.AsciiBadge glyph="hash" count={3} />
          <span>// 13 — toolchain</span>
          <span className="rule" />
        </div>
        <Reveal>
          {/* terminal-style header to match the rest of the site */}
          <div style={{ borderTop: "1px solid var(--line-strong)", borderBottom: "1px solid var(--line)" }}>
            <div style={{ padding: "10px 0", borderBottom: "1px dashed var(--line)", fontSize: 10, color: "var(--fg-4)", letterSpacing: "0.22em", textTransform: "uppercase", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span><span className="amber">▸</span> tools / kevin@toronto.toolchain</span>
              <span className="dim">[ 04 categories · {groups.reduce((n, g) => n + g.items.length, 0)} entries ]</span>
            </div>

            <div style={{ padding: "32px 0 8px" }}>
              <div className="prompt-line" style={{ marginBottom: 14 }}>
                <span className="dim">$ </span>
                <span>cat ./uses.md<span className="cursor" /></span>
              </div>
              <h2 className="h-section" style={{ margin: 0 }}>
                tools i use.
                <br />
                <span className="dim2" style={{ fontWeight: 600 }}>
                  {">"} every provider, every dispatcher, every routing rule.
                </span>
              </h2>
              <div className="mt-16" style={{ fontSize: 13, color: "var(--fg-3)", maxWidth: "62ch", lineHeight: 1.7, width: "448px" }}>
                The actual stack — <span className="amber">not the marketing version</span>. If you're trying to figure out what's real vs hype, start here.
              </div>
            </div>
          </div>

          {/* groups */}
          {groups.map((g, gi) =>
          <div key={g.label} style={{ borderBottom: "1px solid var(--line)" }}>
              <div style={{
              display: "flex", justifyContent: "space-between", alignItems: "center",
              padding: "14px 0",
              borderBottom: "1px dashed var(--line)",
              fontSize: 11, color: "var(--fg-3)", letterSpacing: "0.18em", textTransform: "uppercase"
            }}>
                <span><span className="amber">{`0${gi + 1}`}</span>&nbsp;&nbsp;{g.label}</span>
                <span className="dim">{g.tag} · {g.items.length}</span>
              </div>

              <div style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
              borderLeft: "1px solid var(--line)"
            }}>
                {g.items.map((t, i) =>
              <div key={t.name} style={{
                borderRight: "1px solid var(--line)",
                borderBottom: "1px solid var(--line)",
                padding: "18px 18px 16px",
                background: "var(--bg-1)",
                display: "flex", alignItems: "flex-start", gap: 12,
                minHeight: 76,
                transition: "background 0.15s ease"
              }}
              onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg-2, #1a1a1a)"}
              onMouseLeave={(e) => e.currentTarget.style.background = "var(--bg-1)"}>
                
                    <div style={{
                  width: 32, height: 32, flexShrink: 0,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  border: "1px solid var(--line)",
                  background: "var(--bg)",
                  borderRadius: 4
                }}>
                      {t.logo ?
                  <img src={t.logo} alt={t.name} style={{ width: 20, height: 20, objectFit: "contain" }} /> :

                  <span style={{ fontSize: 11, fontFamily: "var(--mono)", color: "var(--fg-4)", letterSpacing: "-0.02em" }}>
                          {t.name.slice(0, 2).toLowerCase()}
                        </span>
                  }
                    </div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{
                    fontSize: 13, fontWeight: 600, color: "var(--fg)",
                    letterSpacing: "-0.005em",
                    display: "flex", alignItems: "center", gap: 6
                  }}>
                        {t.name}
                        {!t.have && <span className="amber" style={{ fontSize: 10, opacity: 0.7 }} title="Suggested addition / no logo on file">*</span>}
                      </div>
                      <div style={{ fontSize: 10.5, color: "var(--fg-4)", letterSpacing: "0.06em", marginTop: 4, lineHeight: 1.4 }}>
                        {t.note}
                      </div>
                    </div>
                  </div>
              )}
              </div>
            </div>
          )}

          {/* footer note */}
          <div style={{
            padding: "16px 0",
            fontSize: 11, color: "var(--fg-4)", letterSpacing: "0.16em", textTransform: "uppercase",
            display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 12
          }}>
            <span><span className="amber">▸</span> last updated · 2026.04 · live stack</span>
            <span className="dim">→ <a href="#consulting" style={{ color: "var(--amber)", textDecoration: "none" }}>build something like this →</a></span>
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ---------- NEWSLETTER ---------- */
function Newsletter() {
  const [email, setEmail] = useState("");
  const [done, setDone] = useState(false);
  return (
    <section id="newsletter" data-section="newsletter" className="section-pad">
      <div className="container">
        <Reveal>
          <div className="newsletter">
            <div className="win-title">
              <div className="lights"><span className="r" /><span className="a" /><span className="g" /></div>
              <span>~/the-agent-report</span>
              <span className="meta">SUNDAY · 08:00 EST</span>
            </div>
            <div className="body">
              <div className="box-head">
                <span>// 11 — newsletter</span>
                <span className="rule" />
              </div>
              <h2 className="h-section" style={{ maxWidth: "22ch" }}>weekly insights from a CEO running production agents.</h2>
              <p className="lede mt-20">
                Real builds. Real cost data. Zero fluff. The build, the stack, the number, the workflow — every Sunday at 8 AM ET.
              </p>

              <form className="news-row" onSubmit={(e) => {e.preventDefault();if (email) setDone(true);}}>
                <input
                  className="news-input"
                  type="email"
                  placeholder="you@operator.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  required />
                
                <button className="btn btn-primary" type="submit">
                  {done ? "✓ subscribed" : "subscribe →"}
                </button>
              </form>

              <p className="dim mt-16" style={{ fontSize: 11, letterSpacing: "0.12em" }}>
                ▸ join 1,247 builders · unsubscribe in one click
              </p>
              <div className="mt-16" style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase" }}>
                <ThinkingBadge />
              </div>

              <div className="tier-grid">
                <div className="tier">
                  <div className="name">free</div>
                  <div className="price">$0</div>
                  <div className="desc">Weekly newsletter, full blog access, Commander OSS.</div>
                </div>
                <div className="tier featured">
                  <div className="name">pro · recommended</div>
                  <div className="price">$9 <small>/mo</small></div>
                  <div className="desc">Premium deep-dives, prompts library, monthly Q&A, members posts.</div>
                </div>
                <div className="tier">
                  <div className="name">insider</div>
                  <div className="price">$29 <small>/mo</small></div>
                  <div className="desc">Everything in Pro + Commander Pro unlock + private Discord + 1:1 monthly.</div>
                </div>
              </div>
            </div>
            <div className="win-foot">
              <span>STATUS · LIVE</span>
              <span>1247 SUBSCRIBERS</span>
              <span>EOL</span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ---------- COMMANDER ---------- */
/* Reusable "thinking with max effort" badge — orange sparkle + white text.
   Used in Footer + Newsletter section + StickyNewsletter dock. */
function ThinkingBadge({ text = "thinking with max effort", style }) {
  return (
    <span style={{ color: "var(--fg)", display: "inline-flex", alignItems: "center", gap: 8, ...style }}>
      <svg className="kz-think" viewBox="-12 -12 24 24" width="14" height="14" aria-hidden="true" style={{ flex: "none" }}>
        <g className="kz-think-rays" stroke="#F5A623" strokeWidth="1.6" strokeLinecap="round">
          <line x1="0" y1="-4.5" x2="0" y2="-10" />
          <line x1="0" y1="-4.5" x2="0" y2="-10" transform="rotate(45)" />
          <line x1="0" y1="-4.5" x2="0" y2="-10" transform="rotate(90)" />
          <line x1="0" y1="-4.5" x2="0" y2="-10" transform="rotate(135)" />
          <line x1="0" y1="-4.5" x2="0" y2="-10" transform="rotate(180)" />
          <line x1="0" y1="-4.5" x2="0" y2="-10" transform="rotate(225)" />
          <line x1="0" y1="-4.5" x2="0" y2="-10" transform="rotate(270)" />
          <line x1="0" y1="-4.5" x2="0" y2="-10" transform="rotate(315)" />
        </g>
        <circle className="kz-think-core" cx="0" cy="0" r="2.6" fill="#F5A623" />
      </svg>
      <span>{text}</span>
    </span>
  );
}
window.ThinkingBadge = ThinkingBadge;

function Commander() {
  const features = [
  { g: "[01]", t: "Click-First, Not Typing", d: "13 /ccc-* workflows. Pick a button, skip the prompt engineering." },
  { g: "[02]", t: "Every Mode for Every Job", d: "YOLO autonomous build · Spec → Plan → Ship · Dialectic review · Audit · Deploy. Pick the mode." },
  { g: "[03]", t: "One Install, 502+ Skills", d: "Plugin Marketplace native. 17 agents, 8 hooks, 2 bundled MCPs. 16 more opt-in via /ccc-connect." },
  { g: "[04]", t: "Universal AI IDE", d: "Claude Code Desktop (primary). CLI, Cursor, Windsurf, Cline, Continue, Codex via MCP." }];

  return (
    <section id="commander" data-section="commander" className="section-pad">
      <div className="container">
        <div className="box-head">
          <window.AsciiBadge glyph="diamond" count={3} />
          <span>// 03 — featured · open source</span>
          <span className="rule" />
        </div>

        <Reveal>
          <div className="cmd-grid">
            <div>
              <h2 className="h-section">
                Commander.<br />
                <span className="dim2" style={{ fontWeight: 600 }}>{">"} guided AI PM to master Claude Code instantly.</span>
              </h2>
              <p className="lede mt-20" style={{ maxWidth: "52ch" }}>
                One install. <span className="amber">502+ skills</span>. 13 click-first <span className="amber">/ccc-*</span> workflows. Free forever.
              </p>

              <div className="row gap-12 mt-24">
                <a className="btn btn-primary" href="https://cc-commander.com" target="_blank" rel="noreferrer" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                  ↗ cc-commander.com
                </a>
                <a className="btn" href="https://docs.cc-commander.com" target="_blank" rel="noreferrer">
                  $ read the docs →
                </a>
                <a className="btn btn-ghost" href="https://github.com/KevinZai/commander" target="_blank" rel="noreferrer" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
                  <window.IconGithub size={14} /> github
                </a>
              </div>

              <div className="dim mt-12" style={{ fontSize: 11, color: "var(--fg-3)", letterSpacing: "0.04em", lineHeight: 1.55 }}>
                ▸ works with <span style={{ color: "var(--fg)" }}>Claude Code (CLI/Desktop)</span>, <span style={{ color: "var(--fg)" }}>Codex</span>, <span style={{ color: "var(--fg)" }}>Cursor</span> — and any IDE via <span style={{ color: "var(--fg)" }}>MCP</span>.
              </div>

              <div className="feat-list mt-32">
                {features.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>
            </div>

            <Reveal delay={120}>
              <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
                <img
                  src="logos/ccc-hero.svg"
                  alt="CC Commander"
                  style={{ display: "block", width: "100%", maxWidth: "100%", height: "auto", margin: 0 }}
                />
                <div className="terminal">
                <div className="win-title">
                  <div className="lights"><span className="r" /><span className="a" /><span className="g" /></div>
                  <span>~/projects · commander</span>
                  <span className="meta">PID 38421</span>
                </div>
                <div className="body">
                  <div><span className="term-prompt">$</span> npx commander</div>
                  <div><span className="term-ok">✓</span> Detected: <span className="term-cyan">Claude Code v2.4.1</span></div>
                  <div><span className="term-ok">✓</span> Loaded <span className="term-amber">280 skills</span></div>
                  <div><span className="term-ok">✓</span> <span className="term-cyan">agents</span> standing by</div>
                  <div><span className="term-ok">✓</span> Plugins: <span className="term-magenta">gstack</span>, <span className="term-magenta">superpowers</span>, <span className="term-magenta">CE</span></div>
                  <div style={{ height: 8 }} />
                  <div><span className="term-amber">commander</span> <span className="term-prompt">›</span> What are we building today?</div>
                  <div className="mt-8"><span className="term-prompt">▌</span> ship the kevinz.ai theme<span className="cursor" /></div>
                  <div className="mt-16 dim" style={{ fontSize: 11, letterSpacing: 0 }}>
                    ┌──── status ─────────────────────────┐
                  </div>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0 16px", fontSize: 12, padding: "0 2px" }}>
                    <span><span className="dim">│ uptime</span>     <span className="amber">23d 04h</span></span>
                    <span><span className="dim">memory</span>      <span className="amber">1.1 GB LCM</span> <span className="dim">│</span></span>
                    <span><span className="dim">│ throughput</span> <span className="amber">2.4M tok/d</span></span>
                    <span><span className="dim">queue</span>       <span>0 pending</span> <span className="dim">│</span></span>
                  </div>
                  <div className="dim" style={{ fontSize: 11, letterSpacing: 0 }}>
                    └─────────────────────────────────────┘
                  </div>
                </div>
                </div>
              </div>
            </Reveal>
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ---------- PROJECTS (table style) ---------- */
function Projects() {
  // Vercel-flow palette: blue / red / amber / green / teal / violet
  const items = [
  { tag: "OSS · CLI", color: "#F5A623", name: "Commander", desc: "The AI command layer. 280+ skills. Multi-agent runtime.", link: "cc-commander.com", anchor: "#commander" },
  { tag: "Consulting", color: "#7C3AED", name: "ReadyIQ", desc: "AI deployment for non-technical CEOs. 30 days.", link: "readyiq.ai", anchor: "#readyiq" },
  { tag: "SaaS · WhatsApp", color: "#00DC82", name: "DMHub", desc: "AI front desk on WhatsApp. $49/mo flat.", link: "dmhub.ai", anchor: "#dmhub" },
  { tag: "WiFi Marketing", color: "#0096FF", name: "MyWiFi Networks", desc: "Hospitality WiFi marketing. 40+ countries since 2010.", link: "mywifinetworks.com", anchor: "#mywifi" },
  { tag: "Physical Spaces", color: "#FF1E56", name: "Guest Networks", desc: "Query your building in plain English.", link: "guestnetworks.com", anchor: "#guestnetworks" },
  { tag: "Agentic Workforce", color: "#F5A623", name: "OpenClaw + Hermes", desc: "Self-hosted agent workforce. 2.4M tokens/day.", link: "github.com/KevinZai/openclaw-automation", anchor: "#openclaw" }];

  return (
    <section id="projects" data-section="projects" className="section-pad">
      <div className="container">
        <div className="box-head">
          <window.AsciiBadge glyph="block" count={3} />
          <span>// 02 — the stack</span>
          <span className="rule" />
        </div>

        <Reveal>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 28, gap: 16, flexWrap: "wrap" }}>
            <div>
              <h2 className="h-section">5 brands. 38 agents. one operator.</h2>
              <p className="dim2 mt-12" style={{ fontSize: 14, maxWidth: 540 }}>
                Each linked out to its own home. kevinz.ai is the hub.
              </p>
            </div>
            <span className="dim" style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase" }}>
              [{items.length}] entries · sorted by reach
            </span>
          </div>
        </Reveal>

        <Reveal delay={120}>
          <div className="proj-table">
            {items.map((it, i) =>
            <a className="proj-row" key={i} href={it.anchor || ("https://" + it.link)}>
                <span className="num">{String(i + 1).padStart(2, "0")}</span>
                <span className="tag" style={{ "--tag-c": it.color }}>{it.tag}</span>
                <span className="proj-name">{it.name}</span>
                <span className="proj-desc">
                  {it.desc}
                  <br />
                  <span className="dim" style={{ fontSize: 11 }}>↓ jump to deep-dive · ↗ {it.link}</span>
                </span>
                <span className="arrow">↓</span>
              </a>
            )}
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ---------- WRITING ---------- */
function Writing() {
  const posts = [
  { cat: "Build Diary", date: "Apr 22 · 2026", read: "12 min", title: "From One Agent to a Fleet: Building a Multi-Agent AI System", excerpt: "Started with one Claude session. Now I architect a production agent fleet across self-hosted infra and cloud platforms. Here's the architecture.", art: POST_ASCII[0] },
  { cat: "Field Report", date: "Apr 14 · 2026", read: "9 min", title: "I Let AI Manage My Smart Home for 2 Weeks", excerpt: "1,119 entities. 30% offline at start. AI fixed them while I slept. The unglamorous truth about agents in the physical world.", art: POST_ASCII[1] },
  { cat: "Provider Economics", date: "Apr 6 · 2026", read: "8 min", title: "Running 200+ Free Models in Production (And When to Pay)", excerpt: "Groq, Cerebras, Cloudflare Workers AI, OpenRouter. The escalation ladder I actually use, with cost data.", art: POST_ASCII[2] }];

  const tutorials = [
  "[T01] getting started with claude code",
  "[T02] cowork plugin · setup & power moves",
  "[T03] commander 101 · your first agent",
  "[T04] the multi-agent architecture",
  "[T05] codex + claude · multi-model workflows",
  "[T06] claudeswap · multi-MAX routing"];

  return (
    <section id="writing" data-section="writing" className="section-pad">
      <div className="container">
        <div className="box-head">
          <window.AsciiBadge glyph="pixel" count={3} />
          <span>// 09 — writing</span>
          <span className="rule" />
        </div>

        <Reveal>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 32, gap: 16, flexWrap: "wrap" }}>
            <div>
              <h2 className="h-section">build diaries & playbooks.</h2>
              <p className="lede mt-12">
                The operator's guide to AI. No predictions. No hot takes. Working code and real cost data only.
              </p>
            </div>
            <a className="btn btn-ghost" href="#">$ ls -all posts/ →</a>
          </div>
        </Reveal>

        <Reveal delay={120}>
          <div className="writing-grid">
            {posts.map((p, i) =>
            <article key={i} className="post-card">
                <div className="post-cover">
                  <window.AsciiCover title={p.title} tag={p.cat.slice(0, 2)} seed={i * 7 + 3} art={p.art} />
                </div>
                <div className="post-meta-row">
                  <span className="cat">{p.cat}</span>
                  <span className="dot">·</span>
                  <span>{p.date}</span>
                  <span className="dot">·</span>
                  <span>{p.read}</span>
                </div>
                <div className="post-body-x">
                  <h3 className="post-title">{p.title}</h3>
                  <p className="post-excerpt">{p.excerpt}</p>
                </div>
              </article>
            )}
          </div>
        </Reveal>

        <Reveal delay={200}>
          <div className="mt-40">
            <div className="dim mt-16" style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", marginBottom: 14 }}>
              ▸ tutorials · evergreen
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0, border: "1px solid var(--line)" }}>
              {tutorials.map((t, i) =>
              <a key={i} href="#" style={{
                padding: "12px 16px",
                borderRight: i % 2 === 0 ? "1px solid var(--line)" : "none",
                borderBottom: i < 4 ? "1px solid var(--line)" : "none",
                fontSize: 12.5, color: "var(--fg-2)",
                letterSpacing: "0.02em",
                transition: "all 140ms ease"
              }}
              onMouseEnter={(e) => {e.currentTarget.style.background = "color-mix(in oklch, var(--amber) 7%, transparent)";e.currentTarget.style.color = "var(--amber)";}}
              onMouseLeave={(e) => {e.currentTarget.style.background = "transparent";e.currentTarget.style.color = "var(--fg-2)";}}>
                
                  {t}
                </a>
              )}
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ---------- CREDS ---------- */
/* Collision modal (CC-489 / A6) — YouTube embed for the 2019 talk. */
function VideoModal({ open, onClose, videoId, meta }) {
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, background: "rgba(0,0,0,0.85)", zIndex: 200,
      display: "flex", alignItems: "center", justifyContent: "center", padding: 40
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        width: "min(960px, 100%)", aspectRatio: "16/9", position: "relative",
        border: "1px solid var(--amber)", background: "#000"
      }}>
        <button onClick={onClose} aria-label="close" style={{
          position: "absolute", top: -32, right: 0, fontSize: 11,
          color: "var(--amber)", letterSpacing: "0.16em", textTransform: "uppercase",
          background: "none", border: "none", cursor: "pointer"
        }}>× close · esc</button>
        <div style={{
          position: "absolute", top: -32, left: 0, fontSize: 11,
          color: "var(--fg-3)", letterSpacing: "0.10em"
        }}>{meta}</div>
        <iframe
          src={`https://www.youtube.com/embed/${videoId}?autoplay=1&rel=0`}
          allow="autoplay; fullscreen" allowFullScreen
          title="Collision 2019 — Kevin Zicherman"
          style={{ width: "100%", height: "100%", border: "none" }}
        />
      </div>
    </div>
  );
}

function Credentials() {
  const [collisionOpen, setCollisionOpen] = useState(false);
  const items = [
  { l: "tenure", t: "20+ Years in Tech", s: "Serial founder · Bootstrapped" },
  { l: "partner", t: "Anthropic", s: "Production systems on Claude" },
  { l: "builder", t: "OpenAI", s: "Codex · GPT fleet orchestration" },
  { l: "press", t: "Best-Selling Author", s: "Amazon · Mobile marketing" },
  { l: "stage", t: "Collision Speaker", s: "2019 · MyWiFi Networks", onClick: () => setCollisionOpen(true), badge: "▸ play" },
  { l: "teach", t: "Udemy Instructor", s: "WiFi marketing · 5K+ students" },
  { l: "open", t: "Open Source", s: "Commander · ClaudeSwap" },
  { l: "base", t: "Toronto, Canada", s: "Self-hosted · cloud · 24/7" }];

  return (
    <section data-section="creds" className="section-pad" style={{ paddingTop: 40, paddingBottom: 60 }}>
      <div className="container">
        <div className="box-head">
          <window.AsciiBadge glyph="hash" count={3} />
          <span>// 10 — credentials</span>
          <span className="rule" />
        </div>
        <Reveal>
          <div className="creds-grid">
            {items.map((it, i) =>
            <div
              key={i}
              className="cred"
              onClick={it.onClick}
              role={it.onClick ? "button" : undefined}
              tabIndex={it.onClick ? 0 : undefined}
              onKeyDown={it.onClick ? (e) => { if (e.key === "Enter" || e.key === " ") it.onClick(); } : undefined}
              style={it.onClick ? { cursor: "pointer", position: "relative" } : undefined}
            >
                <div className="label">▸ {it.l}</div>
                <div className="title">{it.t}</div>
                <div className="sub">{it.s}</div>
                {it.badge && <div style={{ position: "absolute", top: 12, right: 14, fontSize: 10, color: "var(--amber)", letterSpacing: "0.18em", textTransform: "uppercase" }}>{it.badge}</div>}
              </div>
            )}
          </div>
        </Reveal>
        <VideoModal
          open={collisionOpen}
          onClose={() => setCollisionOpen(false)}
          videoId="SNIXpZp8f-U"
          meta="▸ Collision · 2019 · MyWiFi Networks · captive-portal economics"
        />
      </div>
    </section>);

}

/* ---------- WORK WITH ME ---------- */
function WorkWithMe() {
  return (
    <section id="consulting" data-section="consulting" className="section-pad">
      <div className="container">
        <div className="box-head">
          <window.AsciiBadge glyph="bracket" count={3} />
          <span>// 12 — work with me</span>
          <span className="rule" />
        </div>
        <Reveal>
          <div className="work-card">
            <div className="win-title">
              <div className="lights"><span className="r" /><span className="a" /><span className="g" /></div>
              <span>~/engagements/2026-q3</span>
              <span className="meta">SLOTS · 2 OPEN</span>
            </div>
            <div className="body">
              <h2 className="h-section" style={{ maxWidth: "22ch" }}>
                want agent teams in <span className="amber">your business?</span>
              </h2>
              <p className="lede mt-20" style={{ maxWidth: "62ch" }}>
                I take a small number of advisory engagements per quarter — usually CEOs of 10–100 person companies who want to deploy AI internally without hiring an AI team.
              </p>

              <div className="ladder">
                <div className="step">
                  <div className="n">[01] · assess</div>
                  <div className="t">Readiness Audit</div>
                  <div className="p">$999 · one-time</div>
                  <div className="d">2-week deep dive. Stack, roles, processes. End with a deploy plan.</div>
                </div>
                <div className="step">
                  <div className="n">[02] · sprint</div>
                  <div className="t">Fleet Sprint</div>
                  <div className="p">$25K · 6 weeks</div>
                  <div className="d">Ship 5 agents into production. White-glove. I architect, your team operates.</div>
                </div>
                <div className="step">
                  <div className="n">[03] · retain</div>
                  <div className="t">Operator Retainer</div>
                  <div className="p">$8K / mo · ongoing</div>
                  <div className="d">Weekly working sessions. Architecture review. On-call agent ops.</div>
                </div>
              </div>

              <div className="row gap-12 mt-32">
                <a className="btn btn-primary" href="https://readyiq.ai" target="_blank" rel="noreferrer"
                   style={{ background: "#7C3AED", borderColor: "#7C3AED", color: "#fff" }}>▸ start at readyiq</a>
                <a className="btn" href="#">$ book 20-min intro</a>
              </div>
            </div>
            <div className="win-foot">
              <span>NEXT AVAILABILITY · 2026·Q3</span>
              <span>2 / 4 SLOTS OPEN</span>
              <span>EOL</span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

/* ---------- FOOTER ---------- */
function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="row" style={{ gap: 10 }}>
              <span style={{ width: 26, height: 26, border: "1px solid var(--amber)", color: "var(--amber)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 700, fontSize: 12, background: "rgba(245,183,61,0.06)" }}>KZ</span>
              <span style={{ fontWeight: 700, fontSize: 16 }}>kevinz.ai</span>
            </div>
            <p className="dim2 mt-16" style={{ fontSize: 13, lineHeight: 1.65, maxWidth: 280 }}>
              Building in public. No fluff. Architecting AI agent teams from Toronto.
            </p>
            <pre className="hr-ascii mt-16">────────────────────────────────</pre>
            <div className="dim mt-12" style={{ fontSize: 10, letterSpacing: "0.18em", textTransform: "uppercase" }}>
              <ThinkingBadge />
            </div>
          </div>
          <div>
            <div className="foot-h">connect</div>
            <ul className="foot-list">
              <li><a href="https://x.com/KZic">X / @KZic →</a></li>
              <li><a href="https://linkedin.com/in/kzicherman">LinkedIn →</a></li>
              <li><a href="https://github.com/KevinZai">GitHub →</a></li>
              <li><a href="mailto:hi@kevinz.ai">Email →</a></li>
            </ul>
          </div>
          <div>
            <div className="foot-h">products</div>
            <ul className="foot-list">
              <li><a href="#commander">Commander →</a></li>
              <li><a href="#">ReadyIQ →</a></li>
              <li><a href="#">DMHub →</a></li>
              <li><a href="#">ClaudeSwap →</a></li>
            </ul>
          </div>
          <div>
            <div className="foot-h">writing</div>
            <ul className="foot-list">
              <li><a href="#writing">All Posts →</a></li>
              <li><a href="#newsletter">Agent Report →</a></li>
              <li><a href="#">Tutorials →</a></li>
              <li><a href="#">/uses →</a></li>
            </ul>
          </div>
          <div>
            <div className="foot-h">subscribe</div>
            <p className="dim2" style={{ fontSize: 12, marginBottom: 12 }}>
              The weekly playbook. Sundays, 8 AM ET.
            </p>
            <form className="news-row" onSubmit={(e) => e.preventDefault()} style={{ marginTop: 0 }}>
              <input className="news-input" placeholder="you@operator.com" type="email" />
              <button className="btn btn-primary" type="submit">→</button>
            </form>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 kevin zicherman · toronto, ca</span>
          <span className="center">built with commander · operator on call</span>
          <span className="right">v2.6.0 · build #38421</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, {
  TopBar, Hero, NvidiaStrip, StatsBar, Toolchain, Newsletter, Commander, Projects, Writing,
  Credentials, WorkWithMe, Footer, Reveal, CountUp, Heatmap
});