/* ============================================================
   Sections — How it works, Marketplace, Split, MCP, Roadmap, FAQ
   ============================================================ */

const Ticker = () => {
  const items = [
  { name: "Will Iran sign nuclear deal by Q3 2026?", nfa: 67, mkt: 54 },
  { name: "Fed rate cut at June FOMC?", nfa: 38, mkt: 51 },
  { name: "BTC above $150k by EOY?", nfa: 42, mkt: 33 },
  { name: "TikTok divestiture by deadline?", nfa: 71, mkt: 62 },
  { name: "Trump signs executive order on stablecoins?", nfa: 84, mkt: 76 },
  { name: "ETH ETF flows positive in May?", nfa: 58, mkt: 50 },
  { name: "Russia-Ukraine ceasefire announced before July?", nfa: 22, mkt: 31 },
  { name: "SCOTUS rules on AI copyright case?", nfa: 64, mkt: 55 },
  { name: "OPEC+ production cut extended?", nfa: 73, mkt: 60 }];

  const list = [...items, ...items];
  return (
    <div className="ticker-wrap" aria-hidden="true">
      <div className="ticker">
        {list.map((it, i) => {
          const delta = it.nfa - it.mkt;
          const up = delta >= 0;
          return (
            <span key={i} className="ticker-item">
              <span className="name">{it.name}</span>
              <span className="sep">·</span>
              <span>NFA {it.nfa}%</span>
              <span className="sep">·</span>
              <span>MKT {it.mkt}%</span>
              <span className={`div ${up ? 'up' : 'down'}`}>
                {up ? '▲' : '▼'} {Math.abs(delta)}.0
              </span>
            </span>);

        })}
      </div>
    </div>);

};

const HowItWorks = () => {
  return (
    <section className="section-pad" id="how">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot" />How it works</div>
            <h2 style={{ marginTop: 18 }}>Paste a market.<br />Get a probability backed by a swarm.</h2>
          </div>
          <p className="lede">Four stages, fully transparent. Every run is replayable, every reasoning step is on the record, every author is paid by accuracy.</p>
        </div>
        <div className="steps">
          <div className="step">
            <div className="num">01 / INGEST</div>
            <h3>Paste a market URL</h3>
            <p>Polymarket, Kalshi, anywhere structured. The binding layer pulls metadata, rules, deadlines, current price, related markets.</p>
            <div className="visual">
              <div className="url-line">
                <span style={{ color: 'var(--accent)' }}>$</span>
                <span style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>polymarket.com/event/iran-deal</span>
                <span className="caret" />
              </div>
            </div>
          </div>
          <div className="step">
            <div className="num">02 / SELECT</div>
            <h3>Pick a scenario</h3>
            <p>Top three from the marketplace, ranked by accuracy on this category. Or fork. Or write your own in 15 minutes.</p>
            <div className="visual">
              <div className="scenario-pill top">
                <span className="nm">Mideast Negotiation v1.4</span>
                <span className="ac">87.4%</span>
              </div>
              <div className="scenario-pill muted">
                <span className="nm">Geo-Policy Hawks</span>
                <span className="ac">81.2%</span>
              </div>
              <div className="scenario-pill muted">
                <span className="nm">Diplomat Watch</span>
                <span className="ac">76.8%</span>
              </div>
            </div>
          </div>
          <div className="step">
            <div className="num">03 / SIMULATE</div>
            <h3>Swarm deliberates</h3>
            <p>Each AI agent with role, memory, incentives. They argue, update beliefs, settle.</p>
            <div className="visual">
              <div className="swarm-mini">
                {Array.from({ length: 14 }).map((_, i) => {
                  const x = 8 + i * 6.5 % 84 + Math.random() * 8;
                  const y = 12 + Math.random() * 76;
                  const d = Math.random() * 3;
                  return <div key={i} className="node" style={{ left: `${x}%`, top: `${y}%`, animationDelay: `${d}s` }} />;
                })}
                <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.3 }}>
                  <line x1="20%" y1="30%" x2="60%" y2="50%" stroke="oklch(86% 0.22 145)" strokeWidth="0.5" />
                  <line x1="40%" y1="70%" x2="80%" y2="20%" stroke="oklch(86% 0.22 145)" strokeWidth="0.5" />
                  <line x1="10%" y1="50%" x2="50%" y2="80%" stroke="oklch(86% 0.22 145)" strokeWidth="0.5" />
                </svg>
              </div>
            </div>
          </div>
          <div className="step">
            <div className="num">04 / RESOLVE</div>
            <h3>Probability + reasoning trace</h3>
            <p>A number. Confidence band. Divergence from market price. Every agent's reasoning, replayable. No black box.</p>
            <div className="visual">
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--fg-faint)', marginBottom: 6 }}>
                <span>YES</span><span style={{ color: 'var(--accent)' }}>67.0%</span>
              </div>
              <div className="result-bar"><div className="fill" style={{ '--w': '67%' }} /></div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--fg-faint)' }}>
                <span>NO</span><span>33.0%</span>
              </div>
              <div className="result-bar"><div className="fill" style={{ '--w': '33%', background: 'rgba(255,255,255,0.3)' }} /></div>
            </div>
          </div>
        </div>
      </div>
    </section>);

};

