// Hero Explorations — two storytelling alternatives to the current night-sky hero.
// Both share the brand palette (forest green / cream / gold-sage) and Brightsol type.
//
// V1 — "The Operator": one calm human at the center (placeholder portrait),
//      surrounded by floating agent cards connected by soft ribbon-lines.
//
// V2 — "The Console": no human. A stylized command center / dashboard showing
//      agents-as-tiles around a central status panel. More confident, product-y.
//
// Both are designed to fit a 1320px column at ~720px tall — drop-in replacement
// for the right-side panel in D2RHeroSplit.

const HERO_PALETTE = {
  panel: '#0f1c14',
  panelInk: '#e8ede4',
  panelMuted: '#8a9a8d',
  accent: '#2d4a32',
  accent2: '#b8c9a8',
  gold: '#d9c074',
  goldBright: '#f0d98a',
  cream: '#fbfaf6',
  ink: '#0f1c14',
  line: 'rgba(232,237,228,0.16)',
};

/* ─────────────────────────────────────────────── shared bits ── */

// Soft ribbon connecting two points — used to wire agents to the center.
// Animated dash drift makes it feel "live" without being noisy.
function Ribbon({ from, to, color = HERO_PALETTE.gold, opacity = 0.35, delay = 0 }) {
  const [x1, y1] = from;
  const [x2, y2] = to;
  // Curve via a midpoint control offset perpendicular to the line, scaled by distance.
  const dx = x2 - x1, dy = y2 - y1;
  const dist = Math.sqrt(dx * dx + dy * dy);
  const mx = (x1 + x2) / 2 + (-dy / dist) * dist * 0.18;
  const my = (y1 + y2) / 2 + (dx / dist) * dist * 0.18;
  const d = `M ${x1} ${y1} Q ${mx} ${my} ${x2} ${y2}`;
  return (
    <g style={{ opacity }}>
      <path d={d} fill="none" stroke={color} strokeWidth="1" strokeLinecap="round" />
      <path d={d} fill="none" stroke={color} strokeWidth="3" strokeLinecap="round" opacity="0.18" />
      <circle r="2.5" fill={color}>
        <animateMotion dur="6s" repeatCount="indefinite" begin={`${delay}s`} path={d} />
      </circle>
    </g>
  );
}

// Tiny pulsing dot — "agent is working"
function PulseDot({ color = HERO_PALETTE.goldBright, size = 6, delay = 0 }) {
  return (
    <span style={{ position: 'relative', display: 'inline-block', width: size, height: size }}>
      <span style={{
        position: 'absolute', inset: 0, borderRadius: '50%', background: color,
      }} />
      <span style={{
        position: 'absolute', inset: -3, borderRadius: '50%', border: `1px solid ${color}`,
        animation: `bsPulse 2.4s ${delay}s ease-out infinite`, opacity: 0,
      }} />
      <style>{`
        @keyframes bsPulse {
          0% { transform: scale(0.6); opacity: 0.7; }
          100% { transform: scale(2.2); opacity: 0; }
        }
      `}</style>
    </span>
  );
}

