function Page() {
  const capabilities = [
    { tag: "TWO-SIDED", title: "Buyers and publishers", body: "Both sides run on the same engine: same identity graph, same quality controls, same transparency.", detail: "247 active nodes · vetted supply + demand." },
    { tag: "TRANSPARENT FEES", title: "Clear on margin", body: "Exchange fees disclosed up front. No layered tech taxes, no surprise post-bid deductions.", detail: "Single take-rate · audited quarterly." },
    { tag: "VETTED INVENTORY", title: "Quality supply only", body: "Every publisher reviewed before activation. Demand sees the full list, not a sanitized summary.", detail: "Continuous monitoring after activation." },
    { tag: "PERFORMANCE COMMERCE", title: "Commerce-first formats", body: "Shoppable units, product feeds, and dynamic retargeting: native to the exchange, not retrofit.", detail: "Feed-driven creative + shoppable CTV." },
  ];

  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Capabilities"
        eyebrow="Capabilities · Marketplace & E-Commerce"
        title="A marketplace"
        italic="that respects both sides."
        lead="Auctera's exchange (D-REVX) connects vetted advertisers and publishers with transparent fees, clean inventory, and performance-commerce formats built in."
        primary={{label:"Talk to our team", href:"contact"}}
        secondary={{label:"See the map", href:"#mesh"}}
        signals={[["247","Active nodes"],["Two-sided","Buyers + publishers"],["Transparent","Fee structure"],["Vetted","Both sides"]]}
        aside={<MarketplaceMesh/>}
        basePath="./"
      />

      <section className="section" id="mesh">
        <div className="container">
          <SectionHeader eyebrow="What the marketplace is" title="Four marketplace" italic="properties."/>
          <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 Publishers","desc":"The supply-side experience in the marketplace.","href":"solutions-publishers"},{"title":"DSP","desc":"The demand-side interface into the marketplace.","href":"platform-dsp"},{"title":"Programmatic","desc":"Auction mechanics underpinning the marketplace.","href":"capabilities-programmatic"}]}/>
        </div>
      </section>
      <FinalCTASection
        title="Ready to join"
        italic="a marketplace that works?"
        body="Whether you're buying or selling, we'll walk through the marketplace economics, inventory quality, and the onboarding path."
        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/>);