/* Nexus Signals — Hero with Three.js wallet-network canvas + floating proof. */
const NSH = window.NexusSignalsDesignSystem_a2976e;

function Hero() {
  const { Button, Badge, WalletChip } = NSH;
  const { IconArrowRight, IconShield, IconCheck } = window;
  const canvasRef = React.useRef(null);
  React.useEffect(() => {
    if (canvasRef.current && window.NS_initHero) window.NS_initHero(canvasRef.current);
  }, []);

  const trust = [
    '17 whale wallets on the record',
    'Every signal logged before the outcome',
    'Early sample, 11 resolved, built in public',
  ];

  return (
    <section id="top" style={{ position: 'relative', overflow: 'hidden', paddingTop: 'clamp(32px,4.5vw,68px)', paddingBottom: 'clamp(36px,5vw,76px)' }}>
      <canvas ref={canvasRef} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', zIndex: 0, opacity: 0.9 }} aria-hidden="true"></canvas>
      <div className="hero-fade" aria-hidden="true"></div>

      <div className="ns-container" style={{ position: 'relative', zIndex: 2 }}>
        <div className="hero-center" style={{ maxWidth: '920px', margin: '0 auto', textAlign: 'center' }}>
          <div data-hero style={{ display: 'inline-flex', alignItems: 'center', gap: '10px', padding: '7px 14px 7px 8px', background: 'var(--ns-cream-04)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-pill)', backdropFilter: 'blur(8px)' }}>
            <span style={{ display: 'inline-flex', width: '22px', height: '22px', alignItems: 'center', justifyContent: 'center', borderRadius: '50%', background: 'var(--ns-soft-16)', color: 'var(--ns-soft)' }}><IconShield size={13} /></span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: '12px', letterSpacing: '0.04em', color: 'var(--text-secondary)' }}>Smart money research, minus the hype</span>
          </div>

          <h1 data-hero style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--text-hero)', lineHeight: 1.0, letterSpacing: '-0.03em', color: 'var(--text-primary)', margin: '26px 0 0' }}>
            Hype Discords sell dreams.<br />
            <span style={{ background: 'linear-gradient(120deg, var(--ns-soft), var(--ns-trust) 70%)', WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>We show receipts.</span>
          </h1>

          <p data-hero style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--text-body-lg)', lineHeight: 1.6, color: 'var(--text-secondary)', maxWidth: '60ch', margin: '24px auto 0' }}>
            Nexus tracks the whale wallets moving Polymarket and crypto, and logs every signal <em style={{ fontStyle: 'normal', color: 'var(--text-primary)' }}>before</em> the outcome, wins and losses out in the open. You bring the judgment. We bring the proof.
          </p>

          <div data-hero style={{ display: 'flex', gap: '12px', flexWrap: 'wrap', justifyContent: 'center', marginTop: '34px' }}>
            <Button variant="primary" size="lg" iconRight={<IconArrowRight size={18} />} onClick={() => window.goWhop()}>Get access</Button>
            <Button variant="secondary" size="lg" onClick={() => window.goHash('#live-board')}>Explore the live board</Button>
          </div>

          <div data-hero className="trust-strip" style={{ display: 'flex', gap: '22px', flexWrap: 'wrap', justifyContent: 'center', marginTop: '30px' }}>
            {trust.map((t) => (
              <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', fontFamily: 'var(--font-body)', fontSize: '13px', color: 'var(--text-muted)' }}>
                <span style={{ color: 'var(--ns-soft)', display: 'inline-flex' }}><IconCheck size={15} /></span>{t}
              </span>
            ))}
          </div>
        </div>

        {/* live trade ticker (in flow, centered) + verdict card */}
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: '30px' }}>
          <a id="ns-live-ticker" className="live-ticker" target="_blank" rel="noopener noreferrer" aria-label="Open latest live trade on Coinbase"></a>
        </div>

        {/* verdict card */}
        <div data-hero className="hero-proof" style={{ maxWidth: '560px', margin: '18px auto 0' }}>
          <HeroProof />
        </div>
      </div>
    </section>
  );
}

function pmLink(q) { return 'https://polymarket.com/markets?_q=' + encodeURIComponent(q); }

const NS_CALLS = [
  { q: 'Fed cuts rates in July?', side: 'YES', entry: '11¢', whales: 3, conv: 78, wallet: '0x7a3f1c2b9d4e5f6a8b0c1d2e3f4a5b6c7d8e9c92', pnl: '+$12.4k', status: 'win', logged: '2d ago' },
  { q: 'BTC closes Q3 above $90k?', side: 'YES', entry: '24¢', whales: 5, conv: 84, wallet: '0x1b8d3a4c5e6f70819a2b3c4d5e6f7081923a4b5c', pnl: '+$9.1k', status: 'win', logged: '4d ago' },
  { q: 'Solana ETF approved this year?', side: 'YES', entry: '19¢', whales: 4, conv: 71, wallet: '0x2c4e6a8b0d1f3052749e8c6b5a4d3f2e1c0b9a87', pnl: 'open', status: 'pending', logged: '6h ago' },
  { q: 'US recession called in 2026?', side: 'NO', entry: '61¢', whales: 6, conv: 66, wallet: '0x9f1e2d3c4b5a6978e0d1c2b3a4958607f1e2d3c4', pnl: '+$6.7k', status: 'win', logged: '1d ago' },
];

