/* =============================================================
   BOUNTY — WHAT IS CREATOR CLIPPING?
   Definitional/explainer page. Uses the site's own classes
   (.section, .h1, .h2, .it, .eyebrow, .lead, .kicker-row, .btn,
   .chip, .feature-grid, .faq-list) plus creator-clipping.css.
   No shared components.jsx — self-contained, same pattern as
   careers.jsx.
   ============================================================= */

const PHONE = "+35796441020";
const BOOK_URL = "https://calendly.com/cyrusgrecobusiness/30min";

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", on, { passive: true });
    on();
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <nav className={`nav${scrolled ? " scrolled" : ""}`}>
      <div className="wrap nav-inner">
        <a href="/" className="brand"><span>Bounty</span></a>
        <div className="nav-links">
          <a href="/#how">How it works</a>
          <a href="/#trusted">Why Bounty</a>
          <a href="/#dashboard">For Brands</a>
        </div>
      </div>
    </nav>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap foot-inner">
        <div className="left">
          <div className="brand"><span>Bounty</span></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="/#dashboard">For Brands</a>
          <span className="foot-divider">·</span>
          <a href={"tel:" + PHONE} className="foot-contact-link">Text us</a>
        </div>
      </div>
    </footer>
  );
}

function FAQItem({ item, idx, openIdx, setOpenIdx }) {
  const isOpen = openIdx === idx;
  return (
    <div className={`faq-item${isOpen ? ' open' : ''}`}>
      <button className="faq-q" onClick={() => setOpenIdx(isOpen ? null : idx)} aria-expanded={isOpen}>
        <span className="faq-q-text">{item.q}</span>
        <span className="faq-toggle">{isOpen ? '−' : '+'}</span>
      </button>
      <div className="faq-a-wrap">
        <div className="faq-a-inner">
          <p>{item.a}</p>
        </div>
      </div>
    </div>
  );
}

