/* =============================================================
   BOUNTY — BEST CLIPPING AGENCIES (comparison page)
   Chrome (Nav/Footer) mirrors case-studies.jsx / app.jsx exactly.
   Uses the site's own classes plus creator-clipping.css
   (article-hero, compare-table, process-row, steps-list, check-list).
   Everything about other agencies is what they report on their own
   sites as of October 2026; keep it that way when editing.
   ============================================================= */

const CALENDLY = "https://calendly.com/cyrusgrecobusiness/30min";

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav${scrolled ? " scrolled" : ""}`}>
      <div className="wrap nav-inner">
        <a href="/" className="brand">
          {/* Nav sits over the dark .article-hero until scrolled, unlike the
              homepage (light hero throughout) — swap to the light wordmark
              so the logo stays visible instead of blending into the dark bg. */}
          <img src={scrolled ? 'bounty-wordmark.png' : 'bounty-wordmark-light.png'} alt="Bounty" style={{height:22,width:'auto',display:'block',objectFit:'contain',flexShrink:0}}/>
        </a>
        <div className="nav-right">
          <div className="nav-links">
            <a href="/#how">How it works</a>
            <a href="/#trusted">Why Bounty</a>
            <a href="/case-studies">Case studies</a>
            <a href="/#dashboard">For Brands</a>
            <a href="/#team">Team</a>
            <a href="/#process">Process</a>
            <a href="/#pricing">Pricing</a>
            <a href="/#safety">Brand Safety</a>
            <a href="/#faq">FAQ</a>
          </div>
          <a href={CALENDLY} target="_blank" rel="noreferrer" className="btn btn-accent btn-sm">
            Book a call
          </a>
        </div>
      </div>
    </nav>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap foot-inner">
        <div className="left">
          <div className="brand">
            <img src="bounty-wordmark.png" alt="Bounty" style={{height:22,width:'auto',display:'block',objectFit:'contain',flexShrink:0}}/>
          </div>
          <span className="copy">© {new Date().getFullYear()} Bounty</span>
        </div>
        <div className="foot-links">
          <a href="/#how">How it works</a>
          <a href="/#trusted">Why Bounty</a>
          <a href="/case-studies">Case studies</a>
          <a href="/content-rewards-agency">Content Rewards</a>
          <a href="/best-clipping-agencies">Best clipping agencies</a>
          <a href="/clipping">Clipping Discord</a>
          <a href="/#dashboard">For Brands</a>
          <a href="/#team">Team</a>
          <a href="/#process">Process</a>
          <a href="/#pricing">Pricing</a>
          <a href="/#safety">Brand Safety</a>
          <a href="/#faq">FAQ</a>
          <a href="/terms">Terms</a>
          <a href="/privacy">Privacy</a>
          <a href="https://whop.com/bnty/" target="_blank" rel="noreferrer">For clippers</a>
          <span className="foot-divider">·</span>
          <a href="mailto:nicolas@bnty.co" className="foot-contact-link">Email us</a>
          <a href="tel:+35796441020" className="foot-contact-link">Text us</a>
        </div>
      </div>
    </footer>
  );
}

const AGENCIES = [
  { name: 'Bounty (bnty.co)', best: 'Brands that want pay per view campaigns with verification before payout and a live dashboard', pricing: 'Pay per view budget plus our fee', proof: 'LiveMap 50M+ views, Fanvue 4.7M approved views, political campaign 2M+ views' },
  { name: 'Clipping Culture', best: 'Music and entertainment with larger budgets', pricing: 'Campaigns from $15,000', proof: 'bbno$ at 2B+ views; Capitol Records, UMG and HBO Max as clients' },
  { name: 'The Clip Ship', best: 'Music releases', pricing: 'About $1 per 1,000 views', proof: 'Logic at 125M+ views for $20K, plus a Netflix campaign' },
  { name: 'ClipUp', best: 'Creator and personality campaigns', pricing: 'Custom, no flat packages', proof: 'Dillon Danis at 185.7M views for $54.3K' },
  { name: 'Propaganda', best: 'Creator led campaigns', pricing: 'Not listed', proof: 'Druski at 121M views on $8.5K' },
  { name: 'Lumina Clippers', best: 'Tech and crypto brands', pricing: '$5K minimum', proof: 'Stake at 1.8B+ views' },
  { name: 'Clip Farm', best: 'Brands that want no upfront fee', pricing: 'No upfront fee, brand sets the rate per view', proof: 'Founded with YouTuber Airrack, runs on Whop' },
  { name: 'cliphaus', best: 'Consumer brands that want a fast launch', pricing: 'Custom quote', proof: 'Atlantic Records, UMG, Gymshark, Coinbase and Crocs as clients' },
];

const OTHERS = {
  'Clipping Culture': 'They report campaigns from $15,000, clients including Capitol Records, UMG and HBO Max, and bbno$ at 2B+ views.',
  'The Clip Ship': 'They report Logic at 125M+ views for $20K, plus a Netflix campaign.',
  'ClipUp': 'They report Dillon Danis at 185.7M views for $54.3K.',
  'Propaganda': 'They report Druski at 121M views on $8.5K.',
  'Lumina Clippers': 'They report a $5K minimum and Stake at 1.8B+ views.',
  'Clip Farm': 'Founded with YouTuber Airrack and runs on Whop. The brand sets the rate per view.',
  'cliphaus': 'They report Atlantic Records, UMG, Gymshark, Coinbase and Crocs as clients.',
};

const BOUNTY_PROOF = [
  'LiveMap: 50M+ total views on a $100k campaign at $0.62 per install',
  'Fanvue: 4.7M approved views at a $1.28 effective CPM against a $2 target',
  'Political campaign: 2M+ views in 3 weeks',
  'A network of 30,000 clippers',
];

const HOW_TO_CHOOSE = [
  { t: 'Your budget', d: 'Some agencies publish a minimum, like $5K or $15,000. Check that your budget clears it before you compare anything else.' },
  { t: 'Agency or do it yourself', d: 'Decide whether you want an agency to run the campaign for you, or whether you want to run it yourself.' },
  { t: 'Verified views', d: 'Ask whether views are verified before payout. If they are not, you can end up paying for views that don\'t hold up.' },
];

function Page() {
  return (
    <React.Fragment>
      <style>{`
        .agencies-updated { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0 0 22px; }
        .agency-row .best { margin-top: 10px; }
        .agency-row .chip { margin-left: 10px; vertical-align: middle; }
        .agency-row .check-list { margin-top: 18px; }
        .agency-row .agency-links { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 22px; }
        @media (max-width: 720px) {
          .agency-row { grid-template-columns: 1fr; gap: 12px; }
        }
      `}</style>
      <Nav/>

      <header className="article-hero">
        <div className="wrap">
          <div className="eyebrow"><span className="dotbox"/>Clipping agencies compared</div>
          <h1 className="h1">Best clipping agencies <span className="it">in 2026.</span></h1>
          <p className="agencies-updated">Updated October 2026</p>
          <p className="lead">
            We run Bounty, so we're on this list and we put ourselves first. Everything about the other
            agencies comes from their own websites as of October 2026, and their numbers are self
            reported. Pick the one that fits your budget and goal.
          </p>
        </div>
      </header>

      <section className="section" id="compare">
        <div className="wrap">
          <div className="kicker-row">
            <div>
              <span className="eyebrow"><span className="dotbox"/>At a glance</span>
              <h2 className="h2">The shortlist, <span className="it">compared.</span></h2>
            </div>
          </div>
          <div style={{height:40}}/>
          <div className="compare-table-wrap">
            <table className="compare-table">
              <thead>
                <tr>
                  <th>Agency</th>
                  <th>Best for</th>
                  <th>Pricing model</th>
                  <th>Proof they publish</th>
                </tr>
              </thead>
              <tbody>
                {AGENCIES.map((a, i) => (
                  <tr key={a.name}>
                    <td className={i === 0 ? 'hl' : undefined}><b>{a.name}</b></td>
                    <td className={i === 0 ? 'hl' : undefined}>{a.best}</td>
                    <td className={i === 0 ? 'hl' : undefined}>{a.pricing}</td>
                    <td className={i === 0 ? 'hl' : undefined}>{a.proof}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <section className="section" style={{paddingTop:0}}>
        <div className="wrap">
          <div className="kicker-row">
            <div>
              <span className="eyebrow"><span className="dotbox"/>The agencies</span>
              <h2 className="h2">One by one, <span className="it">in order.</span></h2>
            </div>
          </div>
          <div style={{height:40}}/>

          <div className="process-row agency-row">
            <div className="n">01</div>
            <div>
              <h3>Bounty (bnty.co)<span className="chip green">Our pick</span></h3>
              <p className="best">Best for: {AGENCIES[0].best.toLowerCase()}.</p>
            </div>
            <div>
              <p>
                A partner agency on Whop Content Rewards. Why we rank it first: we run your campaign
                end to end inside Content Rewards, every clip is checked before approval (geo rules,
                engagement floor, analytics screen recording), and clients get a live dashboard with
                views, approved and pending submissions and spend.
              </p>
              <ul className="check-list">
                {BOUNTY_PROOF.map((t) => (
                  <li key={t}><span className="check-mark">&#10003;</span><span>{t}</span></li>
                ))}
              </ul>
              <div className="agency-links">
                <a className="trusted-view" href="/case-studies">See the case studies <span className="arrow">&rarr;</span></a>
                <a className="trusted-view" href="/content-rewards-agency">How we run Content Rewards <span className="arrow">&rarr;</span></a>
              </div>
            </div>
          </div>

          {AGENCIES.slice(1).map((a, i) => (
            <div className="process-row agency-row" key={a.name}>
              <div className="n">{String(i + 2).padStart(2, '0')}</div>
              <div>
                <h3>{a.name}</h3>
                <p className="best">Best for: {a.best.toLowerCase()}.</p>
              </div>
              <div>
                <p>{OTHERS[a.name]}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="section" style={{paddingTop:0}}>
        <div className="wrap">
          <div className="kicker-row">
            <div>
              <span className="eyebrow"><span className="dotbox"/>How to choose</span>
              <h2 className="h2">How to <span className="it">choose.</span></h2>
            </div>
          </div>
          <div style={{height:46}}/>
          <div className="steps-list">
            {HOW_TO_CHOOSE.map((s, i) => (
              <div className="step-row" key={s.t}>
                <div className="step-row-n">{String(i+1).padStart(2,'0')}</div>
                <h3>{s.t}</h3>
                <p>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="eyebrow"><span className="dotbox"/>Next step</div>
          <h2 className="h2">Want us to run <span className="it">your campaign?</span></h2>
          <p className="lead">No pitch deck, no commitment. Just a 30 minute call about what a campaign would look like for you.</p>
          <div style={{height:8}}/>
          <a className="btn btn-primary btn-lg" href={CALENDLY} target="_blank" rel="noreferrer">
            <span className="dot"/>Book a call<span className="arrow">&rarr;</span>
          </a>
        </div>
      </section>

      <Footer/>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<Page />);