const Marketplace = () => {
  const cards = [
  { cat: "GEOPOLITICS · MIDEAST", title: "Iran–US Negotiation Pressure Model", author: "@arashtabrizi", acc: 87.4, runs: "1.2k", uses: "342", badge: "TOP-RANKED" },
  { cat: "MONETARY · FOMC", title: "FOMC Voting Dynamics, Hawks vs Doves", author: "@fedwatcher", acc: 82.1, runs: "894", uses: "267", badge: null },
  { cat: "POLICY · REGULATORY", title: "SEC Enforcement Decision Model", author: "@cryptopolicy", acc: 79.8, runs: "612", uses: "188", badge: null },
  { cat: "CRYPTO · NARRATIVE", title: "Stablecoin Depeg Propagation v3", author: "@chainresearch", acc: 84.6, runs: "1.5k", uses: "421", badge: "TRENDING" },
  { cat: "POLITICS · ELECTORAL", title: "Swing State Late-Cycle Behavior", author: "@psephology", acc: 76.3, runs: "2.1k", uses: "508", badge: null },
  { cat: "CORPORATE · ANTITRUST", title: "DOJ Merger Review Outcome Model", author: "@antitrustnerd", acc: 81.5, runs: "445", uses: "124", badge: null }];

  return (
    <section className="section-pad" id="marketplace">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot" />The marketplace</div>
            <h2 style={{ marginTop: 18 }}>Domain expertise,<br />priced by accuracy.</h2>
          </div>
          <p className="lede">Authors publish scenarios. Traders use them. 35% of every run flows back to the author - weighted by their 90-day Brier score on the relevant category.</p>
        </div>
        <div className="market-grid">
          {cards.map((c, i) =>
          <div key={i} className="scenario-card">
              <div className="top-row">
                <div className="cat">{c.cat}</div>
                {c.badge && <div className="badge">{c.badge}</div>}
              </div>
              <h3>{c.title}</h3>
              <div className="author">by <b>{c.author}</b></div>
              <div className="stats">
                <div className="stat">
                  <div className="v acc">{c.acc}<span style={{ fontSize: '0.55em', color: 'var(--fg-dim)' }}>%</span></div>
                  <div className="l">Accuracy</div>
                </div>
                <div className="stat">
                  <div className="v">{c.runs}</div>
                  <div className="l">Runs</div>
                </div>
                <div className="stat">
                  <div className="v">{c.uses}</div>
                  <div className="l">90d uses</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const Split = () => {
  return (
    <section className="section-pad" id="who">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot" />Two sides, one engine</div>
            <h2 style={{ marginTop: 18 }}>Trade the edge.<br />Or build it.</h2>
          </div>
          <p className="lede">NFA is a marketplace, not a service. The edge is supplied by experts and consumed by traders, with $NFA as the settlement rail between them.</p>
        </div>
        <div className="split">
          <div className="split-side traders">
            <div className="role">For <b>traders</b></div>
            <h3>Stop trading vibes.</h3>
            <p className="desc">Paste any actor-driven market. Get a probability backed by an AI agent swarm simulation, with the full reasoning trace and a track record you can audit.</p>
            <ul>
              <li><span className="num">01</span><span>Probability + confidence band.</span></li>
              <li><span className="num">02</span><span>Divergence vs market price: the trade is in the gap.</span></li>
              <li><span className="num">03</span><span>Every scenario has a public Brier score per category.</span></li>
              <li><span className="num">04</span><span>Stake $NFA for priority compute, larger swarms, lower latency.</span></li>
            </ul>
            <div className="cta-row">
              <a className="btn btn-primary" href="#">Try a simulation <span className="arr">→</span></a>
            </div>
          </div>
          <div className="split-side authors">
            <div className="role">For <b>authors</b></div>
            <h3>Get paid for being right.</h3>
            <p className="desc">If you understand a domain, write a scenario. The system runs your simulation, tracks accuracy, and automatically pays royalties on every use.</p>
            <ul>
              <li><span className="num">01</span><span>15-minute authoring flow with AI copilot scaffolding.</span></li>
              <li><span className="num">02</span><span>35% of every run, weighted by your 90-day accuracy.</span></li>
              <li><span className="num">03</span><span>Settled in $NFA, in real-time, no vesting, no claw-back.</span></li>
              <li><span className="num">04</span><span>Forks pay you 15% in perpetuity. Build the canon.</span></li>
            </ul>
            <div className="cta-row">
              <a className="btn" href="#">Become an author <span className="arr">→</span></a>
            </div>
          </div>
        </div>
      </div>
    </section>);

};

const MCP = () => {
  return (
    <section className="section-pad" id="mcp">
      <div className="container">
        <div className="mcp">
          <div>
            <div className="eyebrow"><span className="dot" />Built for agents, by design</div>
            <h2 style={{
              fontFamily: 'var(--display)', fontWeight: 500,
              fontSize: 'clamp(36px, 5vw, 64px)', letterSpacing: '-0.035em',
              lineHeight: 0.95, margin: '18px 0 24px', textWrap: 'balance'
            }}>
              Your trading agent should be paying for forecasts.
            </h2>
            <p style={{ color: 'var(--fg-dim)', fontSize: 16, lineHeight: 1.55, maxWidth: '40ch', marginBottom: 28 }}>NFA exposes a first-class MCP server. Algorithmic desks, AI assistants, autonomous trading bots can call NFA the same way they call any other tool. Metered in $NFA. Listed in the public registry from day one.

            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a className="btn" href="#">View MCP spec <span className="arr">→</span></a>
              <a className="btn btn-ghost" href="#">Read the docs</a>
            </div>
          </div>
          <div className="code-block">
            <div className="head">
              <div className="dots"><span /><span /><span /></div>
              <span>nfa-mcp · v1.0</span>
            </div>
            <div className="body"><span className="com"># Forecast a Polymarket market with the best-fit scenario</span>{`
`}<span className="kw">await</span> nfa.<span className="fn">forecast_market</span>({`{`}{`
`}{'  '}market_url: <span className="str">"polymarket.com/event/iran-deal"</span>,{`
`}{'  '}auto_select: <span className="kw">true</span>,{`
`}{'  '}swarm_size: <span className="str">"auto"</span>{`
`}{`}`});{`

`}<span className="com">{`# → { probability: 0.674, confidence: [0.61, 0.73],`}</span>{`
`}<span className="com">{`#     scenario: "mideast-v1.4", divergence: +0.13,`}</span>{`
`}<span className="com">{`#     trace: "0xa3f...", brier_90d: 0.082 }`}</span>{`

`}<span className="com"># Or run side-by-side scenario comparison</span>{`
`}<span className="kw">await</span> nfa.<span className="fn">compare_markets</span>([url1, url2, url3]);
            </div>
          </div>
        </div>
      </div>
    </section>);

};

const Roadmap = () => {
  const phases = [
  { ph: "01", nm: "Token Generation", desc: "TGE, AMM liquidity deployed, vesting activates.", status: "soon" },
  { ph: "02", nm: "Build & Internal Testnet", desc: "Core stack, scenario authoring SDK, MCP server, blind-test backtest harness, seed scenarios in development.", status: "live" },
  { ph: "03", nm: "Public Testnet", desc: "Free simulations, open authoring, full accuracy tracking live, MCP server in public registries, audit begins.", status: "" },
  { ph: "04", nm: "Royalties & Paying Users", desc: "Metered API access, staking for advanced access, author royalty flow goes live, first paying users.", status: "" },
  { ph: "05", nm: "Growth & Maturity", desc: "Coverage expansion, multi-chain deployment, Tier-2 CEX listings, full DAO governance, enterprise tier.", status: "" }];

  const labelFor = (s) => {
    if (s === 'soon') return '◷ Coming soon';
    if (s === 'live') return '● In development';
    return '○ Planned';
  };
  return (
    <section className="section-pad" id="roadmap">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot" />Roadmap</div>
            <h2 style={{ marginTop: 18 }}>Five phases.<br />One trajectory.</h2>
          </div>
          <p className="lede">From TGE to fully-DAO-governed protocol over 18–24 months. No vague milestones, no moving goalposts.</p>
        </div>
        <div className="roadmap">
          {phases.map((p, i) =>
          <div key={i} className={`phase ${p.status === 'soon' ? 'active' : ''}`}>
              <div className="ph">PHASE {p.ph}</div>
              <div className="nm">{p.nm}</div>
              <div className="desc">{p.desc}</div>
              <div className={`status ${p.status}`}>{labelFor(p.status)}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  const items = [
  { q: "What does NFA actually do?", a: "Paste a Polymarket or Kalshi market URL. NFA spins up a swarm AI agents -each with a role, memory, and incentives- that simulate the actors, dynamics, and pressures driving the market's resolution. You get a probability, a confidence band, and a fully-replayable reasoning trace." },
  { q: "Why agent swarms instead of a single LLM?", a: "Single-model forecasting collapses real-world complexity into one point estimate. Swarm simulation preserves the heterogeneity of actors, goals, and information — and extracts a probability distribution from the resulting dynamics. It's the difference between a poll and a market." },
  { q: "How do scenario authors get paid?", a: "35% of every credit spend on a run flows to the scenario author, settled in $NFA in real-time. The royalty is multiplied by the scenario's 90-day Brier score on that market category. Pumped usage without accuracy earns nothing." },
  { q: "Why $NFA — and what's the supply?", a: "Fixed 1B supply. The token is the credit denomination, the royalty settlement layer, the staking instrument for advanced access, and the governance primitive. Every simulation consumes credits; every author is paid in $NFA. Demand scales with usage." },
  { q: "Is the accuracy data trustworthy?", a: "Paste a Polymarket or Kalshi market URL. NFA spins up a swarm AI agents -each with a role, memory, and incentives- that simulate the actors, dynamics, and pressures driving the market's resolution. You get a probability, a confidence band, and a fully-replayable reasoning trace." },
  { q: "Why 'NFA'?", a: "Paste a Polymarket or Kalshi market URL. NFA spins up a swarm AI agents -each with a role, memory, and incentives- that simulate the actors, dynamics, and pressures driving the market's resolution. You get a probability, a confidence band, and a fully-replayable reasoning trace." },
  { q: "When does the token launch?", a: "Phase 3, after Tier-1 audit completes and legal opinion is finalized. Join the waitlist for first-access airdrop allocation and TGE notifications." },
  { q: "Can I run NFA without revealing my scenario?", a: "Paste a Polymarket or Kalshi market URL. NFA spins up a swarm AI agents -each with a role, memory, and incentives- that simulate the actors, dynamics, and pressures driving the market's resolution. You get a probability, a confidence band, and a fully-replayable reasoning trace." }];

  return (
    <section className="section-pad" id="faq">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="dot" />FAQ</div>
            <h2 style={{ marginTop: 18 }}>The honest answers.</h2>
          </div>
          <p className="lede">If we don't know, we'll say so. If a thing is risky, it's in the whitepaper.</p>
        </div>
        <div className="faq-wrap">
          {items.map((it, i) =>
          <div key={i} className={`faq ${open === i ? 'open' : ''}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="q">
                <span>{it.q}</span>
                <span className="plus">+</span>
              </div>
              <div className="a"><div style={{ paddingBottom: 4 }}>{it.a}</div></div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const Waitlist = () => {
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <section className="section-pad" id="waitlist" style={{ paddingBottom: 40 }}>
      <div className="container">
        <div className="waitlist">
          <div className="eyebrow" style={{ marginBottom: 16 }}><span className="dot" />$NFA · Pre-launch</div>
          <h3>Coming soon.<br />The smart money's already on the list.</h3>
          <p>Whitepaper is live. Testnet coming soon. Token generation is queued. Join the waitlist for airdrop allocation and TGE access.</p>
          <form className="form" onSubmit={(e) => {e.preventDefault();setSubmitted(true);}}>
            <input type="email" placeholder="you@trader.eth" required disabled={submitted} />
            <button type="submit" className="btn btn-primary">
              {submitted ? "✓ On the list" : <>Join waitlist <span className="arr">→</span></>}
            </button>
          </form>
        </div>
      </div>
    </section>);

};

const Footer = () => {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <span className="logo-mark footer-logo-mark" id="footerLogoMark"></span>
            <h4 style={{ marginTop: 16 }}>NFA · Collaborative Intelligence</h4>
            <p className="brand-blurb">An agent swarm simulation engine for prediction market traders, with a decentralized marketplace of scenarios ranked and rewarded on forecasting accuracy.</p>
            <p className="brand-blurb" style={{ marginTop: 12, fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--fg-faint)' }}>nfa.club</p>
          </div>
          <div>
            <h4>Product</h4>
            <ul>
              <li><a href="#how">How it works</a></li>
              <li><a href="pages/gallery.html">Marketplace</a></li>
              <li><a href="#mcp">MCP Server</a></li>
              <li><a href="pages/author-hub.html">Author hub</a></li>
              <li><a href="pages/gallery.html">Gallery</a></li>
            </ul>
          </div>
          <div>
            <h4>Resources</h4>
            <ul>
              <li><a href="pages/whitepaper.html">Whitepaper</a></li>
              <li><a href="pages/brand-kit.html">Brand kit</a></li>
              <li><span className="link-soon">Documentation <em>Live product soon</em></span></li>
            </ul>
          </div>
          <div>
            <h4>Community</h4>
            <ul>
              <li><a href="https://x.com/NFA_Club" target="_blank" rel="noopener noreferrer">Twitter / X</a></li>
              <li><a href="https://discord.gg/GRVhppvyrH" target="_blank" rel="noopener noreferrer">Discord</a></li>
              <li><a href="https://t.me/NFAClub" target="_blank" rel="noopener noreferrer">Telegram</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 NFA</span>
          <span>v1.0 · APRIL 2026</span>
        </div>
      </div>
    </footer>);

};

Object.assign(window, { Ticker, HowItWorks, Marketplace, Split, MCP, Roadmap, FAQ, Waitlist, Footer });