/* =============================================================
   BOUNTY — CLIPPING FOR APP INSTALLS
   Uses the site's own classes plus creator-clipping.css (article-hero,
   definition-card, steps-list, check-list, faq-list).
   FAQ_ITEMS must stay word-for-word in sync with the FAQPage JSON-LD
   in clipping-for-app-installs.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 content-rewards-agency.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 clipping drive app installs?", a: "Yes. LiveMap, a social app for car enthusiasts, used clipping as its only marketing channel, and installs came in at $0.62 each in media spend." },
  { q: "What does an app install clipping campaign cost?", a: "A creator budget paid per verified view plus our management fee, agreed on a call. LiveMap's media spend worked out to $0.62 per install." },
  { q: "How do you make sure views are real?", a: "Every clip is checked before approval. At least 40% of its views must come from the target countries, it needs a minimum engagement rate of 1%, posts under 1,000 views aren't approved, and every clipper sends an analytics screen recording. Botted views, paid boosting and reused clips aren't allowed." },
  { q: "Which platforms?", a: "TikTok and Instagram." },
];

const RESULT = [
  { n: 'LIVEMAP', word: '50M+', desc: 'Total views' },
  { n: 'CAMPAIGN', word: '$100k', desc: 'Campaign budget' },
  { n: 'PER INSTALL', word: '$0.62', desc: 'In media spend' },
];

const SETUP = [
  { t: 'Niche pages', d: 'Clippers post from dedicated niche pages that look like real accounts. For LiveMap, that meant car pages.' },
  { t: 'A natural mention', d: 'The app comes up naturally in pinned comments and the bio link, not as a hard sell.' },
  { t: 'Formats and content banks', d: 'Clippers get formats and content banks to work from.' },
  { t: 'Paid per verified view', d: 'The campaign runs inside Whop Content Rewards, and clippers are paid per verified view.' },
];

const RULES = [
  'At least 40% of each clip\'s views come from the target countries (US and Canada for LiveMap)',
  'A minimum engagement rate of 1%',
  'Posts under 1,000 views aren\'t approved',
  'Every clipper sends an analytics screen recording before approval',
  'No botted views, paid boosting or reused clips',
];

function Page() {
  const [openIdx, setOpenIdx] = React.useState(null);

  return (
    <React.Fragment>
      <style>{`
        .installs-updated { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin: 0 0 22px; }
      `}</style>
      <Nav/>

      <header className="article-hero">
        <div className="wrap">
          <div className="eyebrow"><span className="dotbox"/>App installs</div>
          <h1 className="h1">Clipping for <span className="it">app installs.</span></h1>
          <p className="installs-updated">Updated October 2026</p>
          <p className="lead">
            Short form clips from thousands of creators, paid per verified view, built to drive downloads.
          </p>
        </div>
      </header>

      <section className="section" style={{paddingBottom:0}}>
        <div className="wrap">
          <div className="definition-card" style={{marginTop:0}}>
            <span className="lbl">The result</span>
            <p>
              <b>LiveMap</b>, a social app for car enthusiasts, used clipping as its only marketing
              channel. The campaign drove 50M+ total views on a $100k campaign, with installs at
              $0.62 each in media spend.
            </p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="framework" style={{marginTop:0}}>
            {RESULT.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}}/>
          <a className="trusted-view" href="/livemap">Read the LiveMap case study <span className="arrow">&rarr;</span></a>
        </div>
      </section>

      <section className="section" style={{paddingTop:0}}>
        <div className="wrap">
          <div className="kicker-row">
            <div>
              <span className="eyebrow"><span className="dotbox"/>The setup</span>
              <h2 className="h2">How the campaign <span className="it">is set up.</span></h2>
            </div>
          </div>
          <div style={{height:46}}/>
          <div className="steps-list">
            {SETUP.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 rules</span>
              <h2 className="h2">The rules that keep <span className="it">installs real.</span></h2>
            </div>
          </div>
          <div style={{height:48}}/>
          <ul className="check-list">
            {RULES.map((t) => (
              <li key={t}><span className="check-mark">&#10003;</span><span>{t}</span></li>
            ))}
          </ul>
        </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 installs <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 />);