// Option B — Technical Terminal (v2)
// Dressed with motion: animated ASCII waveforms, live glyph rain, a topology
// diagram, scanlines, and ticker bars. Still a dev-journal at heart.

function OptionB_Terminal({ accent = '#7cc4a3', dark = true }) {
  const bg = dark ? '#0c0e0d' : '#f4f3ef';
  const bgDeep = dark ? '#070908' : '#eceae3';
  const panel = dark ? '#13161580' : '#ffffffcc';
  const panelSolid = dark ? '#131615' : '#ffffff';
  const ink = dark ? '#d8d4cc' : '#15181a';
  const inkBright = dark ? '#f3efe6' : '#0a0c0b';
  const muted = dark ? '#7a7f7c' : '#6b6f6c';
  const dim = dark ? '#3e4240' : '#b0b0aa';
  const hairline = dark ? 'rgba(216,212,204,0.09)' : 'rgba(21,24,26,0.1)';
  const glow = dark ? `0 0 24px ${hex(accent, 0.18)}` : 'none';

  const mono = '"JetBrains Mono", "IBM Plex Mono", "SFMono-Regular", Consolas, monospace';
  const sans = '"Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif';

  const arenas = [
    {
      id: 'ai',
      tag: '01',
      path: '~/arenas/ai-ml-cv',
      title: 'AI · ML · Computer Vision',
      desc: 'Training models, reading papers, shipping pipelines. Current interests: multimodal systems, vision-language, efficient inference.',
      stack: ['pytorch', 'jax', 'cuda', 'opencv', 'triton'],
      stat: [['repos', '14'], ['stars', '2.1k'], ['lang', 'py · c++']],
      glyph: 'ai',
    },
    {
      id: 'film',
      tag: '02',
      path: '~/arenas/film-production',
      title: 'Film · Color · Edit',
      desc: 'Shooting, editing, and color-grading narrative and documentary work. Quiet cameras, deliberate cuts, warm grades.',
      stack: ['davinci', 'premiere', 'after-effects', 'bmpcc', 'sony'],
      stat: [['reels', '08'], ['credits', '22'], ['latest', '26.03']],
      glyph: 'film',
    },
    {
      id: 'emt',
      tag: '03',
      path: '~/arenas/emergency-medicine',
      title: 'Emergency Medicine',
      desc: 'Licensed EMT. Real calls, real people, real decisions. Practicing calm under pressure and carrying that everywhere else.',
      stack: ['nremt', 'bls', 'acls-aux', 'field', 'ic'],
      stat: [['cert', 'active'], ['hours', '600+'], ['region', 'local']],
      glyph: 'emt',
    },
    {
      id: 'hw',
      tag: '04',
      path: '~/arenas/pc-server-builds',
      title: 'PC · Server · Homelab',
      desc: 'Workstations, rack builds, home-lab infrastructure. Designing for quiet, reliable, maintainable.',
      stack: ['proxmox', 'unraid', 'truenas', 'threadripper', '10gbe'],
      stat: [['builds', '17'], ['uptime', '99.8%'], ['tb', '142']],
      glyph: 'hw',
    },
  ];

  const socials = [
    { k: 'email',      v: 'haoyang.a.liu@gmail.com' },
    { k: 'github',     v: 'github.com/arthleu' },
    { k: 'linkedin',   v: 'linkedin.com/in/haoyang-liu' },
    { k: 'soundcloud', v: 'soundcloud.com/antheol' },
    { k: 'adobe',      v: 'hlmxt.myportfolio.com' },
    { k: '500px',      v: '500px.com/p/anth_leu' },
  ];

  return (
    <div style={{
      minHeight: '100%',
      background: bg,
      color: ink,
      fontFamily: mono,
      fontSize: 14,
      lineHeight: 1.65,
      padding: '28px 36px 56px',
      boxSizing: 'border-box',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* ── global atmosphere layers ─────────────────────────── */}
      <BgGrid accent={accent} dark={dark} />

      <div style={{ position: 'relative', maxWidth: 1180, margin: '0 auto', zIndex: 2 }}>

        {/* title bar */}
        <header style={{
          display: 'grid',
          gridTemplateColumns: '1fr auto 1fr',
          alignItems: 'center',
          padding: '10px 18px',
          border: `1px solid ${hairline}`,
          background: panel,
          backdropFilter: 'blur(8px)',
          fontSize: 12,
          color: muted,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <BlinkDot accent={accent} />
            <span>hlmxt@index ~ %</span>
          </div>
          <div style={{ color: inkBright, letterSpacing: '0.04em', whiteSpace: 'nowrap' }}>Haoyang Liu · Personal Index</div>
          <div style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>v26.04 · <LiveClock /></div>
        </header>

        {/* hero banner ─ split: wordmark + waveform + telemetry */}
        <section style={{
          marginTop: 20,
          border: `1px solid ${hairline}`,
          background: panel,
          backdropFilter: 'blur(8px)',
          padding: '64px 56px 56px',
          position: 'relative',
          overflow: 'hidden',
        }}>
          <div style={{ color: muted, marginBottom: 14, fontSize: 13 }}>
            <span style={{ color: accent }}>$</span> whoami<span style={{ color: accent, marginLeft: 2, animation: 'tw-cursor 1s steps(2) infinite' }}>_</span>
          </div>
          <h1 style={{
            fontFamily: mono,
            fontWeight: 500,
            fontSize: 96,
            lineHeight: 0.98,
            letterSpacing: '-0.035em',
            margin: 0,
            color: inkBright,
          }}>
            haoyang_liu<span style={{ color: accent }}>.</span>
          </h1>

          <div style={{ color: muted, marginTop: 44, marginBottom: 4, fontSize: 13 }}>
            <span style={{ color: accent }}>$</span> cat about.txt
          </div>
          <div style={{
            fontSize: 15,
            maxWidth: 780,
            color: ink,
            margin: '6px 0 0',
            textWrap: 'pretty',
            lineHeight: 1.75,
            display: 'flex', flexDirection: 'column', gap: 14,
          }}>
            <p style={{ margin: 0 }}>
              I'm Haoyang Liu — a versatile professional with a passion for both technology
              and creativity. My journey began at <span style={{ color: inkBright }}>UC Irvine in 2014</span>, fascinated with
              3D and computer vision, and led to three years in CV and deep learning at
              <span style={{ color: inkBright }}> eBay, Amazon, and Meta</span>.
            </p>
            <p style={{ margin: 0 }}>
              Technical experience shapes how I solve problems, but my creative side has always
              thrived — photography, filmmaking, and color grading starting in high school and
              carrying through university film work. Whether exploring AI or capturing moments
              through the lens, I blend <span style={{ color: accent }}>logic and artistry</span> in everything I do.
            </p>
          </div>

          {/* trajectory timeline */}
          <div style={{
            marginTop: 28, paddingTop: 18,
            borderTop: `1px solid ${hairline}`,
            display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8,
            fontSize: 11, color: muted,
          }}>
            {[
              ['2014', 'UC Irvine · CV'],
              ['2020', 'eBay'],
              ['2022-2024', 'Amazon'],
              ['2025-', 'Meta'],
              ['now',  'independent'],
            ].map(([year, label], i) => (
              <div key={year} style={{ position: 'relative', paddingTop: 12 }}>
                <div style={{ position: 'absolute', top: 0, left: 0, right: i === 4 ? 'auto' : 0, height: 1, background: hairline }} />
                <div style={{ position: 'absolute', top: -3, left: 0, width: 6, height: 6, borderRadius: 3, background: i === 4 ? accent : dim, boxShadow: i === 4 ? `0 0 8px ${hex(accent, 0.7)}` : 'none' }} />
                <div style={{ color: i === 4 ? accent : inkBright, fontSize: 12 }}>{year}</div>
                <div style={{ marginTop: 2 }}>{label}</div>
              </div>
            ))}
          </div>

          {/* telemetry row removed for bolder layout */}
        </section>

        {/* topology diagram */}
        <Topology accent={accent} ink={ink} dim={dim} muted={muted} hairline={hairline} panel={panel} inkBright={inkBright} arenas={arenas} />

        {/* arenas grid */}
        <section style={{ marginTop: 20 }}>
          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            color: muted,
            padding: '0 4px 14px',
            fontSize: 12,
          }}>
            <span><span style={{ color: accent }}>$</span> ls ~/arenas</span>
            <span>4 entries · sorted by cadence</span>
          </div>

          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(2, 1fr)',
            gap: 18,
          }}>
            {arenas.map((a) => (
          <ArenaCard key={a.id} a={a} accent={accent} dark={dark}
                panel={panel} ink={ink} inkBright={inkBright} muted={muted} dim={dim} hairline={hairline} />
            ))}
          </div>
        </section>

        {/* ticker removed */}

        {/* contact */}
        <section style={{ marginTop: 20 }}>
          <div style={{ color: muted, padding: '0 4px 12px', fontSize: 12 }}>
            <span style={{ color: accent }}>$</span> cat contact.yml
          </div>
          <div style={{
            border: `1px solid ${hairline}`,
            background: panel,
            backdropFilter: 'blur(8px)',
            padding: '22px 28px',
            display: 'grid',
            gridTemplateColumns: 'repeat(2, 1fr)',
            rowGap: 10,
            columnGap: 40,
            fontSize: 13,
            position: 'relative',
          }}>
            <CornerTicks accent={accent} style={{ display: 'none' }} />
            {socials.map((s) => (
              <div key={s.k} style={{ display: 'flex', gap: 12, alignItems: 'baseline' }}>
                <span style={{ color: muted, width: 96 }}>{s.k}:</span>
                <a href="#" style={{ color: inkBright, textDecoration: 'none', borderBottom: `1px solid ${hairline}`, transition: 'color .15s, border-color .15s' }}
                  onMouseEnter={(e) => { e.currentTarget.style.color = accent; e.currentTarget.style.borderBottomColor = accent; }}
                  onMouseLeave={(e) => { e.currentTarget.style.color = inkBright; e.currentTarget.style.borderBottomColor = hairline; }}
                >{s.v}</a>
              </div>
            ))}
          </div>

          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            marginTop: 22,
            color: muted,
            fontSize: 11,
          }}>
            <span>© 2026 haoyang_liu // all arenas open</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <BlinkDot accent={accent} /> hlmxt.com
            </span>
          </div>
        </section>
      </div>

      {/* global keyframes */}
      <style>{`
        @keyframes tw-pulse   { 0%,100%{opacity:1} 50%{opacity:.35} }
        @keyframes tw-cursor  { 0%,50%{opacity:1} 51%,100%{opacity:0} }
        @keyframes tw-drift   { from{transform:translateY(0)} to{transform:translateY(-100%)} }
        @keyframes tw-sweep   { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
        @keyframes tw-scroll  { from{transform:translateX(0)} to{transform:translateX(-50%)} }
        @keyframes tw-wave-a  { 0%,100%{d:path('M0,16 Q25,8 50,16 T100,16 T150,16 T200,16 T250,16 T300,16 T350,16 T400,16 T450,16 T500,16')}
                                50%    {d:path('M0,16 Q25,24 50,16 T100,16 T150,16 T200,16 T250,16 T300,16 T350,16 T400,16 T450,16 T500,16')} }
      `}</style>
    </div>
  );
}

