// Web Trader product page
function WebTraderPage() {
  return (
    <Site>
      <PageHero
        breadcrumb={[{ label: "Product" }, { label: "Web Trader" }]}
        eyebrow="Product · Web Trader"
        title={<>A <span className="gradient-text">web trading</span> experience your brand can be proud of.</>}
        sub="Browser-based trading interface — fully white-labeled, single-sign-on from the Client Area, charting and order tools that feel native, performance that beats the desktop client."
        ctaPrimary={{ label: "Book a demo" }}
        ctaSecondary={{ label: "Try the demo", href: "#" }}
        visual={<BrowserMockVisual/>}
      />

      <StatRow items={[
        { v: "0 install", l: "Browser-native — no downloads" },
        { v: "60 fps", l: "Charting and order book rendering" },
        { v: "All devices", l: "Desktop, tablet, mobile responsive" },
        { v: "100%", l: "White-label, your domain and brand" },
      ]}/>

      <FeatureGrid
        eyebrow="Inside Web Trader"
        title="Everything a trader needs, none of the legacy weight."
        features={[
          { t: "Pro charting", d: "Multi-pane charts, 100+ indicators, drawing tools, alerts. Built on a custom engine for speed." },
          { t: "Order types", d: "Market, limit, stop, trailing stop, OCO, scaled orders, partial close. Hotkeys for power users." },
          { t: "Watchlists & symbols", d: "Custom watchlists, symbol search, sectors, favorites — synced across devices." },
          { t: "Position & history", d: "Open positions, pending orders, closed trades, dividends, swaps — all on one screen." },
          { t: "Multiple accounts", d: "Switch between live, demo, prop, copy-trading accounts without logging out." },
          { t: "News & calendar", d: "Economic calendar, news feed, asset-specific events tied to charts." },
          { t: "One-click trading", d: "Optional one-click mode for active traders, with confirmations off and risk limits on." },
          { t: "Mobile-responsive", d: "The same Web Trader runs full-featured on tablets and phones — no second app required." },
          { t: "Full theming", d: "Light and dark themes, brand colors, logo, language. Per-broker config." },
        ]}
      />

      <SplitFeature
        eyebrow="Performance"
        title="Built like a trading desk, not a website."
        sub="Web Trader uses a custom rendering engine, websocket-streamed quotes, virtualized order books, and a chart engine optimized for tick-level redraws. It just feels fast."
        points={[
          "60 fps chart redraws even on mid-tier hardware",
          "Tick-level streaming from gateway to UI",
          "Virtualized symbol lists and order books",
          "First Contentful Paint under 1 second",
        ]}
        visual={<TradingVisual/>}
      />

      <FAQ items={[
        { q: "Does Web Trader work on mobile?", a: "Yes — fully responsive. Most customers also deploy the native Mobile Trader app for iOS and Android, but Web Trader runs on phones." },
        { q: "Can I customize order tickets?", a: "Order tickets, hotkeys, default order types, confirmations and risk caps are all configurable per broker." },
        { q: "Does it support copy-trading?", a: "Yes — copy-trading subscriptions, signal feeds and master/follower switching are integrated." },
      ]}/>

      <CTASection title="Give traders a web client they don't have to apologize for." primary={{ label: "Book a demo" }}/>
    </Site>
  );
}

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