// Client Area product page
function ClientAreaPage() {
  return (
    <Site>
      <PageHero
        breadcrumb={[{ label: "Product" }, { label: "Client Area" }]}
        eyebrow="Product · Client Area"
        title={<>The trader portal that <span className="gradient-text">funds itself</span> overnight.</>}
        sub="A configurable Client Area for registration, KYC, deposits, withdrawals, account management and trading — fully white-labeled, fully embedded into your CRM and platform from day one."
        ctaPrimary={{ label: "Book a demo" }}
        ctaSecondary={{ label: "See live tour", href: "#tour" }}
        visual={<ClientAreaVisual/>}
      />

      <StatRow items={[
        { v: "12 mins", l: "Median lead-to-funded with auto-KYC" },
        { v: "3.4×", l: "Higher second-deposit rate vs static portals" },
        { v: "30+", l: "Languages and currencies supported" },
        { v: "0 dev hours", l: "To launch with our white-label theme" },
      ]}/>

      <FeatureGrid
        eyebrow="Capabilities"
        title="Every trader action — in one branded experience."
        sub="Registration, verification, accounts, deposits, withdrawals, transfers, copy-trading subscriptions, IB referrals, documents and trading — under your domain, your colors, your rules."
        features={[
          { t: "Configurable registration", d: "Country-aware fields, marketing tags, A/B test multiple flows. Capture only what compliance requires for each jurisdiction." },
          { t: "Embedded KYC", d: "Sumsub, Onfido, Veriff or your in-house workflow — verification happens inside the portal, not in a third-party redirect." },
          { t: "Deposits & withdrawals", d: "Cards, crypto, bank, APMs and local methods — with smart routing, decline recovery, and withdrawal queues built for compliance." },
          { t: "Account management", d: "Open additional MT4/5/cTrader/DXTrade accounts, switch leverage, change password, request demo — without an agent." },
          { t: "Internal transfers", d: "Move funds between live accounts, demo, copy-trading wallets and crypto in one click — fully reconciled to your back office." },
          { t: "Documents & statements", d: "On-demand monthly statements, tax reports, fee disclosures. Generated, signed, archived and audit-ready." },
          { t: "Multi-language, multi-currency", d: "30+ languages out of the box. Display currency, deposit currency and account currency cleanly separated." },
          { t: "Trader Web & Mobile entry", d: "Single sign-on into Web Trader and Mobile Trader app — no second login screen, no second password, no support tickets." },
          { t: "Marketing surfaces", d: "Inline promotions, IB referral codes, leaderboards, copy-trading signals — surfaced where they actually drive deposits." },
        ]}
      />

      <SplitFeature
        eyebrow="White-label, your way"
        title="Your brand, your domain, your colors — not ours."
        sub="The entire portal is white-labeled by default. Theme it from a config file, deploy on your own subdomain, swap copy per jurisdiction. No 'powered by' watermark unless you want one."
        points={[
          "Theme tokens for color, typography, spacing, radius — change globally in seconds",
          "Per-region copy and compliance disclosures",
          "Custom domains, subdomains, regional CDN routing",
          "Mobile-first responsive across every screen",
        ]}
        visual={<BrowserMockVisual/>}
      />

      <SplitFeature
        eyebrow="Built for conversion"
        title="Designed by people who've watched 10,000 onboarding flows."
        sub="Every screen is benchmarked against deposit completion, time-to-FTD and support ticket volume. Defaults you can ship; experiments you can run."
        points={[
          "Lead-to-FTD funnel tracked end to end",
          "Smart deposit step: highest-success method first per country",
          "Inline help and live-chat triggered by drop-off intent",
          "A/B test registration flows without dev cycles",
        ]}
        visual={<ConnectorGridVisual/>}
        reverse
      />

      <Workflow
        eyebrow="A typical day"
        title="What happens in 24 hours of Client Area."
        sub="Anonymized aggregate from one of our mid-size FX broker customers."
        steps={[
          { t: "Lead lands", d: "287 new sign-ups across 12 countries", list: ["~ 73% complete email verification", "Auto-routed to local CRM team", "Localized welcome flow"] },
          { t: "KYC submitted", d: "211 of 287 begin KYC within 30 minutes", list: ["Auto-approved: 79%", "Manual review: 18%", "Re-doc requested: 3%"] },
          { t: "First deposit", d: "FTD volume: $612K", list: ["Avg FTD $2,901", "78% via card, 17% crypto", "Decline recovery: +$48K"] },
          { t: "First trade", d: "Median time live → first trade: 14 min", list: ["MT5 SSO from portal", "Mobile app sessions: 64%", "Web Trader sessions: 36%"] },
        ]}
      />

      <FAQ items={[
        { q: "Can I run multiple portals from one back-office?", a: "Yes — multi-license groups can run distinct portals (different brands, different jurisdictions) sharing back-office, CRM and BI. Each portal has its own theme, KYC config and payment routing." },
        { q: "Can my dev team customize the UI further?", a: "Absolutely. The portal exposes themed CSS variables, a public component library, and a webhook + REST API surface. Light customization is config-only; deep customization is supported with our integration team." },
        { q: "How do you handle different countries' compliance requirements?", a: "Per-country registration flows, per-country KYC steps, per-country payment methods, per-country disclosure copy. Configurable from one rules engine." },
        { q: "Does the Client Area work without your CRM?", a: "Yes, but you'll get the most leverage when CRM, Client Area and Payments share one data layer. Standalone deployments are common for early customers and scale up over time." },
      ]}/>

      <CTASection
        title="Give traders a portal worth funding twice."
        sub="See a live walkthrough of the Client Area for your jurisdiction and brand."
        primary={{ label: "Book a demo" }}
        secondary={{ label: "Talk to sales", href: "pages/contact.html" }}
      />
    </Site>
  );
}

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