/* Nexus Signals — mid sections: Ticker, Stats, LiveBoard, HowItWorks, Features */
const NSM = window.NexusSignalsDesignSystem_a2976e;

function Ticker() {
  const { PriceChange } = NSM;
  const coins = [['BTC', '+2.4%'], ['ETH', '-1.1%'], ['SOL', '+5.8%'], ['DOGE', '-0.6%'], ['LINK', '+3.2%'], ['XRP', '+0.9%'], ['AVAX', '-2.0%'], ['ARB', '+4.1%'], ['ADA', '+1.7%'], ['LTC', '-0.4%'], ['BNB', '+0.8%'], ['MATIC', '+3.9%']];
  const items = coins.map((c, i) => (
    <span key={'c' + i} style={{ display: 'inline-flex', alignItems: 'center', gap: '8px', fontFamily: 'var(--font-mono)', fontSize: '13px', color: 'var(--text-primary)' }}><span style={{ color: 'var(--text-muted)' }}>{c[0]}</span><PriceChange value={c[1]} /></span>
  ));
  const track = [...items, ...items.map((el, i) => React.cloneElement(el, { key: 'd' + i }))];
  return (
    <div style={{ borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)', background: 'var(--ns-cream-04)', overflow: 'hidden', position: 'relative', zIndex: 1 }}>
      <div className="ticker-track" style={{ display: 'flex', alignItems: 'center', gap: '28px', padding: '14px 0', width: 'max-content' }}>{track}</div>
      <div className="ticker-mask-l" aria-hidden="true"></div>
      <div className="ticker-mask-r" aria-hidden="true"></div>
    </div>
  );
}

function Stats() {
  const { GlassPanel } = NSM;
  // [pre, target, decimals, suffix, label, sub, accent]
  const data = [
    ['', 17, 0, '', 'Whale wallets tracked', 'real wallets on Polymarket and crypto, watched around the clock', false],
    ['', 11, 0, '', 'Signals resolved so far', 'early sample, watch the track record get built in public', true],
    ['', 100, 0, '%', 'Logged before the outcome', 'every signal timestamped first, then graded win or loss', false],
    ['', 0, 0, '', 'Results edited or deleted', 'the record stays exactly as posted, misses included', false],
  ];
  return (
    <section style={{ paddingTop: 'var(--section-pad-y)', paddingBottom: 'var(--section-pad-y)', position: 'relative', zIndex: 1 }}>
      <div className="ns-container">
        <div className="stats-grid" data-anim="stagger">
          {data.map((d, i) => (
            <GlassPanel key={i} padding="26px 24px" hoverable style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
              <div data-count={d[1]} data-decimals={d[2]} data-prefix={d[0]} data-suffix={d[3]}
                style={{ fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 'clamp(2rem,3.6vw,2.9rem)', lineHeight: 1, letterSpacing: '-0.02em', color: d[6] ? 'var(--ns-soft)' : 'var(--text-primary)', fontVariantNumeric: 'tabular-nums' }}>
                {d[0]}{d[1].toLocaleString('en-US', { minimumFractionDigits: d[2], maximumFractionDigits: d[2] })}{d[3]}
              </div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: '14px', fontWeight: 600, color: 'var(--text-primary)', marginTop: '4px' }}>{d[4]}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--text-muted)', letterSpacing: '0.02em' }}>{d[5]}</div>
            </GlassPanel>
          ))}
        </div>
        <p style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--text-muted)', letterSpacing: '0.03em', textAlign: 'center', marginTop: '20px' }}>
          These are real numbers, updated as the record grows. Eleven resolved signals is a small sample, too small to prove an edge, so we do not claim one. We publish everything anyway, wins and losses alike, so you can judge the track record as it forms. Research and education only, not financial advice. Past results do not guarantee future results.
        </p>
      </div>
    </section>
  );
}

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

