function Page() {
  const caps = [
    { title:"Multi-Touch Attribution", body:"See the contribution of every touchpoint across the customer journey. Data-driven, position-based, and custom models.", callout:"7+ Models" },
    { title:"Incrementality Testing", body:"Measure true incremental lift with holdout groups and ghost bidding. Know what's driving real conversions.", callout:"Lift Studies" },
    { title:"Cross-Channel Unified View", body:"One dashboard for DSP, affiliates, retargeting, and organic. No more data silos or manual reconciliation.", callout:"All Channels" },
    { title:"Real-Time Attribution", body:"Attribution updates in real-time as conversions happen. Optimize with current data, not yesterday's.", callout:"Near Real-Time" },
  ];
  const reports = [
    ["Campaign Performance","Conversions, revenue, ROAS by campaign"],
    ["Channel Attribution","Contribution by marketing channel"],
    ["Publisher Reports","Performance by publisher and placement"],
    ["Creative Analysis","Which creatives drive results"],
    ["Geo Performance","Results by country, region, city"],
    ["Device & Platform","Desktop, mobile, app performance"],
  ];
  const stack = ["Google Analytics","Segment","Snowflake","BigQuery","Tableau","Looker","dbt","Fivetran"];
  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Platform"
        eyebrow="Platform · Measurement"
        title="Know what's"
        italic="really working."
        lead="Multi-touch attribution, incrementality testing, and unified reporting across every channel. Stop guessing: start knowing."
        primary={{label:"Schedule demo", href:"contact"}}
        secondary={{label:"See reporting views", href:"platform-reporting"}}
        signals={[["7+","Attribution models"],["Real-time","Data updates"],["100%","Data ownership"],["Full","Cross-channel"]]}
        aside={<DashboardTile/>}
        basePath="./"
      />

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Measurement capabilities" title="Four foundations" italic="of trustworthy attribution."/>
          <Benefits items={caps}/>
        </div>
      </section>

      <section className="section" style={{background:"var(--paper-2)"}}>
        <div className="container">
          <SectionHeader eyebrow="Pre-built reports" title="The reports your team" italic="actually needs."/>
          <div className="grid grid-3 reveal-stagger">
            {reports.map(([t,b],i)=>(
              <div key={i} className="card" style={{padding:28}}>
                <div className="mono" style={{marginBottom:12}}>REPORT · 0{i+1}</div>
                <h4 style={{fontFamily:"var(--font-display)", fontSize:22, margin:"0 0 8px"}}>{t}</h4>
                <p style={{color:"var(--muted)", fontSize:14, margin:0}}>{b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Works with your stack" title="Plugs into" italic="what you already run." lead="Built for compatibility with the analytics, warehouse, and BI tools your team relies on."/>
          <StackPlugin/>
        </div>
      </section>

      <FinalCTASection title="Ready for" italic="better measurement?" body="See how unified measurement can transform your marketing efficiency." primary={{label:"Schedule demo", href:"contact"}}/>
      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);