// Crypto Operations product page
function CryptoTradingPage() {
  return (
    <Site>
      <PageHero
        breadcrumb={[{ label: "Product" }, { label: "Crypto Operations" }]}
        eyebrow="Product · Crypto Operations"
        title={<>The full <span className="gradient-text">Web3 operations</span> stack for trading companies.</>}
        sub="Wallet-connect login, custodial + non-custodial wallets, swaps, staking, farms, launchpad, and live connectors to Binance, OKX, Bybit and Kraken — all wired into your Client Area, BI and CRM."
        ctaPrimary={{ label: "Book a demo" }}
        ctaSecondary={{ label: "See modules", href: "#modules" }}
        visual={<CryptoOrbitVisual/>}
      />

      <StatRow items={[
        { v: "Wallet-connect", l: "MetaMask, WalletConnect, Phantom, Trust" },
        { v: "Spot · Stake · Swap", l: "Operate the full DeFi flow inside your brand" },
        { v: "CEX bridges", l: "Binance, OKX, Bybit, Kraken — read + trade" },
        { v: "KYT inside", l: "Chainalysis · Elliptic · TRM Labs" },
      ]}/>

      <FeatureGrid
        eyebrow="Modules"
        title="Six operating surfaces, one stack."
        id="modules"
        features={[
          { t: "Wallet login", d: "Sign-in-with-Ethereum, Solana, TRON, BNB Chain. Custodial fallback for non-Web3 users — same identity, same KYC tier." },
          { t: "Wallets & balances", d: "Custodial (Fireblocks/BitGo) and non-custodial views in one Client Area. Multi-chain, per-asset, with live USD valuation." },
          { t: "Swap", d: "1inch, 0x and Jupiter aggregation under your branding. Best-route quotes, slippage controls, MEV protection. Fees split to your treasury." },
          { t: "Staking", d: "ETH, SOL, ATOM, MATIC, DOT — liquid and native. Auto-compounding, slashing protection, validator routing." },
          { t: "Farms & vaults", d: "Curated yield farms across Ethereum, Arbitrum, Base, BSC. Risk-tiered, audited, with one-click entry/exit." },
          { t: "Launchpad", d: "Run IDOs and token sales for your community. Tier-based allocation, KYC-gated, vesting schedules, anti-bot." },
          { t: "Exchange connect", d: "OAuth bridges to Binance, OKX, Bybit, Kraken. Read balances, mirror trades, route fiat in/out — without leaving your app." },
          { t: "On / off-ramps", d: "USDT, USDC, BTC, ETH on TRON / ETH / SOL / BSC / BTC. Auto-FX into account base currency at deposit." },
          { t: "KYT screening", d: "Every deposit, withdrawal and bridge screened. Sanctioned wallets, mixers, high-risk paths flagged in compliance queue." },
        ]}
      />

      <SplitFeature
        eyebrow="Wallet-connect login"
        title="Your users sign in with the wallet they already trust."
        sub="Sign-in-with-Ethereum (EIP-4361), Solana, TRON and BNB Chain — wired directly into your Client Area auth. KYC tiers, MFA and session policies all carry over."
        points={[
          "MetaMask, WalletConnect, Phantom, Trust, Coinbase Wallet, Ledger",
          "Custodial fallback for users who don't want to bring a wallet",
          "Per-tier KYC gating before staking / launchpad / large swaps",
          "Wallet ↔ KYC binding so a sanctioned address never makes it through",
        ]}
        visual={<KYCVisual/>}
      />

      <SplitFeature
        eyebrow="Stake · Farm · Swap"
        title="Run the full DeFi product surface — under your brand."
        sub="Don't send your users to Uniswap, Lido or Pendle. Embed the full primitives in your Client Area, route the volume, take a cut, and keep the relationship."
        points={[
          "Aggregated swaps via 1inch / 0x / Jupiter — best price, your branding",
          "Liquid + native staking across the top 12 chains",
          "Curated yield farms with audit + risk score on every pool",
          "Treasury fee splits per module, fully configurable",
        ]}
        visual={<TradingVisual/>}
        reverse
      />

      <SplitFeature
        eyebrow="Exchange bridges"
        title="Binance, OKX, Bybit, Kraken — inside your app."
        sub="OAuth-style bridges let users link their CEX accounts. Read balances, place trades, and route fiat in/out — all from your Client Area, all logged into your BI."
        points={[
          "Read-only or full-trade scopes per user",
          "Mirror balances + open positions into your dashboards",
          "Route fiat deposits via the user's existing CEX rails",
          "Aggregated portfolio view: on-chain + CEX + your platform",
        ]}
        visual={<ConnectorGridVisual/>}
      />

      <FAQ items={[
        { q: "Do you hold customer funds?", a: "Only if you want us to. Custodial flows route through Fireblocks, BitGo, Copper or Ceffu — your accounts, your keys. Non-custodial flows never touch funds at all." },
        { q: "Which chains are supported?", a: "Ethereum + L2s (Arbitrum, Base, Optimism, zkSync), Solana, TRON, BNB Chain, BTC, Polygon, Avalanche, Cosmos hubs. New chains added on request." },
        { q: "Can I run this alongside a CFD desk?", a: "Yes — the same Client Area handles wallet-connect users and traditional KYC traders side by side. One identity, one BI." },
        { q: "What about regulators and travel rule?", a: "KYT integrations cover Chainalysis, Elliptic, TRM and Crystal. Travel-rule message exchange via Notabene, Sumsub, Veriscope — pick your flavor." },
      ]}/>

      <CTASection title="Operate Web3 inside the same OS as the rest of your business." primary={{ label: "Book a demo" }}/>
    </Site>
  );
}

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