function Page() {
  const capabilities = [
    { tag: "MULTI-CLIENT", title: "One login, every client", body: "Manage unlimited advertiser accounts from a single dashboard. Switch between them without re-authenticating.", detail: "Role-based permissions per account · SSO supported." },
    { tag: "WHITE-LABEL READY", title: "Your brand, our engine", body: "Custom-branded dashboards and reports you can hand to clients directly. Your logo, your URL, your presentation.", detail: "Domain aliasing + client-viewable report builder." },
    { tag: "PORTFOLIO VIEW", title: "See the whole book", body: "Aggregated performance across clients, surfacing outliers and clients at risk before they call you.", detail: "Spend pacing, ROAS trend, anomaly alerts: rollup-level." },
    { tag: "TEAM COLLABORATION", title: "Built for agency ops", body: "Assign users to specific clients, control who can launch or pause, log every change for audit.", detail: "Change log + approval workflows for enterprise teams." },
  ];
  const benefits = [
    { title: "Margin-friendly pricing", body: "Tiered plans for agencies, with media-rate pricing you can mark up transparently to clients." },
    { title: "Client-transparent reporting", body: "Export or share live dashboards. No black-box, no 'trust-us' attribution arguments." },
    { title: "Onboarding playbooks", body: "Standardized client launch templates so new accounts go live in days, not weeks." },
    { title: "Partner support", body: "Dedicated agency success team: people who've run agencies, not a generic support queue." },
  ];

  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Solutions"
        eyebrow="Solutions · For Agencies"
        title="Run every client."
        italic="From one platform."
        lead="Multi-account management, white-label reporting, agency-friendly pricing, and a dedicated partner team: built for the way agencies actually operate, not retrofitted from a brand tool."
        primary={{label:"Talk to partnerships", href:"contact"}}
        secondary={{label:"See the portfolio view", href:"#features"}}
        signals={[["Unlimited","Client accounts"],["White-label","Reports & dashboards"],["Tiered","Agency pricing"],["Dedicated","Partner team"]]}
        aside={<AgencyAccounts/>}
        basePath="./"
      />

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Agency reality" title="Most platforms" italic="weren't built for you." lead="Tools designed for single-brand buyers turn into operational weight when you're managing ten clients at once. Every login is a tab, every report is a rebuild." />
          <ProblemResolution
            problem={{
              eyebrow: "WHAT AGENCIES FIGHT",
              title: "Overhead eats the margin.",
              points: [
                "Every client has its own platform login and report export",
                "Hours each month manually pulling numbers for client decks",
                "No portfolio view to spot at-risk accounts early",
                "Pricing that treats 10 clients like one advertiser × 10",
              ]
            }}
            resolution={{
              eyebrow: "AGENCY-NATIVE",
              title: "Tools that match how you operate.",
              points: [
                "Unified multi-account dashboard with client switcher",
                "White-label dashboards your clients can log into directly",
                "Rollup reporting: see the book, not just the accounts",
                "Tiered agency pricing with transparent media markup",
              ]
            }}
          />
        </div>
      </section>

      <section className="section" style={{background:"var(--paper-2)"}} id="features">
        <div className="container">
          <SectionHeader eyebrow="What's included" title="Agency operations." italic="Without the retrofitting." />
          <CapabilityBlocks items={capabilities} columns={2}/>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Partnership benefits" title="Beyond the software."/>
          <Benefits items={benefits}/>
        </div>
      </section>

      <FinalCTASection
        title="Running an agency?"
        italic="Let's talk partnership."
        body="Tell us about your book: size, client mix, current stack, and we'll show you how the economics and operations change on a unified platform."
        primary={{label:"Talk to partnerships", href:"contact"}}
        secondary={{label:"View the platform", href:"platform-overview"}}
      />
      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);