function Page() {
  const capabilities = [
    { tag: "MULTI-TOUCH", title: "Multi-touch attribution", body: "Distribute conversion credit across every touch, not only the last click. Data-driven, time-decay, and linear models, side by side.", detail: "Swap models without re-ingesting data." },
    { tag: "INCREMENTALITY", title: "Measure incremental lift", body: "Hold-out tests and geo-lift experiments isolate the conversions that wouldn't have happened otherwise.", detail: "20–40% of reported conversions typically non-incremental." },
    { tag: "CROSS-CHANNEL", title: "Every channel, one model", body: "DSP, affiliate, retargeting, and external sources all contribute to a single attribution surface, not per-platform claims.", detail: "Fair-comparison attribution across the stack." },
    { tag: "CUSTOM WINDOWS", title: "Windows that fit your business", body: "Set click, view, and post-conversion windows by product, category, or funnel stage.", detail: "Per-conversion-type configuration." },
  ];

  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Capabilities"
        eyebrow="Capabilities · Measurement & Attribution"
        title="Know what"
        italic="actually worked."
        lead="A single attribution surface across DSP, affiliate, retargeting, and external sources: with incrementality testing built in, not bolted on."
        primary={{label:"Talk to our team", href:"contact"}}
        secondary={{label:"See the model", href:"#model"}}
        signals={[["1 model","Every channel"],["20–40%","Non-incremental"],["Hold-out","Tests built in"],["Custom","Windows"]]}
        aside={<AttributionFlow/>}
        basePath="./"
      />

      <section className="section" id="model">
        <div className="container">
          <SectionHeader eyebrow="What's in the surface" title="Four measurement" 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":"Measurement Platform","desc":"The platform-level measurement surface.","href":"platform-measurement"},{"title":"ROI Improvement","desc":"Clean measurement is the foundation of real ROI.","href":"solutions-roi-improvement"},{"title":"Audience Targeting","desc":"Measurement feeds back into which audiences to target.","href":"capabilities-audience-targeting"}]}/>
        </div>
      </section>
      <FinalCTASection
        title="Want attribution"
        italic="you'd stake your budget on?"
        body="Share your current attribution setup: the model, the windows, the channels. We'll show where it's overcounting, what incrementality tests would reveal, and what a clean model looks like."
        primary={{label:"Request an audit", href:"contact"}}
        secondary={{label:"See measurement platform", href:"platform-measurement"}}
      />
      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);