function Page() {
  const capabilities = [
    { tag: "LLM-READY CONTENT", title: "Structured for answer engines", body: "Content, schema, and entities designed to be parsed, indexed, and cited by LLM-driven search and answer engines.", detail: "schema.org · canonical entities · extractable facts." },
    { tag: "CITATION TRACKING", title: "Know where you're cited", body: "Monitor brand and product mentions in generative search outputs. Perplexity, ChatGPT, Claude, Google AI Overviews.", detail: "Daily citation audit with delta reporting." },
    { tag: "ANSWER OPTIMIZATION", title: "Optimize the answer, not the page", body: "Measure which content gets summarized into answers vs. merely linked, and optimize for the summary itself.", detail: "Answer-surface visibility score per query cluster." },
    { tag: "COMPETITIVE AEO", title: "Share of answer tracking", body: "Benchmark share of citations against competitors across priority query sets.", detail: "Priority query panel · weekly competitive reports." },
  ];

  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Capabilities"
        eyebrow="Capabilities · Answer Engine Optimization"
        title="Be the answer."
        italic="Not just a link."
        lead="Search is shifting from links to answers. AEO tracks which brands get cited by LLM-driven engines, and helps you structure content so yours does."
        primary={{label:"Talk to our team", href:"contact"}}
        secondary={{label:"See the approach", href:"#approach"}}
        signals={[["Daily","Citation audit"],["LLM-ready","Content structure"],["Share","Of answer tracking"],["Query","Cluster-level view"]]}
        aside={<AnswerEngine/>}
        basePath="./"
      />

      <section className="section" id="approach">
        <div className="container">
          <SectionHeader eyebrow="What's in the toolkit" title="Four AEO" 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":"Brand Awareness","desc":"AEO is a new upper-funnel surface.","href":"solutions-brand-awareness"},{"title":"Measurement & Attribution","desc":"Measure the traffic AEO citations drive.","href":"capabilities-measurement-attribution"},{"title":"About Auctera","desc":"Why we think AEO is the next measurement frontier.","href":"company-about"}]}/>
        </div>
      </section>
      <FinalCTASection
        title="Want to show up"
        italic="where answers are given?"
        body="Share the queries that matter to your category. We'll run a baseline citation audit and show you who's getting cited today, and what would move the needle."
        primary={{label:"Request a baseline", href:"contact"}}
        secondary={{label:"See measurement", href:"capabilities-measurement-attribution"}}
      />
      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);