// Sparkline for "live activity" feel — no real data, just rhythm.
function Sparkline({ color = HERO_PALETTE.gold, w = 80, h = 18, seed = 1 }) {
  const points = [];
  for (let i = 0; i <= 12; i++) {
    const v = 0.3 + 0.7 * Math.abs(Math.sin(i * 0.7 + seed) + Math.cos(i * 1.3 + seed * 2) * 0.4);
    points.push([(i / 12) * w, h - v * h * 0.9]);
  }
  const d = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p[0].toFixed(1)} ${p[1].toFixed(1)}`).join(' ');
  return (
    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
      <path d={d} fill="none" stroke={color} strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// Tiny progress bar
function MiniBar({ pct = 60, color = HERO_PALETTE.accent2 }) {
  return (
    <div style={{
      width: '100%', height: 3, background: 'rgba(232,237,228,0.12)', borderRadius: 2, overflow: 'hidden',
    }}>
      <div style={{ width: `${pct}%`, height: '100%', background: color }} />
    </div>
  );
}

/* ─────────────────────────────────────────────── V1: THE OPERATOR ── */
// Center: placeholder portrait card (real founder photo would go here).
// Around: 5 agent cards orbiting, connected to the center by soft ribbons.

function HeroOperator({ width = 1320, height = 720 }) {
  // Center panel
  const cx = width / 2;
  const cy = height / 2 + 10;

  // Agent positions (relative to canvas)
  const agents = [
    { id: 'lead',   title: 'Lead Gen Agent',     job: 'Pipeline & prospecting',     pos: [0.10, 0.22], pct: 72, seed: 1, status: 'researching 14 accounts' },
    { id: 'pm',     title: 'Project Manager',    job: 'Timelines & coordination',   pos: [0.06, 0.66], pct: 48, seed: 2, status: 'tracking 6 workstreams' },
    { id: 'cos',    title: 'Chief of Staff',     job: 'Ops & weekly reporting',     pos: [0.86, 0.20], pct: 91, seed: 3, status: 'preparing Monday brief' },
    { id: 'social', title: 'Social Agent',       job: 'Content & engagement',       pos: [0.90, 0.62], pct: 35, seed: 4, status: 'drafting 3 posts' },
    { id: 'finance',title: 'Finance Agent',      job: 'AR, AP, weekly close',       pos: [0.50, 0.06], pct: 64, seed: 5, status: 'reconciling 22 entries' },
  ];

  return (
    <div style={{
      position: 'relative', width, height,
      background: HERO_PALETTE.panel, color: HERO_PALETTE.panelInk, overflow: 'hidden',
      fontFamily: '"Inter Tight", -apple-system, sans-serif',
    }}>
      {/* Ambient gradient wash */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse at 50% 55%, ${HERO_PALETTE.accent}55 0%, transparent 55%),
                     radial-gradient(ellipse at 10% 20%, ${HERO_PALETTE.gold}14 0%, transparent 50%),
                     radial-gradient(ellipse at 90% 80%, ${HERO_PALETTE.accent2}10 0%, transparent 50%)`,
      }} />

      {/* Subtle grid */}
      <svg width={width} height={height} style={{ position: 'absolute', inset: 0, opacity: 0.06 }}>
        <defs>
          <pattern id="bsGrid" width="48" height="48" patternUnits="userSpaceOnUse">
            <path d="M 48 0 L 0 0 0 48" fill="none" stroke={HERO_PALETTE.panelInk} strokeWidth="0.5" />
          </pattern>
        </defs>
        <rect width={width} height={height} fill="url(#bsGrid)" />
      </svg>

      {/* Ribbons connecting each agent to center */}
      <svg width={width} height={height} style={{ position: 'absolute', inset: 0 }}>
        {agents.map((a, i) => (
          <Ribbon
            key={a.id}
            from={[a.pos[0] * width + 130, a.pos[1] * height + 50]}
            to={[cx, cy]}
            color={i % 2 === 0 ? HERO_PALETTE.gold : HERO_PALETTE.accent2}
            opacity={0.35}
            delay={i * 1.1}
          />
        ))}
      </svg>

      {/* Center: founder card (placeholder portrait) */}
      <div style={{
        position: 'absolute', left: cx - 150, top: cy - 180, width: 300, height: 360,
        background: '#0a1410',
        border: `1px solid ${HERO_PALETTE.line}`,
        boxShadow: `0 30px 80px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(232,237,228,0.04)`,
        display: 'flex', flexDirection: 'column',
      }}>
        {/* Portrait placeholder */}
        <div style={{
          flex: 1, position: 'relative',
          background: `linear-gradient(180deg, ${HERO_PALETTE.accent}40 0%, ${HERO_PALETTE.panel} 100%)`,
          display: 'flex', alignItems: 'flex-end', justifyContent: 'center', padding: '32px 0 0',
          overflow: 'hidden',
        }}>
          {/* Silhouette suggestion — an abstract head/shoulder shape, replaced by real photo later */}
          <svg width="100%" height="100%" viewBox="0 0 300 280" preserveAspectRatio="xMidYMax meet"
               style={{ position: 'absolute', inset: 0 }}>
            <defs>
              <linearGradient id="bsSil" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0" stopColor={HERO_PALETTE.accent2} stopOpacity="0.25" />
                <stop offset="1" stopColor={HERO_PALETTE.gold} stopOpacity="0.15" />
              </linearGradient>
            </defs>
            <ellipse cx="150" cy="120" rx="58" ry="68" fill="url(#bsSil)" />
            <path d="M 60 280 Q 60 200 150 195 Q 240 200 240 280 Z" fill="url(#bsSil)" />
            <text x="150" y="155" textAnchor="middle"
                  fontFamily="JetBrains Mono, monospace" fontSize="9"
                  fill={HERO_PALETTE.panelMuted} letterSpacing="0.15em">
              FOUNDER · PHOTO
            </text>
          </svg>
          <span className="mono" style={{
            position: 'absolute', top: 12, left: 14, fontSize: 10, color: HERO_PALETTE.panelMuted,
            letterSpacing: '0.15em',
          }}>
            FIG.01 — THE OPERATOR
          </span>
          <span style={{
            position: 'absolute', top: 12, right: 14, display: 'inline-flex', alignItems: 'center', gap: 6,
            fontSize: 10, color: HERO_PALETTE.panelInk, letterSpacing: '0.1em',
          }} className="mono">
            <PulseDot color={HERO_PALETTE.goldBright} size={5} /> LIVE
          </span>
        </div>

        {/* Identity strip */}
        <div style={{
          padding: '16px 18px', borderTop: `1px solid ${HERO_PALETTE.line}`,
          display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, alignItems: 'center',
        }}>
          <div>
            <div style={{ fontSize: 14, fontWeight: 500, letterSpacing: '-0.01em' }}>
              [Founder Name]
            </div>
            <div className="mono" style={{ fontSize: 10, color: HERO_PALETTE.panelMuted, letterSpacing: '0.1em', marginTop: 2 }}>
              PRINCIPAL · BRIGHTSOL/AI
            </div>
          </div>
          <div style={{
            fontFamily: '"Instrument Serif", serif', fontStyle: 'italic',
            fontSize: 22, color: HERO_PALETTE.gold,
          }}>
            +5
          </div>
        </div>
      </div>

      {/* Agent cards */}
      {agents.map((a, i) => (
        <AgentCard key={a.id} agent={a} width={width} height={height} delay={i * 0.4} />
      ))}

      {/* Caption */}
      <div className="mono" style={{
        position: 'absolute', bottom: 20, left: 28, fontSize: 11, color: HERO_PALETTE.panelMuted,
        letterSpacing: '0.15em',
      }}>
        ONE OPERATOR · A FIELD OF AGENTS · ORCHESTRATED BY DESIGN
      </div>
      <div className="mono" style={{
        position: 'absolute', bottom: 20, right: 28, fontSize: 11, color: HERO_PALETTE.panelMuted,
        letterSpacing: '0.15em',
      }}>
        UPDATED CONTINUOUSLY
      </div>
    </div>
  );
}