// ── helpers ──────────────────────────────────────────────────────

function hex(c, a) {
  // convert #rrggbb + alpha 0..1 -> rgba()
  if (!c || c[0] !== '#' || c.length !== 7) return c;
  const r = parseInt(c.slice(1,3),16), g = parseInt(c.slice(3,5),16), b = parseInt(c.slice(5,7),16);
  return `rgba(${r},${g},${b},${a})`;
}

// ── ambient background: subtle grid + concentric rings ──────────
function BgGrid({ accent, dark }) {
  const line = dark ? 'rgba(216,212,204,0.04)' : 'rgba(21,24,26,0.05)';
  return (
    <div aria-hidden style={{ position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 0 }}>
      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
        <defs>
          <pattern id="p-grid" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M 40 0 L 0 0 0 40" fill="none" stroke={line} strokeWidth="1"/>
          </pattern>
          <radialGradient id="p-vignette" cx="50%" cy="20%" r="70%">
            <stop offset="0%"  stopColor={hex(accent, 0.08)} />
            <stop offset="60%" stopColor="transparent" />
          </radialGradient>
        </defs>
        <rect width="100%" height="100%" fill="url(#p-grid)"/>
        <rect width="100%" height="100%" fill="url(#p-vignette)"/>
      </svg>
    </div>
  );
}

