/* APEX CLIPS — For Creators / Publishers / Brands & Agencies */

function FeatureRow({ items }) {
  return (
    <div className="feature-grid">
      {items.map(([t, b], i) => (
        <Reveal key={t} delay={(i % 3) * 70} className="card feature-card">
          <span className="feature-num mono">{String(i + 1).padStart(2, "0")}</span>
          <h3 className="feature-title">{t}</h3>
          <p className="feature-text">{b}</p>
        </Reveal>
      ))}
    </div>
  );
}

function FAQ({ items }) {
  const [open, setOpen] = useState(0);
  return (
    <div className="faq">
      {items.map(([q, a], i) => {
        const isOpen = open === i;
        return (
          <div key={q} className="faq-item" data-open={isOpen}>
            <button type="button" className="faq-q" aria-expanded={isOpen}
              onClick={() => setOpen(isOpen ? -1 : i)}>
              <span>{q}</span>
              <span className="faq-mark" aria-hidden="true">{isOpen ? "−" : "+"}</span>
            </button>
            <div className="faq-a-wrap"><div className="faq-a">{a}</div></div>
          </div>
        );
      })}
    </div>
  );
}

function AudienceHero({ eyebrow, title, sub, cat, primary, secondary }) {
  return (
    <section className="aud-hero">
      <Thumb cat={cat} className="aud-hero-bg" kenBurns />
      <div className="aud-hero-veil"></div>
      <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
        <Eyebrow>{eyebrow}</Eyebrow>
        <h1 className="display aud-hero-h">{title}</h1>
        <p className="aud-hero-sub">{sub}</p>
        <div className="hero-cta" style={{ marginTop: 30 }}>
          <Link to={primary[1]} className="btn btn--accent btn--lg">{primary[0]} →</Link>
          <Link to={secondary[1]} className="btn btn--ghost btn--lg">{secondary[0]}</Link>
        </div>
      </div>
    </section>
  );
}

