/* ExploiTable landing — components
   Builds Hero, LeakDemo, Features, HowItWorks, Counters, Pricing, FAQ, CTA, Footer.
   Exposed via window.ExploiTableApp.
*/

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

/* ───────── 12-day free countdown ───────── */
const FREE_DEADLINE = (() => {
  const KEY = "xt_free_deadline";
  try {
    let d = localStorage.getItem(KEY);
    if (!d) { d = String(Date.now() + 12 * 24 * 3600 * 1000); localStorage.setItem(KEY, d); }
    return parseInt(d, 10);
  } catch (_) { return Date.now() + 12 * 24 * 3600 * 1000; }
})();

function useCountdown() {
  const calc = () => Math.max(0, FREE_DEADLINE - Date.now());
  const [left, setLeft] = useState(calc);
  useEffect(() => {
    const id = setInterval(() => setLeft(calc()), 1000);
    return () => clearInterval(id);
  }, []);
  const s = Math.floor(left / 1000);
  return { days: Math.floor(s / 86400), hours: Math.floor(s / 3600) % 24, mins: Math.floor(s / 60) % 60, secs: s % 60 };
}

function Timer({ size }) {
  const t = useCountdown();
  const seg = (v, l) => (
    <span className="tseg" key={l}><b>{String(v).padStart(2, "0")}</b><i>{l}</i></span>
  );
  return (
    <span className={"timer" + (size ? " timer-" + size : "")}>
      {seg(t.days, "d")}<em>:</em>{seg(t.hours, "h")}<em>:</em>{seg(t.mins, "m")}<em>:</em>{seg(t.secs, "s")}
    </span>
  );
}

function AnnouncementBar() {
  return (
    <div className="announce">
      <div className="shell announce-inner">
        <span className="announce-flag">FREE BETA</span>
        <span className="announce-txt">Everything is <b>100% free</b> until the beta closes</span>
        <Timer />
        <a href="pricing.html#final" className="announce-cta">Claim free access →</a>
      </div>
    </div>
  );
}

/* ───────── page hero (how / pricing / faq) ───────── */
function PageHero({ kicker, title, sub, label }) {
  return (
    <section className="page-hero" data-screen-label={label || ("01 " + kicker)}>
      <div className="shell">
        <div className="ph-kicker">{kicker}</div>
        <h1 className="ph-title">{title}</h1>
        {sub && <p className="ph-sub">{sub}</p>}
        <div className="ph-cta">
          <a href="pricing.html#final" className="btn btn-primary btn-lg">Start free →</a>
          <a href="features.html" className="btn btn-lg">See it in action</a>
        </div>
      </div>
    </section>
  );
}

/* ───────── reusable CTA band ───────── */
function CTABand({ title, sub }) {
  return (
    <section className="section" style={{ paddingTop: "40px" }} data-screen-label="99 CTA band">
      <div className="shell">
        <div className="cta-band">
          <div>
            <h2 className="cta-band-title">{title}</h2>
            <p className="cta-band-sub">{sub}</p>
            <div className="ph-cta" style={{ marginTop: "24px" }}>
              <a href="pricing.html#final" className="btn btn-primary btn-lg">Start free now →</a>
              <a href="faq.html" className="btn btn-lg">Read the FAQ</a>
            </div>
          </div>
          <div className="cta-band-right">
            <Timer size="lg" />
            <div className="cta-band-note">until free access ends</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────── waitlist form ───────── */
function Waitlist({ id }) {
  const [email, setEmail] = useState("");
  const [done, setDone] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (!email || !email.includes("@")) return;
    setDone(true);
  };
  if (done) {
    return (
      <div className="waitlist-success">
        <span style={{fontFamily:"var(--mono)"}}>✓</span>
        You're on the list. Position <b style={{color:"var(--accent-2)"}}>#{1247 + Math.floor(Math.random()*9)}</b>. We'll email when access opens.
      </div>
    );
  }
  return (
    <>
      <form className="waitlist" onSubmit={submit}>
        <input id={id} type="email" placeholder="you@inbox.com" value={email}
               onChange={(e)=>setEmail(e.target.value)} autoComplete="email" />
        <button className="btn btn-primary" type="submit">Start free →</button>
      </form>
      <div className="waitlist-note">Free for 12 more days · no card required · cancel anytime</div>
    </>
  );
}

/* ───────── hero ───────── */
function Hero() {
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="shell hero-grid">
        <div>
          <div className="eyebrow"><span className="bar"></span>Free during beta · <Timer /></div>
          <h1 className="h1">
            Find their <span className="accent">leaks</span>.<br/>
            Take their <span className="strike">money</span>.
          </h1>
          <p className="lede">
            ExploiTable analyzes every opponent in your hand history and builds a leak profile per player.
            When they sit at your table, the live popup tells you exactly how to beat them — in under two
            seconds, across <strong>every table you're running</strong>.
          </p>
          <div className="works-with mono">
            <span className="ww-lbl">▎WORKS WITH</span>
            <span className="ww-list">ClubGG · PokerBros · PPPoker · standard hand-history files</span>
          </div>
          <Waitlist id="hero-email" />
          <div className="hero-stats">
            <div className="hstat">
              <div className="v">&lt;2<small>s</small></div>
              <div className="l">Live exploit response</div>
            </div>
            <div className="hstat">
              <div className="v">13<small>+</small></div>
              <div className="l">Stats tracked per street</div>
            </div>
            <div className="hstat">
              <div className="v">602</div>
              <div className="l">Spots analyzed per player</div>
            </div>
          </div>
        </div>
        <TablesShowcase />
      </div>
    </section>
  );
}