// ── background: slow glyph "rain" columns ───────────────────────
function BgGlyphRain({ accent, dark }) {
  const glyphs = '01░▒▓┤┬┴├│─┼╌┈⌬⎔⎕⎘⎙▚▞▟▙';
  const cols = 14;
  const col = dark ? 'rgba(216,212,204,0.055)' : 'rgba(21,24,26,0.06)';
  return (
    <div aria-hidden style={{
      position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 0,
      fontFamily: '"JetBrains Mono", ui-monospace, monospace',
      fontSize: 12, lineHeight: 1.35, color: col, overflow: 'hidden',
    }}>
      {Array.from({ length: cols }).map((_, i) => {
        const dur = 55 + ((i * 9) % 40);
        const delay = -((i * 3.7) % dur);
        const left = `${(i / cols) * 100 + 1}%`;
        const chars = Array.from({ length: 60 }, (_, j) => glyphs[(i * 7 + j * 3) % glyphs.length]).join('\n');
        return (
          <div key={i} style={{
            position: 'absolute', left, top: 0,
            writingMode: 'horizontal-tb',
            whiteSpace: 'pre',
            animation: `tw-drift ${dur}s linear infinite`,
            animationDelay: `${delay}s`,
          }}>
            {chars}{'\n'}{chars}
          </div>
        );
      })}
      {/* single accent column */}
      <div style={{
        position: 'absolute', left: '72%', top: 0,
        color: hex(accent, 0.25), whiteSpace: 'pre',
        animation: 'tw-drift 42s linear infinite',
      }}>
        {Array.from({ length: 60 }, (_, j) => glyphs[(j * 5) % glyphs.length]).join('\n')}
        {'\n'}
        {Array.from({ length: 60 }, (_, j) => glyphs[(j * 5) % glyphs.length]).join('\n')}
      </div>
    </div>
  );
}

