// Trading Platform product page
function TradingPlatformPage() {
  return (
    <Site>
      <PageHero
        breadcrumb={[{ label: "Product" }, { label: "Trading Platform" }]}
        eyebrow="Product · Trading Platform"
        title={<>Trading <span className="gradient-text">infrastructure</span> connected to your operations.</>}
        sub="Run MT4, MT5, cTrader, DXTrade or our native engine — fully integrated into CRM, Client Area, payments, KYC and BI. One stack, one login, one source of truth."
        ctaPrimary={{ label: "Book a demo" }}
        ctaSecondary={{ label: "See live chart", href: "#chart" }}
        visual={<OrderBookVisual/>}
      />

      <StatRow items={[
        { v: "12 ms", l: "Median order round-trip" },
        { v: "99.99%", l: "Uptime SLA across regions" },
        { v: "150+", l: "Liquidity providers integrated" },
        { v: "5 ms", l: "BI dashboard data freshness" },
      ]}/>

      <FeatureGrid
        eyebrow="What you get"
        title="A trading stack that talks to the rest of your business."
        features={[
          { t: "Multi-platform", d: "MT4, MT5, cTrader, DXTrade, MatchTrader, plus our native engine. Run one or all in parallel." },
          { t: "Liquidity routing", d: "Smart routing across LPs by symbol, time, volume and toxicity. A-book / B-book / hybrid in one engine." },
          { t: "Risk management", d: "Real-time exposure, hedging, position limits, margin calls, stop-out logic — all configurable per group." },
          { t: "Symbol management", d: "Markups, swaps, commissions, sessions, contract sizes — managed centrally and pushed to platforms." },
          { t: "Group management", d: "Trader groups with custom leverage, spreads, commissions and rules — synced across CRM and Client Area." },
          { t: "Plugin / EA support", d: "Custom server-side plugins, EAs, and bridges supported and version-managed." },
          { t: "Bridge & gateway", d: "Pre-built bridges to oneZero, PrimeXM, Match-Trader, Centroid and more." },
          { t: "Real-time analytics", d: "Trader behavior, profitability, toxicity scoring streamed to BI dashboards." },
          { t: "DR & failover", d: "Multi-region active-active deployments with sub-second failover." },
        ]}
      />

      <SplitFeature
        eyebrow="Connected operations"
        title="Trading events are first-class data."
        sub="A new position, a closed trade, a margin call — every trading event lands in the CRM timeline, fires the right rules in BI, and reaches the right rep instantly. No nightly batch jobs, no data lag."
        points={[
          "Real-time trade stream into CRM, BI, and Client Area",
          "Behavioral triggers: drawdown, big win, dormancy",
          "Auto-tasks for retention reps based on trading signals",
          "Full audit trail per trader, per session",
        ]}
        visual={<TradingVisual/>}
      />

      <FAQ items={[
        { q: "Do I need to migrate off MT5?", a: "No. We integrate with your existing MT4/MT5 deployment, or host one for you. Our native engine is optional." },
        { q: "What about liquidity providers?", a: "150+ pre-integrated LPs. We also build new connectors on request. Smart routing and toxicity scoring built in." },
        { q: "How is risk handled?", a: "Real-time exposure dashboards, configurable hedging rules, group-level margin and stop-out policies. Risk team works the same data ops, retention and BI work." },
      ]}/>

      <CTASection
        title="Operations and trading on the same stack."
        sub="See the trading engine connected to CRM, payments and BI."
        primary={{ label: "Book a demo" }}
      />
    </Site>
  );
}

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