/* ───────── tables showcase — real screenshot + fake HUD popups ───────── */
function TablesShowcase() {
  return (
    <div className="tshow" role="img" aria-label="16 tables running with ExploiTable popups attached">
      <div className="tshow-frame">
        <img src="assets/tables.png" alt="Six poker tables running simultaneously" />
        <span className="tshow-scan"></span>
        <div className="tshow-pop tshow-pop-1">
          <div className="tpop-head"><span className="mono tpop-tag">LEAK</span><span className="mono tpop-id">v.ShovItAll</span></div>
          <div className="tpop-body mono">Folds flop CBet <b>68%</b> · field 51% <span className="hazard">▲</span></div>
          <span className="tpop-line tpop-line-1"></span>
        </div>
        <div className="tshow-pop tshow-pop-2">
          <div className="tpop-head"><span className="mono tpop-tag">LEAK</span><span className="mono tpop-id">v.river_rat99</span></div>
          <div className="tpop-body mono">Fold BB vs steal <b>71%</b> · field 58% <span className="hazard">▲</span></div>
          <span className="tpop-line tpop-line-2"></span>
        </div>
        <div className="tshow-pop tshow-pop-3">
          <div className="tpop-head"><span className="mono tpop-tag">LEAK</span><span className="mono tpop-id">v.MidnightTilt</span></div>
          <div className="tpop-body mono">Fold to 4Bet <b>82%</b> · field 61% <span className="hazard">▲</span></div>
          <span className="tpop-line tpop-line-3"></span>
        </div>
        <div className="tshow-pop tshow-pop-4">
          <div className="tpop-head"><span className="mono tpop-tag">LEAK</span><span className="mono tpop-id">v.ChipMonk</span></div>
          <div className="tpop-body mono">Probe turn <b>9%</b> · field 26% <span className="hazard">▲</span></div>
          <span className="tpop-line tpop-line-4"></span>
        </div>
        <div className="tshow-pop tshow-pop-5">
          <div className="tpop-head"><span className="mono tpop-tag">LEAK</span><span className="mono tpop-id">v.Fold_or_Fold</span></div>
          <div className="tpop-body mono">Folds river <b>71%</b> · field 54% <span className="hazard">▲</span></div>
          <span className="tpop-line tpop-line-5"></span>
        </div>
      </div>
      <div className="tshow-caption mono">
        ▎MULTI-TABLE · <span className="accent">5 leaks flagged</span> · 1 unknown ID
      </div>
    </div>
  );
}

/* ───────── hero duel: same spot, two outcomes ───────── */
function HeroDuel() {
  return (
    <div className="duel" role="img" aria-label="Same river spot, with and without ExploiTable">
      <DuelWithout />
      <DuelWith />
    </div>
  );
}

function HandCard({ rank, suit, dim }) {
  const suitClass = suit === "♠" ? "s-spade" : suit === "♥" ? "s-heart" : suit === "♣" ? "s-club" : "s-diamond";
  return (
    <div className={"hcard " + suitClass + (dim ? " dim" : "")}>
      <span className="hr">{rank}</span>
      <span className="hs">{suit}</span>
    </div>
  );
}

const RIVER_BOARD = [
  { r: "K", s: "♠" },
  { r: "8", s: "♦" },
  { r: "4", s: "♣" },
  { r: "2", s: "♥" },
  { r: "7", s: "♦" },
];

function Board({ size }) {
  return (
    <div className={"board" + (size === "sm" ? " board-sm" : "")}>
      {RIVER_BOARD.map((c, i) => (
        <HandCard key={i} rank={c.r} suit={c.s} />
      ))}
    </div>
  );
}

function DuelWithout() {
  const [t, setT] = useState(8);
  const [phase, setPhase] = useState("thinking"); // thinking → folded
  useEffect(() => {
    const a = setInterval(() => {
      setT(prev => {
        if (prev >= 17) { return 8; }
        return prev + (prev < 12 ? 4 : 5);
      });
    }, 900);
    const b = setInterval(() => {
      setPhase(p => p === "thinking" ? "folded" : "thinking");
      setT(8);
    }, 4800);
    return () => { clearInterval(a); clearInterval(b); };
  }, []);

  return (
    <div className="duel-panel duel-without">
      <div className="duel-head">
        <span className="duel-tag mono">▎WITHOUT EXPLOITABLE</span>
        <span className="mono duel-pot">POT $2,140</span>
      </div>
      <div className="duel-stage">
        <div className="duel-vs">
          <div className="duel-villain">
            <div className="duel-avatar dim">Mi</div>
            <div className="col">
              <div className="mono duel-name">MidnightTilt</div>
              <div className="mono duel-act">BETS $1,420 · 100% pot</div>
            </div>
          </div>
        </div>
        <Board />
        <div className="duel-hero">
          <div className="duel-hero-label mono">YOUR HAND</div>
          <div className="duel-hand">
            <HandCard rank="A" suit="♥" />
            <HandCard rank="Q" suit="♥" />
          </div>
          <div className="mono duel-note">missed flush draw · ace high</div>
        </div>
      </div>
      <div className="duel-think">
        {phase === "thinking" ? (
          <>
            <span className="think-dots"><i></i><i></i><i></i></span>
            <span className="mono">thinking… <b>{t}s</b></span>
          </>
        ) : (
          <span className="mono duel-action loss">▶ FOLD</span>
        )}
      </div>
      <div className="duel-foot mono">— best guess, no read</div>
    </div>
  );
}

