/* =============================================================
   BOUNTY — FANVUE CASE STUDY
   Uses the site's own classes plus creator-clipping.css
   (article-hero, definition-card, steps-list, framework.cols-4).
   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 livemap.jsx / political.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="/#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="/#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>
          <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>
  );
}

const RESULTS = [
  { n: 'REACH', word: '10M', desc: 'Views delivered across two campaigns' },
  { n: 'SPEND', word: '$6,000', desc: 'Total campaign spend' },
  { n: 'VOLUME', word: '5,000+', desc: 'Clips posted by the network' },
  { n: 'CPM', word: '$0.60', desc: 'Effective cost per thousand views' },
];

const WHAT_WE_DID = [
  { t: 'We wrote the brief', d: 'Fanvue supplied the product and the assets. We turned them into a brief the clipper network could work from.' },
  { t: 'We ran it across three platforms', d: '5,000+ clips went live across TikTok, Instagram and YouTube from independent creator accounts.' },
  { t: 'We reviewed every submission', d: 'Each clip was checked against the guidelines before payment. Only approved clips were billed.' },
];

function Page() {
  return (
    <React.Fragment>
      <Nav/>

      <header className="article-hero">
        <div className="wrap">
          <div className="eyebrow"><span className="dotbox"/>Case study</div>
          <h1 className="h1">Two campaigns, <span className="it">ten million</span> views.</h1>
          <p className="lead">
            How Fanvue used clipping to reach cold audiences at scale across TikTok, Instagram and YouTube.
          </p>
        </div>
      </header>

      <section className="section" style={{paddingBottom:0}}>
        <div className="wrap">
          <div className="framework cols-4">
            {RESULTS.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>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="definition-card" style={{marginTop:0}}>
            <span className="lbl">The setup</span>
            <p>
              Fanvue came to us to put their platform in front of audiences who had never heard of
              it. Two campaigns, run back to back, built around cold reach rather than retargeting
              an existing following.
            </p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="kicker-row">
            <div>
              <span className="eyebrow"><span className="dotbox"/>What we did</span>
              <h2 className="h2">Brief to payout, <span className="it">end to end.</span></h2>
            </div>
          </div>
          <div style={{height:46}}/>
          <div className="steps-list">
            {WHAT_WE_DID.map((s, i) => (
              <div className="step-row" key={s.t}>
                <div className="step-row-n">{String(i+1).padStart(2,'0')}</div>
                <h3>{s.t}</h3>
                <p>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="eyebrow"><span className="dotbox"/>Next step</div>
          <h2 className="h2">Want numbers <span className="it">like these?</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 />);