function AgentCard({ agent, width, height, delay = 0 }) {
  const x = agent.pos[0] * width;
  const y = agent.pos[1] * height;
  return (
    <div style={{
      position: 'absolute', left: x, top: y, width: 260,
      background: 'rgba(15,28,20,0.85)',
      border: `1px solid ${HERO_PALETTE.line}`,
      backdropFilter: 'blur(8px)',
      padding: '14px 16px',
      animation: `bsFloat 7s ${delay}s ease-in-out infinite`,
      boxShadow: '0 12px 30px rgba(0,0,0,0.35)',
    }}>
      <style>{`
        @keyframes bsFloat {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-6px); }
        }
      `}</style>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
        <span className="mono" style={{ fontSize: 9, color: HERO_PALETTE.panelMuted, letterSpacing: '0.15em' }}>
          AGENT · {String(agent.seed).padStart(2, '0')}
        </span>
        <PulseDot delay={delay} />
      </div>
      <div style={{ fontSize: 15, fontWeight: 500, letterSpacing: '-0.01em', marginBottom: 2 }}>
        {agent.title}
      </div>
      <div style={{ fontSize: 12, color: HERO_PALETTE.panelMuted, marginBottom: 10 }}>
        {agent.job}
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: 10 }}>
        <MiniBar pct={agent.pct} />
        <Sparkline seed={agent.seed} w={48} h={14} />
      </div>
      <div className="mono" style={{ fontSize: 10, color: HERO_PALETTE.gold, letterSpacing: '0.1em', marginTop: 8 }}>
        ◦ {agent.status}
      </div>
    </div>
  );
}

