function Page() {
  const capabilities = [
    { tag: "ADVERTISER MARKETPLACE", title: "Vetted offers only", body: "Browse a curated marketplace of offers with clear payouts, landing pages you can preview, and compliance status surfaced up front.", detail: "Every offer reviewed: no cloaking, no surprise compliance pulls." },
    { tag: "TRANSPARENT TRACKING", title: "Know exactly what you earned", body: "Real-time clicks, conversions, and commissions, not 30-day delayed statements or vague 'pending' buckets.", detail: "Postback support + downloadable logs for reconciliation." },
    { tag: "FAST PAYOUTS", title: "Weekly payments available", body: "Standard Net-7 for qualified affiliates. Wire, ACH, or PayPal: you choose.", detail: "Minimum threshold: $50 · No hidden processing fees." },
    { tag: "CREATIVE ASSETS", title: "Ready-to-run creatives", body: "Pre-approved banner sets, text creatives, landing page variants, and email templates per offer.", detail: "You can still bring your own: test both, ship the winner." },
  ];
  const affTypes = [
    { title: "Content Affiliates", body: "Bloggers, review sites, and niche content creators who drive qualified referral traffic.", points: ["Editorial placement-friendly","Deep-link support","Performance bonuses"] },
    { title: "Media Buyers", body: "Paid-traffic affiliates running their own ad campaigns to high-converting offers.", points: ["High-payout offers","Fast compliance turnaround","Sub-ID tracking"] },
    { title: "Influencers & Creators", body: "Social and creator-led traffic that needs mobile-friendly tracking and quick-link generation.", points: ["Custom short links","Discount-code attribution","Flexible formats"] },
  ];

  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Solutions"
        eyebrow="Solutions · For Affiliates"
        title="Monetize your traffic."
        italic="With partners worth the click."
        lead="A vetted marketplace of advertisers, real-time tracking, and weekly payouts. Built by operators who know the difference between a serious network and a revolving door."
        primary={{label:"Apply as affiliate", href:"contact"}}
        secondary={{label:"Browse offer types", href:"#types"}}
        signals={[["Net-7","Payouts available"],["$50","Minimum threshold"],["Real-time","Click & conversion data"],["Vetted","Advertiser list"]]}
        aside={<OfferLadder/>}
        basePath="./"
      />

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Affiliate reality" title="Most networks" italic="waste your time." lead="Slow payouts. Unclear approval rules. Cloaked offers that get pulled the moment you scale. If you've run affiliate traffic seriously, you know the pattern." />
          <ProblemResolution
            problem={{
              eyebrow: "COMMON PAIN",
              title: "What affiliates put up with.",
              points: [
                "Advertisers that approve traffic, then decline commissions",
                "Payout delays, held funds, unclear thresholds",
                "Tracking that lags or loses conversions",
                "Offer churn: today's winner is tomorrow's 404",
              ]
            }}
            resolution={{
              eyebrow: "WHAT'S DIFFERENT HERE",
              title: "Run a real performance business.",
              points: [
                "Vetted advertisers with reviewed compliance",
                "Net-7 payouts available for qualified affiliates",
                "Real-time postbacks and downloadable logs",
                "Stable offer shelf: longer relationships, less churn",
              ]
            }}
          />
        </div>
      </section>

      <section className="section" style={{background:"var(--paper-2)"}}>
        <div className="container">
          <SectionHeader eyebrow="What you get" title="Tools and" italic="terms that respect your time." />
          <CapabilityBlocks items={capabilities} columns={2}/>
        </div>
      </section>

      <section className="section" id="types">
        <div className="container">
          <SectionHeader eyebrow="Who we work with" title="Built for serious" italic="traffic operators." />
          <StageCards stages={affTypes}/>
        </div>
      </section>

      <FinalCTASection
        title="Ready to run on"
        italic="a network that works?"
        body="Apply once, get reviewed in 48 hours. Scale on stable offers, with real-time tracking and payouts that actually arrive."
        primary={{label:"Apply as affiliate", href:"contact"}}
        secondary={{label:"See the network", href:"platform-affiliate"}}
      />
      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);