// Prop Trading Suite — Product page (focused on modules + tech, not business pitch)
function PropTradingPage() {
  return (
    <Site>
      <PageHero
        breadcrumb={[{ label: "Product" }, { label: "Prop Trading Suite" }]}
        eyebrow="Product · Prop Trading Suite"
        title={<>The <span className="gradient-text">technical modules</span> behind every prop firm we run.</>}
        sub="The Prop Trading Suite is the engineering surface — challenge engine, rule enforcer, payout orchestrator, abuse pipeline, trader portal SDK. Plug them in à la carte, or use them all as a turnkey stack."
        ctaPrimary={{ label: "Book a demo" }}
        ctaSecondary={{ label: "See the business case", href: "pages/prop-firms.html" }}
        visual={<PropChallengeVisual/>}
      />

      <div className="container" style={{ marginTop: -28, marginBottom: 28 }}>
        <div className="card" style={{ padding: 18, display: "flex", gap: 12, alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", borderColor: "var(--purple-2)", background: "rgba(122,82,255,0.06)" }}>
          <div style={{ fontSize: 13, color: "var(--text-dim)" }}>
            <strong style={{ color: "var(--text)" }}>Looking for the business pitch?</strong> Pricing, comparisons, abuse-detection ROI, trader stats, payout speed live on the Prop Firms solution page.
          </div>
          <a href="pages/prop-firms.html" className="btn ghost" style={{ fontSize: 13 }}>Solutions · Prop Firms →</a>
        </div>
      </div>

      <FeatureGrid
        eyebrow="Modules"
        title="Eight surfaces. Use any subset."
        features={[
          { t: "Challenge engine", d: "First-class challenge object with phases, rules, addons, refunds, scaling. Configurable in JSON or UI." },
          { t: "Rule enforcer", d: "Streaming rule engine over the trader's ticks. Daily-loss, max-DD, news, weekend, position-size — sub-second auto-violation." },
          { t: "Payout orchestrator", d: "Reuses the same payment routing as deposits. Multi-rail, KYC-gated, dual-approval, full audit log." },
          { t: "Abuse pipeline", d: "Behavioral + device + payment + hedge-graph fingerprinting. Models retrained against live network abuse patterns." },
          { t: "Trader portal SDK", d: "React + REST + Webhook surface. White-label trader dashboards, leaderboards, certificates — embed or fork." },
          { t: "Affiliate / IB graph", d: "Multi-level partner trees with prop-specific commission types: per challenge sale, per funded promotion, per payout." },
          { t: "Discord / Telegram bots", d: "Engagement bots for trader support, addon upsells, payout notifications. Webhook-driven, no-code rules." },
          { t: "Prop-tuned BI cubes", d: "Pre-built BI cubes: pass rate, payout-to-revenue, ad-source ROI, trader LTV, breach distribution." },
        ]}
      />

      <SplitFeature
        eyebrow="Architecture"
        title="One ledger, every surface."
        sub="Every challenge sale, every breach event, every payout writes to the same ledger your CRM, BI and finance pull from. No reconciliation jobs, no nightly batches."
        points={[
          "Single source of truth across all modules",
          "Event-streaming architecture — every state change is a webhook",
          "Idempotent everywhere — replay safe, audit safe",
          "Open API: REST, GraphQL, webhook, streaming",
        ]}
        visual={<ConnectorGridVisual/>}
      />

      <FAQ items={[
        { q: "Can I use just the challenge engine without the rest?", a: "Yes. Every module is API-first. Run the challenge engine on your existing CRM, or vice versa." },
        { q: "Which trading platforms are supported?", a: "MT4, MT5, cTrader, DXTrade, Match-Trader, Match-Trader Prop, TradeLocker, NinjaTrader. Run any combination concurrently." },
        { q: "How do I migrate an existing prop firm?", a: "Migration tooling for traders, challenges, payouts and ledger from any major competitor. We've done dozens — typically a 2-week handover." },
      ]}/>

      <CTASection title="Plug in a module, or run the whole stack." sub="Both work. Both are battle-tested." primary={{ label: "Book a demo" }} secondary={{ label: "Solutions · Prop Firms", href: "pages/prop-firms.html" }}/>
    </Site>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<PropTradingPage/>);