const FAQ_ITEMS = [
  { q: 'Is creator clipping the same as UGC?', a: "No. UGC gives you creative assets that you still have to distribute yourself. Creator clipping is the distribution layer — creators post the content from their own accounts, so you get the reach and the content at the same time." },
  { q: 'Do I need to give creators permission to clip my content?', a: "You set the brief. Creators only cut and post from content you've approved for the campaign — a podcast episode, a keynote, founder clips, whatever you hand over — under the guidelines you set." },
  { q: 'How much does a clipping campaign cost?', a: "Campaigns typically start at $5,000, though smaller pilots from $1,000 are possible if the fit is right. You set the budget and the CPM, and you only pay for verified views." },
  { q: 'Who owns the clips creators post?', a: "Creators post from their own accounts under your campaign guidelines. The underlying content is yours; the posts live on the creators' own channels, which is what makes the reach compound instead of renting an audience for a single post." },
  { q: 'Can I become a clipper?', a: <>Yes. Bounty's clipper community runs on Whop and is always open to new creators. <a href="https://whop.com/bounty-network/" target="_blank" rel="noreferrer" className="faq-link">Join on Whop →</a></> },
];

function Page() {
  const [openIdx, setOpenIdx] = React.useState(null);

  return (
    <React.Fragment>
      <Nav />

      <header className="article-hero">
        <div className="wrap">
          <div className="eyebrow"><span className="dotbox" />Creator Clipping, Explained</div>
          <h1 className="h1">What is creator <span className="accent-bg">clipping?</span></h1>
          <p className="lead">
            A distribution model where creators cut your existing content into short-form
            video and post it from their own accounts — and you pay per verified view,
            not per post.
          </p>
        </div>
      </header>

      <div className="wrap">
        <div className="definition-card">
          <span className="lbl">Quick answer</span>
          <p>
            <b>Creator clipping</b> (also called a clipping campaign, or a "bounty" campaign)
            is a performance-based distribution model: a brand funds a budget, independent
            creators cut short-form clips from the brand's existing content — a podcast,
            a keynote, raw founder footage — and each creator earns based on the verified
            views their posts generate. Not a flat fee. Not a follower count. What the
            audience actually watched.
          </p>
        </div>
      </div>

      <section className="section" id="how">
        <div className="wrap">
          <div className="kicker-row">
            <div>
              <span className="eyebrow"><span className="dotbox" />How it works</span>
              <h2 className="h2">Four steps, one <span className="it">payout rule.</span></h2>
            </div>
            <p className="lead">The mechanics are simple on purpose — that's most of the point.</p>
          </div>
          <div style={{ height: 56 }} />
          <div className="steps-list">
            <div className="step-row">
              <div className="step-row-n">01</div>
              <h3>Fund the bounty</h3>
              <p>Set a budget and hand over source content — a podcast, a keynote, raw founder footage, whatever already exists.</p>
            </div>
            <div className="step-row">
              <div className="step-row-n">02</div>
              <h3>Creators cut and post</h3>
              <p>Independent creators turn it into short-form clips and post from their own accounts across TikTok, Reels, and YouTube Shorts.</p>
            </div>
            <div className="step-row">
              <div className="step-row-n">03</div>
              <h3>Views get verified</h3>
              <p>Every submission is reviewed before a cent moves. Verified views are what get paid — not submissions, not follower counts.</p>
            </div>
            <div className="step-row">
              <div className="step-row-n">04</div>
              <h3>You pay per view</h3>
              <p>No flat retainer, no guessing. The budget spends exactly as far as the audience actually watches.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section dark">
        <div className="wrap">
          <div className="kicker-row">
            <div>
              <span className="eyebrow"><span className="dotbox" />Not the same thing</span>
              <h2 className="h2">How it's different from <span className="it">what you know.</span></h2>
            </div>
            <p className="lead">Three models get lumped together with clipping. None of them work the same way.</p>
          </div>
          <div style={{ height: 56 }} />
          <div className="compare-grid">
            <div className="compare-item">
              <h4>vs. Paid social</h4>
              <p>Paid social typically runs $8–$30 CPM, and the moment you stop paying, the reach stops. Clipping campaigns have delivered as low as $0.60 CPM, and clips keep earning views after the campaign ends.</p>
            </div>
            <div className="compare-item">
              <h4>vs. Influencer marketing</h4>
              <p>An influencer rents you their audience for a single post, and it reads as an ad. Clipping puts hundreds of creators on a piece of content at once, in a format that looks native to the feed.</p>
            </div>
            <div className="compare-item">
              <h4>vs. UGC</h4>
              <p>UGC gives you creative you still have to distribute yourself. Clipping is the distribution layer — the posting and the reach are the deliverable, not just the footage.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section tight">
        <div className="wrap">
          <div className="kicker-row">
            <div>
              <span className="eyebrow"><span className="dotbox" />Why now</span>
              <h2 className="h2">This stopped being an <span className="it">insider tactic.</span></h2>
            </div>
          </div>
          <div style={{ height: 40 }} />
          <p className="lead" style={{ maxWidth: 760 }}>
            For most of its life, clipping was a Discord-and-Whop-insider tactic — brands
            and creators who already knew each other, running campaigns nobody wrote about.
            That changed in 2026. NPR profiled the model directly in a piece on "the clipping
            economy." Variety covered how it's reshaping music marketing specifically. And
            when the creator with arguably the most reach on the internet — MrBeast — chose
            to build his own in-house clipping platform in 2025 rather than skip the model
            entirely, that's a signal about how real the underlying mechanic is, independent
            of any one agency running it.
          </p>
          <p className="source-note">Sources: NPR, "The clipping economy" (May 2026) · Variety, on clipping in the music industry (2026) · Bloomberg, on paid clipper networks (Oct 2025).</p>
        </div>
      </section>

      <section className="section" id="faq">
        <div className="wrap">
          <div className="kicker-row">
            <div>
              <span className="eyebrow"><span className="dotbox" />FAQ</span>
              <h2 className="h2">Questions, <span className="it">answered.</span></h2>
            </div>
            <p className="lead">The things brands ask before running their first campaign.</p>
          </div>
          <div className="faq-list">
            {FAQ_ITEMS.map((it, i) => (
              <FAQItem key={i} item={it} idx={i} openIdx={openIdx} setOpenIdx={setOpenIdx} />
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="eyebrow"><span className="dotbox" />Next step</div>
          <h2 className="h2">See what a bounty campaign looks like <span className="it">for your brand.</span></h2>
          <p className="lead">No pitch deck, no commitment — just a 30-minute call about whether this fits what you're trying to do.</p>
          <div style={{ height: 8 }} />
          <a className="btn btn-primary btn-lg" href={BOOK_URL} 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 />);