function Page() {
  const feats = [
    { title:"Executive Dashboards", body:"Pre-built dashboards designed for CMO, VP, and Director-level reporting. High-level KPIs with drill-down capability.", callout:"C-Suite Ready" },
    { title:"Custom Report Builder", body:"Drag-and-drop builder to create any report you need. Save templates and schedule automated delivery.", callout:"Unlimited Reports" },
    { title:"Real-Time Data", body:"Reports update in real-time as performance data flows in. No more waiting for overnight batch processing.", callout:"Near Real-Time" },
    { title:"Export Anywhere", body:"Export to PDF, Excel, Google Sheets, or push directly to your data warehouse via API.", callout:"All Formats" },
  ];
  const cats = [
    ["Performance","Campaign, channel, and publisher performance"],
    ["Attribution","Multi-touch and incrementality reports"],
    ["Financial","Spend, revenue, margin, and billing"],
    ["Publisher","Publisher-level quality and fraud metrics"],
    ["Creative","Creative performance and A/B test results"],
    ["Geo","Country, region, and city breakdowns"],
  ];
  const schedules = [
    ["Daily","Morning KPI summary"],
    ["Weekly","Performance week-over-week"],
    ["Monthly","Executive summary for stakeholders"],
    ["Custom","Any schedule you define"],
  ];
  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Platform"
        eyebrow="Platform · Reporting"
        title="Reports that"
        italic="drive decisions."
        lead="Real-time dashboards, custom reports, and automated delivery. Get the insights you need, when you need them, how you need them."
        primary={{label:"Schedule demo", href:"contact"}}
        secondary={{label:"See reporting views", href:"#"}}
        signals={[["Real-time","Data freshness"],["Unlimited","Custom reports"],["PDF/XLS/API","Export formats"],["C-Suite","Ready dashboards"]]}
        aside={<DashboardTile/>}
        basePath="./"
      />

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Reporting features" title="Four pillars of" italic="decision-ready reporting."/>
          <Benefits items={feats}/>
        </div>
      </section>

      <section className="section" style={{background:"var(--paper-2)"}}>
        <div className="container">
          <SectionHeader eyebrow="Report categories" title="Coverage across" italic="every dimension that matters."/>
          <div className="grid grid-3 reveal-stagger">
            {cats.map(([t,b],i)=>(
              <div key={i} className="card" style={{padding:28}}>
                <div className="mono" style={{marginBottom:12}}>CATEGORY · 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="Scheduled delivery" title="Reports where" italic="your team lives." lead="Delivered automatically to your inbox or Slack: on the cadence that matches your operating rhythm."/>
          <div className="grid grid-4 reveal-stagger">
            {schedules.map(([t,b],i)=>(
              <div key={i} style={{borderTop:"1px solid var(--line-strong)", paddingTop:20}}>
                <div style={{fontFamily:"var(--font-display)", fontStyle:"italic", fontSize:36, color:"var(--ochre-deep)", lineHeight:1}}>{t}</div>
                <p style={{color:"var(--muted)", fontSize:15, margin:"16px 0 0"}}>{b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <FinalCTASection title="Ready for" italic="better reporting?" body="See how our reporting suite can streamline your analytics workflow." primary={{label:"Schedule demo", href:"contact"}}/>
      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);