/* =============================================================
   BOUNTY — CLIPPING AGENCY VS. DIY VS. IN-HOUSE
   Honest, non-self-serving comparison page. Uses the site's own
   classes plus creator-clipping.css (article-hero, definition-card,
   compare-table). 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: "What's the cheapest way to run a clipping campaign?", a: "An open marketplace, upfront — there's no management fee built in. But factor in your own time cost: writing the brief, reviewing submissions, and catching fraud is work someone still has to do." },
  { q: 'Is a managed agency worth the extra cost over doing it myself?', a: "Depends on what your time is worth and whether you have the bandwidth to review submissions and catch fraud yourself. If you don't, the management is the product, not overhead." },
  { q: 'When does it make sense to build a clipping operation in-house?', a: "Mainly at a scale where the ongoing volume justifies the fixed cost of building and staffing it — which is a small number of brands. For everyone else, the setup cost outweighs what you'd save on fees." },
  { q: 'Which model has the least fraud risk?', a: "A managed agency, since submissions are reviewed before payout. Open marketplaces vary — some verify, some don't — so check before you fund a bounty there." },
];

const ROWS = [
  ['Setup time', 'Minutes — fund a bounty and go', 'One day from signed brief to live', 'Weeks to months to build the operation'],
  ['Who writes the brief', 'You', 'We do, from what you send us', 'You'],
  ['Submission review', "Varies by platform — some review, some don't", 'Every submission reviewed before payout', 'Whatever you build'],
  ['Fraud & view verification', 'Varies — check before you fund', 'Checked before a cent moves', 'Whatever you build'],
  ['Your ongoing time', 'High — you review every submission', 'Low — you approve, we run it', 'Highest — it becomes a real team function'],
  ['Cost structure', 'No management fee, pay per view', 'Pay per verified view, management included', 'Fixed cost regardless of volume'],
  ['Best for', 'Brands with the bandwidth to run it themselves', 'Brands who want the reach without running review', 'A small number of brands at real scale'],
];

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" />An Honest Comparison</div>
          <h1 className="h1">Agency, marketplace, or <span className="accent-bg">in-house?</span></h1>
          <p className="lead">
            Three real ways to run a clipping campaign. Each one has a real downside —
            including ours.
          </p>
        </div>
      </header>

      <div className="wrap">
        <div className="definition-card">
          <span className="lbl">Quick answer</span>
          <p>
            There's no universally "best" model — there's a tradeoff between <b>cost</b>,
            <b> your time</b>, and <b>quality control</b>, and each approach lands
            differently on that tradeoff. An open marketplace is cheapest and fastest to
            start but puts the review work on you. A managed agency costs more but takes
            the review and fraud-checking off your plate. Building in-house gives you the
            most control but only pays off at real scale.
          </p>
        </div>
      </div>

      <section className="section" id="compare">
        <div className="wrap">
          <div className="kicker-row">
            <div>
              <span className="eyebrow"><span className="dotbox" />Side by side</span>
              <h2 className="h2">The real <span className="it">tradeoffs.</span></h2>
            </div>
          </div>
          <div style={{ height: 40 }} />
          <div className="compare-table-wrap">
            <table className="compare-table">
              <thead>
                <tr>
                  <th></th>
                  <th>Open marketplace</th>
                  <th className="hl">Managed agency (Bounty)</th>
                  <th>In-house</th>
                </tr>
              </thead>
              <tbody>
                {ROWS.map(([crit, a, b, c]) => (
                  <tr key={crit}>
                    <td className="crit">{crit}</td>
                    <td>{a}</td>
                    <td className="hl">{b}</td>
                    <td>{c}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <section className="section dark">
        <div className="wrap">
          <div className="kicker-row">
            <div>
              <span className="eyebrow"><span className="dotbox" />Where each one actually fits</span>
              <h2 className="h2">Pick the one that matches <span className="it">your bandwidth.</span></h2>
            </div>
          </div>
          <div style={{ height: 56 }} />
          <div className="compare-grid">
            <div className="compare-item">
              <h4>Open marketplace</h4>
              <p>Right if you have someone on your team who can write a real brief and actually review submissions. If you don't, an unreviewed campaign is where fraud and off-brand content slip through.</p>
            </div>
            <div className="compare-item">
              <h4>Managed agency</h4>
              <p>Right if you want the reach without becoming a full-time reviewer. You're paying for the management, not just the clips — that's a real cost, not a hidden one.</p>
            </div>
            <div className="compare-item">
              <h4>In-house</h4>
              <p>Right if you're running enough volume that the fixed cost of building a team and tooling pays for itself. For most brands, that threshold is higher than it looks.</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>
          </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 the managed version <span className="it">explained?</span></h2>
          <p className="lead">No pitch deck, no commitment — just a 30-minute call about which model actually fits.</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 />);