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

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: 'CPM', word: '$0.80', desc: 'Effective CPM, against a $2 target' },
  { n: 'REACH', word: '2M', desc: 'Views delivered on the main campaign' },
  { n: 'SPEND', word: '$1,600', desc: 'Campaign spend' },
  { n: 'TURNAROUND', word: '10 days', desc: 'Turnaround on a second campaign, start to finish' },
];

const WHY_DIFFERENT = [
  { t: 'We move fast', d: 'Political content dates quickly, so campaigns are built to deliver inside the window that matters, not after it closes.' },
  { t: 'Guidelines are locked down', d: 'Approved footage, required disclosures and restricted topics are set before anything goes out — tighter than a standard campaign, given how sensitive political content is.' },
  { t: 'Every clip is reviewed', d: 'Each submission is checked against the guidelines before payment. Nothing goes out, and nothing gets paid, without review.' },
];

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">Live in <span className="it">ten days,</span> during an active race.</h1>
          <p className="lead">
            Two political campaigns run end to end, under the time pressure only an election creates.
          </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" style={{paddingBottom:0}}>
        <div className="wrap">
          <div className="definition-card" style={{marginTop:0}}>
            <span className="lbl">The main campaign</span>
            <p>
              A $1,600 budget delivered 2 million views at an effective CPM of $0.80, against a $2
              target. Political content moves fast and dates quickly, so the campaign was built to
              deliver inside the window that mattered.
            </p>
          </div>
        </div>
      </section>

      <section className="section" style={{paddingTop:0}}>
        <div className="wrap">
          <div className="definition-card" style={{marginTop:0}}>
            <span className="lbl">The ten day campaign</span>
            <p>
              A second political client came to us with ten days before their window closed. We
              wrote the brief, opened the campaign and delivered 640,000 views inside that window,
              with 500+ clips posted.
            </p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="kicker-row">
            <div>
              <span className="eyebrow"><span className="dotbox"/>Why political is different</span>
              <h2 className="h2">Why political <span className="it">is different.</span></h2>
            </div>
          </div>
          <div style={{height:46}}/>
          <div className="steps-list">
            {WHY_DIFFERENT.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 />);