/* =============================================================
   BOUNTY — CONTENT REWARDS AGENCY
   Uses the site's own classes plus creator-clipping.css (article-hero,
   definition-card, compare-table, split-grid, check-list, faq-list).
   FAQ_ITEMS must stay word-for-word in sync with the FAQPage JSON-LD
   in content-rewards-agency.html.
   Nav/Footer mirror app.jsx's exactly (same links, logo, CTA) so
   this page matches index.html's chrome precisely. Self-contained
   otherwise, like every other sub-page — no components.jsx dependency.
   Structure mirrors case-studies.jsx / clipping-campaigns.jsx.
   ============================================================= */

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>
  );
}

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: "Can Bounty run our campaign inside Content Rewards?", a: "Yes. We run it end to end, from the brief to payouts." },
  { q: "What do you handle and what do we handle?", a: "You send the brand info and assets. We do the rest: campaign setup, the brief, clipper recruitment, moderation, fraud review, payouts and reporting." },
  { q: "How do you stop fake views?", a: "Every clip is checked before approval, and clippers send an analytics screen recording as part of that check." },
  { q: "What does it cost?", a: "A creator budget plus our management fee, agreed on a call." },
];

const ROWS = [
  ['Writes the brief', 'You', 'Bounty, from your brand info and assets'],
  ['Recruits clippers', 'You', 'Bounty, from our network'],
  ['Reviews submissions', 'You', 'Bounty, every clip checked before approval'],
  ['Catches botted views', 'You', 'Bounty, in fraud review before approval'],
  ['Handles payouts', 'You', 'Bounty'],
  ['Reports results', 'You', 'Bounty, through a live dashboard and regular updates'],
];

const BOUNTY_HANDLES = [
  'Campaign setup',
  'The brief',
  'Clipper recruitment from our network',
  'Moderation',
  'Fraud review before approval',
  'Payouts',
  'A live dashboard showing views, approved videos, pending submissions and spend',
  'Regular updates',
];

const PROOF = [
  { n: 'LIVEMAP', word: '50M+', desc: 'Total views' },
  { n: 'FANVUE', word: '4.7M', desc: 'Approved views at a $1.28 effective CPM' },
  { n: 'POLITICAL CAMPAIGN', word: '2M+', desc: 'Views in 3 weeks' },
];

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"/>Content Rewards agency</div>
          <h1 className="h1">Content Rewards, <span className="it">run for you.</span></h1>
          <p className="lead">
            Bounty runs Content Rewards campaigns for brands end to end: brief, clipper recruitment,
            moderation, fraud review, payouts and a live campaign dashboard.
          </p>
        </div>
      </header>

      <section className="section" style={{paddingBottom:0}}>
        <div className="wrap">
          <div className="definition-card" style={{marginTop:0}}>
            <span className="lbl">What Content Rewards is</span>
            <p>
              <b>Content Rewards</b> is Whop's clipping marketplace. A brand funds a campaign,
              and clippers post clips and get paid per verified view.
            </p>
          </div>
        </div>
      </section>

      <section className="section" id="compare">
        <div className="wrap">
          <div className="kicker-row">
            <div>
              <span className="eyebrow"><span className="dotbox"/>Yourself or with an agency</span>
              <h2 className="h2">Who does <span className="it">the work.</span></h2>
            </div>
          </div>
          <div style={{height:40}}/>
          <div className="compare-table-wrap">
            <table className="compare-table">
              <thead>
                <tr>
                  <th></th>
                  <th>Running it yourself</th>
                  <th className="hl">With Bounty</th>
                </tr>
              </thead>
              <tbody>
                {ROWS.map(([crit, a, b]) => (
                  <tr key={crit}>
                    <td className="crit">{crit}</td>
                    <td>{a}</td>
                    <td className="hl">{b}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <section className="section dark">
        <div className="wrap">
          <div className="kicker-row">
            <div>
              <span className="eyebrow"><span className="dotbox"/>What Bounty handles</span>
              <h2 className="h2">You send the brand. 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">
                {BOUNTY_HANDLES.map((t) => (
                  <li key={t}><span className="check-mark">&#10003;</span><span>{t}</span></li>
                ))}
              </ul>
            </div>
            <div>
              <h4>You provide</h4>
              <ul className="check-list">
                <li><span className="check-mark">&#10003;</span><span>Brand info and assets</span></li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="kicker-row">
            <div>
              <span className="eyebrow"><span className="dotbox"/>Proof</span>
              <h2 className="h2">Campaigns we've <span className="it">run.</span></h2>
            </div>
          </div>
          <div className="framework" style={{marginTop:40}}>
            {PROOF.map((r) => (
              <div className="framework-cell" key={r.n}>
                <div className="framework-num">{r.n}</div>
                <h3 className="framework-word">{r.word}</h3>
                <p className="framework-desc">{r.desc}</p>
              </div>
            ))}
          </div>
          <div style={{height:32}}/>
          <div style={{display:'flex',gap:24,flexWrap:'wrap'}}>
            <a className="trusted-view" href="/case-studies">See the case studies <span className="arrow">&rarr;</span></a>
            <a className="trusted-view" href="/clipping-for-app-installs">Clipping for app installs <span className="arrow">&rarr;</span></a>
          </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>
          </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">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 />);