/* =============================================================
   BOUNTY — CLIPPING CAMPAIGN PRICING
   Uses the site's own classes plus creator-clipping.css
   (article-hero, definition-card, check-list, source-note).
   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: "What's the minimum budget for a campaign?", a: 'Campaigns typically start at $5,000, though smaller pilots from $1,000 are possible if the fit is right.' },
  { q: 'Is there a separate management fee on top of the budget?', a: 'No. You pay per verified view — sourcing, review, fraud checks, and reporting are included in the CPM, not billed separately.' },
  { q: 'Who sets the CPM?', a: 'You do, alongside the budget, as part of the brief. Campaigns have delivered as low as $0.60 CPM — actual cost depends on the content and the target.' },
  { q: 'What happens if the budget runs out before the campaign period ends?', a: 'The campaign stops paying once the budget is spent — clips that are already up can keep earning organic views after that, they just stop generating payouts.' },
];

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" />Pricing</div>
          <h1 className="h1">What a campaign <span className="accent-bg">actually costs.</span></h1>
          <p className="lead">
            No management fee on top of the budget, no flat retainer. You pay per
            verified view — that's the whole pricing model.
          </p>
        </div>
      </header>

      <div className="wrap">
        <div className="definition-card">
          <span className="lbl">Quick answer</span>
          <p>
            Campaigns typically start at <b>$5,000</b>, with smaller pilots from
            <b> $1,000</b> possible if the fit is right. You set the budget and the CPM;
            sourcing, review, fraud checks, and reporting are already included in that
            number — there's no separate management fee.
          </p>
        </div>
      </div>

      <section className="section" id="how-it-works">
        <div className="wrap">
          <div className="kicker-row">
            <div>
              <span className="eyebrow"><span className="dotbox" />How the number works</span>
              <h2 className="h2">Budget, CPM, <span className="it">views.</span></h2>
            </div>
          </div>
          <div style={{ height: 24 }} />
          <p className="lead" style={{ maxWidth: 760 }}>
            You set a total budget and a target CPM — cost per thousand verified views.
            The budget divided by the CPM is roughly what you can expect in views, though
            actual delivery depends on the content and how well it performs. Campaigns
            have delivered as low as <b>$0.60 CPM</b> — real, not a promised floor.
            You're never billed for a submission that isn't approved, and fraudulent or
            botted views are caught and clawed back before payout, not counted toward
            what you paid for.
          </p>
        </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">Every budget gets the <span className="it">same service.</span></h2>
            </div>
            <p className="lead">There's no stripped-down tier — the management is in the CPM at every budget level.</p>
          </div>
          <div style={{ height: 48 }} />
          <ul className="check-list" style={{ maxWidth: 640 }}>
            <li><span className="check-mark">&#10003;</span><span>Clipper brief and campaign guidelines, written for you</span></li>
            <li><span className="check-mark">&#10003;</span><span>Clipper sourcing and recruiting</span></li>
            <li><span className="check-mark">&#10003;</span><span>Every submission reviewed before payout</span></li>
            <li><span className="check-mark">&#10003;</span><span>Fraud checks and clawbacks on botted views</span></li>
            <li><span className="check-mark">&#10003;</span><span>Clipper payouts handled end to end</span></li>
            <li><span className="check-mark">&#10003;</span><span>Performance reporting, not a spreadsheet request</span></li>
          </ul>
        </div>
      </section>

      <section className="section tight" 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>
          </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">Get a real number for <span className="it">your budget.</span></h2>
          <p className="lead">No pitch deck, no commitment — just a 30-minute call about what your budget would realistically deliver.</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 />);