function LiveBoard() {
  const { GlassPanel, Badge, WalletChip, PriceChange, Button } = NSM;
  const [filter, setFilter] = React.useState('all');
  const [secs, setSecs] = React.useState(5);
  const initial = [
    [1, 'Fed cuts rates in July?', 'YES', '0x7a3f1c2b9d4e5f6a8b0c1d2e3f4a5b6c7d8e9c92', 11, 12.4, 'win'],
    [2, 'BTC closes Q3 above $90k?', 'YES', '0x1b8d3a4c5e6f70819a2b3c4d5e6f7081923a4b5c', 24, 9.1, 'win'],
    [3, 'ETH above $4k by Q3?', 'NO', '0x44c9ab10f2e3d8b7c6a5049e1f2a3b4c5d6e7f80', 38, -3.1, 'loss'],
    [4, 'US recession called in 2026?', 'NO', '0x9f1e2d3c4b5a6978e0d1c2b3a4958607f1e2d3c4', 61, 6.7, 'win'],
    [5, 'Solana ETF approved this year?', 'YES', '0x2c4e6a8b0d1f3052749e8c6b5a4d3f2e1c0b9a87', 19, null, 'pending'],
  ];
  const [rows, setRows] = React.useState(initial);
  React.useEffect(() => {
    const id = setInterval(() => {
      setSecs((s) => (s >= 59 ? 1 : s + 1));
      setRows((prev) => prev.map((r) => {
        if (r[6] === 'pending') {            // open positions: odds drift live
          const odd = Math.max(2, Math.min(96, r[4] + Math.round((Math.random() - 0.5) * 2)));
          return [r[0], r[1], r[2], r[3], odd, null, r[6]];
        }
        const p = r[5] + (Math.random() - 0.48) * 0.2;  // resolved: paper PnL ticks
        return [r[0], r[1], r[2], r[3], r[4], Math.round(p * 10) / 10, r[6]];
      }));
    }, 2200);
    return () => clearInterval(id);
  }, []);
  const pnlStr = (v) => (v == null ? '—' : (v >= 0 ? '+$' : '-$') + Math.abs(v).toFixed(1) + 'k');
  const statusLabel = { win: 'Win', loss: 'Loss', pending: 'Pending' };
  const filters = [['all', 'All'], ['win', 'Wins'], ['loss', 'Losses'], ['pending', 'Open']];
  const shown = filter === 'all' ? rows : rows.filter((r) => r[6] === filter);
  return (
    <section id="live-board" style={{ paddingTop: 'var(--section-pad-y)', paddingBottom: 'var(--section-pad-y)', position: 'relative', zIndex: 1 }}>
      <div className="ns-container">
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: '20px', flexWrap: 'wrap' }}>
          <window.SectionHead eyebrow="Live proof · top performers" title="The board doesn't lie" sub="Ranked by 30-day paper PnL across tracked wallets. We show the misses right next to the wins — because a track record only counts when it's the whole record." />
          <div className="board-filters" style={{ display: 'flex', gap: '6px', padding: '5px', background: 'var(--ns-cream-04)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-pill)' }}>
            {filters.map((f) => (
              <button key={f[0]} onClick={() => setFilter(f[0])} style={{ fontFamily: 'var(--font-mono)', fontSize: '12px', letterSpacing: '0.04em', padding: '7px 14px', borderRadius: 'var(--radius-pill)', cursor: 'pointer', border: 'none', transition: 'all 140ms', background: filter === f[0] ? 'var(--ns-trust)' : 'transparent', color: filter === f[0] ? '#fff' : 'var(--text-muted)' }}>{f[1]}</button>
            ))}
          </div>
        </div>

        <GlassPanel padding="0" data-anim="reveal" style={{ marginTop: '32px', overflow: 'hidden' }}>
          <div className="board-head" style={{ display: 'grid', gridTemplateColumns: '40px 1fr 150px 92px 110px', gap: '16px', padding: '14px 22px', borderBottom: '1px solid var(--border-default)', fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>
            <span>#</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}><span className="live-dot" style={{ width: '7px', height: '7px', borderRadius: '50%', background: 'var(--ns-soft)' }}></span>Market · tracked wallet</span>
            <span className="col-side">Side · entry</span><span style={{ textAlign: 'right' }}>Paper PnL</span><span style={{ textAlign: 'right' }}>Result</span>
          </div>
          {shown.map((r) => (
            <div key={r[0]} className="board-row" style={{ display: 'grid', gridTemplateColumns: '40px 1fr 150px 92px 110px', gap: '16px', alignItems: 'center', padding: '15px 22px', borderBottom: '1px solid var(--border-subtle)', transition: 'background 140ms' }}
              onMouseEnter={(e) => e.currentTarget.style.background = 'var(--ns-cream-04)'}
              onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: '14px', color: 'var(--text-muted)' }}>{String(r[0]).padStart(2, '0')}</span>
              <div style={{ minWidth: 0 }}>
                <a href={pmLink(r[1])} target="_blank" rel="noopener noreferrer" style={{ display: 'block', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '15px', color: 'var(--text-primary)', textDecoration: 'none', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
                  onMouseEnter={(e) => e.currentTarget.style.color = 'var(--ns-soft)'} onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-primary)'}>{r[1]}</a>
                <div style={{ marginTop: '6px' }}><WalletChip address={r[3]} label="whale" /></div>
              </div>
              <div className="col-side" style={{ display: 'flex', flexDirection: 'column', gap: '3px' }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: '12px', fontWeight: 700, letterSpacing: '0.06em', color: r[2] === 'YES' ? 'var(--ns-soft)' : 'var(--ns-ember)' }}>{r[2]}</span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: '13px', color: 'var(--text-secondary)' }}>{r[4]}¢</span>
              </div>
              <div style={{ textAlign: 'right' }}>
                {r[5] == null ? <span style={{ fontFamily: 'var(--font-mono)', fontSize: '13px', color: 'var(--text-muted)' }}>open</span> : <PriceChange value={pnlStr(r[5])} style={{ justifyContent: 'flex-end', fontSize: '14px' }} />}
              </div>
              <div style={{ display: 'flex', justifyContent: 'flex-end' }}><Badge status={r[6]} dot>{statusLabel[r[6]]}</Badge></div>
            </div>
          ))}
          <div style={{ padding: '18px 22px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '16px', flexWrap: 'wrap' }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', color: 'var(--text-muted)', letterSpacing: '0.04em' }}>Updated {secs}s ago · logged before the outcome · not financial advice</span>
            <Button variant="ghost" size="sm" iconRight={<window.IconArrowRight size={16} />}>See full board</Button>
          </div>
        </GlassPanel>
      </div>
    </section>
  );
}

