const { useState, useEffect, useRef, useMemo } = React;

/* ────────────────────────────────────────────────────────────────────────── */
/*  ROOT                                                                      */
/* ────────────────────────────────────────────────────────────────────────── */

function App() {
  return (
    <div className="min-h-screen bg-ink-950 text-white antialiased">
      <TopTicker />
      <Nav />
      <Hero />
      <Architecture />
      <CoreTech />
      <Footer />
    </div>
  );
}

/* ────────────────────────────────────────────────────────────────────────── */
/*  TOP TICKER                                                                */
/* ────────────────────────────────────────────────────────────────────────── */

function TopTicker() {
  const items = [
    ['SOL/USD',          '$184.62',     '+2.41%'],
    ['HELIUS LATENCY',   '47ms',        null],
    ['EXEC P99',         '128ms',       null],
    ['MC RUNS · 24H',    '1,284,000',   null],
    ['NHL · SLATE-A',    'SETTLED',     null],
    ['NBA · SLATE-B',    'LIVE',        '+EV'],
    ['BTC/USD',          '$72,108.40',  '+1.18%'],
    ['ETH/USD',          '$3,418.91',   '-0.62%'],
    ['SMART WALLETS',    '1,847 tracked', null],
    ['STOP-LOSS POLICY', 'σ=5.00%',     null],
    ['MLB · SLATE-C',    'PRE-LOCK',    null],
    ['LOG5 MATRIX',      'NIGHTLY 03:00Z', null],
  ];
  const row = [...items, ...items];
  return (
    <div className="border-b border-white/[0.06] bg-ink-975 overflow-hidden relative">
      <div className="absolute left-0 top-0 bottom-0 w-12 z-10 bg-gradient-to-r from-ink-975 to-transparent pointer-events-none"/>
      <div className="absolute right-0 top-0 bottom-0 w-12 z-10 bg-gradient-to-l from-ink-975 to-transparent pointer-events-none"/>
      <div className="flex ticker whitespace-nowrap py-2 text-[10px] font-mono uppercase tracking-[0.18em]">
        {row.map((it, i) => (
          <div key={i} className="flex items-center gap-3 px-6 shrink-0">
            <span className="text-dim">{it[0]}</span>
            <span className="text-white/80 num">{it[1]}</span>
            {it[2] && (
              <span className={
                it[2].startsWith('+EV') ? 'text-glowm' :
                it[2].startsWith('+') ? 'text-emerald-400' :
                it[2].startsWith('-') ? 'text-rose-400' : 'text-mute'
              }>{it[2]}</span>
            )}
            <span className="text-faint">·</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ────────────────────────────────────────────────────────────────────────── */
/*  NAV                                                                       */
/* ────────────────────────────────────────────────────────────────────────── */

function Logo({ size = 22 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
      <path d="M12 1.5 L22.5 7 V17 L12 22.5 L1.5 17 V7 Z" stroke="#67e8f9" strokeWidth="1.1" strokeLinejoin="round"/>
      <path d="M12 6.5 L17.5 9.5 V14.5 L12 17.5 L6.5 14.5 V9.5 Z" stroke="#c4b5fd" strokeWidth="1.1" strokeLinejoin="round" opacity="0.85"/>
      <circle cx="12" cy="12" r="1.4" fill="#67e8f9"/>
    </svg>
  );
}

function Nav() {
  return (
    <nav className="sticky top-0 z-50 backdrop-blur-md bg-ink-950/80 border-b border-white/[0.06]">
      <div className="max-w-[1440px] mx-auto px-6 lg:px-10 h-16 flex items-center justify-between">
        <a className="flex items-center gap-2.5 cursor-pointer">
          <Logo />
          <span className="font-medium tracking-tight text-[15px]">
            Sentinel<span className="text-mute font-normal"> Quant Analytics</span>
          </span>
        </a>
        <div className="hidden md:flex items-center gap-9 text-[13.5px] text-mute">
          <a className="hover:text-white cursor-pointer transition-colors">Architecture</a>
          <a className="hover:text-white cursor-pointer transition-colors">SOL Sentinel</a>
          <a className="hover:text-white cursor-pointer transition-colors">Pro Engines</a>
          <a className="hover:text-white cursor-pointer transition-colors">Research</a>
          <a className="hover:text-white cursor-pointer transition-colors">Docs</a>
        </div>
        <div className="flex items-center gap-2">
          <button className="hidden sm:block text-[13px] text-mute hover:text-white px-3 h-9">Sign in</button>
          <button className="text-[13px] px-4 h-9 rounded-full bg-white text-ink-950 font-medium hover:bg-white/90 transition-colors">
            Request access
          </button>
        </div>
      </div>
    </nav>
  );
}

/* ────────────────────────────────────────────────────────────────────────── */
/*  HERO                                                                      */
/* ────────────────────────────────────────────────────────────────────────── */

function Hero() {
  return (
    <section className="relative overflow-hidden border-b border-white/[0.06]">
      <div className="absolute inset-0 gridlines pointer-events-none"/>
      <div className="absolute inset-0 hero-radial pointer-events-none"/>

      <div className="relative max-w-[1440px] mx-auto px-6 lg:px-10 pt-20 lg:pt-28 pb-24 grid grid-cols-12 gap-8">
        {/* Left: copy */}
        <div className="col-span-12 lg:col-span-7 xl:col-span-8">
          <div className="flex items-center gap-2.5 mb-12 font-mono text-[11px] uppercase tracking-[0.22em] text-mute">
            <span className="text-glowc">[</span>
            <span className="relative inline-flex">
              <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 pulse-dot"></span>
            </span>
            <span>SQA · INSTITUTIONAL TIER</span>
            <span className="text-faint">/</span>
            <span>RUNTIME OPERATIONAL</span>
            <span className="text-glowc">]</span>
          </div>

          <h1 className="text-[clamp(46px,7.4vw,108px)] leading-[0.94] tracking-[-0.035em] font-medium">
            Institutional<br/>
            Quantitative<br/>
            <span className="text-mute">Infrastructure<span className="text-glowc">.</span></span>
          </h1>

          <p className="mt-10 max-w-[640px] text-[18px] md:text-[19px] text-mute leading-[1.55]">
            We build AI-driven, high-frequency quantitative simulation engines for{' '}
            <span className="text-white/90">decentralized finance</span> and{' '}
            <span className="text-white/90">predictive sports modeling</span>.
          </p>

          <div className="mt-12 flex flex-wrap items-center gap-3">
            <button className="group h-12 pl-6 pr-2 rounded-full bg-white text-ink-950 font-medium inline-flex items-center gap-3 hover:bg-white/90 transition-colors">
              <span>View Architecture</span>
              <span className="w-8 h-8 rounded-full bg-ink-950 text-white inline-flex items-center justify-center transition-transform group-hover:translate-x-0.5">
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </span>
            </button>
            <button className="h-12 px-5 rounded-full hairline text-white/85 hover:text-white text-[13.5px] inline-flex items-center gap-2 transition-colors hover:bg-white/[0.03]">
              <span>Read whitepaper</span>
              <span className="text-dim font-mono text-[11px]">/ 24pp PDF</span>
            </button>
          </div>

          {/* footer stat row */}
          <div className="mt-16 pt-6 border-t border-white/[0.06] grid grid-cols-2 sm:grid-cols-4 gap-y-4 max-w-2xl">
            {[
              ['127ms',    'P50 execution'],
              ['10,000×',  'MC iterations / slate'],
              ['1,847',    'Smart wallets indexed'],
              ['σ 5.00%',  'Stop-loss policy'],
            ].map(([n, l]) => (
              <div key={l}>
                <div className="text-[22px] tracking-tight font-medium num">{n}</div>
                <div className="text-[11px] uppercase tracking-[0.16em] text-dim mt-1">{l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Right: live system panel */}
        <div className="col-span-12 lg:col-span-5 xl:col-span-4 lg:pl-4">
          <HeroSystemPanel/>
        </div>
      </div>
    </section>
  );
}

function HeroSystemPanel() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setTick(x => x + 1), 1100);
    return () => clearInterval(t);
  }, []);

  // Synthetic latency series, deterministic seeded
  const series = useMemo(() => {
    return Array.from({ length: 48 }, (_, i) => {
      const s = Math.sin(i * 0.41) * 0.5 + Math.cos(i * 0.92) * 0.3;
      return 0.45 + s * 0.18 + (i % 11 === 0 ? 0.12 : 0);
    });
  }, []);

  const latency = 118 + (tick % 7) * 3 - 6;
  const queue   = 312 + (tick % 13);

  return (
    <div className="hairline rounded-2xl bg-ink-900/70 backdrop-blur p-5 relative overflow-hidden">
      <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-glowc/40 to-transparent"/>

      <div className="flex items-center justify-between font-mono text-[10.5px] uppercase tracking-[0.18em] text-mute">
        <div className="flex items-center gap-2">
          <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 pulse-dot"></span>
          <span>Runtime · us-east-1</span>
        </div>
        <span className="text-dim">v4.21.8</span>
      </div>

      <div className="mt-5 grid grid-cols-2 gap-x-4 gap-y-5">
        <div>
          <div className="text-[10px] font-mono uppercase tracking-[0.16em] text-dim">Exec latency</div>
          <div className="mt-1 flex items-baseline gap-1.5">
            <span className="text-[28px] font-medium num tracking-tight">{latency}</span>
            <span className="text-mute text-sm">ms</span>
          </div>
          <div className="text-[10px] text-dim font-mono mt-0.5">P50 · trailing 60s</div>
        </div>
        <div>
          <div className="text-[10px] font-mono uppercase tracking-[0.16em] text-dim">Queue depth</div>
          <div className="mt-1 flex items-baseline gap-1.5">
            <span className="text-[28px] font-medium num tracking-tight">{queue}</span>
            <span className="text-mute text-sm">msg</span>
          </div>
          <div className="text-[10px] text-dim font-mono mt-0.5">Helius WS · stable</div>
        </div>
      </div>

      {/* sparkline */}
      <div className="mt-5">
        <div className="flex items-end gap-[3px] h-16">
          {series.map((v, i) => (
            <div
              key={i}
              className="flex-1 rounded-sm"
              style={{
                height: `${Math.max(8, v * 100)}%`,
                background: i === series.length - 1
                  ? '#67e8f9'
                  : i > series.length - 6
                    ? 'rgba(103,232,249,0.55)'
                    : 'rgba(255,255,255,0.16)',
              }}
            />
          ))}
        </div>
        <div className="mt-2 flex justify-between font-mono text-[10px] text-dim">
          <span>−60s</span><span>−30s</span><span>now</span>
        </div>
      </div>

      <div className="mt-5 pt-4 border-t border-white/[0.06] grid grid-cols-3 gap-3 text-[11px]">
        {[
          ['Helius',   'OK',  'emerald'],
          ['Solana',   'OK',  'emerald'],
          ['Reasoner', 'OK',  'emerald'],
        ].map(([k, v]) => (
          <div key={k} className="flex items-center gap-2">
            <span className="w-1.5 h-1.5 rounded-full bg-emerald-400"></span>
            <span className="text-mute">{k}</span>
            <span className="text-dim ml-auto font-mono text-[10px]">{v}</span>
          </div>
        ))}
      </div>

      {/* corner ticks */}
      <CornerTicks/>
    </div>
  );
}

function CornerTicks() {
  return (
    <>
      <div className="absolute top-1 left-1 w-2.5 h-2.5 border-t border-l border-white/15"/>
      <div className="absolute top-1 right-1 w-2.5 h-2.5 border-t border-r border-white/15"/>
      <div className="absolute bottom-1 left-1 w-2.5 h-2.5 border-b border-l border-white/15"/>
      <div className="absolute bottom-1 right-1 w-2.5 h-2.5 border-b border-r border-white/15"/>
    </>
  );
}

/* ────────────────────────────────────────────────────────────────────────── */
/*  ARCHITECTURE — BENTO                                                      */
/* ────────────────────────────────────────────────────────────────────────── */

function SectionHeader({ index, eyebrow, title, kicker }) {
  return (
    <div className="grid grid-cols-12 gap-8 mb-12">
      <div className="col-span-12 md:col-span-3">
        <div className="font-mono text-[11px] uppercase tracking-[0.22em] text-dim">
          §{index} <span className="text-glowc">/</span> {eyebrow}
        </div>
      </div>
      <div className="col-span-12 md:col-span-9">
        <h2 className="text-[clamp(32px,4.4vw,56px)] leading-[1.04] tracking-[-0.025em] font-medium max-w-[18ch]">
          {title}
        </h2>
        {kicker && (
          <p className="mt-5 max-w-2xl text-mute text-[16px] leading-relaxed">{kicker}</p>
        )}
      </div>
    </div>
  );
}

function Architecture() {
  return (
    <section className="relative border-b border-white/[0.06]">
      <div className="max-w-[1440px] mx-auto px-6 lg:px-10 py-24 lg:py-32">
        <SectionHeader
          index="01"
          eyebrow="The Architecture"
          title="Two engines. One reasoning core."
          kicker="Sentinel operates a unified inference layer over two production verticals — on-chain execution and predictive sports simulation — sharing data plane, reasoning model, and risk policy."
        />

        <div className="grid grid-cols-12 gap-6">
          <SolSentinelCard />
          <SentinelProCard />
        </div>
      </div>
    </section>
  );
}

/* ───── SOL SENTINEL CARD ───── */

function SolSentinelCard() {
  return (
    <div className="col-span-12 lg:col-span-7 rounded-2xl bg-ink-900 hairline relative overflow-hidden">
      <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-glowc/30 via-glowc/10 to-transparent"/>

      {/* header */}
      <div className="p-8 lg:p-10 pb-6">
        <div className="flex items-center justify-between mb-7">
          <div className="font-mono text-[10.5px] uppercase tracking-[0.22em] text-dim flex items-center gap-2">
            <span className="text-glowc">◆</span>
            <span>Card 01 · On-chain Execution</span>
          </div>
          <div className="font-mono text-[10.5px] uppercase tracking-[0.18em] text-mute flex items-center gap-2">
            <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 pulse-dot"></span>
            <span>LIVE · mainnet-beta</span>
          </div>
        </div>

        <h3 className="text-[34px] tracking-tight font-medium leading-[1.05]">
          SOL Sentinel
        </h3>
        <p className="mt-4 max-w-[58ch] text-mute leading-relaxed">
          High-frequency algorithmic trading on the Solana blockchain. Real-time Helius API tracking of smart-money wallet movements and liquidity pools. Features automated <span className="text-white/90">"Kevin's Ladder"</span> execution logic with strict <span className="text-glowc font-mono">5%</span> dynamic stop-losses for unmonitored overnight market volatility.
        </p>
      </div>

      {/* internal bento */}
      <div className="px-8 lg:px-10 pb-10 grid grid-cols-12 gap-4">
        <WalletTracker />
        <KevinsLadder />
        <StopLossGauge />
      </div>
    </div>
  );
}

function WalletTracker() {
  const seed = [
    { w: '7gKx…Hp4f', tag: 'whale · t1',    qty: '+12,400 SOL', side: 'BUY',  pool: 'BONK/SOL',  ms: 12 },
    { w: 'B2qN…M9Lz', tag: 'mm · jump',     qty: '−3,200 SOL',  side: 'SELL', pool: 'WIF/SOL',   ms: 18 },
    { w: 'Cf4R…s12p', tag: 'whale · t1',    qty: '+8,910 SOL',  side: 'BUY',  pool: 'JUP/USDC',  ms: 9  },
    { w: 'Dm9X…aQ7t', tag: 'inflow · cex',  qty: '+24,800 SOL', side: 'BUY',  pool: 'SOL/USDC',  ms: 31 },
    { w: 'Eq1V…r3Yk', tag: 'whale · t2',    qty: '+1,180 SOL',  side: 'BUY',  pool: 'POPCAT',    ms: 14 },
    { w: 'Fa0L…u8Wm', tag: 'dev · multisig',qty: '−540 SOL',    side: 'SELL', pool: 'TNSR',      ms: 22 },
  ];
  const [rows, setRows] = useState(seed);

  useEffect(() => {
    const id = setInterval(() => {
      setRows(prev => {
        const next = [...prev];
        // rotate
        const head = next.shift();
        next.push({
          ...head,
          ms: 6 + Math.floor(Math.random() * 28),
          qty: head.qty,
        });
        return next;
      });
    }, 1800);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="col-span-12 md:col-span-7 rounded-xl bg-ink-850 hairline overflow-hidden">
      <div className="px-4 py-2.5 border-b border-white/[0.06] flex items-center justify-between font-mono text-[10.5px] uppercase tracking-[0.18em]">
        <div className="flex items-center gap-2">
          <svg width="11" height="11" viewBox="0 0 12 12" fill="none"><circle cx="6" cy="6" r="2" fill="#67e8f9"/><circle cx="6" cy="6" r="5" stroke="#67e8f9" strokeWidth="0.8" opacity="0.4"/></svg>
          <span className="text-mute">Smart-money feed</span>
          <span className="text-faint">·</span>
          <span className="text-dim">Helius WS</span>
        </div>
        <span className="text-dim">last 60s</span>
      </div>
      <div className="font-mono text-[11.5px]">
        <div className="grid grid-cols-12 gap-2 px-4 py-1.5 text-[10px] uppercase tracking-[0.14em] text-faint border-b border-white/[0.04]">
          <div className="col-span-3">wallet</div>
          <div className="col-span-3">tag</div>
          <div className="col-span-3">qty</div>
          <div className="col-span-2">pool</div>
          <div className="col-span-1 text-right">Δ</div>
        </div>
        {rows.map((r, i) => (
          <div
            key={i}
            className="grid grid-cols-12 gap-2 px-4 py-2 border-b border-white/[0.03] last:border-0 hover:bg-white/[0.015] transition-colors"
          >
            <div className="col-span-3 text-white/85">{r.w}</div>
            <div className="col-span-3 text-mute">{r.tag}</div>
            <div className={'col-span-3 num ' + (r.side === 'BUY' ? 'text-emerald-400' : 'text-rose-400')}>{r.qty}</div>
            <div className="col-span-2 text-white/70">{r.pool}</div>
            <div className="col-span-1 text-right text-dim num">{r.ms}ms</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function KevinsLadder() {
  // 6 rungs representing scaled entry/exit ladder
  const rungs = [
    { px: '$184.62', size: '25%', state: 'fill',   d: '+0.0%' },
    { px: '$182.30', size: '20%', state: 'fill',   d: '−1.3%' },
    { px: '$179.84', size: '20%', state: 'arm',    d: '−2.6%' },
    { px: '$177.05', size: '15%', state: 'arm',    d: '−4.1%' },
    { px: '$175.39', size: '12%', state: 'pend',   d: '−5.0%' },
    { px: '$172.20', size: '08%', state: 'pend',   d: '−6.7%' },
  ];
  const [active, setActive] = useState(2);
  useEffect(() => {
    const id = setInterval(() => setActive(a => (a + 1) % rungs.length), 1500);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="col-span-12 md:col-span-5 rounded-xl bg-ink-850 hairline p-4">
      <div className="flex items-center justify-between font-mono text-[10.5px] uppercase tracking-[0.18em] text-mute mb-3">
        <span>Kevin's Ladder</span>
        <span className="text-dim">scaled entry · 6r</span>
      </div>
      <div className="space-y-1.5">
        {rungs.map((r, i) => {
          const isFill = r.state === 'fill';
          const isArm  = r.state === 'arm';
          const isActive = i === active;
          return (
            <div key={i} className="grid grid-cols-12 gap-2 items-center text-[11px] font-mono">
              <div className="col-span-1 text-faint text-right">{String(i + 1).padStart(2, '0')}</div>
              <div className="col-span-3 num text-white/80">{r.px}</div>
              <div className="col-span-1 num text-dim">{r.d}</div>
              <div className="col-span-5 relative h-2 rounded-full bg-white/[0.04] overflow-hidden">
                <div
                  className="absolute inset-y-0 left-0 rounded-full transition-all"
                  style={{
                    width: r.size,
                    background: isFill ? '#67e8f9' : isArm ? 'rgba(196,181,253,0.7)' : 'rgba(255,255,255,0.18)',
                    opacity: isActive ? 1 : 0.85
                  }}
                />
              </div>
              <div className={
                'col-span-2 text-[9.5px] uppercase tracking-[0.14em] text-right ' +
                (isFill ? 'text-glowc' : isArm ? 'text-glowp' : 'text-dim')
              }>
                {r.state}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function StopLossGauge() {
  const [val, setVal] = useState(2.7);
  useEffect(() => {
    const id = setInterval(() => {
      setVal(v => {
        const next = v + (Math.random() - 0.5) * 0.6;
        return Math.min(4.9, Math.max(0.2, next));
      });
    }, 1100);
    return () => clearInterval(id);
  }, []);
  const pct = val / 5;
  return (
    <div className="col-span-12 rounded-xl bg-ink-850 hairline p-4">
      <div className="flex items-center justify-between mb-3">
        <div className="font-mono text-[10.5px] uppercase tracking-[0.18em] text-mute flex items-center gap-2">
          <span>Stop-loss policy</span>
          <span className="text-faint">·</span>
          <span className="text-dim">unmonitored overnight σ</span>
        </div>
        <div className="font-mono text-[10.5px] text-dim">
          drawdown <span className="text-white/80 num">{val.toFixed(2)}%</span> / threshold <span className="text-glowc num">5.00%</span>
        </div>
      </div>
      <div className="relative h-2 rounded-full bg-white/[0.04] overflow-hidden">
        <div
          className="absolute inset-y-0 left-0 rounded-full transition-all duration-700"
          style={{
            width: `${pct * 100}%`,
            background: 'linear-gradient(90deg, rgba(103,232,249,0.6) 0%, rgba(196,181,253,0.7) 60%, rgba(244,114,182,0.9) 100%)',
          }}
        />
        {/* threshold ticks */}
        {[1, 2, 3, 4].map(t => (
          <div key={t} className="absolute top-0 bottom-0 w-px bg-white/10" style={{ left: `${t * 20}%` }}/>
        ))}
        <div className="absolute top-0 bottom-0 w-px bg-rose-400/60" style={{ left: '100%' }}/>
      </div>
      <div className="mt-2 flex justify-between font-mono text-[10px] text-faint">
        <span>0%</span><span>1%</span><span>2%</span><span>3%</span><span>4%</span><span className="text-rose-400/80">5% kill</span>
      </div>
    </div>
  );
}

/* ───── SENTINEL PRO CARD ───── */

function SentinelProCard() {
  return (
    <div className="col-span-12 lg:col-span-5 rounded-2xl bg-ink-900 hairline relative overflow-hidden flex flex-col">
      <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-glowp/40 via-glowp/15 to-transparent"/>

      {/* header */}
      <div className="p-8 lg:p-10 pb-6">
        <div className="flex items-center justify-between mb-7">
          <div className="font-mono text-[10.5px] uppercase tracking-[0.22em] text-dim flex items-center gap-2">
            <span className="text-glowp">◆</span>
            <span>Card 02 · Predictive Simulation</span>
          </div>
          <div className="font-mono text-[10.5px] uppercase tracking-[0.18em] text-mute flex items-center gap-2">
            <span className="w-1.5 h-1.5 rounded-full bg-glowp pulse-dot"></span>
            <span>SLATE · LIVE</span>
          </div>
        </div>

        <h3 className="text-[34px] tracking-tight font-medium leading-[1.05]">
          Sentinel Pro Engines
        </h3>
        <p className="mt-4 text-mute leading-relaxed">
          Predictive Python-based simulation models for <span className="text-white/90">NHL, NFL, MLB, and NBA</span>. Executes massive <span className="text-white/90">10,000-iteration Monte Carlo</span> environments. Actively scrubs live rosters to recalculate TS% and usage voids, outputting Log5 cross-slate discrepancy matrices for mathematically validated <span className="text-glowm font-mono">+EV</span> targets.
        </p>
      </div>

      <div className="px-8 lg:px-10 pb-6">
        <LeagueRow/>
      </div>

      <div className="px-8 lg:px-10 pb-6">
        <PythonSnippet/>
      </div>

      <div className="px-8 lg:px-10 pb-6">
        <MonteCarloCounter/>
      </div>

      <div className="px-8 lg:px-10 pb-10 mt-auto">
        <Log5Matrix/>
      </div>
    </div>
  );
}

function LeagueRow() {
  const leagues = [
    { k: 'NHL', state: 'SETTLED', tone: 'mute' },
    { k: 'NBA', state: 'LIVE',    tone: 'cyan' },
    { k: 'NFL', state: 'PRE-LOCK',tone: 'purple' },
    { k: 'MLB', state: 'IDLE',    tone: 'mute' },
  ];
  return (
    <div className="grid grid-cols-4 gap-2">
      {leagues.map(l => (
        <div key={l.k} className="hairline rounded-lg bg-ink-850 px-3 py-2.5">
          <div className="font-mono text-[10px] uppercase tracking-[0.18em] text-dim">{l.k}</div>
          <div className={
            'mt-1 text-[11px] font-mono ' +
            (l.tone === 'cyan' ? 'text-glowc' : l.tone === 'purple' ? 'text-glowp' : 'text-white/80')
          }>
            {l.state}
          </div>
        </div>
      ))}
    </div>
  );
}

function PythonSnippet() {
  const lines = [
    { n: 1,  s: '#', t: ' simulate.py · sentinel-pro v3.1' },
    { n: 2,  s: 'from', t: ' sentinel.engine import MonteCarlo, Slate' },
    { n: 3,  s: 'from', t: ' sentinel.risk import Policy' },
    { n: 4,  s: '',    t: '' },
    { n: 5,  s: 'slate', t: ' = Slate.from_live("NBA-2025-03-14")' },
    { n: 6,  s: 'slate', t: '.scrub(injuries=True, recompute=["TS%", "USG"])' },
    { n: 7,  s: '',    t: '' },
    { n: 8,  s: 'mc', t: ' = MonteCarlo(iterations=10_000, seed="hkc")' },
    { n: 9,  s: 'mc', t: '.policy = Policy(stop_loss=0.05, dynamic=True)' },
    { n: 10, s: 'results', t: ' = mc.run(slate, output="log5_matrix")' },
    { n: 11, s: '',    t: '' },
    { n: 12, s: 'print', t: '(results.cross_slate_ev(min_conviction=0.62))' },
  ];
  return (
    <div className="rounded-xl bg-ink-850 hairline overflow-hidden">
      <div className="px-4 py-2 border-b border-white/[0.06] flex items-center justify-between font-mono text-[10.5px] uppercase tracking-[0.18em]">
        <div className="flex items-center gap-2">
          <div className="flex gap-1">
            <span className="w-2 h-2 rounded-full bg-white/15"/>
            <span className="w-2 h-2 rounded-full bg-white/15"/>
            <span className="w-2 h-2 rounded-full bg-white/15"/>
          </div>
          <span className="text-mute ml-1">simulate.py</span>
        </div>
        <span className="text-dim">python · 3.12</span>
      </div>
      <pre className="font-mono text-[11.5px] leading-[1.65] px-4 py-3 overflow-x-auto">
        {lines.map((l, i) => (
          <div key={i} className="flex">
            <span className="w-6 text-right pr-3 text-faint select-none num">{l.n}</span>
            <span>
              {l.s.startsWith('#') ? (
                <span className="text-dim italic">{l.s + l.t}</span>
              ) : (
                <>
                  <PyTok s={l.s}/>
                  <span className="text-white/80">{
                    l.t
                      .replace(/("[^"]*")/g, '\x01$1\x01')
                      .split('\x01')
                      .map((seg, j) => seg.startsWith('"')
                        ? <span key={j} className="text-glowm">{seg}</span>
                        : <span key={j}>{seg}</span>
                      )
                  }</span>
                </>
              )}
            </span>
          </div>
        ))}
        <div className="flex">
          <span className="w-6 text-right pr-3 text-faint select-none num">13</span>
          <span className="text-glowc">{'>>> '}</span>
          <span className="text-mute ml-1">stop_loss policy armed · 5.00% dynamic · 10,000 iterations dispatched</span>
          <span className="blink text-white/80 ml-1">▍</span>
        </div>
      </pre>
    </div>
  );
}

function PyTok({ s }) {
  if (!s) return null;
  const kw = ['from','import','print','def','return','if','else','for','in','as'];
  const isKw = kw.includes(s);
  if (isKw) return <span className="text-glowp">{s}</span>;
  if (/^[A-Z]/.test(s)) return <span className="text-glowc">{s}</span>;
  return <span className="text-white/85">{s}</span>;
}

function MonteCarloCounter() {
  const [n, setN] = useState(0);
  const target = 10000;
  useEffect(() => {
    if (n >= target) {
      const r = setTimeout(() => setN(0), 1400);
      return () => clearTimeout(r);
    }
    const step = Math.max(57, Math.floor((target - n) / 22));
    const id = setTimeout(() => setN(v => Math.min(target, v + step)), 38);
    return () => clearTimeout(id);
  }, [n]);
  const pct = n / target;
  return (
    <div className="rounded-xl bg-ink-850 hairline p-4">
      <div className="flex items-center justify-between mb-2">
        <div className="font-mono text-[10.5px] uppercase tracking-[0.18em] text-mute">
          Monte Carlo run · NBA slate
        </div>
        <div className="font-mono text-[10.5px] text-dim">
          {n >= target ? <span className="text-glowm">COMPLETE</span> : 'EXECUTING…'}
        </div>
      </div>
      <div className="flex items-baseline gap-2">
        <span className="text-[40px] font-medium tracking-tight num">{n.toLocaleString()}</span>
        <span className="text-mute font-mono text-sm">/ 10,000 iter</span>
      </div>
      <div className="mt-2 relative h-1.5 rounded-full bg-white/[0.04] overflow-hidden">
        <div
          className="absolute inset-y-0 left-0 rounded-full transition-all"
          style={{
            width: `${pct * 100}%`,
            background: 'linear-gradient(90deg, #c4b5fd 0%, #67e8f9 100%)',
          }}
        />
      </div>
    </div>
  );
}

function Log5Matrix() {
  // small 5x5 cross-slate discrepancy matrix
  const teams = ['LAL','BOS','DEN','PHI','MIA'];
  const grid = useMemo(() => {
    return teams.map((_, r) =>
      teams.map((__, c) => {
        if (r === c) return null;
        const v = ((Math.sin(r * 7.1 + c * 3.7) + Math.cos((r + c) * 1.9)) * 0.28) + 0.5;
        return v;
      })
    );
  }, []);
  const cell = (v) => {
    if (v === null) return { bg: 'rgba(255,255,255,0.02)', text: '#363941', val: '—' };
    if (v > 0.62) return { bg: 'rgba(134,239,172,0.18)', text: '#86efac', val: v.toFixed(2) };
    if (v > 0.55) return { bg: 'rgba(196,181,253,0.14)', text: '#c4b5fd', val: v.toFixed(2) };
    if (v < 0.40) return { bg: 'rgba(244,114,182,0.10)', text: '#f9a8d4', val: v.toFixed(2) };
    return { bg: 'rgba(255,255,255,0.03)', text: '#8a8d96', val: v.toFixed(2) };
  };
  return (
    <div className="rounded-xl bg-ink-850 hairline p-4">
      <div className="flex items-center justify-between mb-3 font-mono text-[10.5px] uppercase tracking-[0.18em]">
        <span className="text-mute">Log5 · cross-slate discrepancy</span>
        <span className="text-dim">+EV ≥ <span className="text-glowm">0.62</span></span>
      </div>
      <div className="grid grid-cols-6 gap-1 font-mono text-[10.5px]">
        <div></div>
        {teams.map(t => <div key={t} className="text-center text-dim py-1">{t}</div>)}
        {grid.map((row, ri) => (
          <React.Fragment key={ri}>
            <div className="text-dim py-1 pr-1 text-right">{teams[ri]}</div>
            {row.map((v, ci) => {
              const c = cell(v);
              return (
                <div
                  key={ci}
                  className="aspect-square rounded-sm flex items-center justify-center num"
                  style={{ background: c.bg, color: c.text }}
                >
                  {c.val}
                </div>
              );
            })}
          </React.Fragment>
        ))}
      </div>
    </div>
  );
}

/* ────────────────────────────────────────────────────────────────────────── */
/*  CORE TECH                                                                 */
/* ────────────────────────────────────────────────────────────────────────── */

function CoreTech() {
  return (
    <section className="relative border-b border-white/[0.06] overflow-hidden">
      <div className="absolute inset-0 gridlines-fine opacity-50 pointer-events-none"/>
      <div className="absolute inset-0 pointer-events-none" style={{
        background: 'radial-gradient(ellipse 700px 400px at 80% 20%, rgba(196,181,253,0.08), transparent 60%)'
      }}/>

      <div className="relative max-w-[1440px] mx-auto px-6 lg:px-10 py-24 lg:py-32">
        <SectionHeader
          index="02"
          eyebrow="Core Technology"
          title="Powered by Deep Reasoning Context."
        />

        <div className="grid grid-cols-12 gap-8">
          {/* body copy left */}
          <div className="col-span-12 lg:col-span-5">
            <p className="text-[17.5px] text-mute leading-[1.65]">
              Identifying mathematical anomalies <span className="text-glowm font-mono">(+EV)</span> requires heavy, near-instantaneous reasoning over dense statistical matrices.
            </p>
            <p className="mt-5 text-[17.5px] text-mute leading-[1.65]">
              Sentinel architecture relies on <span className="text-white/90">industry-leading LLM reasoning</span> to ingest raw simulation CSVs, live injury reports, and complex blockchain logs simultaneously.
            </p>
            <p className="mt-5 text-[17.5px] text-mute leading-[1.65]">
              By acting as our core cognitive engine, it synthesizes dense mathematical context <span className="text-white/90">without hallucination</span> to output verified, high-conviction logic structures for automated execution.
            </p>

            {/* small spec table */}
            <div className="mt-10 hairline rounded-xl bg-ink-900/60 divide-y divide-white/[0.06]">
              {[
                ['Reasoning model',  'Anthropic · extended thinking'],
                ['Context window',   '200k tokens · streaming'],
                ['Ingestion plane',  'CSV · JSONL · Parquet · WS'],
                ['Verification',     'Structured-output + cross-check'],
                ['Determinism',      'Seed-pinned · log5-anchored'],
              ].map(([k, v]) => (
                <div key={k} className="grid grid-cols-12 px-5 py-3 font-mono text-[12px]">
                  <div className="col-span-5 text-dim uppercase tracking-[0.14em] text-[10.5px] self-center">{k}</div>
                  <div className="col-span-7 text-white/85">{v}</div>
                </div>
              ))}
            </div>
          </div>

          {/* reasoning trace right */}
          <div className="col-span-12 lg:col-span-7">
            <ReasoningTrace/>
          </div>
        </div>
      </div>
    </section>
  );
}

function ReasoningTrace() {
  const [phase, setPhase] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setPhase(p => (p + 1) % 4), 1700);
    return () => clearInterval(id);
  }, []);

  const inputs = [
    {
      label: 'simulation_run.csv',
      meta: '10,000 × 47 cols',
      icon: 'csv',
      lines: [
        'iter,player,proj_pts,proj_ts,usg_void,…',
        '0001,L.James,28.4,0.612,0.04,…',
        '0002,L.James,27.8,0.609,0.04,…',
        '0003,L.James,29.1,0.617,0.05,…',
        '…',
      ],
    },
    {
      label: 'injury_feed.jsonl',
      meta: 'streaming',
      icon: 'json',
      lines: [
        '{"team":"LAL","plyr":"AD","status":"OUT"}',
        '{"team":"BOS","plyr":"JT","status":"GTD"}',
        '{"team":"DEN","plyr":"NJ","status":"ACTIVE"}',
        '…',
      ],
    },
    {
      label: 'helius_logs.ws',
      meta: 'mainnet-beta',
      icon: 'chain',
      lines: [
        'slot 285341022  swap  +12,400 SOL → BONK',
        'slot 285341023  liq+  WIF/SOL  $1.84M',
        'slot 285341025  burn  4,800 SOL',
        '…',
      ],
    },
  ];

  return (
    <div className="hairline rounded-2xl bg-ink-900/70 backdrop-blur p-5 lg:p-6 relative overflow-hidden">
      <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-glowp/40 to-transparent"/>
      <div className="flex items-center justify-between font-mono text-[10.5px] uppercase tracking-[0.18em] mb-4">
        <div className="flex items-center gap-2 text-mute">
          <span className="w-1.5 h-1.5 rounded-full bg-glowp pulse-dot"></span>
          <span>Reasoning trace · trace-id 0x9c…41af</span>
        </div>
        <span className="text-dim">streaming</span>
      </div>

      {/* 3 input panels */}
      <div className="grid grid-cols-3 gap-3">
        {inputs.map((inp, i) => (
          <div key={inp.label} className="hairline rounded-lg bg-ink-850 overflow-hidden">
            <div className="px-3 py-2 border-b border-white/[0.06] flex items-center gap-2">
              <FileIcon kind={inp.icon}/>
              <div className="min-w-0">
                <div className="font-mono text-[10.5px] text-white/80 truncate">{inp.label}</div>
                <div className="font-mono text-[9.5px] text-dim">{inp.meta}</div>
              </div>
              <span className={
                'ml-auto w-1.5 h-1.5 rounded-full ' +
                (phase >= i ? 'bg-glowc' : 'bg-white/15')
              }/>
            </div>
            <div className="px-3 py-2 font-mono text-[10px] leading-[1.55] text-mute space-y-0.5 h-[88px] overflow-hidden">
              {inp.lines.map((l, j) => (
                <div key={j} className="truncate" style={{ opacity: 1 - j * 0.16 }}>
                  {l}
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>

      {/* converge arrows */}
      <div className="relative h-12 my-1">
        <svg className="absolute inset-0 w-full h-full" viewBox="0 0 600 48" preserveAspectRatio="none">
          {[100, 300, 500].map((x, i) => (
            <path
              key={i}
              d={`M ${x} 4 C ${x} 24, 300 24, 300 44`}
              stroke={phase > i ? '#c4b5fd' : 'rgba(255,255,255,0.12)'}
              strokeWidth="1"
              fill="none"
              strokeDasharray="2 3"
            />
          ))}
          <circle cx="300" cy="44" r="2.5" fill="#c4b5fd"/>
        </svg>
      </div>

      {/* reasoning core */}
      <div className="hairline-s rounded-xl bg-ink-850 p-4">
        <div className="flex items-center justify-between font-mono text-[10.5px] uppercase tracking-[0.18em] mb-3">
          <div className="flex items-center gap-2">
            <span className="text-glowp">◆</span>
            <span className="text-mute">Cognitive synthesis</span>
            <span className="text-faint">·</span>
            <span className="text-dim">extended thinking</span>
          </div>
          <span className="text-dim num">Δ 1.84s</span>
        </div>
        <div className="font-mono text-[11.5px] leading-[1.7] text-white/80 space-y-1">
          <div><span className="text-dim">[001]</span> ingesting <span className="text-glowc">3 sources</span> · 240k tokens · pinned seed</div>
          <div><span className="text-dim">[002]</span> reconciling injury_feed → recomputing TS% · USG voids for 4 rotations</div>
          <div><span className="text-dim">[003]</span> projecting Log5 cross-slate discrepancy against MC output (10,000 iter)</div>
          <div><span className="text-dim">[004]</span> verifying conviction ≥ <span className="text-glowm">0.62</span> · checking against blockchain liquidity drift</div>
          <div className="text-white/95">
            <span className="text-glowm">→</span> emit <span className="text-white font-medium">3 high-conviction +EV targets</span>; arm Kevin's Ladder · σ=5.00%
            <span className="blink text-white/80 ml-1">▍</span>
          </div>
        </div>
      </div>

      {/* output chips */}
      <div className="mt-4 grid grid-cols-3 gap-3">
        {[
          ['NBA · LAL/DEN o225.5', '0.71'],
          ['SOL/BONK pool entry',  '0.68'],
          ['NBA · BOS −4.5 1H',    '0.64'],
        ].map(([k, c]) => (
          <div key={k} className="hairline rounded-lg bg-ink-900 px-3 py-2.5 flex items-center justify-between">
            <div>
              <div className="font-mono text-[10px] uppercase tracking-[0.14em] text-dim">Target</div>
              <div className="text-[12.5px] text-white/90 mt-0.5">{k}</div>
            </div>
            <div className="text-right">
              <div className="font-mono text-[10px] uppercase tracking-[0.14em] text-dim">Conv.</div>
              <div className="font-mono text-glowm text-[13px] num">{c}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function FileIcon({ kind }) {
  if (kind === 'csv') {
    return (
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
        <rect x="2.5" y="1.5" width="11" height="13" rx="1.5" stroke="#67e8f9" strokeWidth="1"/>
        <path d="M5 6h6M5 8h6M5 10h6M8 6v6" stroke="#67e8f9" strokeWidth="0.8" opacity="0.6"/>
      </svg>
    );
  }
  if (kind === 'json') {
    return (
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
        <path d="M6 2c-2 0-2 2-2 4s-2 2-2 2 2 0 2 2 0 4 2 4" stroke="#c4b5fd" strokeWidth="1" strokeLinecap="round"/>
        <path d="M10 2c2 0 2 2 2 4s2 2 2 2-2 0-2 2 0 4-2 4" stroke="#c4b5fd" strokeWidth="1" strokeLinecap="round"/>
      </svg>
    );
  }
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
      <circle cx="4" cy="4" r="1.6" stroke="#86efac" strokeWidth="1"/>
      <circle cx="12" cy="4" r="1.6" stroke="#86efac" strokeWidth="1"/>
      <circle cx="4" cy="12" r="1.6" stroke="#86efac" strokeWidth="1"/>
      <circle cx="12" cy="12" r="1.6" stroke="#86efac" strokeWidth="1"/>
      <path d="M5.6 4h4.8M5.6 12h4.8M4 5.6v4.8M12 5.6v4.8" stroke="#86efac" strokeWidth="0.8"/>
    </svg>
  );
}

/* ────────────────────────────────────────────────────────────────────────── */
/*  FOOTER                                                                    */
/* ────────────────────────────────────────────────────────────────────────── */

function Footer() {
  return (
    <footer className="relative">
      <div className="max-w-[1440px] mx-auto px-6 lg:px-10 py-16">
        <div className="grid grid-cols-12 gap-8">
          <div className="col-span-12 md:col-span-5">
            <div className="flex items-center gap-2.5">
              <Logo size={20}/>
              <span className="font-medium tracking-tight">Sentinel Quant Analytics</span>
            </div>
            <p className="mt-4 text-mute max-w-md leading-relaxed text-[14.5px]">
              Institutional-grade quantitative infrastructure. Operated by SQA Research, LLC. All systems are non-custodial.
            </p>
          </div>
          <div className="col-span-6 md:col-span-2">
            <div className="font-mono text-[10.5px] uppercase tracking-[0.18em] text-dim mb-3">Engines</div>
            <ul className="space-y-2 text-[13.5px] text-mute">
              <li><a className="hover:text-white cursor-pointer">SOL Sentinel</a></li>
              <li><a className="hover:text-white cursor-pointer">Pro · NBA</a></li>
              <li><a className="hover:text-white cursor-pointer">Pro · NFL</a></li>
              <li><a className="hover:text-white cursor-pointer">Pro · NHL/MLB</a></li>
            </ul>
          </div>
          <div className="col-span-6 md:col-span-2">
            <div className="font-mono text-[10.5px] uppercase tracking-[0.18em] text-dim mb-3">Research</div>
            <ul className="space-y-2 text-[13.5px] text-mute">
              <li><a className="hover:text-white cursor-pointer">Whitepaper</a></li>
              <li><a className="hover:text-white cursor-pointer">Methodology</a></li>
              <li><a className="hover:text-white cursor-pointer">Changelog</a></li>
              <li><a className="hover:text-white cursor-pointer">Status</a></li>
            </ul>
          </div>
          <div className="col-span-12 md:col-span-3">
            <div className="font-mono text-[10.5px] uppercase tracking-[0.18em] text-dim mb-3">System</div>
            <div className="hairline rounded-lg bg-ink-900 p-3 font-mono text-[11px]">
              <div className="flex items-center justify-between">
                <span className="text-mute">All systems</span>
                <span className="flex items-center gap-1.5 text-emerald-400">
                  <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 pulse-dot"></span>
                  operational
                </span>
              </div>
              <div className="mt-2 pt-2 border-t border-white/[0.06] flex items-center justify-between text-dim">
                <span>region</span><span>us-east-1 · eu-west-2</span>
              </div>
            </div>
          </div>
        </div>

        <div className="mt-12 pt-6 border-t border-white/[0.06] flex flex-wrap items-center gap-4 font-mono text-[10.5px] uppercase tracking-[0.18em] text-dim">
          <span>© 2026 SQA Research, LLC</span>
          <span className="text-faint">·</span>
          <span>Build 4.21.8</span>
          <span className="text-faint">·</span>
          <span>SHA 0x9c…41af</span>
          <span className="ml-auto flex items-center gap-3">
            <a className="hover:text-white cursor-pointer">Terms</a>
            <span className="text-faint">/</span>
            <a className="hover:text-white cursor-pointer">Privacy</a>
            <span className="text-faint">/</span>
            <a className="hover:text-white cursor-pointer">Disclosures</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

/* ────────────────────────────────────────────────────────────────────────── */

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
