/* =============================================================
   BOUNTY — TWITCH CLIPPING CAMPAIGNS
   Brand-facing page for Twitch/streaming integrations. Uses the
   site's own classes plus creator-clipping.css (article-hero,
   definition-card, steps-list, compare-grid). Self-contained.
   ============================================================= */

const PHONE = "+35796441020";
const BOOK_URL = "https://calendly.com/cyrusgrecobusiness/30min";

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", on, { passive: true });
    on();
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <nav className={`nav${scrolled ? " scrolled" : ""}`}>
      <div className="wrap nav-inner">
        <a href="/" className="brand"><span>Bounty</span></a>
        <div className="nav-links">
          <a href="/#how">How it works</a>
          <a href="/#trusted">Why Bounty</a>
          <a href="/#dashboard">For Brands</a>
        </div>
      </div>
    </nav>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap foot-inner">
        <div className="left">
          <div className="brand"><span>Bounty</span></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>
          <span className="foot-divider">·</span>
          <a href={"tel:" + PHONE} 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: 'Do you clip during the stream or after it ends?', a: "After — you send us the VOD or the specific segment, and clippers work from that. We don't clip live streams in real time." },
  { q: 'Does this work for a one-off integration, or only recurring streams?', a: "Either. A single sponsored segment is enough source content for a bounty — you don't need an ongoing streaming relationship to run a campaign." },
  { q: "Can clips include the streamer's face and voice?", a: "Yes, if the streamer has approved it as part of the source content. You set what's in scope in the brief." },
  { q: 'Is this only for gaming brands?', a: "No. Any brand with a Twitch integration — gaming, consumer, crypto, whatever the sponsorship was — can clip it. The content just needs to have a real moment worth cutting." },
  { q: 'How much does a Twitch clipping campaign cost?', a: "Same model as any Bounty campaign: campaigns typically start at $5,000, with smaller pilots from $1,000 possible. You set the budget and only pay for verified views." },
];

const SOURCE_TAGS = ['Sponsored segment', 'Product integration', 'Giveaway moment', 'Reaction clip', 'Q&A highlight', 'Announcement'];

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

  return (
    <React.Fragment>
      <Nav />

      <header className="article-hero">
        <div className="wrap">
          <div className="eyebrow"><span className="dotbox" />For Streaming & Gaming Brands</div>
          <h1 className="h1">Twitch clipping <span className="accent-bg">campaigns.</span></h1>
          <p className="lead">
            Your stream integration lived for one broadcast. Clip it, and it lives on
            TikTok, Reels, and YouTube Shorts too.
          </p>
        </div>
      </header>

      <div className="wrap">
        <div className="definition-card">
          <span className="lbl">Quick answer</span>
          <p>
            A <b>Twitch clipping campaign</b> turns a sponsored segment, integration,
            or standout stream moment into short-form clips that creators post across
            TikTok, Reels, and YouTube Shorts. The moment a Twitch audience already saw
            gets a second life on the platforms built for discovery — and you pay per
            verified view, same as any Bounty campaign.
          </p>
        </div>
      </div>

      <section className="section" id="how">
        <div className="wrap">
          <div className="kicker-row">
            <div>
              <span className="eyebrow"><span className="dotbox" />How it works</span>
              <h2 className="h2">One VOD, hundreds of <span className="it">clips.</span></h2>
            </div>
            <p className="lead">Same mechanics as every Bounty campaign — the source is just your stream.</p>
          </div>
          <div style={{ height: 56 }} />
          <div className="steps-list">
            <div className="step-row">
              <div className="step-row-n">01</div>
              <h3>Send the VOD</h3>
              <p>The sponsored segment, integration, or full stream — whatever has the moment worth cutting.</p>
            </div>
            <div className="step-row">
              <div className="step-row-n">02</div>
              <h3>We launch the bounty</h3>
              <p>Clippers discover it and start cutting short-form clips from the segment you approved.</p>
            </div>
            <div className="step-row">
              <div className="step-row-n">03</div>
              <h3>Clips go up everywhere else</h3>
              <p>TikTok, Reels, YouTube Shorts — platforms your Twitch audience isn't already watching on.</p>
            </div>
            <div className="step-row">
              <div className="step-row-n">04</div>
              <h3>You pay per verified view</h3>
              <p>No flat sponsorship add-on fee. The budget spends exactly as far as the clips actually reach.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section tight">
        <div className="wrap">
          <div className="kicker-row">
            <div>
              <span className="eyebrow"><span className="dotbox" />What works as source</span>
              <h2 className="h2">If it's a real moment, it's <span className="it">cuttable.</span></h2>
            </div>
          </div>
          <div style={{ height: 32 }} />
          <div className="flex" style={{ gap: 10, flexWrap: 'wrap' }}>
            {SOURCE_TAGS.map(t => (<span className="chip" key={t}>{t}</span>))}
          </div>
        </div>
      </section>

      <section className="section dark">
        <div className="wrap">
          <div className="kicker-row">
            <div>
              <span className="eyebrow"><span className="dotbox" />Why it matters</span>
              <h2 className="h2">Twitch views don't <span className="it">travel.</span></h2>
            </div>
          </div>
          <div style={{ height: 56 }} />
          <div className="compare-grid">
            <div className="compare-item">
              <h4>A VOD is a dead end</h4>
              <p>Once the stream ends, the integration lives in a VOD almost nobody scrolls back to. Clipping gives it a second, more active life.</p>
            </div>
            <div className="compare-item">
              <h4>Reach past the Twitch audience</h4>
              <p>TikTok, Reels, and Shorts reach people who were never watching the stream at all — pure incremental reach, not overlap.</p>
            </div>
            <div className="compare-item">
              <h4>The moment is already proven</h4>
              <p>You're not guessing what content might work. You already saw the chat react to it live.</p>
            </div>
          </div>
        </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>
            <p className="lead">What brands ask before their first Twitch campaign.</p>
          </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">Give your next integration a <span className="it">second life.</span></h2>
          <p className="lead">No pitch deck, no commitment — just a 30-minute call about the segment you want to clip.</p>
          <div style={{ height: 8 }} />
          <a className="btn btn-primary btn-lg" href={BOOK_URL} 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 />);