/* ─────────────────────────────────────────────── V2: THE CONSOLE ── */
// No human. A stylized "command center" — a central status panel
// surrounded by a tighter grid of agent tiles. Reads as product/dashboard.

function HeroConsole({ width = 1320, height = 720 }) {
  const agents = [
    { title: 'Lead Gen',        job: 'CRM & prospecting',     pct: 72, seed: 1, status: '14 accounts in flight' },
    { title: 'Project Manager', job: 'Timelines',             pct: 48, seed: 2, status: '6 workstreams green' },
    { title: 'Chief of Staff',  job: 'Ops & reporting',       pct: 91, seed: 3, status: 'Mon brief ready 6am' },
    { title: 'Social',          job: 'Content & engagement',  pct: 35, seed: 4, status: '3 posts in review' },
    { title: 'Finance',         job: 'AR, AP, weekly close',  pct: 64, seed: 5, status: '22 reconciliations' },
    { title: 'Research',        job: 'Market & competitive',  pct: 80, seed: 6, status: '2 deep dives queued' },
  ];

  return (
    <div style={{
      position: 'relative', width, height,
      background: HERO_PALETTE.panel, color: HERO_PALETTE.panelInk, overflow: 'hidden',
      fontFamily: '"Inter Tight", -apple-system, sans-serif',
      display: 'grid', gridTemplateColumns: '320px 1fr', gap: 0,
    }}>
      {/* Left rail: status panel */}
      <div style={{
        background: '#0a1410', borderRight: `1px solid ${HERO_PALETTE.line}`,
        padding: '32px 28px', display: 'flex', flexDirection: 'column', gap: 28, position: 'relative',
      }}>
        <div>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', color: HERO_PALETTE.panelMuted }}>
            BRIGHTSOL · CONSOLE
          </div>
          <div style={{ fontSize: 13, color: HERO_PALETTE.panelMuted, marginTop: 4 }} className="mono">
            v 1.0 · TUE 09:42
          </div>
        </div>

        <div>
          <div style={{ fontSize: 13, color: HERO_PALETTE.panelMuted, marginBottom: 6 }}>This week</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
            <span style={{ fontSize: 64, fontWeight: 500, lineHeight: 1, letterSpacing: '-0.04em' }}>
              182
            </span>
            <span style={{
              fontFamily: '"Instrument Serif", serif', fontStyle: 'italic',
              fontSize: 22, color: HERO_PALETTE.gold,
            }}>
              hrs
            </span>
          </div>
          <div className="mono" style={{ fontSize: 11, color: HERO_PALETTE.accent2, letterSpacing: '0.1em', marginTop: 6 }}>
            ↑ RETURNED TO YOUR TEAM
          </div>
        </div>

        <div style={{ borderTop: `1px solid ${HERO_PALETTE.line}`, paddingTop: 20 }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', color: HERO_PALETTE.panelMuted, marginBottom: 12 }}>
            PULSE · LAST 24H
          </div>
          <Sparkline color={HERO_PALETTE.gold} w={264} h={56} seed={7} />
        </div>

        <div style={{ borderTop: `1px solid ${HERO_PALETTE.line}`, paddingTop: 20, display: 'grid', gap: 10 }}>
          {[
            ['ACTIVE AGENTS', '6 of 6'],
            ['HUMAN APPROVALS', '3 pending'],
            ['EXCEPTIONS', '0'],
          ].map(([k, v]) => (
            <div key={k} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12 }}>
              <span className="mono" style={{ color: HERO_PALETTE.panelMuted, letterSpacing: '0.12em' }}>{k}</span>
              <span style={{ color: HERO_PALETTE.panelInk }}>{v}</span>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 'auto' }}>
          <div className="mono" style={{
            fontSize: 10, color: HERO_PALETTE.panelMuted, letterSpacing: '0.15em',
            display: 'flex', alignItems: 'center', gap: 8,
          }}>
            <PulseDot color={HERO_PALETTE.goldBright} size={5} /> ALL SYSTEMS NOMINAL
          </div>
        </div>
      </div>

      {/* Right: agent grid */}
      <div style={{
        padding: '32px', display: 'grid',
        gridTemplateColumns: 'repeat(3, 1fr)',
        gridTemplateRows: 'repeat(2, 1fr)',
        gap: 20, position: 'relative',
      }}>
        {/* Background flow lines */}
        <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.5 }}>
          <defs>
            <linearGradient id="bsFlow" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0" stopColor={HERO_PALETTE.gold} stopOpacity="0" />
              <stop offset="0.5" stopColor={HERO_PALETTE.gold} stopOpacity="0.5" />
              <stop offset="1" stopColor={HERO_PALETTE.gold} stopOpacity="0" />
            </linearGradient>
          </defs>
          <path d="M 0 100 Q 200 200 400 180 T 800 220 T 1100 160" fill="none" stroke="url(#bsFlow)" strokeWidth="1" />
          <path d="M 0 400 Q 250 350 500 420 T 900 380 T 1100 440" fill="none" stroke="url(#bsFlow)" strokeWidth="1" />
          <path d="M 0 600 Q 200 550 450 600 T 850 580 T 1100 620" fill="none" stroke="url(#bsFlow)" strokeWidth="1" />
        </svg>

        {agents.map((a, i) => <ConsoleTile key={a.title} agent={a} index={i} />)}
      </div>
    </div>
  );
}

