// Partners — referral / introducer program
function PartnersPage() {
  return (
    <Site>
      <PageHero
        breadcrumb={[{ label: "Company" }, { label: "Partners" }]}
        eyebrow="Partner Program"
        title={<>Bring us a customer. <span className="gradient-text">Earn for the lifetime</span> of the contract.</>}
        sub="If you work with brokers, prop firms, exchanges or academies — and you know who's looking for a real OS — partner with Antelope. We pay generous commission on every customer you introduce, for as long as they stay."
        ctaPrimary={{ label: "Become a partner" }}
        ctaSecondary={{ label: "Talk to partnerships", href: "pages/contact.html" }}
      />

      <StatRow items={[
        { v: "Up to 20%", l: "Recurring commission · year one" },
        { v: "10%", l: "Years 2+ · for the contract lifetime" },
        { v: "30 days", l: "Quarterly payouts · fiat or crypto" },
        { v: "1 week", l: "From intro to deal qualified" },
      ]}/>

      <FeatureGrid
        eyebrow="Who partners with us"
        title="Three partner tracks. Same generous economics."
        sub="Pick the track that matches how you work. We handle demos, contracts, onboarding — you get paid every quarter the customer is live."
        features={[
          { t: "Introducers", d: "Consultants, ex-COOs, broker insiders. Make warm intros. We close. You earn 15–20% year-one and 10% on renewals." },
          { t: "Agencies & integrators", d: "Marketing agencies, PSP partners, KYC vendors, IB platforms. Co-sell into your book. Joint deals get co-marketing budget." },
          { t: "Solution partners", d: "Liquidity providers, trading platforms, analytics vendors. Build certified integrations and we route customers to you." },
          { t: "Crypto-native", d: "Want to be paid in USDT, USDC or BTC? We pay all partner commissions in fiat or crypto, your call. No FX, no card fees." },
          { t: "Transparent tracking", d: "Live partner portal — every intro, every demo, every signed deal, every payout. No black box." },
          { t: "Co-selling support", d: "Dedicated partner manager, joint pitch decks, co-branded one-pagers, technical pre-sales on every deal you bring." },
        ]}
      />

      <section className="section-pad">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">How it works</span>
            <h2>Four steps. Quarterly payouts. Lifetime economics.</h2>
          </div>
          <div className="part-flow">
            {[
              { n: "01", t: "Apply", d: "Tell us what you do and who you talk to. We approve most partners within 48h.", c: "#7A52FF" },
              { n: "02", t: "Introduce", d: "Submit a warm intro through the portal. We confirm receipt and assign a partner manager.", c: "#F118B2" },
              { n: "03", t: "We close", d: "Antelope runs the demo, scoping, contracting and onboarding. You stay informed at every step.", c: "#FFB000" },
              { n: "04", t: "Get paid", d: "20% of year-one ARR. 10% on every renewal — for the lifetime of the contract. Quarterly. Fiat or crypto.", c: "#2BD974" },
            ].map((s) => (
              <div key={s.n} className="part-step" style={{ "--c": s.c }}>
                <div className="part-num mono">{s.n}</div>
                <div className="part-t">{s.t}</div>
                <div className="part-d">{s.d}</div>
              </div>
            ))}
          </div>
        </div>
        <style>{`
          .part-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 36px; }
          .part-step { padding: 24px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: 14px; }
          .part-num { font-size: 22px; font-weight: 700; color: var(--c); margin-bottom: 12px; }
          .part-t { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
          .part-d { font-size: 13px; color: var(--text-dim); line-height: 1.55; }
          @media (max-width: 980px) { .part-flow { grid-template-columns: 1fr 1fr; } }
          @media (max-width: 560px) { .part-flow { grid-template-columns: 1fr; } }
        `}</style>
      </section>

      <section className="section-pad">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Example economics</span>
            <h2>Real numbers, real payouts.</h2>
          </div>
          <div className="part-econ">
            {[
              { tier: "Introducer", deal: "$120,000 ARR", y1: "$24,000", y2: "$12,000 / yr", note: "20% year one, 10% lifetime" },
              { tier: "Agency / co-sell", deal: "$240,000 ARR", y1: "$36,000", y2: "$24,000 / yr", note: "15% year one, 10% lifetime + co-marketing" },
              { tier: "Solution partner", deal: "$480,000 ARR", y1: "$48,000", y2: "$48,000 / yr", note: "10% year one, 10% lifetime + revenue-share on integration usage", highlight: true },
            ].map((r) => (
              <div key={r.tier} className={`part-econ-card ${r.highlight ? "hl" : ""}`}>
                <div className="part-econ-tier">{r.tier}</div>
                <div className="part-econ-deal mono">{r.deal}</div>
                <div className="part-econ-row"><span>Year 1 payout</span><span className="mono">{r.y1}</span></div>
                <div className="part-econ-row"><span>Year 2+ recurring</span><span className="mono">{r.y2}</span></div>
                <div className="part-econ-note">{r.note}</div>
              </div>
            ))}
          </div>
          <p style={{ textAlign: "center", marginTop: 16, fontSize: 12, color: "var(--text-mute)" }}>Indicative. Actual commission scales with deal size and partner track. All payouts available in fiat or crypto.</p>
        </div>
        <style>{`
          .part-econ { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 36px; }
          .part-econ-card { padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
          .part-econ-card.hl { border-color: var(--purple-2); box-shadow: 0 0 60px -20px var(--purple-glow); }
          .part-econ-tier { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple-2); font-weight: 600; margin-bottom: 10px; }
          .part-econ-deal { font-size: 22px; font-weight: 700; margin-bottom: 16px; letter-spacing: -0.01em; }
          .part-econ-row { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-dim); }
          .part-econ-row span:last-child { color: var(--text); font-weight: 600; }
          .part-econ-note { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--text-mute); line-height: 1.5; }
          @media (max-width: 980px) { .part-econ { grid-template-columns: 1fr; } }
        `}</style>
      </section>

      <FAQ items={[
        { q: "What's the commission structure?", a: "Up to 20% of year-one ARR for introducer deals, plus 10% recurring on every renewal — for the lifetime of the contract. Agency and solution-partner economics vary slightly; we'll walk through them on a partner call." },
        { q: "When do I get paid?", a: "Quarterly, 30 days after each quarter close, once the customer's invoice is paid. Payouts available in fiat (wire / SEPA) or crypto (USDT, USDC, BTC, ETH and others)." },
        { q: "Do I need to close the deal?", a: "No. You introduce, we close. We run the demo, scoping, contracting and onboarding. You stay copied at every step and get a partner manager assigned to every active deal." },
        { q: "Can I refer customers in any region?", a: "Yes — we serve customers across EMEA, APAC, LATAM and North America from our Limassol, Dubai and New York offices." },
        { q: "How long does approval take?", a: "Most partners are approved within 48 hours of applying. Strategic / co-sell partners get a longer onboarding with a dedicated partner manager." },
        { q: "Is there a minimum?", a: "No minimum intros. But our most successful partners bring 4–8 qualified intros a year and consistently earn six figures in commissions." },
      ]}/>

      <CTASection title="Bring us a customer. Get paid for the lifetime of the contract." primary={{ label: "Become a partner" }} secondary={{ label: "Talk to partnerships", href: "pages/contact.html" }}/>
    </Site>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<PartnersPage/>);