function Page() {
  const capabilities = [
    { tag: "OPEN EXCHANGE", title: "Transparent bidding", body: "First-price auction access across the major SSPs with full bid-path visibility.", detail: "Supply-path optimization on by default." },
    { tag: "PMP + DIRECT", title: "Private marketplaces", body: "Access curated PMP deals and direct publisher relationships from the same UI as open exchange.", detail: "Direct deal loader + PMP browser." },
    { tag: "CTV & VIDEO", title: "Connected TV at scale", body: "Premium CTV inventory with household-level targeting and cross-device measurement.", detail: "Top-10 CTV platforms · deterministic household graph." },
    { tag: "AUCTION CONTROL", title: "Bid logic you can see", body: "Target-CPA, target-ROAS, or custom value-based bidding: with the logic exposed, not hidden in a black box.", detail: "Bid multiplier visibility per audience / placement." },
  ];

  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Capabilities"
        eyebrow="Capabilities · Programmatic"
        title="Programmatic."
        italic="Without the black box."
        lead="Transparent first-price bidding across open, PMP, and direct: plus CTV, video, native, and display. All in one console, with bid logic you can inspect."
        primary={{label:"Talk to our team", href:"contact"}}
        secondary={{label:"See the inventory", href:"#inventory"}}
        signals={[["Open + PMP","All inventory types"],["First-price","Auctions"],["Transparent","Bid logic"],["CTV","Premium scale"]]}
        aside={<BidNodePanel/>}
        basePath="./"
      />

      <section className="section" id="inventory">
        <div className="container">
          <SectionHeader eyebrow="What's exposed" title="Four programmatic" italic="capabilities."/>
          <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":"DSP","desc":"The platform surface for programmatic buying.","href":"platform-dsp"},{"title":"Brand Safety","desc":"Brand-safe programmatic inventory.","href":"capabilities-brand-safety"},{"title":"Fraud Prevention","desc":"Pre-bid fraud filtering on every auction.","href":"capabilities-fraud-prevention"}]}/>
        </div>
      </section>
      <FinalCTASection
        title="Want programmatic"
        italic="you can actually see?"
        body="Send us a live programmatic campaign. We'll show the bid-path reality: supply-path fees, inventory source, and where transparency would change spend."
        primary={{label:"Talk to our team", href:"contact"}}
        secondary={{label:"See the DSP", href:"platform-dsp"}}
      />
      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);