// ─────────────────────────────────────────────────────────────
// StatRow — band of 4 metrics
// ─────────────────────────────────────────────────────────────
function StatRow({ items }) {
  return (
    <section className="section-pad-sm">
      <div className="container">
        <div className="stat-row card">
          {items.map((it) => (
            <div key={it.l} className="stat-item">
              <div className="stat-v">{it.v}</div>
              <div className="stat-l">{it.l}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); padding: 28px 32px; }
        .stat-item { padding: 12px 18px; border-right: 1px solid var(--line); }
        .stat-item:last-child { border-right: 0; }
        .stat-v { font-size: 36px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
        .stat-l { font-size: 13px; color: var(--text-dim); margin-top: 6px; line-height: 1.4; }
        @media (max-width: 700px) { .stat-row { grid-template-columns: 1fr 1fr; } .stat-item:nth-child(2) { border-right: 0; } .stat-item:nth-child(1), .stat-item:nth-child(2) { border-bottom: 1px solid var(--line); } }
      `}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Two-inputs flow section (in-page diagram, not the hero one)
// ─────────────────────────────────────────────────────────────
function TwoInputsFlowSection() {
  return (
    <section id="flow" className="section-pad-sm">
      <div className="container">
        <div className="section-head" style={{ textAlign: "center", margin: "0 auto 36px" }}>
          <span className="eyebrow">How it works</span>
          <h2 style={{ marginTop: 14 }}>Two inputs. One launch.</h2>
          <p style={{ margin: "14px auto 0" }}>
            Every other prop platform asks for 47 configurations before you see a screen. We ask for two.
          </p>
        </div>

        <div className="ti-flow">
          <div className="ti-step">
            <div className="ti-num mono">01</div>
            <div className="ti-field card">
              <div className="ti-field-l mono">YOUR DOMAIN</div>
              <div className="ti-field-v mono">
                <span className="ti-cursor"/>
                app.<span className="ti-hl">yourfirm</span>.com
              </div>
            </div>
            <div className="ti-step-cap">Point one A record. We take it from there.</div>
          </div>

          <div className="ti-arrow"><svg width="40" height="14" viewBox="0 0 40 14" fill="none"><path d="M2 7h34M30 2l6 5-6 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg></div>

          <div className="ti-step">
            <div className="ti-num mono">02</div>
            <div className="ti-field card">
              <div className="ti-field-l mono">PSP / GATEWAY API KEY</div>
              <div className="ti-field-v mono">
                sk_live_<span className="ti-dim">•••••••••••••••</span>
                <span className="ti-ok">✓</span>
              </div>
            </div>
            <div className="ti-step-cap">Stripe, Adyen, NOWPayments — your merchant, your fees.</div>
          </div>

          <div className="ti-arrow"><svg width="40" height="14" viewBox="0 0 40 14" fill="none"><path d="M2 7h34M30 2l6 5-6 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg></div>

          <div className="ti-step">
            <div className="ti-num mono">03</div>
            <button className="ti-launch">
              <span className="ti-launch-spark"/>
              LAUNCH FIRM
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </button>
            <div className="ti-step-cap">60 seconds. No code. No infra.</div>
          </div>
        </div>
      </div>
      <style>{`
        .ti-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 18px; align-items: center; padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); position: relative; }
        .ti-flow::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 0%, rgba(122,82,255,0.08), transparent 60%); border-radius: 22px; pointer-events: none; }
        .ti-step { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
        .ti-num { font-size: 11px; color: var(--purple-2); letter-spacing: 0.16em; font-weight: 700; }
        .ti-field { padding: 16px 18px; }
        .ti-field-l { font-size: 10px; letter-spacing: 0.18em; color: var(--text-mute); }
        .ti-field-v { font-size: 15px; margin-top: 8px; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
        .ti-hl { color: var(--purple-2); font-weight: 600; }
        .ti-dim { color: var(--text-mute); }
        .ti-cursor { display: inline-block; width: 1.5px; height: 12px; background: var(--purple-2); margin-right: 2px; animation: ti-blink 1s infinite steps(1); vertical-align: -2px; }
        @keyframes ti-blink { 50% { opacity: 0; } }
        .ti-ok { color: var(--green); margin-left: 6px; font-weight: 700; }
        .ti-step-cap { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
        .ti-arrow { color: var(--text-mute); display: flex; align-items: center; justify-content: center; }
        .ti-launch { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 22px; border: 0; border-radius: 14px; font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; color: #fff; background: linear-gradient(135deg, #8B65FF 0%, var(--purple) 60%, var(--orange) 120%); box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset, 0 16px 40px -12px var(--purple-glow); cursor: pointer; overflow: hidden; }
        .ti-launch-spark { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%); background-size: 200% 100%; animation: ti-spark 2.6s linear infinite; }
        @keyframes ti-spark { 0% { background-position: 200% 0; } 100% { background-position: -100% 0; } }
        @media (max-width: 1000px) { .ti-flow { grid-template-columns: 1fr; } .ti-arrow svg { transform: rotate(90deg); } }
      `}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Chat-Ops — "Operate a brand with chat, not 47 screens"
// Big introduction to the AI angle, with the agent console as the visual.
// ─────────────────────────────────────────────────────────────
function ChatOpsSection() {
  const rows = [
    {
      bad:  "Open CRM → Challenges → New → fill 12 fields → Save",
      good: "“create challenge: 3d streak, $5 fee, $1000 payout, PL positive 3 days”",
    },
    {
      bad:  "Filter clients → add 4 conditions → export CSV → Excel pivot",
      good: "“filter all clients from this week who won more than $500”",
    },
    {
      bad:  "Open ad manager → build funnel → wire affiliate links → launch",
      good: "“spin up a TikTok funnel for the 3-day streak — budget $200/day”",
    },
  ];
  return (
    <section id="chat-ops" className="section-pad">
      <div className="container co-grid">
        <div className="co-copy">
          <span className="eyebrow" style={{ color: "var(--orange)" }}>Operations</span>
          <h2 style={{ marginTop: 14 }}>
            Operate a brand with <span className="gradient-text">chat.</span><br/>
            Not 47 screens.
          </h2>
          <p style={{ fontSize: 17, marginTop: 18, maxWidth: 540 }}>
            Every operator action — create a challenge, refund a client, draft a payout,
            pull a report — is a sentence. The agent handles the dashboard-clicking on your behalf,
            then shows you the result for one tap of approval.
          </p>

          <div className="co-rows">
            {rows.map((r, i) => (
              <div key={i} className="co-row">
                <div className="co-row-bad">
                  <span className="co-row-bad-tag mono">OLD WAY</span>
                  <span className="co-row-bad-text mono">{r.bad}</span>
                </div>
                <div className="co-row-good">
                  <span className="co-row-good-tag mono">NEW WAY</span>
                  <span className="co-row-good-text mono">{r.good}</span>
                </div>
              </div>
            ))}
          </div>

          <div className="co-cta">
            <a className="btn btn-ghost" href="#agents">
              Meet the operators
              <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6h7M6 2l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
          </div>
        </div>

        <div className="co-visual">
          <AgentConsoleVisual/>
        </div>
      </div>
      <style>{`
        .co-grid {
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
          gap: 56px;
          align-items: center;
        }
        .co-copy { min-width: 0; }
        .co-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
        .co-row { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
        .co-row-bad, .co-row-good { display: flex; gap: 10px; align-items: baseline; min-width: 0; }
        .co-row-bad-tag, .co-row-good-tag {
          flex: 0 0 auto;
          font-size: 9.5px; letter-spacing: 0.18em; font-weight: 700;
          padding: 3px 8px; border-radius: 999px;
        }
        .co-row-bad-tag  { color: var(--text-mute); background: var(--ink); border: 1px solid var(--line); }
        .co-row-good-tag { color: var(--orange); background: color-mix(in oklab, var(--orange) 12%, transparent); border: 1px solid color-mix(in oklab, var(--orange) 28%, transparent); }
        .co-row-bad-text { font-size: 12.5px; color: var(--text-mute); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--text-mute) 50%, transparent); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .co-row-good-text { font-size: 13px; color: var(--text); flex: 1; min-width: 0; line-height: 1.4; }
        .co-cta { margin-top: 24px; }
        .co-visual { position: relative; min-width: 0; max-width: 100%; }
        .co-visual > * { max-width: 100%; }
        .co-visual::before {
          content: ""; position: absolute; inset: -30px;
          background: radial-gradient(60% 60% at 50% 50%, var(--orange-glow), transparent 70%);
          filter: blur(40px); z-index: 0;
        }
        .co-visual > * { position: relative; z-index: 1; }
        @media (max-width: 1000px) { .co-grid { grid-template-columns: 1fr; gap: 32px; } }
      `}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// AI Operators — the differentiator section
// ─────────────────────────────────────────────────────────────
function AgentsSection() {
  const agents = [
    {
      tag: "ops agent",
      t: "Run the firm in plain English.",
      d: 'Create challenges, change rules, refund a client, freeze a suspicious account — "say it, see it done." No 6-click flows.',
      sample: 'create challenge: 3d streak, $5 fee, $1000 payout',
      c: "#7A52FF",
    },
    {
      tag: "support agent",
      t: "Answers every ticket — 24/7.",
      d: "Reads your CRM, your rule-set, your KYC. Resolves 80% of tickets without escalation. Hands off to a human with a full summary when not.",
      sample: 'reply to ticket #4821 — explain trailing drawdown',
      c: "#FF5A1F",
    },
    {
      tag: "marketing agent",
      t: "Builds funnels. Runs them.",
      d: 'Designs the landing page, drafts the ad copy, builds the affiliate flow, watches CAC daily, swaps creatives when CPI drifts.',
      sample: 'spin up a TikTok funnel for the 3-day streak',
      c: "#FFB000",
    },
    {
      tag: "abuse agent",
      t: "Watches every trade.",
      d: "Hedging across accounts. News-spike sniping. Latency arb. Tags abuse patterns to your rule-set in real time, flags accounts, drafts the rejection email.",
      sample: 'review challenge #A0998 — flag if hedging',
      c: "#2BD974",
    },
    {
      tag: "BI agent",
      t: "Reports without dashboards.",
      d: 'Skip the dashboard-clicking. Ask: "show me clients who churned after 1st failed challenge." Get a table, a chart, an email-ready paragraph.',
      sample: 'filter clients who won >$500 this week',
      c: "#24A1DE",
    },
    {
      tag: "payouts agent",
      t: "Pays winners. Without you.",
      d: "Runs eligibility, KYC re-check, AML risk, treasury balance, FX. Drafts the payout. Sits on your desk for one click of approval.",
      sample: 'process this week’s eligible payouts',
      c: "#F118B2",
    },
  ];

  return (
    <section id="agents" className="section-pad">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Meet the operators</span>
          <h2>Six agents on shift. <span className="gradient-text">All on your team.</span></h2>
          <p>
            Each product in the stack ships with an embedded operator agent. They don't write blog posts —
            they create challenges, kill abusers, draft payouts, and turn off ads when CAC creeps.
          </p>
        </div>

        <div className="ag-grid">
          {agents.map((a) => (
            <div key={a.tag} className="ag-card card" style={{ "--c": a.c }}>
              <div className="ag-card-head">
                <div className="ag-card-tag mono">{a.tag}</div>
                <div className="ag-card-status mono">
                  <span className="ag-card-status-dot"/>online
                </div>
              </div>
              <div className="ag-card-t">{a.t}</div>
              <div className="ag-card-d">{a.d}</div>
              <div className="ag-card-sample mono">
                <span className="ag-card-prompt">›</span>
                <span className="ag-card-sample-text">{a.sample}</span>
              </div>
            </div>
          ))}
        </div>

        <div className="ag-foot">
          <div className="ag-foot-l mono">Powered by your choice of model</div>
          <div className="ag-foot-r mono">claude-ops · gpt · gemini · llama · self-hosted</div>
        </div>
      </div>
      <style>{`
        .ag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
        .ag-card { padding: 24px; position: relative; display: flex; flex-direction: column; gap: 12px; transition: transform .2s ease, border-color .2s ease; overflow: hidden; }
        .ag-card:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--c) 35%, var(--line)); }
        .ag-card::before { content: ""; position: absolute; right: -50px; top: -50px; width: 180px; height: 180px; background: radial-gradient(circle, color-mix(in oklab, var(--c) 22%, transparent), transparent 65%); pointer-events: none; }
        .ag-card-head { display: flex; justify-content: space-between; align-items: center; }
        .ag-card-tag { font-size: 10px; letter-spacing: 0.18em; color: var(--c); font-weight: 700; padding: 4px 10px; border-radius: 999px; background: color-mix(in oklab, var(--c) 12%, transparent); border: 1px solid color-mix(in oklab, var(--c) 28%, transparent); text-transform: uppercase; }
        .ag-card-status { font-size: 9.5px; letter-spacing: 0.16em; color: var(--green); display: inline-flex; align-items: center; gap: 5px; text-transform: uppercase; }
        .ag-card-status-dot { width: 5px; height: 5px; border-radius: 999px; background: var(--green); box-shadow: 0 0 6px var(--green); }
        .ag-card-t { font-size: 22px; font-weight: 660; line-height: 1.18; letter-spacing: -0.02em; color: var(--text); }
        .ag-card-d { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }
        .ag-card-sample { display: flex; gap: 8px; padding: 11px 14px; background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: 10px; font-size: 12px; color: var(--text); align-items: flex-start; margin-top: auto; }
        .ag-card-prompt { color: var(--c); font-weight: 700; flex: 0 0 auto; }
        .ag-card-sample-text { color: var(--text-dim); line-height: 1.4; }
        .ag-foot { margin-top: 28px; display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; gap: 16px; flex-wrap: wrap; }
        .ag-foot-l { font-size: 11px; letter-spacing: 0.14em; color: var(--text); text-transform: uppercase; }
        .ag-foot-r { font-size: 11px; letter-spacing: 0.14em; color: var(--text-mute); }
        @media (max-width: 1000px) { .ag-grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 640px) { .ag-grid { grid-template-columns: 1fr; } .ag-foot { flex-direction: column; align-items: flex-start; } }
      `}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// In the box — 4 product modules
// ─────────────────────────────────────────────────────────────
function InTheBox() {
  const items = [
    { n: "01", t: "Branded Website", c: "#7A52FF",
      d: "Marketing site, challenge catalogue, leaderboard, blog. Edited from the CRM — or asked of the agent in chat. SEO-ready in 60s.",
      tags: ["Landing pages", "Challenge catalog", "Leaderboards", "Blog & docs"],
    },
    { n: "02", t: "Client Area", c: "#FF5A1F",
      d: "Where traders sign up, pass KYC, buy a challenge, watch progress and request payouts. Mobile-first. 200+ themes. Native iOS & Android.",
      tags: ["KYC", "Buy challenge", "Trader dashboard", "Payouts"],
    },
    { n: "03", t: "CRM + Ops Agent", c: "#FFB000",
      d: "All the antelopeOS.ai CRM features — pipeline, support, affiliate, abuse, BI — with an operator agent that runs them in plain English.",
      tags: ["Pipeline", "Support", "Affiliates", "Reports"],
    },
    { n: "04", t: "Provider Integrations", c: "#2BD974",
      d: "Bring your own MT5, MT4, NinjaTrader, cTrader, DXtrade, Match-Trader, TradeLocker or any of 12+ supported providers. We connect to it on day one — we don't sell trading.",
      tags: ["12+ providers", "BYO server", "BYO liquidity", "Day-one bridge"],
    },
  ];
  return (
    <section id="box" className="section-pad">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">What's in the box</span>
          <h2>Four products. One install. <span className="gradient-text">All yours.</span></h2>
          <p>You don't pick and choose modules. 60Seconds ships the whole stack, white-labelled, with the agents wired in so it acts like one product on day one.</p>
        </div>
        <div className="itb-grid">
          {items.map((it) => (
            <div key={it.t} className="itb-card card">
              <div className="itb-head">
                <div className="itb-num mono" style={{ "--c": it.c }}>{it.n}</div>
                <div className="itb-t">{it.t}</div>
              </div>
              <div className="itb-d">{it.d}</div>
              <div className="itb-tags">
                {it.tags.map((tg) => <span key={tg} className="itb-tag">{tg}</span>)}
              </div>
              <div className="itb-rail" style={{ background: it.c }}/>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .itb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
        .itb-card { padding: 26px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; transition: transform .2s ease, border-color .2s ease; }
        .itb-card:hover { transform: translateY(-2px); border-color: var(--line-2); }
        .itb-head { display: flex; align-items: center; gap: 12px; }
        .itb-num { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--c); }
        .itb-t { font-size: 22px; font-weight: 660; letter-spacing: -0.02em; color: var(--text); }
        .itb-d { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }
        .itb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
        .itb-tag { font-size: 10.5px; padding: 4px 9px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-dim); letter-spacing: 0.02em; }
        .itb-rail { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
        @media (max-width: 1000px) { .itb-grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 600px) { .itb-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// 60-second timeline
// ─────────────────────────────────────────────────────────────
function SixtySecondTimeline() {
  const segs = [
    { t: "00:00", l: "Sign in",            d: "Enter your firm name and pick a brand color.",                   c: "#7A52FF" },
    { t: "00:10", l: "Point your domain",  d: "Add one A record to your DNS — we verify in seconds.",            c: "#FF5A1F" },
    { t: "00:25", l: "Paste your PSP key", d: "Stripe, Adyen, NOWPayments or any of 50+ gateways.",              c: "#FFB000" },
    { t: "00:40", l: "Pick a provider",    d: "Choose any trading provider from the list. We're already integrated.",   c: "#2BD974" },
    { t: "00:55", l: "Click Launch",       d: "Website, client area, CRM and provider bridge spin up live.",     c: "#F118B2" },
    { t: "01:00", l: "Agent takes over",   d: "Your AI operators clock in. Tickets, ops, payouts — all running.", c: "#24A1DE" },
  ];
  return (
    <section id="timeline" className="section-pad">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">The 60-second flow</span>
          <h2>Sixty seconds, broken down.</h2>
          <p>This isn't marketing math. The whole onboarding lives in one screen — and every step has a real-world deadline.</p>
        </div>
        <div className="sst-track">
          <div className="sst-line"/>
          {segs.map((s) => (
            <div key={s.t} className="sst-node" style={{ "--c": s.c }}>
              <div className="sst-dot"/>
              <div className="sst-time mono">{s.t}</div>
              <div className="sst-card card">
                <div className="sst-l">{s.l}</div>
                <div className="sst-d">{s.d}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .sst-track { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; padding-top: 60px; }
        .sst-line { position: absolute; left: 4%; right: 4%; top: 86px; height: 2px; background: linear-gradient(90deg, #7A52FF, #FF5A1F, #FFB000, #2BD974, #F118B2, #24A1DE); border-radius: 999px; opacity: 0.5; }
        .sst-node { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
        .sst-dot { width: 14px; height: 14px; border-radius: 999px; background: var(--c); box-shadow: 0 0 0 4px color-mix(in oklab, var(--c) 15%, transparent), 0 0 18px color-mix(in oklab, var(--c) 55%, transparent); margin-top: -7px; z-index: 1; }
        .sst-time { font-size: 12.5px; font-weight: 700; color: var(--c); letter-spacing: 0.04em; }
        .sst-card { width: 100%; padding: 16px; text-align: center; }
        .sst-l { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); margin-bottom: 6px; }
        .sst-d { font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }
        @media (max-width: 1000px) { .sst-track { grid-template-columns: 1fr 1fr 1fr; } .sst-line { display: none; } .sst-dot { margin-top: 0; } }
        @media (max-width: 700px) { .sst-track { grid-template-columns: 1fr 1fr; } }
      `}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Trading providers — integration layer, not a provider ourselves