function ConsoleTile({ agent, index }) {
  return (
    <div style={{
      position: 'relative',
      background: 'rgba(232,237,228,0.04)',
      border: `1px solid ${HERO_PALETTE.line}`,
      padding: '18px 20px',
      display: 'flex', flexDirection: 'column', gap: 14,
      backdropFilter: 'blur(4px)',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span className="mono" style={{ fontSize: 9, letterSpacing: '0.2em', color: HERO_PALETTE.panelMuted }}>
          AGENT · {String(index + 1).padStart(2, '0')}
        </span>
        <PulseDot delay={index * 0.3} />
      </div>

      <div>
        <div style={{ fontSize: 20, fontWeight: 500, letterSpacing: '-0.015em' }}>{agent.title}</div>
        <div style={{ fontSize: 13, color: HERO_PALETTE.panelMuted, marginTop: 2 }}>{agent.job}</div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, alignItems: 'center' }}>
        <MiniBar pct={agent.pct} color={HERO_PALETTE.accent2} />
        <span className="mono" style={{ fontSize: 10, color: HERO_PALETTE.panelInk, letterSpacing: '0.1em' }}>
          {agent.pct}%
        </span>
      </div>

      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 'auto' }}>
        <span className="mono" style={{ fontSize: 10, color: HERO_PALETTE.gold, letterSpacing: '0.1em' }}>
          ◦ {agent.status}
        </span>
        <Sparkline seed={agent.seed} w={56} h={14} />
      </div>
    </div>
  );
}

