/* =============================================================
   BOUNTY — LIVEMAP 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.
   ============================================================= */

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: 'SPEND', word: '$2,500', desc: 'Deployed so far from a $100,000 campaign budget' },
  { n: 'COST', word: '$0.60', desc: 'Cost per install' },
  { n: 'REACH', word: '50M', desc: 'Total views generated across the campaign' },
  { n: 'APPROVED', word: '2.5M', desc: 'Views from approved clips — what the $2,500 spend was billed against' },
  { n: 'VOLUME', word: '4,800', desc: 'Clips posted' },
];

const WHAT_WE_DID = [
  { t: 'We wrote the brief', d: "We took LiveMap's product and assets and turned them into a clipper brief the network could work from." },
  { t: 'We opened it to the network', d: '4,800 clips went live across TikTok, Instagram and YouTube in the first two weeks.' },
  { 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">$0.60 <span className="it">per install.</span></h1>
          <p className="lead">
            How $2,500 of clipping spend delivered app installs at $0.60 each.
          </p>
          <p className="source-note" style={{textAlign:'center'}}>
            LiveMap has a $100,000 campaign budget with us. Everything below came from the first $2,500 of it.
          </p>
        </div>
      </header>

      <section className="section" style={{paddingBottom:0}}>
        <div className="wrap">
          <div className="framework cols-5">
            {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>
              LiveMap came to us with a $100,000 budget and one goal: installs. Clipping was their
              only advertising channel, which made attribution unusually clean — every install in
              the period came through us.
            </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 dark">
        <div className="wrap">
          <div className="kicker-row">
            <div>
              <span className="eyebrow"><span className="dotbox"/>The numbers explained</span>
              <h2 className="h2">Reach and review, <span className="it">not the same number.</span></h2>
            </div>
          </div>
          <div style={{height:32}}/>
          <p style={{fontSize:18,lineHeight:1.65,color:'rgba(236,234,225,0.75)',maxWidth:760}}>
            The campaign generated 50 million views in total across every clip posted. Of those,
            2.5 million came from clips that passed our review — those are the views the $2,500
            spent so far was billed against. The rest came from submissions that didn't meet the campaign guidelines or our quality bar,
            and LiveMap paid nothing for them. That gap is the review process working: the network
            produces enormous reach, and the client funds only the content that meets the standard.
          </p>
        </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 />);