// Hoverable AI agent cards — the meat of the page below hero
function AgentCards({ accent = '#00E0B8', accent2 = '#FF3D6E' }) {
  const [hover, setHover] = React.useState(null);
  const [mouse, setMouse] = React.useState({ x: 0, y: 0 });

  const agents = [
    {
      id: 'momentum',
      name: 'Momentum',
      code: 'SUB · MOM-07',
      tagline: 'Rides the wave before the crowd hears the splash.',
      desc: 'Detects regime shifts across 4,200 instruments in under 80ms. Enters with stops, scales out at conviction breaks.',
      stat1: { l: 'Hit rate', v: '68.2%' },
      stat2: { l: 'Avg hold', v: '14m' },
      stat3: { l: 'Universe', v: '4.2K' },
      glyph: 'M',
    },
    {
      id: 'meanrev',
      name: 'Mean Reversion',
      code: 'SUB · REV-03',
      tagline: 'When everyone panics, it presses the BUY key.',
      desc: 'Statistical arb on cointegrated pairs. Sized by half-life of the spread, neutralized by sector beta.',
      stat1: { l: 'Hit rate', v: '74.0%' },
      stat2: { l: 'Avg hold', v: '2h 40m' },
      stat3: { l: 'Pairs', v: '1.1K' },
      glyph: 'R',
    },
    {
      id: 'sent',
      name: 'Sentiment',
      code: 'SUB · SNT-09',
      tagline: 'Reads the tape, the news, and the mood.',
      desc: 'LLM ensemble parses earnings calls, filings, and social streams. Outputs conviction scores per ticker per minute.',
      stat1: { l: 'Sources', v: '12.4K/m' },
      stat2: { l: 'Languages', v: '11' },
      stat3: { l: 'F1', v: '0.91' },
      glyph: 'S',
    },
    {
      id: 'arb',
      name: 'Cross-Venue Arb',
      code: 'SUB · ARB-02',
      tagline: 'Two prices. One asset. Free lunch.',
      desc: 'Latency-aware routing across 11 venues. Inventory-balanced, fee-aware, kill-switched on widening spreads.',
      stat1: { l: 'Venues', v: '11' },
      stat2: { l: 'Median lat.', v: '8ms' },
      stat3: { l: 'Daily vol', v: '$42M' },
      glyph: 'A',
    },
    {
      id: 'risk',
      name: 'Risk Sentinel',
      code: 'SUB · RSK-01',
      tagline: 'The agent that says "no" so the others can say yes.',
      desc: 'Real-time VaR, exposure caps, correlation drift. Forces deleveraging before drawdown compounds.',
      stat1: { l: 'VaR window', v: '1m' },
      stat2: { l: 'Max DD halt', v: '-2.0%' },
      stat3: { l: 'Active checks', v: '38' },
      glyph: 'X',
    },
    {
      id: 'meta',
      name: 'Meta-Allocator',
      code: 'SUB · MTA-00',
      tagline: 'Decides which agent gets to play, and how much.',
      desc: 'Bandit-style capital allocation across the desk. Rewards live Sharpe, penalizes regime mismatch.',
      stat1: { l: 'Rebalance', v: '5m' },
      stat2: { l: 'Strategies', v: '48' },
      stat3: { l: 'Capital', v: 'auto' },
      glyph: '∞',
    },
  ];

  return (
    <div className="ac-grid">
      {agents.map(a => (
        <article
          key={a.id}
          className={`ac-card ${hover === a.id ? 'hover' : ''}`}
          onMouseEnter={() => setHover(a.id)}
          onMouseLeave={() => setHover(null)}
          onMouseMove={e => {
            const r = e.currentTarget.getBoundingClientRect();
            setMouse({ x: e.clientX - r.left, y: e.clientY - r.top });
          }}
          style={hover === a.id ? { '--mx': `${mouse.x}px`, '--my': `${mouse.y}px` } : {}}
        >
          <div className="ac-spotlight"></div>
          <div className="ac-glyph"><span>{a.glyph}</span></div>
          <div className="ac-code">{a.code}</div>
          <h3 className="ac-name">{a.name}</h3>
          <p className="ac-tag">{a.tagline}</p>
          <p className="ac-desc">{a.desc}</p>
          <div className="ac-stats">
            <div><span>{a.stat1.l}</span><strong>{a.stat1.v}</strong></div>
            <div><span>{a.stat2.l}</span><strong>{a.stat2.v}</strong></div>
            <div><span>{a.stat3.l}</span><strong>{a.stat3.v}</strong></div>
          </div>
          <div className="ac-pulse">
            <span className="ac-pulse-dot" style={{ background: accent }}></span>
            <span className="ac-pulse-label">RUNNING</span>
            <span className="ac-pulse-bars">
              {Array.from({ length: 16 }).map((_, i) => (
                <span key={i} style={{
                  height: `${4 + ((i * 11 + a.id.length * 5) % 14)}px`,
                  background: i % 5 === 0 ? accent2 : accent,
                  animationDelay: `${i * 80}ms`,
                }}></span>
              ))}
            </span>
          </div>
        </article>
      ))}
    </div>
  );
}

window.AgentCards = AgentCards;