function BgScanlines({ dark }) {
  return (
    <div aria-hidden style={{
      position: 'absolute', inset: 0, pointerEvents: 'none', zIndex: 1,
      backgroundImage: dark
        ? 'repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(0,0,0,0.25) 3px, transparent 4px)'
        : 'repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(0,0,0,0.03) 3px, transparent 4px)',
      mixBlendMode: 'multiply',
    }} />
  );
}

function CornerTicks({ accent }) {
  const s = 10, t = 1.5;
  const c = {
    position: 'absolute', width: s, height: s,
    borderColor: accent, borderStyle: 'solid',
  };
  return (
    <>
      <div style={{ ...c, top: 6,  left:  6, borderWidth: `${t}px 0 0 ${t}px` }} />
      <div style={{ ...c, top: 6,  right: 6, borderWidth: `${t}px ${t}px 0 0` }} />
      <div style={{ ...c, bottom: 6, left: 6, borderWidth: `0 0 ${t}px ${t}px` }} />
      <div style={{ ...c, bottom: 6, right:6, borderWidth: `0 ${t}px ${t}px 0` }} />
    </>
  );
}

function BlinkDot({ accent }) {
  return <span style={{
    display: 'inline-block', width: 9, height: 9, borderRadius: 5,
    background: accent, boxShadow: `0 0 10px ${hex(accent, 0.6)}`,
    animation: 'tw-pulse 1.8s infinite',
  }} />;
}

