function Page() {
  const capabilities = [
    { tag: "CREATIVE TESTING", title: "Dynamic creative optimization", body: "Test dozens of headline, image, and CTA variants concurrently. Budget flows to winners automatically as data arrives.", detail: "Typical lift: 2–4× CTR for the winning variant vs. median." },
    { tag: "LANDING PAGE", title: "Post-click optimization", body: "Integrated experiment framework so creative and landing page test together, not in silos.", detail: "Route traffic by segment + test variants simultaneously." },
    { tag: "BIDDING LOGIC", title: "Conversion-value bidding", body: "Bid higher for users who look like high-value customers. Bid less, or not at all: on low-expected-value audiences.", detail: "pLTV signals feed bid decisions in real time." },
    { tag: "FUNNEL ANALYSIS", title: "Step-by-step diagnostics", body: "Find exactly where users drop off. Fix the biggest leak first. Move on.", detail: "Cohort analysis + micro-conversion attribution." },
  ];
  const approach = [
    { title: "Measure", body: "Instrument the funnel. Every meaningful step, consistent definitions, trustworthy data." },
    { title: "Diagnose", body: "Find the stage with the biggest conversion leak. It's almost never the one you suspect." },
    { title: "Test", body: "Ship controlled experiments: creative, offers, page design: with proper significance." },
    { title: "Scale", body: "Roll out winners, document learnings, move to the next stage. Repeat." },
  ];

  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Solutions"
        eyebrow="Solutions · Conversion Optimization"
        title="Get more from the traffic"
        italic="you already have."
        lead="The fastest way to improve ROAS isn't always more spend. It's better creative, better landing pages, smarter bidding, and a clearer picture of where your funnel leaks."
        primary={{label:"Talk to our team", href:"contact"}}
        secondary={{label:"See the workflow", href:"#approach"}}
        signals={[["2–4×","Typical winning-variant CTR"],["Unified","Creative + landing tests"],["pLTV","Value-based bidding"],["Funnel","Diagnostics built in"]]}
        aside={<ConversionFunnel/>}
        basePath="./"
      />

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="The conversion reality" title="Most budget is spent" italic="treating symptoms." lead="Teams pour budget into channels optimizing for the wrong metric, or run A/B tests too small to detect effects, or test creative and landing pages in disconnected tools. The math stops adding up." />
          <ProblemResolution
            problem={{
              eyebrow: "SYMPTOMS",
              title: "Where performance stalls.",
              points: [
                "CTR is fine, but visits aren't converting",
                "Every test shows 'no significant effect'",
                "Creative and landing tests live in different tools",
                "Winning variants exist: but nobody remembers why",
              ]
            }}
            resolution={{
              eyebrow: "THE ACTUAL FIX",
              title: "Instrument, test, document.",
              points: [
                "One experimentation layer across creative and page",
                "Proper sample sizes: no false positives",
                "Segment-aware routing and bidding",
                "A running log of what you've learned, not just what you tested",
              ]
            }}
          />
        </div>
      </section>

      <section className="section" style={{background:"var(--paper-2)"}}>
        <div className="container">
          <SectionHeader eyebrow="What's in the toolkit" title="Optimize every step." italic="Creative to checkout." lead="Four capabilities working together, not four SaaS bills and the integration work to tie them together." />
          <CapabilityBlocks items={capabilities} columns={2}/>
        </div>
      </section>

      <section className="section" id="approach">
        <div className="container">
          <SectionHeader eyebrow="The approach" title="Measure, diagnose," italic="test, scale." lead="A repeatable optimization loop your team can run, not a set of one-off interventions from an agency." />
          <NumberedSteps steps={approach}/>
        </div>
      </section>

      <FinalCTASection
        title="Ready to convert"
        italic="more of what you're already paying for?"
        body="Bring us one campaign and one landing page. We'll map the funnel, find the biggest leak, and propose three experiments: no commitment required."
        primary={{label:"Request an audit", href:"contact"}}
        secondary={{label:"See creative optimization", href:"capabilities-creative-optimization"}}
      />
      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);