/* =============================================================
   BOUNTY — CASE STUDIES INDEX
   Uses the site's own classes plus creator-clipping.css (article-hero).
   Cards reuse the homepage's .trusted-card markup from app.jsx so
   they look identical to the "Trusted by" section.
   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 fanvue.jsx / 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="/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>
  );
}

const CASES = [
  { brand: 'LiveMap',         bg: '#D24D56', fg: '#FFFFFF', logo: 'livemap.png', tags: 'Mobile app',       stat: '$0.62 per install',   sub: '3.2M approved views from the first $2,500 of a $100,000 campaign budget.', link: '/livemap' },
  { brand: 'Fanvue',          bg: '#000000', fg: '#FFFFFF', logo: 'fanvue.png',  tags: 'Creator platform', stat: '4.7M approved views', sub: 'Two campaigns, $1.28 effective CPM against a $2 target.', link: '/fanvue' },
  { brand: 'Political party', bg: '#003C7E', fg: '#FFFFFF',                      tags: 'Political',        stat: '$0.80 effective CPM', sub: '2M views on $1,600, plus a second campaign run start to finish in 10 days.', link: '/political' },
];

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

      <header className="article-hero">
        <div className="wrap">
          <div className="eyebrow"><span className="dotbox"/>Case studies</div>
          <h1 className="h1">Real campaigns, <span className="it">real numbers.</span></h1>
          <p className="lead">
            Every figure below comes from the client's campaign data. Spend shown is media spend, our fee excluded.
          </p>
        </div>
      </header>

      <section className="section">
        <div className="wrap">
          <div className="trusted-grid">
            {CASES.map((c) => (
              <a className="trusted-card has-case-study" key={c.link} href={c.link}>
                <div className="trusted-card-visual" style={{background: c.bg}}>
                  <span className="chip green trusted-chip">Case study</span>
                  {c.logo ? (
                    <img src={c.logo} alt={c.brand} className="trusted-logo" onError={(e) => { e.currentTarget.style.display = 'none'; e.currentTarget.nextElementSibling.style.display = 'flex'; }}/>
                  ) : null}
                  <div className="trusted-logo-fallback" style={{display: c.logo ? 'none' : 'flex', color: c.fg}}>{c.brand}</div>
                </div>
                <div className="trusted-card-meta">
                  <div className="ttl">{c.brand}</div>
                  <div className="tags">{c.tags}</div>
                  <div className="stat">{c.stat}</div>
                  <p className="sub">{c.sub}</p>
                  <span className="trusted-view">View case study <span className="arrow">&rarr;</span></span>
                </div>
              </a>
            ))}
          </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 />);