// Hero animation — synthetic-PII tokens drift through a CRM-shaped grid.
// One lights amber and a hairline traces back to its row.
const { useEffect, useRef, useState } = React;

const SAMPLE_TOKENS = [
  'm.kovacs+a3f2@…',
  'l.tanaka+9b7c@…',
  'r.demir+4e1d@…',
  'a.singh+22fa@…',
  'p.olsen+7c83@…',
  's.amari+c0d4@…',
  'k.weiss+b612@…',
  'j.romano+e8a5@…',
  'n.hassan+3d77@…',
  't.lindqvist+0f9b@…'
];

const SAMPLE_NAMES = [
  ['Kovacs, M.',         'Vienna, AT',   'VIP-Tier'],
  ['Tanaka, L.',         'Singapore',    'Onboard'],
  ['Demir, R.',          'Istanbul, TR', 'VIP-Tier'],
  ['Singh, A.',          'London, UK',   'High-Net'],
  ['Olsen, P.',          'Oslo, NO',     'Standard'],
  ['Amari, S.',          'Dubai, AE',    'VIP-Tier'],
  ['Weiss, K.',          'Berlin, DE',   'Onboard'],
  ['Romano, J.',         'Milan, IT',    'High-Net'],
  ['Hassan, N.',         'Cairo, EG',    'Standard'],
  ['Lindqvist, T.',      'Stockholm',    'VIP-Tier'],
  ['Petrov, V.',         'Sofia, BG',    'Standard'],
  ['Costa, F.',          'Lisbon, PT',   'High-Net']
];

