function Page() {
  const capabilities = [
    { tag: "DCO", title: "Dynamic creative optimization", body: "Assemble creatives from modular headlines, images, and CTAs. Test dozens of permutations concurrently.", detail: "Typical winner emerges within 7–14 days." },
    { tag: "CREATIVE HEALTH", title: "Catch fatigue before it hurts", body: "CTR decay signals surface creative fatigue automatically: refresh before ROAS drops.", detail: "Rolling 14-day fatigue windows per creative." },
    { tag: "MULTI-FORMAT", title: "Display, video, native, social", body: "Single creative system spanning formats so learnings compound across the stack, not per-channel.", detail: "Auto-resize + format-aware optimization." },
    { tag: "AUDIENCE-MATCHED", title: "Creative per segment", body: "Different messaging for different audience segments: automatically, without forking campaigns.", detail: "Audience × creative routing rules per campaign." },
  ];

  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Capabilities"
        eyebrow="Capabilities · Creative Optimization"
        title="Test creative"
        italic="at audience speed."
        lead="Dynamic creative optimization that tests variations concurrently, catches fatigue early, and matches message to segment: across display, video, native, and social."
        primary={{label:"Talk to our team", href:"contact"}}
        secondary={{label:"See the grid", href:"#grid"}}
        signals={[["2–4×","Typical winner CTR"],["7–14 days","Winner emerges"],["14-day","Fatigue window"],["All formats","One system"]]}
        aside={<CreativeGrid/>}
        basePath="./"
      />

      <section className="section" id="grid">
        <div className="container">
          <SectionHeader eyebrow="What the system does" title="Four creative" 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":"Audience Targeting","desc":"Creative is most powerful matched to segment.","href":"capabilities-audience-targeting"},{"title":"Conversion Optimization","desc":"Where creative optimization lives in practice.","href":"solutions-conversion-optimization"},{"title":"Measurement & Attribution","desc":"Measure creative variants on real outcomes.","href":"capabilities-measurement-attribution"}]}/>
        </div>
      </section>
      <FinalCTASection
        title="Ready to let"
        italic="creative move at audience speed?"
        body="Share your current creative set and a live campaign. We'll propose a DCO structure, a test plan, and the expected variant matrix: before you build anything new."
        primary={{label:"Talk to our team", href:"contact"}}
        secondary={{label:"See conversion optimization", href:"solutions-conversion-optimization"}}
      />
      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);