function Page() {
  const capabilities = [
    { tag: "OFFER LIBRARY", title: "Centralized offer catalog", body: "One source of truth for every offer variant, payout tier, landing page, and compliance rule.", detail: "Versioned · audit-logged · API-accessible." },
    { tag: "PERFORMANCE ROUTING", title: "Auto-route to winners", body: "Traffic routes to the best-performing offer by segment in real time, not on a weekly review cycle.", detail: "Segment-aware, incrementality-weighted routing." },
    { tag: "DYNAMIC PRICING", title: "Flex payouts that scale", body: "Tier payouts by affiliate quality, traffic source, and conversion value without manual spreadsheets.", detail: "Rule-based + value-based pricing per offer." },
    { tag: "COMPLIANCE CONTROLS", title: "Keep offers clean", body: "Creative review, landing-page monitoring, and automated compliance checks on every active offer.", detail: "Daily landing-page integrity scans included." },
  ];

  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Capabilities"
        eyebrow="Capabilities · Offer Management"
        title="Run offers"
        italic="like a portfolio."
        lead="Centralized offer catalog, automatic traffic routing to winners, tiered payouts, and compliance monitoring: all in one place, all version-controlled."
        primary={{label:"Talk to our team", href:"contact"}}
        secondary={{label:"See the system", href:"#system"}}
        signals={[["Central","Offer catalog"],["Auto","Traffic routing"],["Tiered","Payouts"],["Daily","Compliance scans"]]}
        aside={<OfferLadder/>}
        basePath="./"
      />

      <section className="section" id="system">
        <div className="container">
          <SectionHeader eyebrow="What's in the toolkit" title="Four parts" italic="of the offer stack."/>
          <CapabilityBlocks items={capabilities} columns={2}/>
        </div>
      </section>


      <section className="section" style={{background:"var(--paper-2)"}}>
        <div className="container">
          <SectionHeader eyebrow="Related" title="Also worth" italic="a look."/>
          <RelatedLinks items={[{"title":"For Affiliates","desc":"The marketplace side of offer management.","href":"solutions-affiliates"},{"title":"Affiliate Network","desc":"The underlying platform for offer routing.","href":"platform-affiliate"},{"title":"Fraud Prevention","desc":"Offer routing with fraud detection baked in.","href":"capabilities-fraud-prevention"}]}/>
        </div>
      </section>
      <FinalCTASection
        title="Ready to run offers"
        italic="with less firefighting?"
        body="We'll walk through your current offer ops: catalog, payout structure, compliance, and show where the platform would compress the work."
        primary={{label:"Talk to our team", href:"contact"}}
        secondary={{label:"See the affiliate network", href:"platform-affiliate"}}
      />
      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);