// IB System product page
function IBSystemPage() {
  return (
    <Site>
      <PageHero
        breadcrumb={[{ label: "Product" }, { label: "IB System" }]}
        eyebrow="Product · IB System"
        title={<>The <span className="gradient-text">IB stack</span> your partners actually want to use.</>}
        sub="Multi-level partner trees, configurable commissions, real-time partner portals, payouts that match your audit trail. Run 10 IBs or 10,000 — same stack."
        ctaPrimary={{ label: "Book a demo" }}
        ctaSecondary={{ label: "See partner portal", href: "#portal" }}
        visual={<IBTreeAnimatedVisual/>}
      />

      <StatRow items={[
        { v: "∞ levels", l: "Configurable partner depth" },
        { v: "Real-time", l: "Commission accruals visible to partners" },
        { v: "Multi-rule", l: "CPA, RevShare, hybrid, custom" },
        { v: "Auto", l: "Payouts gated by KYC and approvals" },
      ]}/>

      <FeatureGrid
        eyebrow="Capabilities"
        title="Partners as a first-class product line."
        features={[
          { t: "Multi-level trees", d: "Master IB, sub-IBs, sub-sub-IBs — any depth, any commission split." },
          { t: "Commission rules", d: "CPA, RevShare, hybrid, per-symbol, per-deposit, per-volume, custom." },
          { t: "Real-time portal", d: "Partners see their tree, leads, FTDs, commissions and payouts live." },
          { t: "Marketing assets", d: "Hosted creatives, landing pages, tracking links, QR codes per partner." },
          { t: "Tracking & attribution", d: "Multi-touch attribution across click, sign-up, KYC, FTD." },
          { t: "Payouts", d: "Multi-rail payouts (bank, crypto, cards) with KYC gating and dual approval." },
          { t: "White-label portal", d: "Partner portal under your domain and brand." },
          { t: "API & webhooks", d: "Partners can pull leads, commissions, FTDs into their own tools." },
          { t: "Compliance", d: "Per-jurisdiction partner KYC and tax docs (W-8/W-9, etc.)." },
        ]}
      />

      <FAQ items={[
        { q: "Can a partner have sub-partners?", a: "Yes — any depth. Each level can have its own commission rules and override structure." },
        { q: "How are commissions calculated?", a: "Configurable rule engine. CPA, RevShare, per-symbol overrides, scaling, caps, clawbacks. Calculated continuously, displayed live to partners." },
        { q: "Do partners see live data?", a: "Yes — leads, FTDs, commissions and payouts are live in their portal. With per-partner masking on PII." },
      ]}/>

      <CTASection title="Run partners like a product, not a side hustle." primary={{ label: "Book a demo" }}/>
    </Site>
  );
}

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