// Crypto Brokers & Exchanges — flagship solution page (Binance/KuCoin-style)
function CryptoCompaniesPage() {
  const [tab, setTab] = React.useState("spot");

  const orderBook = {
    spot: { pair: "BTC/USDT", price: "67,842.50", change: "+2.18%", up: true, depth: "$48.2M" },
    perp: { pair: "BTC-PERP", price: "67,851.20", change: "+2.21%", up: true, depth: "$182M" },
    margin: { pair: "ETH/USDT 5x", price: "3,524.80", change: "-0.46%", up: false, depth: "$22.1M" },
  };

  return (
    <Site>
      <PageHero
        breadcrumb={[{ label: "Solutions" }, { label: "Crypto Brokers & Exchanges" }]}
        eyebrow="Solution · Crypto Brokers & Exchanges"
        title={<>Run a <span className="gradient-text">crypto exchange</span>. Not a forex CRM with a wallet.</>}
        sub="Spot, futures, margin, OTC — the operational stack that powers Binance- and KuCoin-style exchanges. Matching engine, deep liquidity, custody orchestration, KYT, listings governance and licensed-entity controls."
        ctaPrimary={{ label: "Book a demo" }}
        ctaSecondary={{ label: "See exchange stack", href: "#stack" }}
        visual={<CryptoOrbitVisual/>}
      />

      <StatRow items={[
        { v: "Spot · Perp · Margin", l: "All trading modes, one engine" },
        { v: "300+", l: "Token listings, governance-shaped" },
        { v: "10K TPS", l: "Matching engine throughput" },
        { v: "12+", l: "Chains for deposits & withdrawals" },
      ]}/>

      {/* Why an exchange isn't a broker */}
      <section className="section-pad">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Built for exchange economics</span>
            <h2>An exchange is not a brokerage.</h2>
            <p>You don't quote spreads — you run a CLOB. You don't take counter-position risk — you take fee revenue. You don't onboard 100 traders — you onboard 100,000. Forex CRMs were never built for this. Antelope was.</p>
          </div>
          <div className="cc-diff-grid">
            {[
              { t: "Matching engine, native", d: "Central limit order book with sub-millisecond matching, post-only/IOC/FOK orders, self-trade prevention, market-maker rebates, taker fees by tier.", c: "#F7931A" },
              { t: "Listings governance", d: "Token listing committee workflow with smart-contract risk scoring, tokenomics review, MM commitments and auto-publish to website + APIs.", c: "#7A52FF" },
              { t: "Liquidity orchestration", d: "Aggregated liquidity from market-maker partners + cross-exchange hedging via FIX/REST/WebSocket. You set the spread, we route the flow.", c: "#26A17B" },
              { t: "Tiered fees + VIP", d: "Volume-based fee tiers, BNB-style fee tokens, VIP onboarding, OTC desk integration. Everything Binance ships, day one.", c: "#FFB000" },
              { t: "On-chain wallet ops", d: "Hot/warm/cold orchestration with Fireblocks, BitGo, Copper. KMS keys, dual-approval withdrawals, KYT-clean deposits.", c: "#F118B2" },
              { t: "Licensed-entity ready", d: "MiCA, VASP, FSA-Seychelles, BVI, El Salvador, Dubai VARA — pre-shaped flows for the licenses crypto exchanges actually use.", c: "#24A1DE" },
            ].map((p) => (
              <div key={p.t} className="cc-diff card" style={{ "--c": p.c }}>
                <div className="cc-diff-mark"/>
                <div className="cc-diff-t">{p.t}</div>
                <div className="cc-diff-d">{p.d}</div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .cc-diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 36px; }
          .cc-diff { padding: 26px; position: relative; overflow: hidden; }
          .cc-diff-mark { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--c); }
          .cc-diff::after { content: ""; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; background: radial-gradient(circle, var(--c), transparent 70%); opacity: 0.15; border-radius: 50%; }
          .cc-diff-t { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; color: var(--c); }
          .cc-diff-d { font-size: 13.5px; color: var(--text-dim); line-height: 1.6; }
          @media (max-width: 1080px) { .cc-diff-grid { grid-template-columns: 1fr 1fr; } }
          @media (max-width: 700px) { .cc-diff-grid { grid-template-columns: 1fr; } }
        `}</style>
      </section>

      {/* Exchange UI mockup */}
      <section id="stack" className="section-pad">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Trading modes</span>
            <h2>Spot, perpetuals, margin — one engine, one wallet.</h2>
          </div>
          <div className="cc-ex card">
            <div className="cc-ex-tabs">
              {[["spot","Spot"], ["perp","Perpetuals"], ["margin","Margin"]].map(([k,l]) => (
                <button key={k} onClick={() => setTab(k)} className={`cc-ex-tab ${tab === k ? "active" : ""}`}>{l}</button>
              ))}
              <span className="cc-ex-spacer"/>
              <span className="mono cc-ex-pair">{orderBook[tab].pair}</span>
              <span className="mono cc-ex-price" style={{ color: orderBook[tab].up ? "var(--green)" : "#FF6B6B" }}>{orderBook[tab].price}</span>
              <span className="mono" style={{ fontSize: 12, color: orderBook[tab].up ? "var(--green)" : "#FF6B6B" }}>{orderBook[tab].change}</span>
            </div>
            <div className="cc-ex-body">
              <div className="cc-ex-book">
                <div className="cc-ex-book-head">PRICE · SIZE · TOTAL</div>
                {[0,1,2,3,4,5].map(i => (
                  <div key={"a"+i} className="cc-ex-row" style={{ animationDelay: `${i*0.04}s` }}>
                    <span className="mono" style={{ color: "#FF6B6B" }}>{(67850 - i*0.5).toFixed(2)}</span>
                    <span className="mono">{(Math.random()*4 + 0.2).toFixed(3)}</span>
                    <span className="cc-ex-bar" style={{ width: `${30 + i*8}%`, background: "rgba(255,107,107,0.12)" }}/>
                  </div>
                ))}
                <div className="cc-ex-mid mono">{orderBook[tab].price} <span style={{ fontSize: 10, color: "var(--text-mute)" }}>SPREAD 0.5</span></div>
                {[0,1,2,3,4,5].map(i => (
                  <div key={"b"+i} className="cc-ex-row" style={{ animationDelay: `${i*0.04 + 0.3}s` }}>
                    <span className="mono" style={{ color: "var(--green)" }}>{(67842 - i*0.5).toFixed(2)}</span>
                    <span className="mono">{(Math.random()*4 + 0.2).toFixed(3)}</span>
                    <span className="cc-ex-bar" style={{ width: `${30 + i*8}%`, background: "rgba(43,217,116,0.12)" }}/>
                  </div>
                ))}
              </div>
              <div className="cc-ex-chart">
                <svg viewBox="0 0 600 280" preserveAspectRatio="none" style={{ width: "100%", height: "100%" }}>
                  <defs>
                    <linearGradient id="cc-ex-g" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0" stopColor="var(--green)" stopOpacity="0.4"/>
                      <stop offset="1" stopColor="var(--green)" stopOpacity="0"/>
                    </linearGradient>
                  </defs>
                  {[0,1,2,3,4].map(i => <line key={i} x1="0" x2="600" y1={50 + i*50} y2={50 + i*50} stroke="var(--line)" strokeWidth="1"/>)}
                  <path d="M0 200 L60 180 L120 195 L180 150 L240 165 L300 130 L360 145 L420 100 L480 115 L540 80 L600 90 L600 280 L0 280 Z" fill="url(#cc-ex-g)"/>
                  <path d="M0 200 L60 180 L120 195 L180 150 L240 165 L300 130 L360 145 L420 100 L480 115 L540 80 L600 90" stroke="var(--green)" strokeWidth="2" fill="none"/>
                  {[0,1,2,3,4,5,6,7].map(i => (
                    <g key={i}>
                      <rect x={20 + i*70} y={220 - Math.random()*40} width="6" height={Math.random()*30 + 10} fill={i%2 ? "var(--green)" : "#FF6B6B"} opacity="0.6"/>
                    </g>
                  ))}
                </svg>
                <div className="cc-ex-stats">
                  {[
                    { l: "24h vol", v: orderBook[tab].depth, c: "var(--purple-2)" },
                    { l: "Open interest", v: tab === "perp" ? "$94M" : "—", c: "var(--green)" },
                    { l: "Funding", v: tab === "perp" ? "+0.012%" : "—", c: "var(--gold)" },
                    { l: "Fee tier", v: "VIP-3 / 0.04%", c: "var(--pink)" },
                  ].map(s => (
                    <div key={s.l}>
                      <div className="mono" style={{ fontSize: 13, fontWeight: 700, color: s.c }}>{s.v}</div>
                      <div style={{ fontSize: 10.5, color: "var(--text-mute)", letterSpacing: "0.06em" }}>{s.l.toUpperCase()}</div>
                    </div>
                  ))}
                </div>
              </div>
              <div className="cc-ex-ticket">
                <div className="cc-ex-ticket-tabs">
                  <button className="active">Limit</button>
                  <button>Market</button>
                  <button>Stop</button>
                </div>
                <label>Price (USDT)</label>
                <div className="cc-ex-input mono">{orderBook[tab].price}</div>
                <label>Amount (BTC)</label>
                <div className="cc-ex-input mono">0.05000</div>
                <div className="cc-ex-pct">
                  {["25%","50%","75%","100%"].map(p => <span key={p}>{p}</span>)}
                </div>
                <button className="cc-ex-buy">Buy / Long</button>
                <button className="cc-ex-sell">Sell / Short</button>
                <div className="cc-ex-bal mono">
                  <div>Available · 12,480.50 USDT</div>
                  <div>Position · +0.247 BTC</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <style>{`
          .cc-ex { padding: 0; overflow: hidden; }
          .cc-ex-tabs { display: flex; align-items: center; gap: 6px; padding: 12px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
          .cc-ex-tab { padding: 8px 14px; border-radius: 8px; background: transparent; border: 0; color: var(--text-dim); font-size: 13px; font-weight: 600; cursor: pointer; }
          .cc-ex-tab.active { background: var(--surface-2); color: var(--text); }
          .cc-ex-spacer { flex: 1; }
          .cc-ex-pair { font-size: 13px; color: var(--text-dim); }
          .cc-ex-price { font-size: 18px; font-weight: 700; }
          .cc-ex-body { display: grid; grid-template-columns: 240px 1fr 240px; gap: 1px; background: var(--line); }
          .cc-ex-book, .cc-ex-chart, .cc-ex-ticket { background: var(--ink-2); padding: 14px; }
          .cc-ex-book-head { font-size: 10px; letter-spacing: 0.08em; color: var(--text-mute); padding: 4px 0 8px; }
          .cc-ex-row { display: grid; grid-template-columns: 1fr 1fr; padding: 3px 0; font-size: 11.5px; position: relative; animation: fx-fade-in .3s ease both; }
          .cc-ex-bar { position: absolute; right: 0; top: 0; bottom: 0; pointer-events: none; }
          .cc-ex-mid { padding: 8px 0; font-size: 16px; font-weight: 700; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 6px 0; display: flex; gap: 10px; align-items: baseline; }
          .cc-ex-chart { position: relative; min-height: 320px; }
          .cc-ex-chart svg { display: block; height: 280px; }
          .cc-ex-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); margin-top: 10px; }
          .cc-ex-ticket-tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 8px; margin-bottom: 14px; }
          .cc-ex-ticket-tabs button { flex: 1; padding: 6px; background: transparent; border: 0; color: var(--text-dim); font-size: 12px; font-weight: 600; border-radius: 6px; cursor: pointer; }
          .cc-ex-ticket-tabs button.active { background: var(--ink); color: var(--text); }
          .cc-ex-ticket label { display: block; font-size: 10.5px; letter-spacing: 0.06em; color: var(--text-mute); margin: 12px 0 4px; }
          .cc-ex-input { padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
          .cc-ex-pct { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 8px 0 14px; }
          .cc-ex-pct span { padding: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; text-align: center; font-size: 11px; color: var(--text-dim); }
          .cc-ex-buy { width: 100%; padding: 10px; background: var(--green); color: #00120a; border: 0; border-radius: 8px; font-weight: 700; cursor: pointer; margin-bottom: 6px; }
          .cc-ex-sell { width: 100%; padding: 10px; background: #FF6B6B; color: #1a0000; border: 0; border-radius: 8px; font-weight: 700; cursor: pointer; }
          .cc-ex-bal { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11px; color: var(--text-dim); display: flex; flex-direction: column; gap: 4px; }
          @media (max-width: 1080px) {
            .cc-ex-body { grid-template-columns: 1fr 1fr; }
            .cc-ex-ticket { grid-column: span 2; }
          }
          @media (max-width: 700px) {
            .cc-ex-body { grid-template-columns: 1fr; }
            .cc-ex-ticket { grid-column: auto; }
            .cc-ex-stats { grid-template-columns: 1fr 1fr; }
          }
        `}</style>
      </section>

      {/* Listings governance */}
      <section className="section-pad">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Token listings</span>
            <h2>Run listings like a real exchange.</h2>
            <p>From application to live trading — the listing committee workflow Binance and KuCoin use, codified into your stack.</p>
          </div>
          <div className="cc-list-flow">
            {[
              { n: "01", t: "Application", d: "Project submits via portal — tokenomics, smart contracts, team KYC.", c: "#7A52FF" },
              { n: "02", t: "Risk scoring", d: "Auto-scan: contract audit, mint/burn rights, top-holder concentration, KYT history.", c: "#F118B2" },
              { n: "03", t: "Committee review", d: "Listing committee votes inside the platform. Comments, conditions, veto rights — all logged.", c: "#FFB000" },
              { n: "04", t: "MM commitments", d: "Market makers commit liquidity tiers and spread/depth obligations before go-live.", c: "#FF7A45" },
              { n: "05", t: "Go-live", d: "Auto-publish to website, mobile app, API endpoints, status page, social channels.", c: "#26A17B" },
            ].map((s, i) => (
              <div key={s.n} className="cc-list-step" style={{ "--c": s.c, animationDelay: `${i*0.08}s` }}>
                <div className="cc-list-num mono">{s.n}</div>
                <div className="cc-list-t">{s.t}</div>
                <div className="cc-list-d">{s.d}</div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .cc-list-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 36px; }
          .cc-list-step { padding: 22px; background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--c); border-radius: 12px; animation: fx-fade-in .5s ease both; }
          .cc-list-num { font-size: 20px; color: var(--c); font-weight: 700; margin-bottom: 12px; }
          .cc-list-t { font-size: 14.5px; font-weight: 700; margin-bottom: 6px; }
          .cc-list-d { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; }
          @media (max-width: 1080px) { .cc-list-flow { grid-template-columns: 1fr 1fr; } }
          @media (max-width: 600px) { .cc-list-flow { grid-template-columns: 1fr; } }
        `}</style>
      </section>

      {/* Custody */}
      <section className="section-pad">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Custody, not bolted on</span>
            <h2>Bring your custody. Or pick one of ours.</h2>
            <p>Antelope speaks every major MPC and qualified custodian. Hot/warm/cold flows with dual approval, KMS keys, and audit trails that satisfy MiCA, FATF and your auditor.</p>
          </div>
          <div className="cc-custody">
            {[
              { name: "Fireblocks", t: "MPC · enterprise", d: "Default for most large customers. White-glove ops, fast withdrawals.", c: "#F26A22" },
              { name: "BitGo", t: "Qualified custodian", d: "U.S. trust company. Insured custody, regulated balance sheet.", c: "#0052FF" },
              { name: "Copper", t: "ClearLoop", d: "Cold storage with off-exchange settlement.", c: "#FF6B35" },
              { name: "Ceffu", t: "Institutional vault", d: "Off-exchange custody from Binance Custody.", c: "#F0B90B" },
              { name: "Custom MPC", t: "Bring-your-own", d: "We integrate any signer/HSM stack you've already built.", c: "#7A52FF" },
              { name: "On-chain hot", t: "Self-custody", d: "Hot wallets with our orchestration + KMS-backed keys.", c: "#2BD974" },
            ].map((c) => (
              <div key={c.name} className="cc-custody-card card">
                <div className="cc-custody-logo" style={{ background: `${c.c}20`, color: c.c, borderColor: `${c.c}50` }}>
                  {c.name[0]}{c.name.split(" ")[1]?.[0] || c.name[1]}
                </div>
                <div>
                  <div className="cc-custody-name">{c.name}</div>
                  <div className="cc-custody-tag">{c.t}</div>
                  <div className="cc-custody-d">{c.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .cc-custody { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 36px; }
          .cc-custody-card { padding: 20px; display: flex; gap: 14px; align-items: flex-start; }
          .cc-custody-logo { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 13px; border: 1px solid; }
          .cc-custody-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
          .cc-custody-tag { font-size: 11px; color: var(--purple-2); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; margin: 4px 0 8px; }
          .cc-custody-d { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
          @media (max-width: 1080px) { .cc-custody { grid-template-columns: 1fr 1fr; } }
          @media (max-width: 600px) { .cc-custody { grid-template-columns: 1fr; } }
        `}</style>
      </section>

      <FeatureGrid
        eyebrow="What's included"
        title="Everything to run a real exchange."
        features={[
          { t: "Matching engine", d: "Sub-millisecond CLOB. Limit, market, stop, post-only, IOC/FOK. Self-trade prevention." },
          { t: "Spot · Perp · Margin", d: "All trading modes from one engine and one wallet. Cross + isolated margin. Auto-deleveraging." },
          { t: "OTC desk", d: "RFQ workflow with MM partners. Settled on-chain or off, audit trail attached." },
          { t: "Listings governance", d: "Application portal, smart-contract scoring, committee voting, MM obligations." },
          { t: "Tiered fees + VIP", d: "Volume tiers, fee-token discounts, maker rebates, VIP onboarding, OTC tiers." },
          { t: "KYT + AML", d: "Chainalysis, Elliptic, TRM at deposit and withdrawal. SAR/STR drafting built in." },
          { t: "Custody orchestration", d: "Fireblocks, BitGo, Copper, Ceffu, custom MPC. Hot/warm/cold with dual approval." },
          { t: "Liquidity routing", d: "Aggregate MM partners + cross-exchange hedging via FIX/REST/WS." },
          { t: "Trader apps", d: "Web + native iOS/Android. White-labeled. Sub-account, copy-trade, savings, launchpad." },
          { t: "MiCA · VARA · VASP", d: "Pre-shaped flows for the licenses crypto exchanges actually run on." },
          { t: "Earn / Staking", d: "Flexible + locked savings, validator staking, yield products with risk disclosures." },
          { t: "Exchange BI", d: "Volume by pair, liquidity depth, fee revenue, listing performance, anomaly detection." },
        ]}
      />

      <FAQ items={[
        { q: "Is this for centralized exchanges or brokers?", a: "Both. The same stack runs Binance/KuCoin-style centralized exchanges and crypto-native brokers (CFD-on-crypto, OTC desks). Spot, perpetuals and margin are all native." },
        { q: "Do you provide the matching engine?", a: "Yes. A high-throughput CLOB matching engine ships with the platform — 10K+ TPS, sub-millisecond latency, with risk controls and self-trade prevention." },
        { q: "How does liquidity work?", a: "You bring market-maker partners or use ours. Antelope orchestrates aggregated liquidity, cross-exchange hedging, and rebate programs. You set the spread strategy, we route the flow." },
        { q: "Can we run our own custody?", a: "Yes. We integrate Fireblocks, BitGo, Copper, Ceffu, custom MPC and self-custody hot wallets. Most enterprise customers run mixed environments." },
        { q: "Does Antelope hold customer funds?", a: "No. Custody is yours or your custodian's. We provide orchestration, audit trails and the operational layer." },
        { q: "Is this MiCA-ready?", a: "Yes. EU MiCA, Dubai VARA, BVI, FSA-Seychelles and El Salvador VASP flows are pre-shaped and update with the rulebook." },
        { q: "How fast can we launch?", a: "1 week from kickoff to first trade in production for a standard configuration. Listings governance, MM partners and licensing typically take longer in parallel." },
      ]}/>

      <CTASection title="Run an exchange. Not a forex CRM with a wallet." primary={{ label: "Book a demo" }} secondary={{ label: "See pricing", href: "pages/pricing.html" }}/>
    </Site>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<CryptoCompaniesPage/>);