/* =============================================================
   BOUNTY — BECOME A CLIPPER
   Creator-facing recruitment page. Uses the site's own classes
   plus creator-clipping.css (article-hero, definition-card,
   steps-list, compare-grid — shared across explainer/SEO pages).
   Self-contained, same pattern as careers.jsx / creator-clipping.jsx.
   ============================================================= */

const PHONE = "+35796441020";
const WHOP_URL = "https://whop.com/bounty-network/";

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: 'Do I need a certain number of followers to become a clipper?', a: "Bring your account as it is — apply on Whop and requirements are confirmed per bounty there, since they can vary by campaign." },
  { q: 'How do I get paid?', a: "You earn based on the verified views your approved posts generate — not a flat fee. Payout terms are confirmed per bounty when you join." },
  { q: 'Do I need to make my own content?', a: "No. Each bounty comes with real source content and a brief — a podcast, a keynote, founder footage. You cut it into short-form clips and post from your own account." },
  { q: 'Can I work on more than one bounty at a time?', a: "Yes. Bounties run independently, so you can clip for more than one active campaign at once." },
  { q: 'Is there a cost to join?', a: "No. Joining the clipper community on Whop is free." },
];

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 Creators</div>
          <h1 className="h1">Become a <span className="accent-bg">clipper.</span></h1>
          <p className="lead">
            Cut clips from real brand campaigns, post them from your own account, and
            get paid for every verified view — no content of your own required.
          </p>
        </div>
      </header>

      <div className="wrap">
        <div className="definition-card">
          <span className="lbl">Quick answer</span>
          <p>
            A <b>clipper</b> turns a brand's existing content — a podcast, a keynote,
            raw founder footage — into short-form clips and posts them from their own
            TikTok, Reels, or YouTube Shorts account. You don't need your own content
            or a big following to start. You need to know how to cut a clip that holds
            attention, and post it.
          </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 to your first <span className="it">payout.</span></h2>
            </div>
            <p className="lead">No pitch, no application fee — just an account and an eye for what holds attention.</p>
          </div>
          <div style={{ height: 56 }} />
          <div className="steps-list">
            <div className="step-row">
              <div className="step-row-n">01</div>
              <h3>Join on Whop</h3>
              <p>Apply to the clipper community — free, takes a couple of minutes.</p>
            </div>
            <div className="step-row">
              <div className="step-row-n">02</div>
              <h3>Pick a bounty</h3>
              <p>Browse open campaigns. Each one comes with real source content and clear guidelines.</p>
            </div>
            <div className="step-row">
              <div className="step-row-n">03</div>
              <h3>Cut and post</h3>
              <p>Turn the source content into short-form clips and post them from your own account.</p>
            </div>
            <div className="step-row">
              <div className="step-row-n">04</div>
              <h3>Get paid per view</h3>
              <p>Once a post is approved, you earn based on the verified views it generates.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section dark">
        <div className="wrap">
          <div className="kicker-row">
            <div>
              <span className="eyebrow"><span className="dotbox" />Why clip with Bounty</span>
              <h2 className="h2">You're not starting from <span className="it">zero.</span></h2>
            </div>
          </div>
          <div style={{ height: 56 }} />
          <div className="compare-grid">
            <div className="compare-item">
              <h4>Real content to work with</h4>
              <p>Every bounty ships with real source material and a brief — no filming, no scripting, no waiting on inspiration.</p>
            </div>
            <div className="compare-item">
              <h4>Paid on performance, not promises</h4>
              <p>You earn based on verified views your posts actually generate, not a flat rate for showing up.</p>
            </div>
            <div className="compare-item">
              <h4>A real community, not a Discord you never open</h4>
              <p>Active bounties, guidelines, and support live in one place — the clipper community Bounty actually runs.</p>
            </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">What people ask before they apply.</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">Join the clipper <span className="it">community.</span></h2>
          <p className="lead">Free to join. Pick a bounty, cut your first clip, get paid on what it earns.</p>
          <div style={{ height: 8 }} />
          <a className="btn btn-primary btn-lg" href={WHOP_URL} target="_blank" rel="noreferrer">
            <span className="dot" />Join on Whop<span className="arrow">&rarr;</span>
          </a>
        </div>
      </section>

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

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