function StatBand({ stats, bg }) {
  return (
    <section className="section--tight" style={{ background: bg ? "var(--bg-2)" : "transparent", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="wrap stat-band">
        {stats.map((s) => <Stat key={s[1]} value={s[0]} label={s[1]} />)}
      </div>
    </section>
  );
}

/* ---- FOR CREATORS ---- */
function ForCreators() {
  return (
    <Page>
      <AudienceHero
        eyebrow="For creators"
        title={<>Creators keep ownership.<br />We do the licensing work.</>}
        sub="You shot something unbelievable. We turn it into recurring income, pitching your footage to a global network of media, brands and producers, while you keep your copyright."
        cat="extreme" primary={["Submit Your Clip", "/submit"]} secondary={["How earnings work", "/pricing"]} />
      <StatBand stats={[["70%", "Top creator rev share"], ["48h", "Avg. review time"], ["Global", "Buyer network"], ["Monthly", "Payouts"]]} />
      <section className="section">
        <div className="wrap">
          <div style={{ maxWidth: 680 }}>
            <Eyebrow>Why creators choose Apex Clips</Eyebrow>
            <h2 className="display section-h2" style={{ marginTop: 16 }}>You made it. You should own it, and earn from it.</h2>
          </div>
          <FeatureRow items={[
            ["Keep your copyright", "You always remain the owner. We license on your behalf under terms you approve. Never a buyout unless you choose one."],
            ["Earn from every sale", "Each time your clip licenses, you earn your share. Popular footage can sell again and again."],
            ["Transparent reporting", "See every licence, buyer type and payout in your dashboard. No black box."],
            ["Global buyer network", "Newsrooms, social publishers, agencies and producers around the world."],
            ["Rights protection support", "We monitor for misuse and chase unlicensed use of your footage on your behalf."],
            ["Fair revenue share", "Clear, generous splits that scale with your contribution, up to 70% for top contributors."],
          ]} />
        </div>
      </section>
      <section className="section" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)" }}>
        <div className="wrap">
          <div className="kicker-row"><div><Eyebrow>From clip to cash</Eyebrow><h2 className="display section-h2" style={{ marginTop: 16 }}>Four steps. Mostly us.</h2></div></div>
          <div className="how-grid">
            {[["Upload your clip", "From your phone, in minutes. Raw or edited."], ["We verify & package", "Rights checked, context added, formats prepped."], ["We pitch & license", "Your footage goes to our buyer network."], ["You get paid", "Your share, every time it licenses."]].map(([t, b], i) => (
              <Reveal key={t} delay={i * 70} className="how-step"><span className="how-num display">{String(i + 1).padStart(2, "0")}</span><h3 className="how-title">{t}</h3><p className="how-text">{b}</p></Reveal>
            ))}
          </div>
        </div>
      </section>
      <section className="section">
        <div className="wrap" style={{ maxWidth: 820 }}>
          <Eyebrow>Creator FAQ</Eyebrow>
          <h2 className="display section-h2" style={{ marginTop: 16, marginBottom: 32 }}>Good questions.</h2>
          <FAQ items={[
            ["Do I lose ownership of my clip?", "No. You keep your copyright at all times. You grant Apex Clips the right to license it on your behalf under terms you approve. You can set it to non-exclusive or exclusive, and withdraw unlicensed clips anytime."],
            ["How much do I earn?", "You earn a revenue share on every licence, up to 70% for top contributors. Earnings depend on how, where and how widely your footage is used."],
            ["What if people are in my clip?", "That's common. Our team helps you sort any talent or property releases needed. It doesn't block your submission; it just affects which usages we can clear."],
            ["When do I get paid?", "Payouts run monthly once your balance passes the threshold, with full reporting on every licence behind it."],
          ]} />
        </div>
      </section>
      <CTASplit />
    </Page>
  );
}

/* ---- FOR PUBLISHERS ---- */
function ForPublishers() {
  return (
    <Page>
      <AudienceHero
        eyebrow="For media & publishers"
        title={<>Feed the algorithm.<br />Stay on the right side of rights.</>}
        sub="Daily social-ready clips with cleared rights and editorial context, built for newsrooms, social desks and channels that publish at the speed of the feed."
        cat="travel" primary={["License Footage", "/license"]} secondary={["Browse the library", "/library"]} />
      <StatBand stats={[["Daily", "Fresh cleared clips"], ["6", "Platform formats"], ["48h", "Avg. clearance"], ["Rev-share", "Options available"]]} bg />
      <section className="section">
        <div className="wrap">
          <div style={{ maxWidth: 680 }}>
            <Eyebrow>Built for social teams &amp; newsrooms</Eyebrow>
            <h2 className="display section-h2" style={{ marginTop: 16 }}>Publish fast, without the rights headache.</h2>
          </div>
          <FeatureRow items={[
            ["Social-first formats", "Every clip available 9:16, 1:1 and 16:9, ready for Reels, Shorts, Stories and Snap."],
            ["Cleared for agreed usage", "Editorial or commercial, defined per licence so your rights team can sign off fast."],
            ["Editorial context included", "Who, what, where, when: captions and notes attached to every clip."],
            ["Fast preview & quoting", "Watermarked previews and quick quotes; no lengthy back-and-forth."],
            ["Bulk & revenue-share", "Volume deals and rev-share arrangements for high-output channels."],
            ["Fresh clips added weekly", "A constant feed of new, verified adventure and travel moments."],
          ]} />
        </div>
      </section>
      <RightsReassure />
      <section className="section">
        <div className="wrap" style={{ maxWidth: 820 }}>
          <Eyebrow>Publisher FAQ</Eyebrow>
          <h2 className="display section-h2" style={{ marginTop: 16, marginBottom: 32 }}>What rights teams ask.</h2>
          <FAQ items={[
            ["Is this footage actually cleared?", "Yes. Every clip is traced to the original creator, verified for ownership, and flagged with its release status. Editorial-only clips are clearly labelled and separated from commercially-cleared footage."],
            ["Can we use it in monetised content?", "Where monetization rights are available, yes, it's marked on each clip and confirmed in your licence."],
            ["How fast can we turn around a licence?", "Most are quoted same-day; clearance averages 48 hours. For breaking, talk to us and we'll prioritise."],
            ["Do you offer volume deals?", "Yes, bulk licences and revenue-share arrangements for channels publishing daily."],
          ]} />
        </div>
      </section>
      <CTASplit />
    </Page>
  );
}

/* ---- FOR BRANDS ---- */
function ForBrands() {
  return (
    <Page>
      <AudienceHero
        eyebrow="For brands & agencies"
        title={<>Authentic adventure.<br />Cleared for campaigns.</>}
        sub="Real travel and adventure footage from real creators, cleared for paid social, brand storytelling and campaigns. The opposite of stock; the right side of rights."
        cat="drone" primary={["License Footage", "/license"]} secondary={["Send a brief", "/license"]} />
      <StatBand stats={[["Commercial", "Use cleared"], ["Paid media", "Rights available"], ["Worldwide", "Territories"], ["Exclusive", "Options"]]} />
      <section className="section">
        <div className="wrap">
          <div style={{ maxWidth: 680 }}>
            <Eyebrow>Why brands choose Apex Clips</Eyebrow>
            <h2 className="display section-h2" style={{ marginTop: 16 }}>Stock looks like stock. This doesn't.</h2>
          </div>
          <FeatureRow items={[
            ["Authentic, not staged", "Footage shot by real athletes and travellers, the texture audiences actually trust."],
            ["Cleared for commercial use", "Paid media, brand and campaign rights defined and confirmed per licence."],
            ["Exclusive options", "Lock footage to your campaign with exclusive or category-exclusive licences."],
            ["Paid-media ready", "Cleared for boosting and paid social, with talent releases where needed."],
            ["Brief our content desk", "Need a specific shot? We source, verify and clear to brief, usually in 48h."],
            ["Worldwide territories", "License for the regions your campaign runs, for the term you need."],
          ]} />
        </div>
      </section>
      <section className="section bespoke" style={{ borderTop: "1px solid var(--line)" }}>
        <Thumb cat="outdoor" className="bespoke-bg" />
        <div className="bespoke-veil"></div>
        <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
          <div style={{ maxWidth: 720 }}>
            <Eyebrow>Bespoke sourcing</Eyebrow>
            <h2 className="display section-h2" style={{ marginTop: 16 }}>Brief it. We'll source it.</h2>
            <p className="section-lead" style={{ color: "var(--ink-2)" }}>Heli-skiing fails, Bali drone shots, ultra-running POV, safari encounters, festival travel. Tell us the shot and our team sources, verifies and clears options for your campaign.</p>
            <Link to="/license" className="btn btn--accent btn--lg" style={{ marginTop: 26 }}>Send a Brief →</Link>
          </div>
        </div>
      </section>
      <CTASplit />
    </Page>
  );
}

/* shared bits */
function RightsReassure() {
  return (
    <section className="section" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)" }}>
      <div className="wrap">
        <div style={{ maxWidth: 640 }}>
          <Eyebrow>Not random viral content</Eyebrow>
          <h2 className="display section-h2" style={{ marginTop: 16 }}>Verified, traced, and documented.</h2>
          <p className="section-lead">This isn't scraped or re-uploaded viral footage. Every clip is sourced from its original creator with a clear paper trail your legal team can rely on.</p>
        </div>
        <div className="rights-grid">
          {[["Copyright checked", "Provenance traced to the creator."], ["Creator verified", "Identity & ownership confirmed."], ["Release status flagged", "Talent & property releases marked."], ["Usage terms defined", "Platforms, territory, term spelled out."]].map(([t, b], i) => (
            <Reveal key={t} delay={(i % 4) * 60} className="rights-card card"><span className="rights-check">✓</span><h3 className="rights-title">{t}</h3><p className="rights-text">{b}</p></Reveal>
          ))}
        </div>
        <Link to="/rights" className="arrow-link" style={{ marginTop: 32, display: "inline-flex" }}>The full verification process →</Link>
      </div>
    </section>
  );
}