function HeroProof() {
  const { GlassPanel, Badge, WalletChip, PriceChange } = NSH;
  const [idx, setIdx] = React.useState(0);
  const [secs, setSecs] = React.useState(3);
  const [conv, setConv] = React.useState(0);
  const c = NS_CALLS[idx];

  React.useEffect(() => {
    const tick = setInterval(() => setSecs((s) => (s >= 59 ? 1 : s + 1)), 1000);
    const cycle = setInterval(() => { setIdx((i) => (i + 1) % NS_CALLS.length); setSecs(1); }, 5000);
    return () => { clearInterval(tick); clearInterval(cycle); };
  }, []);
  // animate the conviction bar toward the current call's value, with a live jitter
  React.useEffect(() => {
    setConv(0);
    const t = setTimeout(() => setConv(c.conv), 120);
    const drift = setInterval(() => setConv((v) => Math.max(60, Math.min(96, c.conv + Math.round((Math.random() - 0.5) * 3)))), 1600);
    return () => { clearTimeout(t); clearInterval(drift); };
  }, [idx]);

  const yes = c.side === 'YES';
  const win = c.status === 'win';
  return (
    <div onClick={() => window.open(pmLink(c.q), '_blank', 'noopener')} role="link" tabIndex={0}
      onKeyDown={(e) => { if (e.key === 'Enter') window.open(pmLink(c.q), '_blank', 'noopener'); }}
      style={{ display: 'block', textDecoration: 'none', cursor: 'pointer' }} aria-label={'Open ' + c.q + ' on Polymarket'}>
    <GlassPanel padding="0" glow hoverable style={{ overflow: 'hidden', cursor: 'pointer' }}>
      {/* header */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '13px 18px', borderBottom: '1px solid var(--border-default)' }}>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: '9px', fontFamily: 'var(--font-mono)', fontSize: '12px', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-secondary)' }}>
          <span className="live-dot" style={{ width: '8px', height: '8px', borderRadius: '50%', background: 'var(--ns-soft)' }}></span>Top call · live
        </span>
        <Badge status="accent">Updated {secs}s ago</Badge>
      </div>

      {/* the question */}
      <div style={{ padding: '18px 20px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>Polymarket · tracked by {c.whales} whales</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: '4px', fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--ns-soft)' }}>open<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M7 17 17 7"/><path d="M8 7h9v9"/></svg></span>
        </div>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '20px', letterSpacing: '-0.01em', color: 'var(--text-primary)', minHeight: '48px' }}>{c.q}</div>
      </div>

      {/* verdict row: the call */}
      <div style={{ display: 'flex', alignItems: 'center', gap: '14px', padding: '14px 20px' }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '92px', height: '70px', flex: 'none', borderRadius: 'var(--radius-md)', background: yes ? 'var(--ns-soft-12)' : 'var(--ember-bg)', border: `1px solid ${yes ? 'var(--ns-soft-32)' : 'var(--ember-border)'}` }}>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: '10px', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>Edge</span>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '26px', color: yes ? 'var(--ns-soft)' : 'var(--ns-ember)', lineHeight: 1 }}>{c.side}</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: '10px', color: 'var(--text-secondary)' }}>entry {c.entry}</span>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '7px' }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>Smart-money conviction</span>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: '14px', fontWeight: 700, color: 'var(--ns-soft)' }}>{conv}%</span>
          </div>
          <div style={{ height: '8px', borderRadius: '999px', background: 'var(--surface-inset)', overflow: 'hidden' }}>
            <div style={{ width: conv + '%', height: '100%', borderRadius: '999px', background: 'var(--gradient-accent)', transition: 'width 0.9s var(--ease-out)' }}></div>
          </div>
          <div style={{ marginTop: '10px', display: 'flex', alignItems: 'center', gap: '8px' }}>
            <WalletChip address={c.wallet} label="lead whale" />
          </div>
        </div>
      </div>

      {/* outcome footer */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '12px', padding: '13px 20px', borderTop: '1px solid var(--border-subtle)', background: win ? 'var(--status-win-bg)' : 'var(--status-pending-bg)' }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: '12px', color: 'var(--text-secondary)' }}>Logged {c.logged} · {win ? 'resolved' : 'tracking'}</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: '10px' }}>
          {win ? <PriceChange value={c.pnl} style={{ fontSize: '14px' }} /> : <span style={{ fontFamily: 'var(--font-mono)', fontSize: '12px', color: 'var(--ns-soft)' }}>open position</span>}
          <Badge status={c.status} dot>{win ? 'Verified win' : 'Pending'}</Badge>
        </span>
      </div>
    </GlassPanel>
    </div>
  );
}

Object.assign(window, { Hero, HeroProof });