// ─────────────────────────────────────────────────────────────
function PlatformsBlock() {
  const providers = [
    { name: "MetaTrader 5",   short: "MT5",    cat: "FX · INDICES · METALS · CRYPTO", swatch: "#1565C0", icon: "M" },
    { name: "MetaTrader 4",   short: "MT4",    cat: "FX · CFD",                       swatch: "#1976D2", icon: "M" },
    { name: "NinjaTrader",    short: "NT8",    cat: "FUTURES · CME · EUREX",          swatch: "#0D0D0D", icon: "N" },
    { name: "cTrader",        short: "CT",     cat: "FX · CFD · ECN",                 swatch: "#0B5BA9", icon: "c" },
    { name: "DXtrade",        short: "DX",     cat: "FX · CFD · MULTI-ASSET",         swatch: "#7A5BFF", icon: "D" },
    { name: "Match-Trader",   short: "MTC",    cat: "FX · CFD · CRYPTO",              swatch: "#FF5A1F", icon: "M" },
    { name: "TradeLocker",    short: "TL",     cat: "FX · CFD · STOCKS",              swatch: "#1F2937", icon: "T" },
    { name: "Tradovate",      short: "TV",     cat: "FUTURES · MICROS",               swatch: "#0EA47A", icon: "T" },
    { name: "Rithmic",        short: "RI",     cat: "FUTURES · FEEDS",                swatch: "#B4232C", icon: "R" },
    { name: "TradingView",    short: "TV",     cat: "CHARTS · ROUTING",               swatch: "#2962FF", icon: "T" },
    { name: "Quadcode",       short: "QC",     cat: "FX · CFD",                       swatch: "#FFB000", icon: "Q" },
    { name: "Your provider",  short: "+",      cat: "REQUEST AN INTEGRATION",         swatch: "transparent", icon: "+", custom: true },
  ];

  const [selected, setSelected] = React.useState(0);

  return (
    <section className="section-pad">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Trading providers</span>
          <h2>Pick a provider. <span className="gradient-text">We're already integrated.</span></h2>
          <p>
            We're not a trading platform — we're the integration layer that wires whichever one you choose into your firm.
            Bring your own broker relationship, your own server licence, your own liquidity. We connect to it on day one.
          </p>
        </div>

        <div className="pp-shell card">
          <div className="pp-bar">
            <div className="pp-bar-l mono">SETTINGS / TRADING PROVIDER</div>
            <div className="pp-bar-r mono">{providers.length - 1}+ INTEGRATIONS · MORE ADDED MONTHLY</div>
          </div>

          <div className="pp-grid">
            {providers.map((p, i) => {
              const isSel = selected === i;
              return (
                <button
                  key={p.name}
                  className={`pp-card ${isSel ? "sel" : ""} ${p.custom ? "custom" : ""}`}
                  onClick={() => setSelected(i)}
                >
                  <div className="pp-card-top">
                    <div className="pp-icon" style={{ background: p.swatch, color: p.custom ? "var(--text-dim)" : "#fff", border: p.custom ? "1px dashed var(--line-2)" : "0" }}>
                      {p.icon}
                    </div>
                    {isSel && (
                      <span className="pp-tick">
                        <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5l2 2 4-5" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
                      </span>
                    )}
                  </div>
                  <div className="pp-name">{p.name}</div>
                  <div className="pp-cat mono">{p.cat}</div>
                </button>
              );
            })}
          </div>

          <div className="pp-foot">
            <div className="pp-foot-l">
              <div className="pp-foot-lbl mono">SELECTED</div>
              <div className="pp-foot-val">
                {providers[selected].name}
                <span className="pp-foot-cat mono">{providers[selected].cat}</span>
              </div>
            </div>
            <button className="pp-connect">
              {providers[selected].custom ? "Request integration" : "Connect & continue"}
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </button>
          </div>
        </div>

        <div className="pp-disclaimer mono">
          <span className="pp-disclaimer-dot"/>
          <span>
            <strong style={{ color: "var(--text)" }}>We are not the trading provider.</strong>{" "}
            You bring your own broker, server licence and liquidity — 60Seconds is the integration, CRM and AI ops layer on top.
          </span>
        </div>
      </div>
      <style>{`
        .pp-shell { padding: 0; overflow: hidden; }
        .pp-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 10.5px; letter-spacing: 0.16em; color: var(--text-mute); text-transform: uppercase; gap: 16px; flex-wrap: wrap; }
        .pp-bar-l { color: var(--text); font-weight: 600; }
        .pp-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: 14px; gap: 8px; }
        .pp-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; text-align: left; cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
        .pp-card:hover { transform: translateY(-1px); border-color: var(--line-2); background: var(--surface-hover); }
        .pp-card.sel { border-color: var(--purple-2); background: color-mix(in oklab, var(--purple-2) 8%, var(--surface-2)); box-shadow: 0 0 0 1px var(--purple-2) inset, 0 12px 30px -16px var(--purple-glow); }
        .pp-card.custom { border-style: dashed; }
        .pp-card-top { display: flex; justify-content: space-between; width: 100%; align-items: center; }
        .pp-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.04em; }
        .pp-tick { width: 18px; height: 18px; border-radius: 999px; background: var(--purple-2); display: grid; place-items: center; box-shadow: 0 0 0 4px color-mix(in oklab, var(--purple-2) 18%, transparent); }
        .pp-name { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
        .pp-cat { font-size: 9.5px; letter-spacing: 0.14em; color: var(--text-mute); text-transform: uppercase; }

        .pp-foot { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-top: 1px solid var(--line); background: var(--surface-2); gap: 16px; flex-wrap: wrap; }
        .pp-foot-l { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
        .pp-foot-lbl { font-size: 10px; letter-spacing: 0.16em; color: var(--text-mute); text-transform: uppercase; font-weight: 600; }
        .pp-foot-val { display: flex; align-items: baseline; gap: 12px; font-size: 17px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; flex-wrap: wrap; }
        .pp-foot-cat { font-size: 10.5px; letter-spacing: 0.14em; color: var(--text-mute); text-transform: uppercase; font-weight: 500; }
        .pp-connect { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #8B65FF 0%, var(--purple) 100%); color: #fff; font-weight: 600; font-size: 13.5px; cursor: pointer; box-shadow: 0 0 0 1px rgba(255,255,255,0.08) inset, 0 10px 30px -10px var(--purple-glow); transition: transform .15s ease; }
        .pp-connect:hover { transform: translateY(-1px); }

        .pp-disclaimer { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px 18px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; font-size: 12px; color: var(--text-dim); line-height: 1.55; letter-spacing: 0.01em; }
        .pp-disclaimer-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--orange); box-shadow: 0 0 8px var(--orange); flex: 0 0 6px; margin-top: 6px; }

        @media (max-width: 900px) { .pp-grid { grid-template-columns: repeat(3, 1fr); } }
        @media (max-width: 600px) { .pp-grid { grid-template-columns: 1fr 1fr; } .pp-foot { flex-direction: column; align-items: stretch; } .pp-connect { justify-content: center; } }
      `}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Built for — 3 audience cards
// ─────────────────────────────────────────────────────────────
function BuiltForBlock() {
  const cards = [
    { tag: "Creators & influencers", c: "#7A52FF",
      t: "Turn an audience into a firm.",
      d: "You bring the followers, the brand, the funnel. We give you the firm — no devs, no infra, no 6-month build. Be your own affiliate.",
      points: ["Custom domain in 60s", "Discord & Telegram bots", "Affiliate links per video", "Pay yourself first"],
    },
    { tag: "Marketing agencies", c: "#FF5A1F",
      t: "Launch firms for clients in a day.",
      d: "Onboard a client in the morning, hand them a live URL by lunch. Run multiple brands from one agency console.",
      points: ["Multi-brand console", "White-labelled CRM", "Branded apps per client", "Revshare on every firm"],
    },
    { tag: "First-time operators", c: "#FFB000",
      t: "Skip the 12-month build.",
      d: "Don't write a single line of integration code. Don't hire a CTO yet. Validate your concept with paying traders this week.",
      points: ["Zero infra to manage", "Production-grade KYC", "Real challenge engine", "Migrate out anytime"],
    },
  ];
  return (
    <section id="built-for" className="section-pad">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Built for</span>
          <h2>If you're trying to <span className="gradient-text">launch fast</span>, this is for you.</h2>
          <p>Existing prop firms running tens of thousands of challenges should look at <a href="https://www.antelopeos.ai" target="_blank" rel="noreferrer" style={{ color: "var(--purple-2)", textDecoration: "underline" }}>antelopeOS.ai</a>. Everyone else, start here.</p>
        </div>
        <div className="bf-grid">
          {cards.map((c) => (
            <div key={c.tag} className="bf-card card" style={{ "--c": c.c }}>
              <div className="bf-tag mono">{c.tag}</div>
              <div className="bf-t">{c.t}</div>
              <div className="bf-d">{c.d}</div>
              <ul className="bf-points">
                {c.points.map((p) => <li key={p}><span className="bf-dot"/>{p}</li>)}
              </ul>
              <div className="bf-glow"/>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .bf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
        .bf-card { padding: 28px; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; transition: transform .2s ease, border-color .2s ease; }
        .bf-card:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--c) 30%, var(--line)); }
        .bf-tag { font-size: 10.5px; letter-spacing: 0.16em; color: var(--c); font-weight: 700; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: color-mix(in oklab, var(--c) 12%, transparent); border: 1px solid color-mix(in oklab, var(--c) 28%, transparent); }
        .bf-t { font-size: 22px; font-weight: 660; line-height: 1.18; letter-spacing: -0.02em; color: var(--text); }
        .bf-d { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }
        .bf-points { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
        .bf-points li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text); }
        .bf-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--c); box-shadow: 0 0 8px var(--c); flex: 0 0 6px; }
        .bf-glow { position: absolute; right: -40px; top: -40px; width: 200px; height: 200px; background: radial-gradient(circle, color-mix(in oklab, var(--c) 25%, transparent), transparent 65%); pointer-events: none; }
        @media (max-width: 900px) { .bf-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Compare table
// ─────────────────────────────────────────────────────────────
function CompareTable() {
  const rows = [
    { label: "Time to first challenge sale",  them: "4–9 months",                              us: "Same day" },
    { label: "Engineers required",            them: "Backend, frontend, DevOps, mobile",       us: "Zero" },
    { label: "Trading provider integration", them: "Months of bridge dev + ops on call",      us: "12+ providers wired in — bring your own" },
    { label: "Client Area + KYC",             them: "Custom build + KYC vendor contract",      us: "Production-ready, day one" },
    { label: "CRM, support, affiliate",       them: "Patchwork of 5+ SaaS subscriptions",      us: "One system, one data layer" },
    { label: "Ops workload",                  them: "Hire 8 ops people, click 47 dashboards",  us: "Type one sentence to an agent" },
    { label: "Payouts (fiat + crypto)",       them: "PSP per region, treasury ops",            us: "Multi-rail, KYC-gated, automated" },
    { label: "Migrate out later",             them: "—",                                        us: "Yes — you own your data" },
  ];
  return (
    <section id="compare" className="section-pad">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">Build vs. buy</span>
          <h2>What you skip when you start here.</h2>
          <p>The same firm, built the traditional way, takes 6–9 months and a six-figure budget before you take your first challenge sale.</p>
        </div>
        <div className="cmp card">
          <div className="cmp-head">
            <div/>
            <div className="cmp-them">Build it yourself</div>
            <div className="cmp-us">60Seconds</div>
          </div>
          {rows.map((r) => (
            <div key={r.label} className="cmp-row">
              <div className="cmp-label">{r.label}</div>
              <div className="cmp-cell cmp-them">{r.them}</div>
              <div className="cmp-cell cmp-us"><span className="cmp-check">✓</span>{r.us}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .cmp { padding: 0; overflow: hidden; }
        .cmp-head, .cmp-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; padding: 16px 24px; border-bottom: 1px solid var(--line); align-items: center; gap: 20px; }
        .cmp-row:last-child { border-bottom: 0; }
        .cmp-head { background: var(--surface-2); font-weight: 600; font-size: 13px; font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
        .cmp-them { color: var(--text-dim); }
        .cmp-us { color: var(--purple-2); font-weight: 600; }
        .cmp-label { font-size: 13.5px; color: var(--text); font-weight: 500; }
        .cmp-cell { font-size: 13px; line-height: 1.5; }
        .cmp-cell.cmp-us { display: flex; gap: 8px; align-items: flex-start; color: var(--text); font-weight: 500; }
        .cmp-check { color: var(--green); font-weight: 700; }
        @media (max-width: 700px) {
          .cmp-head, .cmp-row { grid-template-columns: 1.6fr 1fr; padding: 14px 18px; gap: 12px; }
          .cmp-them { display: none; }
        }
      `}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// FAQ
// ─────────────────────────────────────────────────────────────
function FAQ() {
  const items = [
    { q: "Is 60 seconds for real, or just marketing?",
      a: "Median for our beta cohort was 58 seconds from sign-in to a live URL serving signups. Edge cases like complex DNS can stretch to a few minutes, but the typical path really is one minute." },
    { q: "What does \"AI-first\" actually mean here?",
      a: "Every product in the stack — CRM, support, marketing, payouts, abuse — ships with an agent embedded. Instead of clicking through 47 buttons to create a challenge, you tell the agent: \"create challenge: 3d streak, $5 fee, $1000 payout.\" It builds it, publishes it, and reports back. Same for support tickets, BI queries, ad funnels, payout runs." },
    { q: "Who is 60Seconds for?",
      a: "Influencers and streamers launching their own brand instead of being affiliates. Marketing agencies running prop firms for clients. First-time operators validating a concept fast. If you already run a serious firm, talk to antelopeOS.ai." },
    { q: "What do I need before I start?",
      a: "Two things: a domain you own (we show you the one A-record to point at us) and an API key from a payment processor (Stripe, Adyen, NOWPayments, and 50+ others)." },
    { q: "Who built this?",
      a: "60Seconds is built by the founders of antelopeOS.ai — the trading-OS that powers 200+ prop firms. Same engine, same CRM, productised so a single person can launch a firm in a minute." },
    { q: "Do I own my data and brand?",
      a: "Yes. You own the domain, the customer relationships, the PSP merchant accounts and the trader data. If you ever leave, we export everything." },
    { q: "Can the agents really run support 24/7?",
      a: "They handle ~80% of tickets without escalation by reading your CRM, rule-set and KYC docs. The remaining 20% land on a human with a full summary and recommended response drafted." },
    { q: "What if I outgrow 60Seconds?",
      a: "Your firm graduates onto the antelopeOS.ai Prop OS plan — same data, more knobs, custom integrations, dedicated success engineer. Traders see zero downtime." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section id="faq" className="section-pad">
      <div className="container">
        <div className="section-head" style={{ marginBottom: 36 }}>
          <span className="eyebrow">FAQ</span>
          <h2>Frequently asked</h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div key={i} className={`faq-item card ${open === i ? "open" : ""}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-chev">{open === i ? "−" : "+"}</span>
              </button>
              {open === i && <div className="faq-a">{it.a}</div>}
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .faq-list { display: flex; flex-direction: column; gap: 8px; max-width: 880px; }
        .faq-item { padding: 0; overflow: hidden; }
        .faq-q { width: 100%; text-align: left; padding: 22px 26px; background: transparent; border: 0; color: var(--text); font-size: 16px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
        .faq-chev { color: var(--purple-2); font-size: 20px; font-weight: 300; }
        .faq-a { padding: 0 26px 22px; color: var(--text-dim); font-size: 14.5px; line-height: 1.65; }
        .faq-item.open { border-color: var(--line-2); }
      `}</style>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// Final CTA
// ─────────────────────────────────────────────────────────────
function CTASection() {
  return (
    <section id="cta" className="section-pad">
      <div className="container">
        <div className="cta-card">
          <div className="cta-grid-bg"/>
          <div className="cta-content">
            <div className="eyebrow" style={{ color: "rgba(255,255,255,0.7)", marginBottom: 16 }}>Ready when you are</div>
            <h2 style={{ fontSize: "clamp(32px, 4.5vw, 54px)", color: "#fff" }}>
              Start the 60-second clock.
            </h2>
            <p style={{ color: "rgba(255,255,255,0.78)", fontSize: 17, marginTop: 16, maxWidth: 580 }}>
              Bring a domain. Bring a PSP key. We bring the firm — and the agents to operate it.
              Book a launch call and we'll go live on the call.
            </p>
            <div style={{ display: "flex", gap: 10, marginTop: 28, flexWrap: "wrap" }}>
              <a className="btn" href="mailto:now@60seconds.io?subject=Launch%20call" style={{ background: "#fff", color: "#0B0B18", padding: "14px 22px", fontSize: 14.5, fontWeight: 600 }}>
                Book launch call
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M3 7h8M7 3l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </a>
              <a className="btn" href="mailto:now@60seconds.io" style={{ background: "rgba(255,255,255,0.1)", color: "#fff", border: "1px solid rgba(255,255,255,0.2)", padding: "14px 22px", fontSize: 14.5, fontWeight: 600 }}>
                now@60seconds.io
              </a>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        .cta-card {
          position: relative;
          padding: 60px 56px;
          border-radius: 28px;
          background:
            radial-gradient(800px 400px at 80% 110%, rgba(255,90,31,0.65), transparent 60%),
            radial-gradient(700px 380px at 20% 0%, rgba(255,176,0,0.30), transparent 60%),
            linear-gradient(135deg, var(--purple) 0%, #2A1080 100%);
          overflow: hidden;
          border: 1px solid rgba(255,255,255,0.18);
        }
        .cta-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 48px 48px; mask: radial-gradient(700px 400px at 50% 50%, #000 30%, transparent 80%); -webkit-mask: radial-gradient(700px 400px at 50% 50%, #000 30%, transparent 80%); }
        .cta-content { position: relative; z-index: 1; }
        @media (max-width: 700px) { .cta-card { padding: 40px 28px; } }
      `}</style>
    </section>
  );
}

window.StatRow            = StatRow;
window.TwoInputsFlowSection = TwoInputsFlowSection;
window.ChatOpsSection     = ChatOpsSection;
window.AgentsSection      = AgentsSection;
window.InTheBox           = InTheBox;
window.SixtySecondTimeline = SixtySecondTimeline;
window.PlatformsBlock     = PlatformsBlock;
window.BuiltForBlock      = BuiltForBlock;
window.CompareTable       = CompareTable;
window.FAQ                = FAQ;
window.CTASection         = CTASection;