/* =============================================================
   BOUNTY — CLIPPING CAMPAIGNS (flagship service page)
   Uses the site's own classes plus creator-clipping.css
   (article-hero, definition-card, steps-list, check-list).
   Self-contained.
   ============================================================= */

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: '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." },
  { q: 'How fast can a campaign go live?', a: 'One day from signed brief to live campaign.' },
  { q: 'What do I need to provide?', a: 'Information about the brand and the source content you want clipped. We write the clipper brief and handle sourcing, moderation, payouts, and reporting from there.' },
  { q: 'How do you know the views are real?', a: 'Every submission is reviewed before a cent moves. Any botted or fraudulent views are caught and clawed back.' },
  { q: 'What platforms do clips go on?', a: 'TikTok, Instagram Reels, and YouTube Shorts.' },
];

const PROCESS = [
  ['01', 'You send the brief', 'The source content and a bit of information about the brand — a podcast, a keynote, founder footage, whatever exists.'],
  ['02', 'We write the clipper guidelines', "What's on-brand, what's off-limits, what a great clip looks like for this specific campaign."],
  ['03', 'The bounty goes live', 'Clippers discover it and start cutting. One day from signed brief to live.'],
  ['04', 'Every submission gets reviewed', 'Approved, denied, or flagged — before a cent moves and before it counts toward the budget.'],
  ['05', 'Views get verified', 'Botted or fraudulent views are caught and clawed back, not paid out.'],
  ['06', 'You get reporting, not a spreadsheet request', 'What ran, what it earned, what it cost per view — without chasing anyone for numbers.'],
];

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" />For Brands</div>
          <h1 className="h1">Clipping <span className="accent-bg">campaigns.</span></h1>
          <p className="lead">
            Fund a budget, hand over your content, and creators turn it into short-form
            clips across TikTok, Reels, and YouTube Shorts. You pay per verified view —
            never a flat retainer.
          </p>
        </div>
      </header>

      <div className="wrap">
        <div className="definition-card">
          <span className="lbl">Quick answer</span>
          <p>
            A <b>clipping campaign</b> is performance-based short-form distribution:
            you fund a budget and provide source content, creators cut it into clips
            and post from their own accounts, and every creator earns based on the
            verified views their posts generate. No flat fee, no guaranteed
            placements — just 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 runs</span>
              <h2 className="h2">Brief to payout, <span className="it">end to end.</span></h2>
            </div>
            <p className="lead">Six steps. We run five of them.</p>
          </div>
          <div style={{ height: 46 }} />
          {PROCESS.map(([n, title, body]) => (
            <div className="process-row" key={n}>
              <div className="n">{n}</div>
              <h3>{title}</h3>
              <p>{body}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="section dark">
        <div className="wrap">
          <div className="kicker-row">
            <div>
              <span className="eyebrow"><span className="dotbox" />What's included</span>
              <h2 className="h2">You approve. We <span className="it">run it.</span></h2>
            </div>
          </div>
          <div style={{ height: 48 }} />
          <div className="split-grid">
            <div>
              <h4>Bounty handles</h4>
              <ul className="check-list">
                <li><span className="check-mark">&#10003;</span><span>Clipper brief and guidelines</span></li>
                <li><span className="check-mark">&#10003;</span><span>Sourcing and recruiting clippers</span></li>
                <li><span className="check-mark">&#10003;</span><span>Submission review and moderation</span></li>
                <li><span className="check-mark">&#10003;</span><span>Fraud checks and clawbacks</span></li>
                <li><span className="check-mark">&#10003;</span><span>Payouts to clippers</span></li>
                <li><span className="check-mark">&#10003;</span><span>Performance reporting</span></li>
              </ul>
            </div>
            <div>
              <h4>You provide</h4>
              <ul className="check-list">
                <li><span className="check-mark">&#10003;</span><span>Source content to clip</span></li>
                <li><span className="check-mark">&#10003;</span><span>Brand and campaign context</span></li>
                <li><span className="check-mark">&#10003;</span><span>A budget and target CPM</span></li>
                <li><span className="check-mark">&#10003;</span><span>Approval on the guidelines</span></li>
              </ul>
            </div>
          </div>
        </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 on the first call.</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">Send the content. We'll build the <span className="it">brief.</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={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 />);