// Mobile Trader app product page
function MobileTraderPage() {
  return (
    <Site>
      <PageHero
        breadcrumb={[{ label: "Product" }, { label: "Mobile Trader App" }]}
        eyebrow="Product · Mobile Trader"
        title={<>A native mobile trader — <span className="gradient-text">white-labeled to you</span>.</>}
        sub="Native iOS and Android trading app, published in your name on the App Store and Google Play, single-sign-on from your Client Area, push notifications tied to behavior."
        ctaPrimary={{ label: "Book a demo" }}
        ctaSecondary={{ label: "App Store preview", href: "#" }}
        visual={<PhoneStackVisual/>}
      />

      <StatRow items={[
        { v: "iOS + Android", l: "Native apps under your brand" },
        { v: "1 week", l: "From kickoff to App Store" },
        { v: "Push", l: "Notifications wired to trading behavior" },
        { v: "Biometric", l: "FaceID / fingerprint sign-in built in" },
      ]}/>

      <FeatureGrid
        eyebrow="Inside the app"
        title="Trading-grade UX, retention-grade engagement."
        features={[
          { t: "Native charting", d: "Multi-timeframe, multi-indicator, multi-pane — touch-first interactions." },
          { t: "Order placement", d: "Market, limit, stop, trailing — with risk limits and one-tap mode." },
          { t: "Account dashboard", d: "Equity, balance, P&L, deposits, withdrawals — all in one screen." },
          { t: "Push notifications", d: "Tied to trading behavior: margin call, big move on watchlist, news on holding." },
          { t: "Biometric sign-in", d: "FaceID, TouchID, Android biometrics. PIN fallback." },
          { t: "Deep links", d: "From email, SMS, ads — straight into a watchlist, account or deposit screen." },
          { t: "App Store publishing", d: "We publish under your developer account or ours. Your icon, name, screenshots." },
          { t: "Updates managed", d: "Continuous OTA updates for content, theming, and minor logic. Native rebuilds for engine changes." },
          { t: "Offline-tolerant", d: "Resilient to spotty mobile network — orders queue and surface clearly." },
        ]}
      />

      <SplitFeature
        eyebrow="Engagement"
        title="Push notifications that actually convert."
        sub="The mobile app shares the same event stream as CRM and BI. A trader hitting drawdown gets a coaching push. A funded client sees a personalized signal. Every push is tied to a real signal — not generic blasts."
        points={[
          "Behavioral pushes: drawdown, win streak, dormancy",
          "Watchlist alerts at user-set thresholds",
          "Marketing pushes routed by IB and segment",
          "Compliance review on every push template",
        ]}
        visual={<MobileTraderVisual/>}
      />

      <FAQ items={[
        { q: "How long to publish?", a: "1 week from kickoff. We handle App Store and Play Store submission under your account or ours." },
        { q: "What about Apple's review process?", a: "We've shipped 50+ trader apps through Apple review. We know exactly what they ask for, and prep the responses upfront." },
        { q: "Can I customize beyond branding?", a: "Yes — feature flags, per-region behavior, custom screens. The app shares the same component library as Web Trader." },
      ]}/>

      <CTASection title="Ship your trader app in 1 week." primary={{ label: "Book a demo" }}/>
    </Site>
  );
}

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