function DuelWith() {
  const [pulse, setPulse] = useState(false);
  const [won, setWon] = useState(false);
  useEffect(() => {
    const p = setInterval(() => setPulse(v => !v), 1600);
    const w = setTimeout(() => setWon(true), 1100);
    return () => { clearInterval(p); clearTimeout(w); };
  }, []);
  return (
    <div className="duel-panel duel-with">
      <div className="duel-head">
        <span className="duel-tag mono accent">▎WITH EXPLOITABLE</span>
        <span className="mono duel-pot">POT $2,140</span>
      </div>
      <div className="duel-stage">
        <div className="duel-vs">
          <div className="duel-villain">
            <div className="duel-avatar">Mi</div>
            <div className="col">
              <div className="mono duel-name">MidnightTilt</div>
              <div className="mono duel-act">BETS $1,420 · 100% pot</div>
            </div>
          </div>
        </div>
        <Board />

        {/* leak readout — sits BELOW the board so it never hides it */}
        <div className={"hud" + (pulse ? " hud-pulse" : "")} aria-live="polite">
          <div className="hud-head">
            <span className="mono hud-tag">LEAK · LIVE</span>
            <span className="mono hud-id">v.MidnightTilt</span>
          </div>
          <div className="hud-row">
            <span className="mono hud-k">LEAK</span>
            <span className="mono hud-v">River over-bluffs 3-bet pots · 100% sizing</span>
          </div>
          <div className="hud-row">
            <span className="mono hud-k">BLUFF FREQ</span>
            <span className="mono hud-v"><b>41%</b> <span className="muted">· field 17%</span> <span className="hazard">▲</span> <span className="accent">+24pp</span></span>
          </div>
          <div className="hud-row">
            <span className="mono hud-k">RIVER B/X</span>
            <span className="mono hud-v"><b>0.78</b> <span className="muted">· field 1.10</span></span>
          </div>
        </div>

        <div className="duel-hero">
          <div className="duel-hero-label mono">YOUR HAND</div>
          <div className="duel-hand">
            <HandCard rank="A" suit="♥" />
            <HandCard rank="Q" suit="♥" />
          </div>
          <div className="mono duel-note">missed flush draw · ace high</div>
        </div>
      </div>
      <div className="duel-think">
        <span className="mono duel-action win">▶ CALL</span>
        <span className={"duel-stamp" + (won ? " in" : "")}>+1.7bb EV captured</span>
      </div>
      <div className="duel-foot mono accent">— pre-computed leak · matched in 1.4s</div>
    </div>
  );
}

/* ───────── table strip (multi-table signal) ───────── */
function TableStrip() {
  const tiles = useMemo(() => {
    return Array.from({ length: 16 }).map((_, i) => ({
      lit: i !== 4 && i !== 11,
      hot: [1, 6, 9, 13].includes(i),
    }));
  }, []);
  const [scan, setScan] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setScan(s => (s + 1) % 16), 320);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="tstrip">
      <div className="tstrip-lbl mono">▎16 TABLES · LIVE SCAN</div>
      <div className="tstrip-tiles">
        {tiles.map((t, i) => (
          <div key={i} className={"tile" + (t.lit ? " on" : "") + (t.hot ? " hot" : "") + (scan === i ? " scan" : "")}>
            <span className="mono">{String(i + 1).padStart(2, "0")}</span>
            {t.hot && <span className="tile-dot"></span>}
          </div>
        ))}
      </div>
      <div className="tstrip-meta mono">
        <span className="accent">●</span> 4 exploits ready · <span className="muted">2 seats unknown</span>
      </div>
    </div>
  );
}

/* authentic ClubGG leaks (real stat vocabulary, n=137 sample) */
const LEAKS = [
  { stat: "Fold to Flop CBet · IP", val: 68, field: 51, action: "C-bet 100% — barrel any two on dry boards" },
  { stat: "Fold BB vs BTN RFI",     val: 71, field: 58, action: "Open-raise BTN 100%, give up cheap if flatted" },
  { stat: "3Bet BTN",                val: 3,  field: 8,  action: "Steal wider — his 3bets are nutted, just fold" },
  { stat: "Probe Turn · OOP",        val: 9,  field: 26, action: "Check back turn freely to realize equity" },
];

