/* =============================================================
   BOUNTY — BOUNTY CLIPPING (/clipping)
   Clipper-facing landing page. Uses the site's own classes plus
   creator-clipping.css (article-hero, steps-list, faq-list).
   FAQ_ITEMS must stay word-for-word in sync with the FAQPage JSON-LD
   in clipping.html. The FAQ is deliberately not an accordion: every
   question is a real <h3> and every answer stays visible.
   Nav/Footer mirror clipping-for-app-installs.jsx. Self-contained,
   like every other sub-page — no components.jsx dependency.
   ============================================================= */

const CALENDLY = "https://calendly.com/cyrusgrecobusiness/30min";
const DISCORD_INVITE = "https://discord.gg/RFy8rrCE3G";
const DISCORD_SERVER_PAGE = "https://discord.com/servers/bounty-1504048640573046885";

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 — swap to the
              light wordmark so the logo stays visible against 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 STEPS = [
  "Join the Bounty Clipping Discord and pick a campaign",
  "Clip the content and post it on your TikTok, Instagram Reels or YouTube Shorts",
  "Submit your clips so views get tracked",
  "Get paid every week",
];

const FAQ_ITEMS = [
  { q: "Is clipping legit?", a: "Yes. Brands pay for views on short form clips of their content. With Bounty you only get paid for real, tracked views, and you never pay anything to join." },
  { q: "How much can you make clipping?", a: "Rates are usually $1 to $5 per 1,000 views. What you earn depends on how many clips you post and how many views they get." },
  { q: "Do I need followers to start clipping?", a: "No. You can start with a brand new account." },
  { q: "Do I need editing skills?", a: "No. Beginners are welcome, and we help you learn on our calls." },
  { q: "How do clippers get paid?", a: "Every week, for clips that meet the campaign's view minimum (usually 1,000 views)." },
  { q: "Where can I find clipping campaigns?", a: "In the Bounty Clipping Discord. Campaigns run through our Whop." },
];

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

      <header className="article-hero">
        <div className="wrap">
          <div className="eyebrow"><span className="dotbox"/>Bounty Clipping</div>
          <h1 className="h1">Get paid to clip with <span className="accent-bg">Bounty</span></h1>
          <p className="lead">
            Bounty Clipping is a community of thousands of clippers getting paid to post short form content. Join paid clipping campaigns from brands, streamers and creators.
          </p>
          <div style={{height:32}}/>
          <a className="btn btn-accent btn-lg" href={DISCORD_INVITE} target="_blank" rel="noreferrer">
            Join the Discord<span className="arrow">&rarr;</span>
          </a>
        </div>
      </header>

      <section className="section" id="how">
        <div className="wrap">
          <span className="eyebrow"><span className="dotbox"/>How it works</span>
          <h2 className="h2">How clipping with Bounty <span className="it">works</span></h2>
          <div style={{height:56}}/>
          <ol className="steps-list" style={{listStyle:'none',margin:0,padding:0}}>
            {STEPS.map((step, i) => (
              <li className="step-row" key={step}>
                <div className="step-row-n">{String(i + 1).padStart(2, '0')}</div>
                <p style={{fontSize:19,color:'var(--ink)'}}>{step}</p>
              </li>
            ))}
          </ol>
        </div>
      </section>

      <section className="section dark" id="earnings">
        <div className="wrap">
          <span className="eyebrow"><span className="dotbox"/>Earnings</span>
          <h2 className="h2">How much do clippers <span className="it">earn?</span></h2>
          <div style={{height:32}}/>
          <p className="lead">
            Rates are usually $1 to $5 per 1,000 views depending on the campaign. Most campaigns need a clip to reach at least 1,000 views before it counts. Payouts happen every week.
          </p>
        </div>
      </section>

      <section className="section" id="who">
        <div className="wrap">
          <span className="eyebrow"><span className="dotbox"/>Who it's for</span>
          <h2 className="h2">Who can <span className="it">join?</span></h2>
          <div style={{height:32}}/>
          <p className="lead">
            You don't need followers or editing experience. Many of our clippers started from zero. We run calls every couple of days to help beginners get started, and do daily giveaways for the best clippers.
          </p>
        </div>
      </section>

      <section className="section dark" id="results">
        <div className="wrap">
          <span className="eyebrow"><span className="dotbox"/>Results</span>
          <h2 className="h2">Results so <span className="it">far</span></h2>
          <div style={{height:32}}/>
          <p className="lead">
            Over 100 million views generated and over $100,000 paid out to creators.
          </p>
        </div>
      </section>

      <section className="section" id="faq">
        <div className="wrap">
          <span className="eyebrow"><span className="dotbox"/>FAQ</span>
          <h2 className="h2">Frequently asked <span className="it">questions</span></h2>
          <div className="faq-list">
            {FAQ_ITEMS.map((it) => (
              <div className="faq-item" key={it.q}>
                <h3 className="faq-q" style={{margin:0,paddingBottom:10,cursor:'default'}}>{it.q}</h3>
                <div className="faq-a-inner">
                  <p style={{paddingInline:4}}>{it.a}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section dark" id="join">
        <div className="wrap">
          <a className="btn btn-accent btn-lg" href={DISCORD_INVITE} target="_blank" rel="noreferrer">
            Join Bounty Clipping on Discord<span className="arrow">&rarr;</span>
          </a>
          <div style={{height:24}}/>
          <a href={DISCORD_SERVER_PAGE} target="_blank" rel="noreferrer" style={{color:'inherit',textDecoration:'underline',textUnderlineOffset:3}}>
            See our Discord server page
          </a>
          <div style={{height:16}}/>
          <a href="/become-a-clipper" style={{color:'inherit',textDecoration:'underline',textUnderlineOffset:3}}>
            New to clipping? Read our full guide on how to become a clipper
          </a>
        </div>
      </section>

      <Footer/>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<Page />);