/* ─────────────────────────────────────────────── V3: HYBRID (Operator + Console) ── */
// Left: large founder portrait card with identity strip and a "live with agents" indicator.
// Right: tighter 2x2 console grid + a top status row.
// Reads as: a real woman, working calmly, with a system of agents visibly behind her.

function HeroHybrid({ width = 1320, height = 720, photoUrl }) {
  // Default placeholder: Unsplash, woman at desk, cropped portrait. User can override.
  const portrait = photoUrl || 'site/hero-portrait.png';

  const agents = [
    { title: 'Lead Gen',        job: 'CRM and prospecting',     pct: 72, seed: 1, status: '14 accounts in flight' },
    { title: 'Project Manager', job: 'Timelines and tracking',  pct: 48, seed: 2, status: '6 workstreams green' },
    { title: 'Chief of Staff',  job: 'Ops and weekly reporting',pct: 91, seed: 3, status: 'Mon brief ready 6am' },
    { title: 'Finance',         job: 'AR, AP, weekly close',    pct: 64, seed: 5, status: '22 reconciliations' },
  ];

  return (
    <div style={{
      position: 'relative', width, height,
      background: HERO_PALETTE.panel, color: HERO_PALETTE.panelInk, overflow: 'hidden',
      fontFamily: '"Inter Tight", -apple-system, sans-serif',
      display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 0,
    }}>
      {/* LEFT: portrait */}
      <div style={{ position: 'relative', borderRight: `1px solid ${HERO_PALETTE.line}` }}>
        {/* Photo */}
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: `url(${portrait})`,
          backgroundSize: 'cover', backgroundPosition: 'center 30%',
          filter: 'saturate(0.85) contrast(1.02)',
        }} />
        {/* Forest tone overlay so photo lives in the brand palette */}
        <div style={{
          position: 'absolute', inset: 0,
          background: `linear-gradient(180deg, rgba(15,28,20,0.30) 0%, rgba(15,28,20,0.10) 35%, rgba(15,28,20,0.85) 100%),
                       linear-gradient(90deg, rgba(45,74,50,0.25) 0%, transparent 60%)`,
          mixBlendMode: 'normal',
        }} />

        {/* Top tags */}
        <div style={{
          position: 'absolute', top: 24, left: 28, right: 28,
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
        }}>
          <div className="mono" style={{
            fontSize: 11, letterSpacing: '0.18em', color: HERO_PALETTE.panelInk,
            background: 'rgba(15,28,20,0.55)', padding: '7px 11px',
            backdropFilter: 'blur(6px)',
            border: `1px solid ${HERO_PALETTE.line}`,
          }}>
            FIG.01 · THE OPERATOR
          </div>
          <div className="mono" style={{
            fontSize: 11, letterSpacing: '0.15em', color: HERO_PALETTE.panelInk,
            display: 'inline-flex', alignItems: 'center', gap: 8,
            background: 'rgba(15,28,20,0.55)', padding: '7px 11px',
            backdropFilter: 'blur(6px)',
            border: `1px solid ${HERO_PALETTE.line}`,
          }}>
            <PulseDot color={HERO_PALETTE.goldBright} size={5} /> LIVE WITH 4 AGENTS
          </div>
        </div>

        {/* Bottom identity strip */}
        <div style={{
          position: 'absolute', left: 28, right: 28, bottom: 28,
        }}>
          <div style={{
            fontFamily: '"Instrument Serif", serif', fontSize: 38, fontStyle: 'italic',
            color: HERO_PALETTE.gold, lineHeight: 1.05, letterSpacing: '-0.01em',
            marginBottom: 14,
          }}>
            "I stopped being my business's bottleneck."
          </div>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: 16,
            paddingTop: 14, borderTop: `1px solid ${HERO_PALETTE.line}`,
          }}>
            <div>
              <div style={{ fontSize: 15, fontWeight: 500, letterSpacing: '-0.01em' }}>
                Owner-Operator
              </div>
              <div className="mono" style={{
                fontSize: 10, color: HERO_PALETTE.panelMuted, letterSpacing: '0.15em', marginTop: 3,
              }}>
                CEO · 38-PERSON SERVICES FIRM
              </div>
            </div>
            <div className="mono" style={{
              fontSize: 10, color: HERO_PALETTE.gold, letterSpacing: '0.15em',
              padding: '6px 10px', border: `1px solid ${HERO_PALETTE.gold}55`,
            }}>
              COMPOSITE
            </div>
          </div>
        </div>
      </div>

      {/* RIGHT: console */}
      <div style={{
        background: '#0a1410', padding: '28px 28px',
        display: 'flex', flexDirection: 'column', gap: 18,
      }}>
        {/* Top status row */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'flex-end',
          paddingBottom: 16, borderBottom: `1px solid ${HERO_PALETTE.line}`,
        }}>
          <div>
            <div className="mono" style={{
              fontSize: 10, letterSpacing: '0.2em', color: HERO_PALETTE.panelMuted, marginBottom: 4,
            }}>
              BRIGHTSOL · CONSOLE
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
              <span style={{ fontSize: 56, fontWeight: 500, lineHeight: 1, letterSpacing: '-0.04em' }}>
                182
              </span>
              <span style={{
                fontFamily: '"Instrument Serif", serif', fontStyle: 'italic',
                fontSize: 22, color: HERO_PALETTE.gold,
              }}>
                hrs
              </span>
              <span className="mono" style={{
                fontSize: 11, color: HERO_PALETTE.accent2, letterSpacing: '0.12em', marginLeft: 8,
              }}>
                ↑ RETURNED THIS WEEK
              </span>
            </div>
          </div>
          <Sparkline color={HERO_PALETTE.gold} w={120} h={40} seed={11} />
        </div>

        {/* 2x2 agent grid */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr',
          gap: 14, flex: 1, position: 'relative',
        }}>
          {/* Connector lines */}
          <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.4 }}>
            <defs>
              <linearGradient id="bsHFlow" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0" stopColor={HERO_PALETTE.gold} stopOpacity="0" />
                <stop offset="0.5" stopColor={HERO_PALETTE.gold} stopOpacity="0.5" />
                <stop offset="1" stopColor={HERO_PALETTE.gold} stopOpacity="0" />
              </linearGradient>
            </defs>
            <path d="M 0 60 Q 200 100 400 80 T 700 130" fill="none" stroke="url(#bsHFlow)" strokeWidth="1" />
            <path d="M 0 280 Q 250 240 500 290 T 700 260" fill="none" stroke="url(#bsHFlow)" strokeWidth="1" />
          </svg>

          {agents.map((a, i) => <ConsoleTile key={a.title} agent={a} index={i} />)}
        </div>

        {/* Bottom strip */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18,
          paddingTop: 14, borderTop: `1px solid ${HERO_PALETTE.line}`,
        }}>
          {[
            ['ACTIVE AGENTS', '4 / 4'],
            ['HUMAN APPROVALS', '3 pending'],
            ['EXCEPTIONS', '0'],
          ].map(([k, v]) => (
            <div key={k}>
              <div className="mono" style={{
                fontSize: 9, color: HERO_PALETTE.panelMuted, letterSpacing: '0.18em', marginBottom: 4,
              }}>{k}</div>
              <div style={{ fontSize: 14, color: HERO_PALETTE.panelInk }}>{v}</div>
            </div>
          ))}
        </div>

        {/* Composite disclosure */}
        <div className="mono" style={{
          fontSize: 9, color: HERO_PALETTE.panelMuted, letterSpacing: '0.12em',
          marginTop: 12, opacity: 0.6, textTransform: 'uppercase',
        }}>
          Composite case study. Figures illustrative.
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HeroOperator, HeroConsole, HeroHybrid });