function HowItWorks() {
  const { GlassPanel, WalletChip, Badge } = NSM;
  const { IconWallet, IconActivity, IconShield, IconArrowRight } = window;
  const steps = [
    { icon: <IconWallet size={22} />, kicker: '01 · Watch', title: 'Track the wallet', body: 'We monitor a curated set of smart-money wallets across chains and prediction-market venues — every address on the record.', node: <WalletChip label="Whale #3" address="0x7a3f1c2b9d4e5f6a8b0c1d2e3f4a5b6c7d8e9c92" /> },
    { icon: <IconActivity size={22} />, kicker: '02 · Detect', title: 'Catch the move', body: 'A position opens on-chain. We capture the market, side, size, and entry odds the moment it lands.', node: <span style={{ fontFamily: 'var(--font-mono)', fontSize: '13px', color: 'var(--text-secondary)' }}>YES · "Fed cuts in July?" @ <span style={{ color: 'var(--ns-soft)' }}>11¢</span></span> },
    { icon: <IconShield size={22} />, kicker: '03 · Rank + log', title: 'Verifiable signal', body: 'It is scored, ranked, and logged before the outcome — then tracked to a public paper result.', node: <Badge status="win" dot>Logged · verified win</Badge> },
  ];
  return (
    <section id="how-it-works" style={{ paddingTop: 'var(--section-pad-y)', paddingBottom: 'var(--section-pad-y)', position: 'relative', zIndex: 1 }}>
      <div className="ns-container">
        <window.SectionHead align="center" eyebrow="Track the whales" title="From a whale's move to your edge" sub="No black box, no 'just trust us.' You see which wallet, which market, and why — every step on the record." />
        <div className="whale-grid" data-anim="stagger" style={{ marginTop: '46px' }}>
          {steps.map((s, i) => (
            <React.Fragment key={i}>
              <GlassPanel padding="26px" hoverable style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <span style={{ display: 'inline-flex', width: '46px', height: '46px', alignItems: 'center', justifyContent: 'center', borderRadius: 'var(--radius-md)', background: 'var(--ns-soft-08)', border: '1px solid var(--ns-soft-16)', color: 'var(--ns-soft)' }}>{s.icon}</span>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: '11px', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ns-soft)' }}>{s.kicker}</span>
                </div>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '20px', color: 'var(--text-primary)' }}>{s.title}</div>
                <p style={{ fontFamily: 'var(--font-body)', fontSize: '14px', lineHeight: 1.6, color: 'var(--text-muted)', margin: 0 }}>{s.body}</p>
                <div style={{ marginTop: 'auto', paddingTop: '10px' }}>{s.node}</div>
              </GlassPanel>
              {i < steps.length - 1 && <div className="whale-arrow" aria-hidden="true" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ns-soft)' }}><IconArrowRight size={22} /></div>}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

function Features() {
  const { GlassPanel } = NSM;
  const { IconEye, IconBell, IconFile, IconSearch, IconRadar, IconLock } = window;
  const feats = [
    { icon: <IconRadar size={22} />, title: 'Smart-money radar', body: 'See which wallets we track and the exact on-chain move behind every signal. No anonymous "alpha".', span: 2 },
    { icon: <IconBell size={22} />, title: 'Ranked live signals', body: 'Scored and ranked as they happen.' },
    { icon: <IconFile size={22} />, title: 'Verified paper results', body: 'A transparent 30-day record — wins and losses both shown.' },
    { icon: <IconSearch size={22} />, title: 'Research-first method', body: 'Benchmarked before anything is automated. Risk notes on every signal.', span: 2 },
  ];
  return (
    <section id="features" style={{ paddingTop: 'var(--section-pad-y)', paddingBottom: 'var(--section-pad-y)', position: 'relative', zIndex: 1 }}>
      <div className="ns-container">
        <window.SectionHead eyebrow="What you get" title="Made to earn your trust" />
        <div className="features-bento" data-anim="stagger" style={{ marginTop: '42px' }}>
          {feats.map((f, i) => (
            <GlassPanel key={i} padding="28px" hoverable style={{ gridColumn: f.span === 2 ? 'span 2' : 'span 1', display: 'flex', flexDirection: 'column', gap: '14px', minHeight: '180px' }}>
              <span style={{ display: 'inline-flex', width: '48px', height: '48px', alignItems: 'center', justifyContent: 'center', borderRadius: 'var(--radius-md)', background: 'var(--ns-soft-08)', border: '1px solid var(--ns-soft-16)', color: 'var(--ns-soft)' }}>{f.icon}</span>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: '19px', color: 'var(--text-primary)' }}>{f.title}</div>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: '14px', lineHeight: 1.6, color: 'var(--text-muted)', margin: 0, maxWidth: '46ch' }}>{f.body}</p>
            </GlassPanel>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Ticker, Stats, LiveBoard, HowItWorks, Features });