function LiveClock() {
  const [t, setT] = React.useState(() => new Date());
  React.useEffect(() => {
    const id = setInterval(() => setT(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const pad = (n) => String(n).padStart(2, '0');
  return <span>{pad(t.getHours())}:{pad(t.getMinutes())}:{pad(t.getSeconds())} UTC{(-t.getTimezoneOffset()/60 >= 0 ? '+' : '') + (-t.getTimezoneOffset()/60)}</span>;
}

// ── animated dual-line waveform in SVG ──────────────────────────
function Waveform({ accent, dim }) {
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    let raf; let t0 = performance.now();
    const loop = () => { setTick((performance.now() - t0) / 1000); raf = requestAnimationFrame(loop); };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);
  const W = 1100, H = 56, N = 120;
  const path = (amp, freq, phase) => {
    let d = '';
    for (let i = 0; i <= N; i++) {
      const x = (i / N) * W;
      const y = H/2
        + Math.sin(i * freq + tick * 1.4 + phase) * amp
        + Math.sin(i * freq * 2.3 + tick * 0.7) * amp * 0.35;
      d += (i === 0 ? 'M' : 'L') + x.toFixed(1) + ',' + y.toFixed(1) + ' ';
    }
    return d;
  };
  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%" height={H} preserveAspectRatio="none" style={{ display: 'block' }}>
      <defs>
        <linearGradient id="wf-fade" x1="0" x2="1">
          <stop offset="0"   stopColor={accent} stopOpacity="0"/>
          <stop offset=".1"  stopColor={accent} stopOpacity=".9"/>
          <stop offset=".9"  stopColor={accent} stopOpacity=".9"/>
          <stop offset="1"   stopColor={accent} stopOpacity="0"/>
        </linearGradient>
      </defs>
      {/* ticks */}
      {Array.from({ length: 40 }).map((_, i) => (
        <line key={i} x1={i * (W/40)} y1={H - 4} x2={i * (W/40)} y2={H} stroke={dim} strokeWidth="1"/>
      ))}
      <line x1="0" y1={H/2} x2={W} y2={H/2} stroke={dim} strokeWidth="0.5" strokeDasharray="2 4"/>
      <path d={path(10, 0.18, 0)}   fill="none" stroke="url(#wf-fade)" strokeWidth="1.25" opacity="0.55"/>
      <path d={path(14, 0.12, 1.2)} fill="none" stroke="url(#wf-fade)" strokeWidth="1.75"/>
      {/* sweep highlight */}
      <rect x="-20%" y="0" width="30%" height={H} fill={`url(#wf-fade)`} opacity="0.06" style={{ animation: 'tw-sweep 4.5s linear infinite' }}/>
    </svg>
  );
}

// ── topology diagram: central node (self) → 4 arenas ────────────
function Topology({ accent, muted, dim, hairline, ink, panel, inkBright, arenas }) {
  return (
    <section style={{
      marginTop: 20,
      border: `1px solid ${hairline}`,
      background: panel,
      backdropFilter: 'blur(8px)',
      padding: '22px 24px 20px',
      position: 'relative',
    }}>
      <CornerTicks accent={accent} />
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
        <div style={{ color: muted, fontSize: 12 }}>
          <span style={{ color: accent }}>$</span> topology --show arenas
        </div>
        <div style={{ color: dim, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
          core · 1 hop
        </div>
      </div>

      <svg viewBox="0 0 1100 220" width="100%" height="220" style={{ display: 'block' }}>
        <defs>
          <radialGradient id="tp-node" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor={hex(accent, 0.6)} />
            <stop offset="60%" stopColor={hex(accent, 0)} />
          </radialGradient>
        </defs>
        {(() => {
          const positions = [110, 310, 790, 990];
          return arenas.map((a, i) => {
            const x = positions[i];
            return (
              <g key={a.id}>
                <line x1={x < 550 ? x + 72 : x - 72} y1="110" x2={x < 550 ? 504 : 596} y2="110" stroke={dim} strokeDasharray="3 5" strokeWidth="1"/>
                <circle cx={x < 550 ? x + 72 : x - 72} cy="110" r="3" fill={accent}>
                  <animate attributeName="opacity" values="1;0.2;1" dur={`${1.8 + i * 0.3}s`} repeatCount="indefinite"/>
                </circle>
                <rect x={x - 72} y="86" width="144" height="48" fill="none" stroke={hairline} strokeWidth="1"/>
                <text x={x} y="104" fontSize="10" fill={dim} textAnchor="middle" letterSpacing="2" fontFamily="inherit">{a.tag}</text>
                <text x={x} y="122" fontSize="12" fill={inkBright} textAnchor="middle" fontFamily="inherit">{a.id.toUpperCase()}</text>
              </g>
            );
          });
        })()}
        <circle cx="550" cy="110" r="46" fill="url(#tp-node)"/>
        <circle cx="550" cy="110" r="24" fill="none" stroke={accent} strokeWidth="1"/>
        <circle cx="550" cy="110" r="10" fill={accent}/>
        <text x="550" y="175" fontFamily="inherit" fontSize="10" fill={muted} textAnchor="middle" letterSpacing="2">HLMXT · CORE</text>
      </svg>
    </section>
  );
}

// ── colorist's bar: film still → palette → LUT → waveform scope ────
function ColorBar({ accent, muted, dim, hairline, ink, panel, inkBright, dark }) {
  // Hand-tuned warm-cinematic palette: shadows → highlights.
  const palette = ['#1d1916', '#3a2a22', '#6b4836', '#a9724d', '#d8a277', '#efd7b4', '#f5eadc'];
  const lutStops = ['#0e1318', '#1a2130', '#3c3e4a', '#6b5d54', '#a6845f', '#d9b286', '#f2e0c4'];

  // deterministic waveform: RGB traces across a timeline
  const W = 1100, H = 110;
  const N = 120;
  const trace = (seed, baseR, baseG, baseB) => {
    const pts = [];
    let r = baseR, g = baseG, b = baseB;
    for (let i = 0; i <= N; i++) {
      const x = (i / N) * W;
      // pseudo-random deterministic walk
      const n = Math.sin(seed + i * 0.41) * 12 + Math.sin(seed * 1.7 + i * 0.13) * 8;
      const yR = H - (baseR + n) * 0.42;
      const yG = H - (baseG + n * 0.6) * 0.42;
      const yB = H - (baseB + n * 0.3) * 0.42;
      pts.push({ x, yR, yG, yB });
    }
    const path = (k) => pts.map((p, i) => (i === 0 ? 'M' : 'L') + p.x.toFixed(1) + ',' + p[k].toFixed(1)).join(' ');
    return { r: path('yR'), g: path('yG'), b: path('yB') };
  };
  const w = trace(3.1, 180, 170, 150);

  return (
    <section style={{
      marginTop: 20,
      border: `1px solid ${hairline}`,
      background: panel,
      backdropFilter: 'blur(8px)',
      padding: '22px 24px 22px',
      position: 'relative',
    }}>
      <CornerTicks accent={accent} />

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
        <div style={{ color: muted, fontSize: 12 }}>
          <span style={{ color: accent }}>$</span> grade --show primary.cube
        </div>
        <div style={{ color: dim, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
          frame 00:42:17:04 · rec.709
        </div>
      </div>

      {/* row: still placeholder | palette column */}
      <div style={{ display: 'grid', gridTemplateColumns: '2.39fr 1fr', gap: 14, marginBottom: 14 }}>
        {/* film frame placeholder — gradient composed from palette */}
        <div style={{
          position: 'relative', aspectRatio: '2.39 / 1',
          background: `linear-gradient(135deg, ${palette[1]} 0%, ${palette[3]} 45%, ${palette[5]} 100%)`,
          border: `1px solid ${hairline}`, overflow: 'hidden',
        }}>
          {/* diagonal striping to signal 'placeholder' */}
          <div style={{
            position: 'absolute', inset: 0, opacity: 0.18,
            backgroundImage: 'repeating-linear-gradient(135deg, transparent 0 14px, rgba(0,0,0,0.35) 14px 15px)',
          }}/>
          {/* corner labels */}
          <div style={{ position: 'absolute', top: 8, left: 10, fontSize: 10, color: '#f5eadc', letterSpacing: '0.18em', opacity: 0.9 }}>FRAME · R3D</div>
          <div style={{ position: 'absolute', bottom: 8, left: 10, fontSize: 10, color: '#f5eadc', letterSpacing: '0.18em', opacity: 0.7 }}>2.39:1 · ISO 800</div>
          <div style={{ position: 'absolute', top: 8, right: 10, fontSize: 10, color: '#f5eadc', letterSpacing: '0.18em', opacity: 0.7 }}>REC.709 · LUT_A.cube</div>
          <div style={{ position: 'absolute', bottom: 8, right: 10, fontSize: 10, color: '#f5eadc', letterSpacing: '0.18em', opacity: 0.7 }}>48mm T2.8</div>
          {/* framing reticle */}
          <div style={{ position: 'absolute', inset: '18%', border: `1px dashed rgba(245,234,220,0.3)` }}/>
        </div>

        {/* palette column */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
          <div style={{ color: dim, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 2 }}>palette · 7ch</div>
          {palette.map((c) => (
            <div key={c} style={{
              display: 'flex', alignItems: 'center', gap: 8,
              border: `1px solid ${hairline}`, padding: '2px 8px 2px 2px',
            }}>
              <span style={{ width: 18, height: 18, background: c, display: 'inline-block' }}/>
              <span style={{ fontSize: 10, color: muted, fontVariantNumeric: 'tabular-nums' }}>{c.toUpperCase()}</span>
            </div>
          ))}
        </div>
      </div>

      {/* LUT strip */}
      <div style={{ marginBottom: 12 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4, fontSize: 10, color: dim, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
          <span>lut · shadows → highlights</span>
          <span>33³</span>
        </div>
        <div style={{ display: 'flex', height: 18, border: `1px solid ${hairline}` }}>
          {lutStops.map((c, i) => (
            <div key={i} style={{ flex: 1, background: `linear-gradient(to right, ${c}, ${lutStops[i + 1] || c})` }} />
          ))}
        </div>
      </div>

      {/* waveform scope */}
      <div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4, fontSize: 10, color: dim, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
          <span>waveform · rgb parade</span>
          <span>0 → 100 ire</span>
        </div>
        <svg viewBox={`0 0 ${W} ${H}`} width="100%" height={H} preserveAspectRatio="none" style={{ display: 'block', border: `1px solid ${hairline}`, background: dark ? 'rgba(0,0,0,0.2)' : 'rgba(255,255,255,0.3)' }}>
          {/* ire grid */}
          {[0, 25, 50, 75, 100].map((ire) => {
            const y = H - (ire / 100) * H;
            return <line key={ire} x1="0" y1={y} x2={W} y2={y} stroke={hairline} strokeWidth="1" strokeDasharray={ire === 0 || ire === 100 ? '' : '2 6'} />;
          })}
          <path d={w.r} fill="none" stroke="rgba(232,139,116,0.75)" strokeWidth="1.25" />
          <path d={w.g} fill="none" stroke="rgba(124,196,163,0.75)" strokeWidth="1.25" />
          <path d={w.b} fill="none" stroke="rgba(106,174,214,0.75)" strokeWidth="1.25" />
        </svg>
      </div>
    </section>
  );
}

// ── arena card: left glyph column + content ─────────────────────
function ArenaCard({ a, accent, dark, panel, ink, inkBright, muted, dim, hairline }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        border: `1px solid ${hover ? accent : hairline}`,
        background: panel,
        backdropFilter: 'blur(8px)',
        position: 'relative',
        transition: 'border-color .18s',
        overflow: 'hidden',
      }}
    >
      <div style={{ padding: '26px 28px 24px', display: 'flex', flexDirection: 'column', gap: 14 }}>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontSize: 12, color: muted,
        }}>
          <span style={{ whiteSpace: 'nowrap' }}><span style={{ color: dim, marginRight: 10 }}>{a.tag}</span>{a.path}</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: accent }}>
            <span style={{ width: 6, height: 6, borderRadius: 3, background: accent, boxShadow: `0 0 8px ${hex(accent, 0.7)}` }} />
            live
          </span>
        </div>

        <h2 style={{
          fontFamily: '"Inter", system-ui, sans-serif',
          fontWeight: 500,
          fontSize: 26,
          lineHeight: 1.15,
          letterSpacing: '-0.015em',
          margin: 0,
          color: inkBright,
        }}>{a.title}</h2>

        <p style={{
          fontFamily: '"Inter", system-ui, sans-serif',
          fontSize: 14, lineHeight: 1.6, color: ink, margin: 0, textWrap: 'pretty',
        }}>{a.desc}</p>

        <a href="#" style={{
          alignSelf: 'flex-start',
          fontSize: 12,
          color: hover ? accent : inkBright,
          textDecoration: 'none',
          display: 'inline-flex',
          alignItems: 'center',
          gap: 8,
          padding: '8px 12px',
          marginTop: 4,
          border: `1px solid ${hover ? accent : hairline}`,
          background: dark ? 'rgba(255,255,255,0.02)' : 'rgba(0,0,0,0.02)',
          transition: 'color .15s, border-color .15s',
        }}>
          <span style={{ color: accent }}>$</span> more --details <span>→</span>
        </a>
      </div>
    </article>
  );
}

// ── per-arena abstract glyph (pure CSS/SVG, no iconography) ─────
function ArenaGlyph({ kind, accent, dim, active }) {
  const c = active ? accent : dim;
  const box = { width: 30, height: 30 };

  if (kind === 'ai') {
    // Pulsing concentric nodes → neural network feel
    return (
      <svg viewBox="0 0 40 40" style={box}>
        {[6, 12, 18].map((r, i) => (
          <circle key={r} cx="20" cy="20" r={r} fill="none" stroke={c} strokeWidth="1">
            <animate attributeName="opacity" values={`${0.3 + i*0.2};1;${0.3 + i*0.2}`} dur={`${2 + i*0.6}s`} repeatCount="indefinite"/>
          </circle>
        ))}
        <circle cx="20" cy="20" r="2.5" fill={c}/>
      </svg>
    );
  }
  if (kind === 'film') {
    // Sliding strip of frames
    return (
      <svg viewBox="0 0 40 40" style={box}>
        <g>
          {[0,1,2,3].map((i) => (
            <rect key={i} x={4 + i*8} y="10" width="6" height="20" fill="none" stroke={c} strokeWidth="1">
              <animate attributeName="opacity" values={`${i === 1 ? 1 : 0.3};${i === 2 ? 1 : 0.3};${i === 3 ? 1 : 0.3};${i === 0 ? 1 : 0.3}`} dur="1.6s" repeatCount="indefinite"/>
            </rect>
          ))}
        </g>
      </svg>
    );
  }
  if (kind === 'emt') {
    // ECG-style heartbeat trace
    return (
      <svg viewBox="0 0 40 40" style={box}>
        <path d="M2,20 L10,20 L12,12 L16,28 L20,10 L24,24 L28,20 L38,20"
          fill="none" stroke={c} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round">
          <animate attributeName="stroke-dasharray" values="0,60;60,0" dur="1.8s" repeatCount="indefinite"/>
        </path>
      </svg>
    );
  }
  // hw — rack of blinking drives
  return (
    <svg viewBox="0 0 40 40" style={box}>
      {[0,1,2,3].map((i) => (
        <g key={i}>
          <rect x="6" y={6 + i*7.2} width="28" height="5" fill="none" stroke={c} strokeWidth="1"/>
          <circle cx="30" cy={8.5 + i*7.2} r="0.9" fill={c}>
            <animate attributeName="opacity" values="1;0.1;1" dur={`${0.9 + i*0.4}s`} repeatCount="indefinite"/>
          </circle>
        </g>
      ))}
    </svg>
  );
}

// ── scrolling ticker bar ────────────────────────────────────────
function Ticker({ accent, muted, dim, hairline, panel }) {
  const items = [
    'pipeline::vision-lang → training', 'color-grade::project_river → shot 042',
    'rack-02::uptime 47d 18h', 'cert::nremt active', 'repo::hlmxt/ocv-tools +7 commits',
    'timeline::hlmxt/documentary rev4', 'server::proxmox-01 backup ok',
    'signal::calm — standing by',
  ];
  const line = items.map((s, i) => <span key={i} style={{ margin: '0 28px', color: i % 3 === 0 ? accent : muted }}>{i % 3 === 0 ? '▸ ' : '· '}{s}</span>);
  return (
    <div style={{
      marginTop: 20,
      border: `1px solid ${hairline}`,
      background: panel,
      backdropFilter: 'blur(8px)',
      padding: '10px 0',
      overflow: 'hidden',
      position: 'relative',
      fontSize: 12,
      color: muted,
      whiteSpace: 'nowrap',
    }}>
      <div style={{ display: 'flex', gap: 0, width: 'max-content', animation: 'tw-scroll 52s linear infinite' }}>
        <div>{line}</div>
        <div>{line}</div>
      </div>
      {/* edge fades */}
      <div style={{ position: 'absolute', top: 0, bottom: 0, left: 0, width: 80, background: `linear-gradient(to right, ${panel}, transparent)`, pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', top: 0, bottom: 0, right: 0, width: 80, background: `linear-gradient(to left, ${panel}, transparent)`, pointerEvents: 'none' }} />
    </div>
  );
}

Object.assign(window, { OptionB_Terminal });