// Prop Firms — flagship solution page
function PropFirmsPage() {
  return (
    <Site>
      <PageHero
        breadcrumb={[{ label: "Solutions" }, { label: "Prop Firms" }]}
        eyebrow="Solution · Prop Firms"
        title={<>The full <>{" "}</><span className="gradient-text">prop firm</span> operating stack.</>}
        sub="Challenge engine, funded accounts, instant payouts, abuse detection, KYC, leaderboards and IB — purpose-built for prop firms running tens of thousands of evaluations."
        ctaPrimary={{ label: "Book a demo" }}
        ctaSecondary={{ label: "See challenge engine", href: "#engine" }}
        visual={<PropChallengeVisual/>}
      />

      <StatRow items={[
        { v: "120K+", l: "Active traders across our prop customers" },
        { v: "10K+", l: "Concurrent challenges, no sweat" },
        { v: "< 1h", l: "Median payout from request to wallet" },
        { v: "$184M", l: "Funded payouts processed last 12 months" },
      ]}/>

      {/* Why prop is different */}
      <section className="section-pad">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Why prop ≠ broker</span>
            <h2>Most CRMs were never designed for prop economics.</h2>
            <p>Prop firms aren't brokers in disguise. The unit is a <em>challenge</em>, not a <em>deposit</em>. Revenue ≠ trading volume. Risk lives in payouts, not positions. Abuse is industrial. Antelope was rebuilt for prop from the inside out.</p>
          </div>
          <div className="pf-vs">
            <div className="pf-col pf-them card">
              <div className="pf-col-tag">Generic CRM</div>
              <ul>
                <li>Tracks deposits — but a challenge sale isn't a deposit.</li>
                <li>Books P&L from spreads — irrelevant for prop.</li>
                <li>No native concept of phases, breach, scaling.</li>
                <li>Abuse detection bolted on, gameable in days.</li>
                <li>Payouts as withdrawals — manual, slow, breakage-prone.</li>
              </ul>
            </div>
            <div className="pf-col pf-us card">
              <div className="pf-col-tag pf-us-tag">Antelope · Prop OS</div>
              <ul>
                <li>Challenge is a first-class object. Phases, rules, addons, refunds.</li>
                <li>Revenue model = challenge sales, not spreads.</li>
                <li>Native phase engine: rules, scaling, refunds, resets.</li>
                <li>Behavioral + device + payment fingerprinting.</li>
                <li>Instant payouts: KYC-gated, dual-approval, fiat or crypto.</li>
              </ul>
            </div>
          </div>
        </div>
        <style>{`
          .pf-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 36px; }
          .pf-col { padding: 28px; }
          .pf-col-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 18px; color: var(--text-dim); border: 1px solid var(--line); background: var(--surface-2); }
          .pf-us-tag { color: var(--purple-2); border-color: var(--purple-2); background: rgba(122,82,255,0.1); }
          .pf-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
          .pf-col li { font-size: 14px; line-height: 1.55; padding-left: 22px; position: relative; color: var(--text-dim); }
          .pf-them li::before { content: "✕"; position: absolute; left: 0; color: #FF6B6B; font-weight: 700; }
          .pf-us li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
          .pf-us li { color: var(--text); }
          @media (max-width: 800px) { .pf-vs { grid-template-columns: 1fr; } }
        `}</style>
      </section>

      {/* Challenge engine showcase */}
      <section id="engine" className="section-pad">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Challenge engine</span>
            <h2>Configure any rule set. Run it across thousands of traders.</h2>
            <p>Phase 1, Phase 2, Funded — any structure, any scaling plan, any addons. Rules enforced in real time, not in a nightly batch.</p>
          </div>
          <div className="pf-engine card">
            <div className="pf-engine-head">
              <div className="row" style={{ gap: 10 }}>
                <span className="tag" style={{ background: "rgba(122,82,255,0.12)", borderColor: "rgba(122,82,255,0.25)", color: "var(--purple-2)" }}>$50K · 2-Step</span>
                <span className="tag">$100K · 1-Step</span>
                <span className="tag">$200K · Instant Funding</span>
                <span className="tag">$25K · Lightning</span>
              </div>
              <span className="mono" style={{ fontSize: 11, color: "var(--text-mute)" }}>23 ACTIVE PRODUCTS</span>
            </div>
            <div className="pf-engine-body">
              <div className="pf-rule-grid">
                {[
                  { l: "Profit target P1", v: "8%", c: "#7A52FF" },
                  { l: "Profit target P2", v: "5%", c: "#7A52FF" },
                  { l: "Daily loss", v: "5%", c: "#FF6B6B" },
                  { l: "Max drawdown", v: "10%", c: "#FF6B6B" },
                  { l: "Min trading days", v: "3", c: "#FFB000" },
                  { l: "Max position size", v: "5%", c: "#FFB000" },
                  { l: "News restriction", v: "2 min", c: "#24A1DE" },
                  { l: "Weekend hold", v: "—", c: "#24A1DE" },
                  { l: "Scaling plan", v: "+25%", c: "#2BD974" },
                  { l: "Profit split P1", v: "—", c: "#2BD974" },
                  { l: "Profit split funded", v: "80/20", c: "#2BD974" },
                  { l: "Refund on pass", v: "Yes", c: "#F118B2" },
                ].map((r, i) => (
                  <div key={r.l} className="pf-rule-cell" style={{ "--c": r.c, animationDelay: `${i * 0.05}s` }}>
                    <div className="pf-rule-l">{r.l}</div>
                    <div className="pf-rule-v">{r.v}</div>
                  </div>
                ))}
              </div>
              <div className="pf-engine-side">
                <div className="pf-side-card">
                  <div style={{ fontSize: 10.5, color: "var(--text-mute)", letterSpacing: "0.06em" }}>LIVE EVENTS</div>
                  {[
                    { t: "00:02", e: "BREACH · daily-loss · C-2705 · auto-suspend", c: "#FF6B6B" },
                    { t: "00:14", e: "PROMOTE · C-2641 · Phase 2 → Funded", c: "#2BD974" },
                    { t: "00:28", e: "PAYOUT · C-2807 · $12,150 → USDT/TRC20", c: "#2BD974" },
                    { t: "00:42", e: "SCALE · C-2511 · +25% account size", c: "#7A52FF" },
                    { t: "01:03", e: "ABUSE · C-2412 · device fingerprint match", c: "#FFB000" },
                  ].map((ev, i) => (
                    <div key={i} className="pf-event mono" style={{ animationDelay: `${i * 0.18}s` }}>
                      <span style={{ color: "var(--text-mute)" }}>{ev.t}</span>
                      <span style={{ color: ev.c, fontWeight: 600 }}>{ev.e}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
        <style>{`
          .pf-engine { padding: 0; overflow: hidden; }
          .pf-engine-head { padding: 18px 24px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
          .pf-engine-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; }
          .pf-rule-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-right: 1px solid var(--line); }
          .pf-rule-cell {
            padding: 18px; background: var(--ink-2);
            animation: fx-fade-in .5s ease both;
            border-left: 3px solid var(--c);
          }
          .pf-rule-l { font-size: 11px; color: var(--text-mute); letter-spacing: 0.04em; }
          .pf-rule-v { font-size: 22px; font-weight: 700; color: var(--c); margin-top: 4px; letter-spacing: -0.02em; }
          .pf-engine-side { padding: 20px; background: var(--ink-2); }
          .pf-side-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 16px; height: 100%; }
          .pf-event {
            display: flex; gap: 12px; padding: 8px 0;
            border-bottom: 1px solid var(--line);
            font-size: 11px; line-height: 1.4;
            animation: fx-fade-in .5s ease both;
          }
          .pf-event:last-child { border-bottom: 0; }
          @media (max-width: 900px) { .pf-engine-body { grid-template-columns: 1fr; } .pf-rule-grid { grid-template-columns: 1fr 1fr; border-right: 0; border-bottom: 1px solid var(--line); } }
        `}</style>
      </section>

      {/* Abuse detection */}
      <section className="section-pad">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Abuse detection</span>
            <h2>Industrial-strength fraud catching, built in.</h2>
            <p>Prop firms attract industrial abuse — copy traders, algorithm sellers, multi-account farms, hedged-pair scams. Most CRMs ship a "fraud module" that catches none of it. Antelope ships a layered defense.</p>
          </div>
          <div className="pf-abuse-grid">
            {[
              { l: "Behavioral fingerprint", d: "Trade timing, order patterns, latency profile per account. Detects copy trading and algo sharing across the network.", n: "L1" },
              { l: "Device + browser fingerprint", d: "Device IDs, canvas hashes, font lists. Catches multi-account farms running on VMs and emulators.", n: "L2" },
              { l: "Payment graph", d: "Card BINs, crypto wallets, payout addresses. Reveals one operator behind a hundred 'traders'.", n: "L3" },
              { l: "Hedge detection", d: "Cross-account hedging across the network is identified within seconds — not after payout.", n: "L4" },
              { l: "Manual review console", d: "When automation flags, your team gets a full audit trail with the click of one button.", n: "L5" },
              { l: "Continuous model updates", d: "Models retrained against the latest abuse patterns on the network — without any work from you.", n: "L6" },
            ].map((a) => (
              <div key={a.l} className="pf-abuse card">
                <div className="pf-abuse-num mono">{a.n}</div>
                <div>
                  <div className="pf-abuse-t">{a.l}</div>
                  <div className="pf-abuse-d">{a.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .pf-abuse-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 36px; }
          .pf-abuse { padding: 22px; display: flex; gap: 16px; align-items: flex-start; }
          .pf-abuse-num {
            width: 38px; height: 38px; flex: 0 0 38px;
            border-radius: 999px;
            background: rgba(122,82,255,0.12); border: 1px solid rgba(122,82,255,0.3);
            color: var(--purple-2); font-weight: 700;
            display: grid; place-items: center;
          }
          .pf-abuse-t { font-size: 14.5px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.01em; }
          .pf-abuse-d { font-size: 13px; color: var(--text-dim); line-height: 1.55; }
          @media (max-width: 900px) { .pf-abuse-grid { grid-template-columns: 1fr; } }
        `}</style>
      </section>

      <FeatureGrid
        eyebrow="What's included"
        title="From challenge sale to payout."
        features={[
          { t: "Challenge engine", d: "Phase 1, Phase 2, Funded — any rule set, any scaling plan, addons & refunds." },
          { t: "Real-time rules", d: "Daily loss, max DD, news, weekend, position-size — auto-violations." },
          { t: "Instant payouts", d: "Multi-rail, KYC-gated, dual-approval. Median < 1h request to wallet." },
          { t: "Trader portal", d: "Challenge selection, leaderboards, certificates, payout history." },
          { t: "Affiliate & IB", d: "Multi-level partner trees with prop-specific commissions." },
          { t: "Abuse detection", d: "Behavioral + device + payment fingerprinting + hedge graph." },
          { t: "Discord / Telegram", d: "Bots for trader engagement, support and addon upsells." },
          { t: "Marketing CRM", d: "Email, push, retargeting tied to evaluation status." },
          { t: "Prop BI", d: "Pass rates, payout-to-revenue, ad-source ROI, lifetime trader value." },
        ]}
      />

      <FAQ items={[
        { q: "Can we run multiple challenge products at once?", a: "Yes. Most customers run 5-30 distinct products simultaneously — different sizes, phase counts, scaling plans. The engine handles thousands concurrently with zero performance impact." },
        { q: "What about instant funding accounts?", a: "Supported natively. One-step, instant-funding, lightning, custom-rule — any structure you can imagine, you can configure." },
        { q: "How fast can you launch a new prop firm?", a: "1 week from kickoff. We've launched dozens, and the playbook is sharp." },
        { q: "How do payouts work?", a: "Configurable: instant, weekly, on-demand. Routed via your PSPs (fiat) or directly on-chain (crypto). KYC-gated, dual-approval, full audit trail." },
        { q: "Can we white-label everything?", a: "Yes. Trader portal, mobile apps, emails, certificates, even our admin tools — all themed to your brand." },
      ]}/>

      <CTASection title="Run a prop firm at scale." sub="From the first challenge sale to the millionth payout — one stack." primary={{ label: "Book a demo" }} secondary={{ label: "See pricing", href: "pages/pricing.html" }}/>
    </Site>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<PropFirmsPage/>);