/* ───────── live leak terminal ───────── */
function LeakTerminal() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const i = setInterval(() => setTick(t => t + 1), 2400);
    return () => clearInterval(i);
  }, []);

  // one value gently ticks to feel "live"
  const liveCbet = 68 + Math.round(Math.sin(tick * 0.6) * 1);

  return (
    <div className="terminal" aria-label="Live opponent analysis">
      <div className="term-head">
        <div className="left">
          <div className="term-dots"><i></i><i></i><i></i></div>
          <span>exploitable.live</span>
        </div>
        <div className="term-tab"><span className="dot"></span>Table 4 · NLH 5/10</div>
        <div className="right mono">SEAT 6 · BTN</div>
      </div>

      <div className="player-row">
        <div className="player-id">
          <div className="avatar">Sh</div>
          <div className="col">
            <div className="player-name mono">ShovItAll</div>
            <div className="player-meta mono">137 hands · ClubGG · BTN vs you</div>
          </div>
        </div>
        <div className="skill-badge">
          <span className="swatch"></span>
          <span className="mono">4 leaks matched</span>
        </div>
      </div>

      <div className="scan-line">
        <span className="blink"></span>
        <span className="mono">SCANNING 602 SPOTS · 13 STATS × 3 STREETS · 4 LEAKS vs FIELD</span>
      </div>

      <div className="leak-section">
        <div className="leak-section-hdr">
          <span>Leaks vs field</span>
          <span className="mono">SAMPLE n=137</span>
        </div>
        {LEAKS.map((lk, i) => {
          const val = i === 0 ? liveCbet : lk.val;
          const dev = val - lk.field;
          const hazard = Math.abs(dev) >= 10;
          return (
            <div className="leak-card" key={lk.stat}>
              <div className="leak-top">
                <span className="leak-name mono">{lk.stat}</span>
                <span className="leak-stat mono"><b>{val}%</b> · field {lk.field}%</span>
                <span className={"delta mono" + (hazard ? " haz" : "")}>
                  {hazard && <span className="hazard" title="10%+ deviation">▲</span>}
                  {dev > 0 ? "+" : ""}{dev}pp
                </span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/* ───────── features ───────── */
const FEATURES = [
  {
    n: "01",
    title: "Deep Leak Detection",
    body: "Drills 8 dimension levels deep — position, stack depth, street, action sequence, sizing, board texture, opponent type, and matchup — to surface leaks basic HUDs miss entirely.",
    foot: "8 levels deep",
    visual: "dims",
  },
  {
    n: "02",
    title: "Reads every table, live",
    body: "Doesn't depend on hand history exports. The engine reads each table directly — opponent names, pot, board, action — and feeds the exploit engine in real time. Up to 16 tables simultaneously, one HUD per seat.",
    foot: "16 tables · no exports needed",
    visual: "tables",
  },
  {
    n: "03",
    title: "Live HUD Alerts",
    body: "When a known leak fires at your table, the overlay shows the exploit and the exact action in under two seconds. No clicking through tabs mid-hand.",
    foot: "< 2s response",
    visual: "alert",
  },
  {
    n: "04",
    title: "Rest of Field Comparison",
    body: "Every opponent stat is compared against the actual pool you play in — not a generic 2014 dataset. The baseline updates as the field evolves.",
    foot: "Live baseline",
    visual: "compare",
  },
  {
    n: "05",
    title: "Study System",
    body: "Pre-compute your regulars overnight. When you sit down tomorrow, every relevant stat across 602 spots is already cached — alerts fire on the first hand.",
    foot: "Instant load",
    visual: "curve",
  },
  {
    n: "06",
    title: "EV-Based Skill Rating",
    body: "Separates 'plays differently' from 'plays badly' using actual win rates. A loose player who wins isn't a leak — and you'll know the difference.",
    foot: "Win-rate weighted",
    visual: "skill",
  },
];

function FeatureViz({ kind }) {
  if (kind === "dims") {
    return (
      <div className="viz-dims">
        {[18,32,28,42,36,46,24,38].map((h,i)=>(
          <i key={i} style={{height: h + "px"}}></i>
        ))}
      </div>
    );
  }
  if (kind === "alert") {
    return <div className="viz-alert"><span className="pulse"></span><span>1.4s · OVER-FOLDS RIVER · BLUFF 75%</span></div>;
  }
  if (kind === "compare") {
    return (
      <div className="viz-compare" style={{width:"100%"}}>
        <span className="you">YOU 62%</span>
        <span className="bb"><i style={{left:0,width:"62%",background:"var(--accent)"}}></i></span>
        <span className="vs">vs</span>
        <span className="field">FIELD 48%</span>
      </div>
    );
  }
  if (kind === "tables") {
    const lit = new Set([0,2,3,5,6,7,9,10,12,13,15]);
    return (
      <div className="viz-tables">
        {Array.from({length:16}).map((_,i)=>(
          <i key={i} className={lit.has(i)?"on":""}></i>
        ))}
      </div>
    );
  }
  if (kind === "curve") {
    return (
      <svg viewBox="0 0 120 46" className="viz-curve" fill="none" stroke="currentColor" strokeWidth="1.4">
        <path d="M0 38 L20 36 L40 30 L60 28 L80 18 L100 10 L120 6" />
        <circle cx="120" cy="6" r="2.6" fill="currentColor" stroke="none" />
        <line x1="0" y1="42" x2="120" y2="42" stroke="var(--line)" strokeWidth="0.8" strokeDasharray="2 2" />
      </svg>
    );
  }
  if (kind === "skill") {
    return (
      <div className="viz-skill">
        <div className="bar win" style={{height:"38px"}}>+5bb</div>
        <div className="bar" style={{height:"24px",color:"var(--muted)"}}>+1</div>
        <div className="bar" style={{height:"30px",color:"var(--muted)"}}>−2</div>
        <div className="bar" style={{height:"16px",color:"var(--muted)"}}>−8</div>
        <div style={{marginLeft:"10px",color:"var(--muted-2)",alignSelf:"flex-end"}}>win-rate by archetype</div>
      </div>
    );
  }
  return null;
}

function Features() {
  return (
    <section className="section" id="features" data-screen-label="03 Features">
      <div className="shell">
        <div className="sec-head">
          <div>
            <div className="sec-eyebrow">Capabilities</div>
            <h2 className="sec-title">Six edges most trackers don't ship.</h2>
          </div>
          <p className="sec-sub">
            Built specifically for finding and exploiting deviations from optimal — not for showing you VPIP
            and calling it a day.
          </p>
        </div>
        <div className="features">
          {FEATURES.map(f => (
            <div key={f.n} className="fcard">
              <div className="fcard-num mono">/{f.n}</div>
              <div className="fcard-visual"><FeatureViz kind={f.visual} /></div>
              <div className="fcard-title">{f.title}</div>
              <div className="fcard-body">{f.body}</div>
              <div className="fcard-foot"><span>{f.foot}</span><span className="ar">→</span></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ───────── two modes ───────── */
function TwoModes() {
  return (
    <section className="section" id="modes" data-screen-label="03b Modes" style={{paddingTop:"40px",paddingBottom:"60px"}}>
      <div className="shell">
        <div className="sec-head">
          <div>
            <div className="sec-eyebrow">Modes</div>
            <h2 className="sec-title">Two modes, one engine.</h2>
          </div>
          <p className="sec-sub">
            Pre-compute opponents off-table. Exploit them on-table. Same model, two contexts.
          </p>
        </div>
        <div className="modes">
          <div className="mode-card mode-study">
            <div className="mode-head">
              <div className="mode-glyph mono">/01</div>
              <div className="mode-tag mono">TRAINING TOOL</div>
            </div>
            <div className="mode-title">Study mode</div>
            <div className="mode-sub mono">— off-table training</div>
            <p className="mode-body">
              Import histories, review every spot you've played, see exactly where you deviated from the
              pool and where opponents leak against you. Build the reads before you sit down.
            </p>
            <div className="mode-foot mono">
              <div><span className="muted">▸</span> 602 spots per opponent</div>
              <div><span className="muted">▸</span> Field-relative deviations</div>
              <div><span className="muted">▸</span> Your leaks, their leaks, side-by-side</div>
            </div>
          </div>

          <div className="mode-card mode-live">
            <div className="mode-head">
              <div className="mode-glyph mono accent">/02</div>
              <div className="mode-tag mono accent">REAL-TIME ASSISTANT</div>
            </div>
            <div className="mode-title">Live mode</div>
            <div className="mode-sub mono">— real-time assistant</div>
            <p className="mode-body">
              Same engine, attached to your live tables. Every action surfaces the relevant leak with the
              recommended deviation, under two seconds. The pre-computed study from yesterday becomes
              today's edge.
            </p>
            <div className="mode-foot mono">
              <div><span className="accent">●</span> &lt; 2s exploit alerts</div>
              <div><span className="accent">●</span> Tested up to 16 tables simultaneously</div>
              <div><span className="accent">●</span> One-click pre-flop deviation overlay</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────── how it works ───────── */
const STEPS = [
  { n: "01", t: "Import your hands", b: "Drop your hand history database — ClubGG, PokerBros, PPPoker, or any standard hand-history export. Parsing in under a minute per million hands.",
    g: "DROP .TXT / .ZIP / DB" },
  { n: "02", t: "Study opponents", b: "One-time pre-compute against the pool. Runs in the background while you grind — no waiting, no spinner.",
    g: "RUNS BACKGROUND · 13×46×3" },
  { n: "03", t: "Sit down at the table", b: "Open your client. The HUD finds your seat, identifies regulars and unknowns, and is live before you post the blind.",
    g: "HUD AUTO-ATTACH · T+0.6s" },
  { n: "04", t: "Exploit, in real time", b: "Every action surfaces the relevant leak with the recommended deviation. Plain English. No menu diving.",
    g: "ALERT → ACTION → BANK" },
];

function HowItWorks() {
  return (
    <section className="section" id="how" data-screen-label="04 How it works" style={{paddingTop:"20px"}}>
      <div className="howto">
        {STEPS.map(s => (
          <div className="step" key={s.n}>
            <div className="step-num"><span>{s.n}</span></div>
            <div className="step-title">{s.t}</div>
            <div className="step-body">{s.b}</div>
            <div className="step-glyph mono">› {s.g}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function OneHandSection() {
  return (
    <section className="section" id="onehand" data-screen-label="01b One hand" style={{paddingTop:"60px",paddingBottom:"40px"}}>
      <div className="shell">
        <div className="sec-head">
          <div>
            <div className="sec-eyebrow">One hand</div>
            <h2 className="sec-title">What it looks like in one hand.</h2>
          </div>
          <p className="sec-sub">
            Same river spot. Same villain. The difference is whether the popup fired in time.
          </p>
        </div>
        <HeroDuel />
      </div>
    </section>
  );
}

/* ───────── counters ───────── */
function useCount(target, durMs=1600, trigger) {
  const [v, setV] = useState(0);
  useEffect(() => {
    if (!trigger) return;
    let raf, start;
    const tick = (t) => {
      if (!start) start = t;
      const p = Math.min(1, (t - start) / durMs);
      const eased = 1 - Math.pow(1 - p, 3);
      setV(Math.floor(target * eased));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [trigger, target, durMs]);
  return v;
}

function Counters() {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    let io;
    try {
      io = new IntersectionObserver(([e]) => { if (e.isIntersecting) setSeen(true); }, { threshold: 0.15 });
      io.observe(ref.current);
    } catch (_) {}
    // Fallback 1: scroll listener (some iframe contexts don't fire IO reliably)
    const onScroll = () => {
      if (!ref.current) return;
      const r = ref.current.getBoundingClientRect();
      if (r.top < window.innerHeight * 0.9 && r.bottom > 0) setSeen(true);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    // Fallback 2: always trigger after 2.5s no matter what
    const to = setTimeout(() => setSeen(true), 2500);
    return () => { if (io) io.disconnect(); window.removeEventListener("scroll", onScroll); clearTimeout(to); };
  }, []);
  const hands = useCount(1_240_000, 1800, seen);
  const leaks = useCount(247, 1600, seen);
  const stats = useCount(13, 1200, seen);

  const fmtHands = (n) => (n / 1_000_000).toFixed(2) + "M";
  return (
    <section className="section" id="proof" data-screen-label="05 Proof">
      <div className="shell">
        <div className="sec-head">
          <div>
            <div className="sec-eyebrow">By the numbers</div>
            <h2 className="sec-title">The depth most players didn't know they needed.</h2>
          </div>
          <p className="sec-sub">Aggregated across the closed beta. Every number generated by ExploiTable itself.</p>
        </div>
        <div className="counters" ref={ref}>
          <div className="counter">
            <div className="v mono">{fmtHands(hands)}<small>+</small></div>
            <div className="l">Hands analyzed across the beta cohort</div>
          </div>
          <div className="counter">
            <div className="v mono">{leaks}<small>+</small></div>
            <div className="l">Average exploitable leaks found per regular opponent</div>
          </div>
          <div className="counter">
            <div className="v mono">{stats}</div>
            <div className="l">Stats tracked per street, per situation, per opponent</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────── pricing ───────── */
function Pricing() {
  return (
    <section className="section" id="pricing" data-screen-label="06 Pricing" style={{paddingTop:"20px"}}>
      <div className="shell">
        <div className="pricing">
          <div>
            <div className="price-tag mono">Single plan · monthly</div>
            <h3 className="price-h">Everything, no tiers, no upsells.</h3>
            <p className="price-sub">
              Live HUD, study system, multi-table, every stat, every spot. The same product that pays for itself
              the first session you spot a big leak.
            </p>
            <div className="price-feats">
              <div>Unlimited tables, unlimited opponents</div>
              <div>Every site supported, in one HUD</div>
              <div>Pre-computed study runs included</div>
              <div>Cancel any month, no questions</div>
            </div>
          </div>
          <div className="price-card">
            <div className="price-free-badge mono">FREE BETA · LIMITED TIME</div>
            <div className="price-num mono">$0<small>/ month</small></div>
            <div className="price-was mono">$100 / month after the free window</div>
            <div style={{margin:"18px 0 4px"}}><Timer size="lg" /></div>
            <div className="mono" style={{color:"var(--muted)",fontSize:"11px",letterSpacing:".08em"}}>UNTIL FREE ACCESS ENDS</div>
            <a href="#final" className="btn btn-primary btn-lg" style={{marginTop:"24px",width:"100%"}}>
              Claim free access →
            </a>
            <div className="price-card-foot">
              NO CARD REQUIRED · CANCEL ANYTIME · PRICE LOCKED FOR EARLY USERS
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────── faq ───────── */
const FAQS = [
  { q: "Is it really free right now?",
    a: "Yes. Every feature — live HUD, study system, unlimited tables — is free until the countdown at the top of the page hits zero. No card required. When the free window closes, early users keep a locked-in rate." },
  { q: "What poker formats does it support?",
    a: "PLO, NLH, short deck, and all major fast-fold variants. Cash and tournament both — though MTT leak detection benefits from larger samples. Stud variants on the roadmap." },
  { q: "What clients does it support?",
    a: "ClubGG, PokerBros, and PPPoker today, plus any client that exports a standard hand-history file. Email us with your specific client if you're unsure." },
  { q: "Do I need to be a pro to use it?",
    a: "No. The HUD speaks in plain English: \"Folds flop 68% — c-bet any two.\" If you can read a sentence and click a button, you can use the exploits ExploiTable surfaces." },
  { q: "How is this different from a normal HUD or tracker?",
    a: "Those show you stats — and ask you to interpret them. ExploiTable does the interpretation: it finds the deviations that matter, weights them by win rate, and tells you the exact action. You still own the decision, but the analysis is done." },
  { q: "Where does the opponent data come from?",
    a: "ExploiTable uses your own hand history data. Check your poker site's terms of service for their specific policies on third-party software." },
  { q: "When does it launch?",
    a: "Public launch is on the calendar for Q3. Waitlist members get access in waves starting now — first in, first out." },
];

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq" data-screen-label="07 FAQ" style={{paddingTop:"20px"}}>
      <div className="shell">
        <div className="faq">
          {FAQS.map((f, i) => (
            <div key={i} className={"faq-item" + (open===i ? " open" : "")} onClick={() => setOpen(open===i ? -1 : i)}>
              <div className="faq-q">
                <h3>{f.q}</h3>
                <span className="ic">+</span>
              </div>
              <div className="faq-a">{f.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ───────── final CTA ───────── */
function FinalCTA() {
  return (
    <section className="final" id="final" data-screen-label="08 Final CTA">
      <div className="shell">
        <div className="eyebrow" style={{justifyContent:"center"}}><span className="bar"></span>Free access ends in · <Timer /></div>
        <h2 className="h1">Stop guessing.<br/>Start <span className="accent">exploiting</span>.</h2>
        <p className="lede">Everything is free for 12 days. After that, seats are paid and prices go up. <span className="js-waitcount" data-base="1247">1,247</span> players already in.</p>
        <div style={{display:"flex",justifyContent:"center"}}>
          <div style={{maxWidth:"480px",width:"100%"}}>
            <Waitlist id="final-email" />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────── footer ───────── */
function Footer() {
  return (
    <footer className="foot">
      <div className="shell foot-inner">
        <a href="index.html" className="brand">
          <img src="assets/logo.png" alt="ExploiTable" className="brand-logo" />
        </a>
        <div className="foot-links">
          <a href="#">Terms</a>
          <a href="#">Privacy</a>
          <a href="#">Site policy</a>
          <a href="#">Contact</a>
        </div>
        <div className="foot-mono">© 2026 ExploiTable Labs · v0.9.4-beta</div>
      </div>
    </footer>
  );
}

/* ───────── nav ───────── */
function Nav() {
  return (
    <nav className="nav">
      <div className="shell nav-inner">
        <a href="index.html" className="brand">
          <img src="assets/logo.png" alt="ExploiTable" className="brand-logo" />
        </a>
        <div className="nav-links">
          <a href="features.html" className={window.PAGE === "features" ? "active" : ""}>Features</a>
          <a href="how.html" className={window.PAGE === "how" ? "active" : ""}>How it works</a>
          <a href="pricing.html" className={window.PAGE === "pricing" ? "active" : ""}>Pricing</a>
          <a href="faq.html" className={window.PAGE === "faq" ? "active" : ""}>FAQ</a>
        </div>
        <div className="nav-cta">
          <span className="pill"><span className="dot"></span>Free ends in&nbsp;<Timer /></span>
          <a href="pricing.html#final" className="btn btn-primary btn-3d">Start free</a>
        </div>
      </div>
    </nav>
  );
}

/* ───────── tweaks ───────── */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#a06bff",
  "density": "regular",
  "showTerminalAnimation": true,
  "headlineStyle": "strike"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const page = window.PAGE || "features";

  // apply accent at runtime
  useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
  }, [t.accent]);

  const densityClass = "density-" + (t.density || "regular");

  // headline variants
  useEffect(() => {
    const el = document.querySelector(".hero .h1");
    if (!el) return;
    const moneyEl = el.querySelector(".strike");
    if (!moneyEl) return;
    moneyEl.classList.toggle("strike", t.headlineStyle === "strike");
    if (t.headlineStyle === "accent") {
      moneyEl.style.color = "var(--accent)";
    } else {
      moneyEl.style.color = "";
    }
  }, [t.headlineStyle]);

  // ───────── 3D + live wiring (runs once per page) ─────────
  useEffect(() => {
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const cleanups = [];

    // 1) Pointer-driven 3D tilt on free-standing surfaces
    if (!reduce) {
      const tiltEls = document.querySelectorAll(
        ".mode-card, .price-card, .duel-panel, .terminal, .tshow-frame, .clarity-strip, .counters, .pricing"
      );
      tiltEls.forEach((el) => {
        el.classList.add("tilt3d");
        let raf = 0;
        const onMove = (e) => {
          const r = el.getBoundingClientRect();
          const px = (e.clientX - r.left) / r.width - 0.5;
          const py = (e.clientY - r.top) / r.height - 0.5;
          cancelAnimationFrame(raf);
          raf = requestAnimationFrame(() => {
            el.style.setProperty("--ry", (px * 7).toFixed(2) + "deg");
            el.style.setProperty("--rx", (-py * 7).toFixed(2) + "deg");
            el.style.setProperty("--lift", "14px");
          });
        };
        const onLeave = () => {
          cancelAnimationFrame(raf);
          el.style.setProperty("--ry", "0deg");
          el.style.setProperty("--rx", "0deg");
          el.style.setProperty("--lift", "0px");
        };
        el.addEventListener("pointermove", onMove);
        el.addEventListener("pointerleave", onLeave);
        cleanups.push(() => {
          el.removeEventListener("pointermove", onMove);
          el.removeEventListener("pointerleave", onLeave);
        });
      });
    }

    // 2) Scroll-reveal entrance animations
    const revealEls = document.querySelectorAll(
      ".sec-head, .fcard, .mode-card, .step, .counters, .pricing, .faq-item, .tshow, .duel, .clarity-strip, .works-with, .hero-stats, .waitlist, .cta-band, .page-hero .shell"
    );
    revealEls.forEach((el) => el.classList.add("reveal"));
    if (reduce) {
      revealEls.forEach((el) => el.classList.add("in"));
    } else {
      // stagger siblings that share a parent
      const byParent = new Map();
      revealEls.forEach((el) => {
        const p = el.parentElement;
        const arr = byParent.get(p) || [];
        arr.push(el);
        byParent.set(p, arr);
      });
      byParent.forEach((arr) => {
        arr.forEach((el, i) => { el.style.transitionDelay = Math.min(i, 6) * 70 + "ms"; });
      });
      const io = new IntersectionObserver(
        (ents) => ents.forEach((en) => {
          if (en.isIntersecting) { en.target.classList.add("in"); io.unobserve(en.target); }
        }),
        { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
      );
      revealEls.forEach((el) => io.observe(el));
      cleanups.push(() => io.disconnect());

      // Fallback A: immediately reveal anything already in view on load
      const revealIfInView = () => {
        revealEls.forEach((el) => {
          const r = el.getBoundingClientRect();
          if (r.top < window.innerHeight * 0.95 && r.bottom > 0) el.classList.add("in");
        });
      };
      revealIfInView();
      const onScroll = () => revealIfInView();
      window.addEventListener("scroll", onScroll, { passive: true });
      cleanups.push(() => window.removeEventListener("scroll", onScroll));

      // Fallback B: hard timeout — content can NEVER stay blank if IO/scroll never fire
      const failsafe = setTimeout(() => {
        revealEls.forEach((el) => el.classList.add("in"));
      }, 1000);
      cleanups.push(() => clearTimeout(failsafe));
    }

    // 3) Idle float on hero panels
    if (!reduce) {
      document.querySelectorAll(".duel").forEach((el) => el.classList.add("floaty"));
      const dt = document.querySelector("#demo .terminal");
      if (dt) dt.classList.add("floaty-slow");
    }

    // 4) Live-ticking waitlist counter
    const counters = document.querySelectorAll(".js-waitcount");
    if (counters.length && !reduce) {
      let n = 1247;
      const id = setInterval(() => {
        n += Math.floor(Math.random() * 3) + 1;
        const txt = n.toLocaleString();
        counters.forEach((c) => {
          c.textContent = txt;
          c.classList.remove("bump");
          void c.offsetWidth;
          c.classList.add("bump");
        });
      }, 4200);
      cleanups.push(() => clearInterval(id));
    }

    return () => cleanups.forEach((fn) => fn());
  }, []);

  return (
    <div className={densityClass}>
      <AnnouncementBar />
      <Nav />
      {page === "features" && (<>
        <Hero />
        <OneHandSection />
        <LiveDemoSection />
        <Features />
        <TwoModes />
        <CTABand title="Every edge above is free right now." sub="Full engine, unlimited tables, no card. When the timer hits zero, the free window closes for good." />
      </>)}
      {page === "how" && (<>
        <PageHero kicker="How it works" label="01 How hero"
          title={<>From hand history to live exploits, <span className="accent">in four steps</span>.</>}
          sub="Set up once. The engine keeps your regulars pre-computed so every session starts hot." />
        <HowItWorks />
        <section className="section" style={{paddingTop:"48px",paddingBottom:"0"}}>
          <div className="shell"><TableStrip /></div>
        </section>
        <CTABand title="Set it up tonight. Exploit tomorrow." sub="The whole pipeline — import, study, live HUD — is free while the countdown runs." />
      </>)}
      {page === "pricing" && (<>
        <PageHero kicker="Pricing" label="01 Pricing hero"
          title={<>Free for <span className="accent">12 days</span>. Then one plan.</>}
          sub="No tiers, no upsells, no card up front. Join during the free window and your rate is locked for life." />
        <Pricing />
        <Counters />
        <FinalCTA />
      </>)}
      {page === "faq" && (<>
        <PageHero kicker="FAQ" label="01 FAQ hero"
          title={<>Answers to the <span className="accent">obvious ones</span>.</>}
          sub="Didn't see yours? Email hello@exploitable.gg — we answer within a day." />
        <FAQ />
        <CTABand title="Convinced? It costs nothing to find out." sub="Free access for 12 days, then a single locked-in plan. The timer is already running." />
      </>)}
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakColor label="Accent" value={t.accent}
          options={["#a06bff", "#c08bff", "#7c5cff", "#5ad1ff", "#3ee08f"]}
          onChange={(v)=>setTweak("accent", v)} />
        <TweakRadio label="Headline" value={t.headlineStyle}
          options={["strike","accent"]}
          onChange={(v)=>setTweak("headlineStyle", v)} />
        <TweakSection label="Layout" />
        <TweakRadio label="Density" value={t.density}
          options={["compact","regular","roomy"]}
          onChange={(v)=>setTweak("density", v)} />
      </TweaksPanel>
    </div>
  );
}

/* live demo section wrapper */
function LiveDemoSection() {
  return (
    <section className="section" id="demo" data-screen-label="02 Live demo" style={{paddingTop:"40px"}}>
      <div className="shell">
        <div className="sec-head">
          <div>
            <div className="sec-eyebrow">Live preview</div>
            <h2 className="sec-title">Peek inside the engine.</h2>
          </div>
          <p className="sec-sub">
            This is real opponent data from a ClubGG database — real player, real spot, real action.
            Numbers tick on a two-second cadence to mimic the live HUD.
          </p>
        </div>
        <DemoBoard />
      </div>
    </section>
  );
}

function DemoBoard() {
  return (
    <div style={{display:"grid",gridTemplateColumns:"1fr 1.2fr",gap:"40px",alignItems:"start"}}>
      <div>
        <div className="mono" style={{fontSize:"11px",color:"var(--muted-2)",letterSpacing:".12em",marginBottom:"18px"}}>
          ▎LIVE TABLE · NLH 5/10 · 6-MAX
        </div>
        <h3 style={{fontSize:"34px",letterSpacing:"-0.025em",margin:"0 0 18px",lineHeight:1.1,fontWeight:600}}>
          ShovItAll just open-raised<br/>the button. What do you do?
        </h3>
        <p style={{color:"var(--muted)",fontSize:"15px",lineHeight:1.55,maxWidth:"460px"}}>
          A normal HUD shows you VPIP 28%, PFR 19%. Useful — barely. ExploiTable already knows ShovItAll
          folds 68% to a flop c-bet against a field average of 51%, and over-folds his big blind to button
          steals. Here's exactly what the panel shows:
        </p>
        <div style={{display:"flex",flexDirection:"column",gap:"14px",marginTop:"28px"}}>
          <div className="row" style={{gap:"14px"}}>
            <span className="mono" style={{minWidth:"56px",color:"var(--muted-2)",fontSize:"11px"}}>SPOT</span>
            <span className="mono" style={{fontSize:"13px"}}>Flop, IP, dry K-7-2 rainbow, single-raised pot</span>
          </div>
          <div className="row" style={{gap:"14px"}}>
            <span className="mono" style={{minWidth:"56px",color:"var(--muted-2)",fontSize:"11px"}}>LEAK</span>
            <span className="mono" style={{fontSize:"13px",color:"var(--text)"}}>Folds 68% to flop c-bet</span>
          </div>
          <div className="row" style={{gap:"14px"}}>
            <span className="mono" style={{minWidth:"56px",color:"var(--accent)",fontSize:"11px"}}>VS FIELD</span>
            <span className="mono" style={{fontSize:"13px",color:"var(--accent)"}}>Field folds 51% in this spot · +17pp deviation ▲</span>
          </div>
        </div>
      </div>
      <LeakTerminal />
    </div>
  );
}

Object.assign(window, { App, Hero, LeakTerminal, Features, HowItWorks, Counters, Pricing, FAQ, FinalCTA, Footer, Nav });