function HeroAnim() {
  const [phase, setPhase] = useState(0); // 0 idle, 1 token caught, 2 traced, 3 reveal
  const [caughtIdx, setCaughtIdx] = useState(2); // row index that's the bait
  const [now, setNow] = useState(Date.now());

  useEffect(() => {
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) {
      setPhase(3);
      return;
    }
    const cycle = async () => {
      setPhase(0);
      await wait(2400);
      setPhase(1); // token surfaces
      await wait(1400);
      setPhase(2); // trace line
      await wait(1800);
      setPhase(3); // reveal source
      await wait(3200);
    };
    let alive = true;
    const loop = async () => {
      while (alive) {
        await cycle();
        if (!alive) break;
        // pick a new bait row on next cycle
        setCaughtIdx(i => (i + 5) % SAMPLE_NAMES.length);
      }
    };
    loop();
    const t = setInterval(() => setNow(Date.now()), 100);
    return () => { alive = false; clearInterval(t); };
  }, []);

  const wait = (ms) => new Promise(r => setTimeout(r, ms));

  return (
    <div className="hero-anim">
      <div className="hero-anim-header">
        <span><span className="live-dot"></span>SNARE / LIVE FEED</span>
        <span>{new Date(now).toISOString().slice(11, 19)}Z</span>
      </div>

      {/* Drifting token strings (background ambient) */}
      <DriftingTokens />

      {/* CRM grid — the rows */}
      <div style={{
        position: 'absolute',
        top: 44, left: 0, right: 0, bottom: 0,
        display: 'flex', flexDirection: 'column',
        padding: '12px 0 0',
      }}>
        <div style={{
          fontFamily: 'var(--mono)', fontSize: 9.5,
          letterSpacing: '0.14em', textTransform: 'uppercase',
          color: 'var(--fg-faint)',
          display: 'grid',
          gridTemplateColumns: '14px 1.4fr 1fr 0.7fr 14px',
          gap: 12,
          padding: '8px 18px',
          borderBottom: '1px solid var(--rule)',
        }}>
          <span></span>
          <span>Account</span>
          <span>Region</span>
          <span>Segment</span>
          <span></span>
        </div>

        <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
          {SAMPLE_NAMES.map((row, i) => {
            const isCaught = i === caughtIdx;
            const showRedFlag = isCaught && phase >= 1;
            const traced = isCaught && phase >= 2;
            const revealed = isCaught && phase >= 3;
            return (
              <div key={i} style={{
                display: 'grid',
                gridTemplateColumns: '14px 1.4fr 1fr 0.7fr 14px',
                gap: 12,
                padding: '8px 18px',
                borderBottom: '1px solid var(--rule)',
                fontFamily: 'var(--mono)',
                fontSize: 11,
                color: revealed ? 'var(--accent)' : (showRedFlag ? 'var(--fg)' : 'var(--fg-dim)'),
                background: revealed ? 'rgba(212,98,42,0.08)' : 'transparent',
                transition: 'background 420ms ease, color 420ms ease',
                position: 'relative',
              }}>
                <span style={{
                  width: 6, height: 6,
                  background: showRedFlag ? 'var(--accent)' : 'var(--fg-faint)',
                  alignSelf: 'center',
                  marginTop: 6,
                  transition: 'background 240ms',
                  boxShadow: showRedFlag ? '0 0 12px var(--accent)' : 'none',
                  animation: showRedFlag ? 'pulse 1.2s ease-in-out infinite' : 'none',
                }}></span>
                <span style={{ letterSpacing: '-0.01em' }}>
                  {row[0]}
                  {revealed && <span style={{ marginLeft: 8, color: 'var(--accent)', fontStyle: 'italic' }}>SYNTHETIC</span>}
                </span>
                <span style={{ color: 'var(--fg-faint)' }}>{row[1]}</span>
                <span style={{ color: 'var(--fg-faint)' }}>{row[2]}</span>
                <span></span>

                {/* trace line from right edge into this row */}
                {traced && (
                  <div style={{
                    position: 'absolute',
                    top: '50%', left: '70%',
                    height: 1,
                    background: 'var(--accent)',
                    width: '30%',
                    transformOrigin: 'left',
                    animation: 'traceLine 600ms ease-out forwards',
                  }}></div>
                )}
              </div>
            );
          })}
        </div>

        {/* footer status bar */}
        <div style={{
          padding: '10px 18px',
          borderTop: '1px solid var(--rule)',
          fontFamily: 'var(--mono)',
          fontSize: 10,
          letterSpacing: '0.1em',
          textTransform: 'uppercase',
          display: 'flex',
          justifyContent: 'space-between',
          color: 'var(--fg-faint)',
          background: 'rgba(10,11,13,0.6)',
        }}>
          <span>
            {phase === 0 && '· monitoring 14 surfaces'}
            {phase === 1 && <span style={{ color: 'var(--accent)' }}>! token surfaced — telegram/leak-pii-eu</span>}
            {phase === 2 && <span style={{ color: 'var(--accent)' }}>~ tracing → crm.accounts</span>}
            {phase === 3 && <span style={{ color: 'var(--accent)' }}>✓ source: agent_id 0473 · 11d to detect</span>}
          </span>
          <span>seeded: 4,210 · caught: 27</span>
        </div>
      </div>
    </div>
  );
}

function DriftingTokens() {
  // ambient floating tokens drifting upward in left margin column
  return (
    <div style={{
      position: 'absolute',
      top: 44, left: 0,
      width: 32, bottom: 0,
      overflow: 'hidden',
      pointerEvents: 'none',
      opacity: 0.6,
    }}>
      {SAMPLE_TOKENS.map((t, i) => (
        <span key={i} style={{
          position: 'absolute',
          left: 4,
          fontFamily: 'var(--mono)',
          fontSize: 9,
          color: 'var(--fg-faint)',
          whiteSpace: 'nowrap',
          transform: 'rotate(-90deg)',
          transformOrigin: 'left top',
          top: `${15 + i * 9}%`,
          animation: `drift 14s linear infinite`,
          animationDelay: `${-i * 1.4}s`,
        }}>{t}</span>
      ))}
    </div>
  );
}

window.HeroAnim = HeroAnim;