function Page() {
  const [side, setSide] = React.useState("advertiser");
  const verticals = ["E-commerce","Finance","Gaming","Health & Wellness","Technology","Travel","Insurance","Education","Subscriptions","Lifestyle"];

  const ad = {
    good: [
      { title:"Brands Scaling Performance Marketing", body:"You've validated product-market fit. Now you need more volume without sacrificing quality." },
      { title:"Teams Frustrated with Affiliate Fraud", body:"You've been burned by networks that look the other way on traffic quality. We don't." },
      { title:"Advertisers Running Multi-Channel", body:"You're already on DSP or retargeting. Our network coordinates with those channels to avoid overlap." },
    ],
    bad: ["Products with margins too thin for affiliate payouts","No conversion tracking or attribution in place","Looking for brand awareness only (no performance goals)"],
    benefits: [
      { title:"Curated Publisher Base", body:"Every publisher is vetted for traffic quality before approval. We reject publishers that don't meet our standards.", callout:"Quality over quantity" },
      { title:"Fraud Protection Built-In", body:"ML-powered detection blocks suspicious traffic before it costs you. No add-on fees: fraud prevention is included.", callout:"No extra fees" },
      { title:"Smart Publisher Matching", body:"Our algorithm matches your offers to publishers with the right audience. Better matches mean higher conversions.", callout:"Higher conversion rates" },
      { title:"Transparent Reporting", body:"See exactly which publishers and placements drive performance. No black boxes, no mystery traffic sources.", callout:"Full visibility" },
    ],
    cases: [
      { title:"Scaling beyond in-house affiliates", problem:"You're managing affiliates directly but can't scale. Finding and vetting new partners takes too long.", solution:"Our pre-vetted publisher base gives you scale without the sourcing work. We handle approvals, compliance, and fraud prevention." },
      { title:"Replacing low-quality network traffic", problem:"Your current network delivers volume but conversion rates are poor. You suspect fraud but can't prove it.", solution:"We audit traffic at the source. You see exactly which publishers drive each conversion, with full transparency on placements." },
    ],
    faqs: [
      { q:"What are your minimum spend requirements for advertisers?", a:"We work with advertisers of all sizes: from startups testing affiliate for the first time to enterprise programs. Minimum depends on your vertical and payout model. Contact us for specifics." },
      { q:"How do you vet publishers?", a:"Every publisher goes through a review process before approval. We check traffic sources, historical performance (if available), and compliance with our policies. We monitor ongoing performance and pause publishers that show quality issues." },
      { q:"How does pricing work?", a:"We typically take a margin on publisher payouts (the spread between what you pay and what publishers receive). It's transparent: you know exactly what goes where. No hidden fees." },
      { q:"Can I control which publishers promote my offers?", a:"Yes. You can approve publishers individually, set traffic source restrictions, and block specific publishers or placements. You have full control over who promotes your brand." },
    ],
  };

  const pub = {
    good: [
      { title:"Publishers with Quality Traffic", body:"You have real audiences who engage with content. We prioritize quality over volume." },
      { title:"Affiliates Tired of Payment Drama", body:"You've dealt with networks that delay payments or find reasons to reduce them. We pay on time." },
      { title:"Media Buyers Scaling Campaigns", body:"You run ads and need reliable offers with good payouts. We have stable offers from vetted advertisers." },
    ],
    bad: ["Incentivized traffic without advertiser approval","Traffic sources you can't disclose","Looking for offers that accept any traffic quality"],
    benefits: [
      { title:"Competitive Payouts", body:"Transparent payout structures with no hidden deductions. You see exactly what you'll earn before you promote.", callout:"No surprises" },
      { title:"Fast, Reliable Payments", body:"Net-7, Net-15, or Net-30 terms. We don't hold your money: payments go out on schedule, every time.", callout:"On-time, every time" },
      { title:"Global Offer Selection", body:"Offers across 180+ countries and every major vertical. Find offers that match your audience.", callout:"Worldwide coverage" },
      { title:"Optimization Tools", body:"Smart links, real-time stats, and performance insights help you maximize earnings from your traffic.", callout:"Data-driven decisions" },
    ],
    cases: [
      { title:"Finding stable, high-payout offers", problem:"Offers keep getting pulled. Payouts get adjusted down. You're always scrambling for new campaigns.", solution:"We work with advertisers on long-term partnerships. Offers stay live longer, payouts stay stable, and you get advance notice of changes." },
      { title:"Expanding into new verticals", problem:"You're strong in one vertical but want to diversify. Getting approved on new offers is slow.", solution:"Our matching algorithm recommends offers suited to your traffic. Once you're in our network, accessing new verticals is faster." },
    ],
    faqs: [
      { q:"How do I get approved?", a:"Apply through our publisher signup. We review applications within 48 hours. We'll ask about your traffic sources and experience. Approval depends on traffic quality, not volume: small publishers with quality traffic are welcome." },
      { q:"What payment terms do you offer?", a:"Net-7, Net-15, or Net-30 depending on your history and volume. New publishers typically start at Net-30 and can improve terms as we build a track record together." },
      { q:"What traffic sources do you accept?", a:"We accept most legitimate traffic sources: content sites, email (with permission), social, paid media, SEO. Each offer has its own restrictions. You can filter offers by allowed traffic sources." },
      { q:"Do you have a minimum payout threshold?", a:"Minimum payout is $100 for most payment methods. We support wire, PayPal, Payoneer, and crypto for select publishers." },
    ],
  };

  const data = side === "advertiser" ? ad : pub;

  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Platform"
        eyebrow="Platform · Affiliate Network"
        title="Performance partnerships"
        italic="that actually work."
        lead="Advertisers: access vetted publishers with real audiences. Publishers: access stable offers with reliable payments. Built-in fraud protection. Transparent tracking. Coordinates with our DSP and retargeting for unified attribution."
        primary={{label:"I'm an advertiser", href:"contact"}}
        secondary={{label:"I'm a publisher", href:"#"}}
        micro="ADVERTISERS: 30-MIN INTRO CALL · PUBLISHERS: 48-HOUR APPROVAL"
        signals={[["Vetted","Publisher base"],["Thousands","Live offers"],["180+","Countries"],["All verticals","E-com to finance"]]}
        aside={<AffiliateNetworkPanel/>}
        basePath="./"
      />

      {/* Audience toggle */}
      <section style={{padding:"48px 0 0", position:"sticky", top:68, background:"var(--paper)", zIndex:10, borderBottom:"1px solid var(--line)"}}>
        <div className="container">
          <div style={{display:"flex", gap:4, background:"var(--paper-2)", padding:4, borderRadius:999, width:"fit-content", margin:"0 auto 32px"}}>
            <button onClick={()=>setSide("advertiser")} style={{padding:"12px 28px", borderRadius:999, border:"none", background:side==="advertiser"?"var(--ink)":"transparent", color:side==="advertiser"?"var(--paper)":"var(--ink)", fontFamily:"var(--font-sans)", fontSize:14, fontWeight:500, cursor:"pointer", transition:"all .2s"}}>For advertisers</button>
            <button onClick={()=>setSide("publisher")} style={{padding:"12px 28px", borderRadius:999, border:"none", background:side==="publisher"?"var(--ink)":"transparent", color:side==="publisher"?"var(--paper)":"var(--ink)", fontFamily:"var(--font-sans)", fontSize:14, fontWeight:500, cursor:"pointer", transition:"all .2s"}}>For publishers</button>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow={side==="advertiser"?"For advertisers":"For publishers & affiliates"} title={side==="advertiser"?"Scale your program":"Monetize your traffic"} italic={side==="advertiser"?"with quality, not noise.":"without the payment drama."}/>
          <FitSplit good={data.good} bad={data.bad}/>
        </div>
      </section>

      <section className="section" style={{background:"var(--paper-2)"}}>
        <div className="container">
          <SectionHeader eyebrow={side==="advertiser"?"Advertiser benefits":"Publisher benefits"} title="What you get."/>
          <Benefits items={data.benefits}/>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Common use cases" title="Real problems." italic="Clear solutions."/>
          <UseCases items={data.cases}/>
        </div>
      </section>

      <section className="section" style={{background:"var(--paper-2)"}}>
        <div className="container">
          <SectionHeader eyebrow="Common questions"/>
          <FAQ items={data.faqs}/>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Active verticals" title="Offers across" italic="every major category." lead="Our marketplace spans verticals from high-velocity e-commerce to regulated finance and insurance."/>
          <VerticalsMatrix/>
        </div>
      </section>

      <FinalCTASection title="Ready to" italic="get started?" body="Advertisers get a 30-min intro call. Publishers can start promoting within 48 hours of approval." primary={{label:"Advertiser inquiry", href:"contact"}} secondary={{label:"Publisher application", href:"#"}}/>
      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);
