function Page() {
  const steps = [
    { num:"01", title:"Connect your stack", body:"Integrate with your existing tools in minutes. We support all major ad servers, attribution platforms, and data warehouses.", bullets:["Pixel, API, or SDK integration","Support for 50+ platforms","Dedicated implementation support"] },
    { num:"02", title:"Define your goals", body:"Set your performance targets. CPA, ROAS, or custom KPIs. Our platform optimizes toward what matters to your business.", bullets:["Unlimited conversion events","Custom attribution windows","Multi-goal optimization"] },
    { num:"03", title:"Build your audience", body:"Create segments from first-party data, lookalikes, or leverage our cross-device identity graph.", bullets:["First-party data onboarding","Lookalike modeling","Contextual targeting"] },
    { num:"04", title:"Launch campaigns", body:"Deploy across DSP, affiliates, and retargeting from a single interface. Upload creatives or use dynamic templates.", bullets:["Multi-channel deployment","Dynamic creative optimization","Automated A/B testing"] },
    { num:"05", title:"AI optimizes", body:"Our AI continuously optimizes bids, budgets, and targeting based on real conversion signals, not vanity metrics.", bullets:["Real-time bid optimization","Budget reallocation","Publisher quality scoring"] },
    { num:"06", title:"Measure & iterate", body:"Unified reporting shows true performance across all channels. See exactly what's working and double down.", bullets:["Multi-touch attribution","Incrementality testing","Executive dashboards"] },
  ];
  const stack = ["Google Analytics","Segment","Shopify","Salesforce","Snowflake","BigQuery","HubSpot","Marketo"];
  const milestones = [["1–2 days","Integration (If Req)"],["Instant","Campaigns live"],["Real-time","AI Optimized"]];
  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Platform"
        eyebrow="Platform · How It Works"
        title="From zero"
        italic="to scale."
        lead="Get started in days, not months. Here's how brands go from integration to optimized performance across all channels."
        primary={{label:"Get started", href:"contact"}}
        secondary={{label:"Explore platform", href:"platform-overview"}}
        signals={[["1–2 days","Integration"],["Instant","Campaigns live"],["Data-on","Algorithms learn"],["Real-time","AI optimized"]]}
        aside={<HowItWorksHero/>}
        basePath="./"
      />

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="The six-step flow" title="Integration to" italic="optimization. One path."/>
          <div style={{display:"flex", flexDirection:"column", gap:0, marginTop:48}} className="reveal-stagger">
            {steps.map((s,i)=>(
              <div key={i} style={{display:"grid", gridTemplateColumns:"120px 1fr 1fr", gap:48, padding:"48px 0", borderTop:"1px solid var(--line-strong)"}}>
                <div style={{fontFamily:"var(--font-display)", fontStyle:"italic", fontSize:56, color:"var(--ochre-deep)", lineHeight:1}}>{s.num}</div>
                <div>
                  <h3 style={{fontFamily:"var(--font-display)", fontSize:"clamp(28px,3vw,38px)", margin:"0 0 16px", lineHeight:1.1}}>{s.title}</h3>
                  <p style={{color:"var(--muted)", fontSize:17, lineHeight:1.6, maxWidth:500, margin:0}}>{s.body}</p>
                </div>
                <ul style={{listStyle:"none", padding:0, margin:0, display:"flex", flexDirection:"column", gap:12, alignSelf:"center"}}>
                  {s.bullets.map((b,j)=>(
                    <li key={j} style={{display:"flex", gap:12, alignItems:"flex-start", fontSize:15, color:"var(--ink)"}}>
                      <span style={{width:6, height:6, borderRadius:"50%", background:"var(--ochre)", marginTop:8, flexShrink:0}}/>
                      {b}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{background:"var(--paper-2)"}}>
        <div className="container">
          <SectionHeader eyebrow="Integrates with your stack" title="Works with" italic="what you already run."/>
          <StackBlocks tools={stack}/>
        </div>
      </section>

      <section className="section" style={{background:"var(--ink)", color:"var(--paper)"}}>
        <div className="container">
          <div style={{textAlign:"center", marginBottom:64}}>
            <div className="mono" style={{color:"rgba(246,242,236,0.5)", marginBottom:12}}>SPEED TO VALUE</div>
            <h2 style={{fontFamily:"var(--font-display)", fontSize:"clamp(44px,5vw,72px)", margin:0, color:"var(--paper)", lineHeight:1.05}}>Days, <span className="h-italic" style={{color:"var(--ochre)"}}>not quarters.</span></h2>
          </div>
          <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:48, position:"relative"}}>
            {milestones.map(([t,b],i)=>(
              <div key={i} style={{textAlign:"center", borderTop:"1px solid rgba(246,242,236,0.2)", paddingTop:32}}>
                <div style={{fontFamily:"var(--font-display)", fontSize:54, lineHeight:1, color:"var(--ochre)", marginBottom:16}}>{t}</div>
                <div style={{color:"rgba(246,242,236,0.7)", fontSize:16}}>{b}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <FinalCTASection title="Ready to" italic="get started?" body="Talk to our team and see how quickly you can be up and running." primary={{label:"Schedule demo", href:"contact"}}/>
      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);