function CTASplit() {
  return (
    <section className="section">
      <div className="wrap final-cta">
        <Link to="/submit" className="final-card">
          <Thumb cat="extreme" className="final-bg" /><div className="final-veil"></div>
          <div className="final-inner"><span className="mono final-tag">For creators</span><h3 className="display final-h">Got footage?</h3><p className="final-text">Submit your clip and start earning.</p><span className="btn btn--ghost btn--lg">Submit Your Clip →</span></div>
        </Link>
        <Link to="/license" className="final-card">
          <Thumb cat="travel" className="final-bg" /><div className="final-veil"></div>
          <div className="final-inner"><span className="mono final-tag">For buyers</span><h3 className="display final-h">Need footage?</h3><p className="final-text">Request verified, rights-cleared UGC.</p><span className="btn btn--accent btn--lg">License Footage →</span></div>
        </Link>
      </div>
    </section>
  );
}

/* ---- FOR TV & PRODUCTION ---- */
function ForTV() {
  return (
    <Page>
      <AudienceHero
        eyebrow="For TV & production"
        title={<>Broadcast-ready footage,<br />cleared and contextualised.</>}
        sub="Verified real-world travel, sport and adventure footage for factual, documentary and clip-show production, with the location, date and rights context your compliance team needs."
        cat="weather" primary={["License Footage", "/license"]} secondary={["Talk to licensing", "/contact"]} />
      <StatBand stats={[["Broadcast", "& OTT licences"], ["4K", "Source masters"], ["Editorial", "Context supplied"], ["48h", "Avg. clearance"]]} bg />
      <section className="section">
        <div className="wrap">
          <div style={{ maxWidth: 680 }}>
            <Eyebrow>Built for factual &amp; editorial</Eyebrow>
            <h2 className="display section-h2" style={{ marginTop: 16 }}>Real footage that clears compliance.</h2>
          </div>
          <FeatureRow items={[
            ["Broadcast & OTT licensing", "Editorial and factual licences for TV, documentary, OTT and streaming, scoped to your term and territory."],
            ["Archive & sourcing", "Reach into the verified archive, or brief our desk to source a specific moment, era or location."],
            ["Provenance & context", "Who filmed it, where and when, with the chain of verification your compliance team expects."],
            ["Clean delivery specs", "Clean 4K masters in ProRes or H.264, plus social cut-downs where you need them."],
            ["Clip & format shows", "Real, unscripted moments for factual entertainment, clip shows and reality formats."],
            ["Talent & releases", "Release status flagged per clip; we gather what's missing wherever we can."],
          ]} />
        </div>
      </section>
      <RightsReassure />
      <section className="section">
        <div className="wrap" style={{ maxWidth: 820 }}>
          <Eyebrow>Production FAQ</Eyebrow>
          <h2 className="display section-h2" style={{ marginTop: 16, marginBottom: 32 }}>What production teams ask.</h2>
          <FAQ items={[
            ["Can we licence for broadcast and OTT?", "Yes. We scope editorial and factual licences for TV, documentary, OTT and streaming by term and territory, with clean 4K masters delivered on clearance."],
            ["Do you supply context for compliance?", "Every clip carries location, date, creator provenance and rights/release status, so your compliance and legal teams can sign off."],
            ["Can you source to a brief?", "Yes. Our content desk sources, verifies and clears footage to a brief, returning options with their full rights profile."],
            ["What formats do you deliver?", "Clean 4K masters (ProRes or H.264) plus social-ready cut-downs (9:16, 1:1, 16:9) where you need them."],
          ]} />
        </div>
      </section>
      <CTASplit />
    </Page>
  );
}

Object.assign(window, { ForCreators, ForPublishers, ForBrands, ForTV, CTASplit, FAQ, AudienceHero, FeatureRow, StatBand, RightsReassure });