/* APEX CLIPS — Rights & Verification, Pricing, About, Contact */

/* ============ RIGHTS & VERIFICATION ============ */
function Rights() {
  const chain = [
    ["Source traced", "We confirm the clip came from the original creator, not a re-upload or scrape."],
    ["Creator verified", "Identity and ownership checked before anything is listed."],
    ["Rights reviewed", "Copyright, music, and any third-party elements assessed."],
    ["Releases logged", "Talent and property releases gathered or flagged where missing."],
    ["Usage defined", "Editorial vs commercial, platforms, territory and term established."],
    ["Listed & licensable", "Clip goes live with its full rights profile attached."],
  ];
  return (
    <Page>
      <AudienceHero
        eyebrow="Rights & verification"
        title={<>Cleared footage. Clear paperwork.<br /><span style={{ color: "var(--accent)" }}>No guesswork.</span></>}
        sub="Every clip on Apex Clips passes the same chain of checks before a buyer ever sees it, so your legal and rights teams get exactly the paper trail they expect."
        cat="weather" primary={["License Footage", "/license"]} secondary={["Submit a clip", "/submit"]} />

      <section className="section">
        <div className="wrap" style={{ maxWidth: 760 }}>
          <Eyebrow>Why it matters</Eyebrow>
          <h2 className="display section-h2" style={{ marginTop: 16 }}>Unverified footage is a liability, not a shortcut.</h2>
          <p className="section-lead">Reposted or unverified clips expose you to takedowns, demonetisation and copyright claims, and platforms increasingly bury content that isn't original or properly cleared. Every clip on Apex Clips is licensed source footage with a documented chain of rights, so it survives platform checks and stands up to a legal review.</p>
        </div>
      </section>

      <section className="section" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <div style={{ maxWidth: 640 }}><Eyebrow>The verification chain</Eyebrow><h2 className="display section-h2" style={{ marginTop: 16 }}>Six checks, every clip.</h2></div>
          <div className="chain">
            {chain.map(([t, b], i) => (
              <Reveal key={t} delay={i * 60} className="chain-step">
                <div className="chain-rail"><span className="chain-node">{String(i + 1).padStart(2, "0")}</span>{i < chain.length - 1 && <span className="chain-line"></span>}</div>
                <div className="chain-body"><h3 className="chain-title">{t}</h3><p className="chain-text">{b}</p></div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div style={{ maxWidth: 640 }}><Eyebrow>Every angle, checked</Eyebrow><h2 className="display section-h2" style={{ marginTop: 16 }}>What we clear on every clip.</h2></div>
          <div className="rights-grid">
            {[
              ["Provenance & copyright", "Traced to the original capture and creator, never a re-upload or scrape."],
              ["Talent & model releases", "Where people are identifiable, we gather or flag the releases needed for the intended usage."],
              ["Property & location", "Private property, interiors and protected sites checked for any permissions required."],
              ["Music & audio", "Background music, TV, radio and stadium audio flagged, cleared, or muted/replaced where needed."],
              ["Events & ticketed venues", "Footage from ticketed or professional events checked against venue and rights-holder restrictions."],
              ["Drone & airspace", "Drone footage checked for lawful capture and any airspace or permit considerations."],
            ].map(([t, b], i) => (
              <Reveal key={t} delay={(i % 3) * 70} className="rights-card card"><span className="rights-check">✓</span><h3 className="rights-title">{t}</h3><p className="rights-text">{b}</p></Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <div style={{ maxWidth: 640 }}><Eyebrow>What you get on every clip</Eyebrow><h2 className="display section-h2" style={{ marginTop: 16 }}>The full rights profile.</h2></div>
          <div className="rights-grid">
            {[["Copyright checked", "Provenance traced to the original creator."], ["Creator verified", "Identity and ownership confirmed before listing."], ["Usage terms defined", "Platforms, territory and term spelled out."], ["Editorial notes included", "Who, what, where, when: context attached."], ["Release status flagged", "Talent and property releases clearly marked."], ["Monetization rights available", "Paid-media and revenue-share where cleared."]].map(([t, b], i) => (
              <Reveal key={t} delay={(i % 3) * 70} className="rights-card card"><span className="rights-check">✓</span><h3 className="rights-title">{t}</h3><p className="rights-text">{b}</p></Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div style={{ maxWidth: 640 }}><Eyebrow>Editorial vs commercial</Eyebrow><h2 className="display section-h2" style={{ marginTop: 16 }}>Know what you're licensing.</h2><p className="section-lead">Two things determine what you can do with a clip: whether it's cleared for editorial or commercial use, and its current rights status. Both are marked on every clip.</p></div>
          <div className="legend-grid">
            {[["cleared", "Fully cleared for the usage shown, including commercial where marked."], ["editorial", "Cleared for editorial / news context only. Not for advertising or endorsement."], ["exclusive", "Available on an exclusive basis. Lock it to your project or campaign."], ["pending", "In active clearance. We're finalising rights or releases before it goes live."]].map(([r, desc]) => (
              <div key={r} className="card legend-card">
                <RightsPill rights={r} />
                <p className="legend-text">{desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <div style={{ maxWidth: 660 }}><Eyebrow>Platform-ready</Eyebrow><h2 className="display section-h2" style={{ marginTop: 16 }}>Built to survive platform checks.</h2><p className="section-lead">Platforms now reward original, licensed content and bury reposts. Licensed source footage with clear rights is exactly what keeps your reach and monetisation intact.</p></div>
          <div className="rights-grid">
            {[
              ["Counts as original", "Licensed source footage isn't the reposted, repackaged content platforms deprioritise."],
              ["Monetisation-safe", "Where monetisation rights are cleared, footage is marked safe for paid and monetised placements."],
              ["Stands up to Content ID", "Properly licensed footage holds up to automated matching, so uploads aren't blocked or claimed out from under you."],
              ["Carries its context", "Captions, location and date supplied, the context platforms and audiences reward."],
            ].map(([t, b], i) => (
              <Reveal key={t} delay={(i % 2) * 70} className="rights-card card"><span className="rights-check">✓</span><h3 className="rights-title">{t}</h3><p className="rights-text">{b}</p></Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div style={{ maxWidth: 640, marginBottom: 38 }}><Eyebrow>What both sides get</Eyebrow><h2 className="display section-h2" style={{ marginTop: 16 }}>Clean for buyers. Protected for creators.</h2></div>
          <div className="trust-cols">
            <div className="card trust-col">
              <Eyebrow>Buyers receive</Eyebrow>
              <h3 className="display trust-col-title" style={{ marginTop: 14 }}>Everything you need to publish.</h3>
              <ul className="trust-list">
                {["Clean master delivered on clearance", "All formats: 9:16, 1:1, 16:9", "A signed usage licence", "Editorial context & metadata", "Fast preview and quoting"].map((t) => (
                  <li key={t}><span className="trust-list-mark">✓</span>{t}</li>
                ))}
              </ul>
            </div>
            <div className="card trust-col">
              <Eyebrow>Creators keep</Eyebrow>
              <h3 className="display trust-col-title" style={{ marginTop: 14 }}>Ownership and protection.</h3>
              <ul className="trust-list">
                {["Your copyright, always", "Rights monitoring for misuse", "Takedown support", "Claims recovery on stolen reposts", "Transparent reporting & payouts"].map((t) => (
                  <li key={t}><span className="trust-list-mark" style={{ background: "var(--accent)", color: "var(--accent-ink)", borderColor: "transparent" }}>✓</span>{t}</li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)" }}>
        <div className="wrap" style={{ maxWidth: 820 }}>
          <Eyebrow>Rights FAQ</Eyebrow>
          <h2 className="display section-h2" style={{ marginTop: 16, marginBottom: 32 }}>For the legal team.</h2>
          <FAQ items={[
            ["How do you know the creator owns the footage?", "We verify identity and trace provenance to the original capture before listing, checking source files, posting history and metadata. Anything we can't substantiate doesn't go live."],
            ["What's the difference between editorial and cleared?", "Editorial clips are licensable for news and editorial context only. Fully-cleared clips carry the releases needed for commercial and paid use, marked per clip."],
            ["What about music, logos or background audio?", "Flagged during review. We clear, mute or replace problem audio, and note any visible brands or third-party elements so you know exactly what's in frame."],
            ["Can we use it in monetised or paid content?", "Where monetisation and paid-media rights are cleared, yes, marked per clip and confirmed in your licence so it stays safe on-platform."],
            ["Who is liable if a rights issue arises?", "Licences are backed by our contributor agreements and warranties. We also provide takedown and rights-protection support if misuse occurs."],
            ["Can you clear footage to a specific brief?", "Yes, our content desk sources and clears to brief, returning options with their full rights profile so your team can sign off quickly."],
          ]} />
        </div>
      </section>
      <CTASplit />
    </Page>
  );
}

/* ============ PRICING ============ */
function Pricing() {
  const [side, setSide] = useState("buyers");
  return (
    <Page>
      <section className="form-hero" style={{ minHeight: "auto", padding: "120px 0 70px" }}>
        <Thumb cat="drone" className="form-hero-bg" />
        <div className="form-hero-veil"></div>
        <div className="wrap" style={{ position: "relative", zIndex: 2, textAlign: "center" }}>
          <Eyebrow>Pricing</Eyebrow>
          <h1 className="display" style={{ fontSize: "clamp(40px,6vw,84px)", marginTop: 16 }}>Fair on both sides.</h1>
          <p className="form-hero-sub" style={{ margin: "16px auto 0" }}>Creators earn a generous share. Buyers pay for the usage they need, nothing they don't.</p>
          <div className="seg" style={{ marginTop: 28 }}>
            <button data-on={side === "buyers"} onClick={() => setSide("buyers")}>For Buyers</button>
            <button data-on={side === "creators"} onClick={() => setSide("creators")}>For Creators</button>
          </div>
        </div>
      </section>

      <section className="section--tight" style={{ paddingTop: 48, paddingBottom: 96 }}>
        <div className="wrap">
          {side === "buyers" ? (
            <div className="price-grid">
              {[
                { name: "Single Clip", price: "From $120", unit: "per clip / usage", feat: ["One clip, one defined usage", "Social or editorial licence", "All formats included", "Watermark-free master", "48h clearance"], cta: "License Footage", to: "/license", hi: false },
                { name: "Campaign", price: "Custom", unit: "multi-clip / commercial", feat: ["Bundle of cleared clips", "Commercial & paid-media rights", "Territory & term to brief", "Bespoke sourcing included", "Priority clearance", "Dedicated content desk"], cta: "Send a Brief", to: "/license", hi: true },
                { name: "Channel / Rev-share", price: "Let's talk", unit: "ongoing volume", feat: ["Daily cleared feed", "Bulk & rev-share pricing", "API / bulk delivery", "Account manager", "Custom rights framework"], cta: "Contact Sales", to: "/contact", hi: false },
              ].map((p) => <PriceCard key={p.name} p={p} />)}
            </div>
          ) : (
            <div className="price-grid">
              {[
                { name: "Contributor", price: "50%", unit: "revenue share", feat: ["Keep your copyright", "Non-exclusive licensing", "Monthly payouts", "Full reporting dashboard", "Rights protection support"], cta: "Submit Your Clip", to: "/submit", hi: false },
                { name: "Verified Creator", price: "60%", unit: "revenue share", feat: ["Everything in Contributor", "Priority pitching to buyers", "Featured in category cards", "Faster review queue", "Creator success support"], cta: "Submit Your Clip", to: "/submit", hi: true },
                { name: "Exclusive Partner", price: "70%", unit: "revenue share", feat: ["Top revenue share", "Exclusive catalogue deals", "Co-marketing & credit", "First look on briefs", "Dedicated partner manager"], cta: "Apply", to: "/contact", hi: false },
              ].map((p) => <PriceCard key={p.name} p={p} />)}
            </div>
          )}
          <p className="mono" style={{ textAlign: "center", color: "var(--ink-4)", marginTop: 28 }}>
            {side === "buyers" ? "Final price depends on platforms, territory, term and exclusivity. Editorial licences start lower." : "Share scales with contribution volume, exclusivity and how widely your footage licenses."}
          </p>
        </div>
      </section>
      <CTASplit />
    </Page>
  );
}
function PriceCard({ p }) {
  return (
    <div className={"card price-card" + (p.hi ? " price-card--hi" : "")}>
      {p.hi && <span className="price-flag mono">MOST POPULAR</span>}
      <h3 className="price-name display">{p.name}</h3>
      <div className="price-amount display">{p.price}</div>
      <div className="mono price-unit">{p.unit}</div>
      <ul className="price-feat">{p.feat.map((f) => <li key={f}><span className="price-check">✓</span>{f}</li>)}</ul>
      <Link to={p.to} className={"btn btn--block " + (p.hi ? "btn--accent" : "btn--line")} style={{ marginTop: "auto" }}>{p.cta} →</Link>
    </div>
  );
}

/* ============ ABOUT ============ */
function About() {
  return (
    <Page>
      <section className="form-hero" style={{ minHeight: "76vh" }}>
        <div className="hero-mosaic about-mosaic" aria-hidden="true">
          {[0, 1, 2, 3, 4].map((i) => (
            <div key={i} className="hero-col"><div className="hero-track" style={{ animationDuration: `calc(${40 + i * 4}s / var(--motion))`, animationDirection: i % 2 ? "reverse" : "normal" }}>
              {[...CLIPS.slice(i, i + 4), ...CLIPS.slice(i, i + 4)].map((c, j) => <Thumb key={j} clip={c} className="hero-tile" />)}
            </div></div>
          ))}
        </div>
        <div className="form-hero-veil"></div>
        <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
          <Eyebrow>About Apex Clips</Eyebrow>
          <h1 className="display" style={{ fontSize: "clamp(40px,6.5vw,96px)", marginTop: 16, maxWidth: 14 + "ch" }}>The adventure media network.</h1>
          <p className="form-hero-sub">We sit between the people who capture the world's most unbelievable real moments and the media, brands and producers who want to use them, making sure footage moves, rights stay clean, and creators get paid.</p>
        </div>
      </section>

      <StatBand stats={[["100%", "Rights-cleared"], ["Global", "Creator network"], ["Verified", "Provenance checked"], ["48h", "Avg. clearance"]]} bg />

      <section className="section">
        <div className="wrap about-mission">
          <div>
            <Eyebrow>Why we exist</Eyebrow>
            <h2 className="display section-h2" style={{ marginTop: 16 }}>Real moments deserve real rights.</h2>
          </div>
          <div className="about-mission-text">
            <p>Every day, extraordinary footage is captured on phones and action cams: surf, summits, street football, wildlife encounters, near-misses and once-in-a-lifetime travel moments. Most of it never gets seen, stolen, or earns its creator nothing.</p>
            <p>Apex Clips fixes that. We verify the footage, clear the rights, package it for every platform, and license it to a global network of buyers, so creators keep ownership and get paid, and buyers get authentic footage they can actually, legally use.</p>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)" }}>
        <div className="wrap">
          <div style={{ maxWidth: 600 }}><Eyebrow>What we stand for</Eyebrow><h2 className="display section-h2" style={{ marginTop: 16 }}>Our principles.</h2></div>
          <FeatureRow items={[
            ["Creator-first", "The person who shot it keeps ownership and shares in the upside. Always."],
            ["Rights-clean", "If we can't verify and clear it, we don't sell it. No grey areas."],
            ["Social-native", "Built for how footage actually travels today: fast, vertical, everywhere."],
            ["Authentic over stock", "Real people, real places, real moments. Never staged."],
            ["Global by default", "Creators and buyers around the world, one marketplace."],
            ["Transparent", "Clear reporting, clear terms, clear payouts, on both sides."],
          ]} />
        </div>
      </section>
      <CTASplit />
    </Page>
  );
}

/* CONTACT lives in pages-forms.jsx (Supabase-wired alongside the other forms) */

/* ============ BESPOKE SOURCING ============ */
function Bespoke() {
  return (
    <Page>
      <AudienceHero
        eyebrow="Bespoke sourcing"
        title={<>Brief our content desk.<br />We'll source it.</>}
        sub="Need a specific shot we don't already represent? Tell us what you're after and our team sources, verifies and clears options to your brief, usually within 48 hours."
        cat="drone" primary={["Send a Brief", "/license"]} secondary={["How verification works", "/rights"]} />
      <section className="section">
        <div className="wrap">
          <div className="kicker-row"><div><Eyebrow>How bespoke works</Eyebrow><h2 className="display section-h2" style={{ marginTop: 16 }}>From brief to cleared options.</h2></div></div>
          <div className="how-grid">
            {[["Send your brief", "Tell us the shot, usage, platforms, territory and deadline."], ["We source", "We reach into our network and creators to find real, matching footage."], ["We verify & clear", "Provenance checked, rights and releases confirmed for your usage."], ["You receive options", "Matched clips with full rights profiles and a quote, ready to license."]].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" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="wrap">
          <div style={{ maxWidth: 640 }}><Eyebrow>What we source</Eyebrow><h2 className="display section-h2" style={{ marginTop: 16 }}>If it's real and out there, we'll find it.</h2></div>
          <div className="rights-grid">
            {[["Travel & places", "Hidden gems, cityscapes, transport, festivals, food, drone journeys."], ["Extreme & action", "Surf, snow, MTB, climb, wingsuit, moto, POV and chase-cam."], ["Grassroots sport", "Street football, fan moments, local heroes, amateur drama."], ["Wildlife & nature", "Encounters, oceans, safari, rare natural moments."], ["Weather & rescue", "Storms, swells, avalanche control, real rescues."], ["Fails & unexpected", "Real, unscripted, unbelievable moments caught on camera."]].map(([t, b], i) => (
              <Reveal key={t} delay={(i % 3) * 70} className="rights-card card"><h3 className="rights-title">{t}</h3><p className="rights-text">{b}</p></Reveal>
            ))}
          </div>
        </div>
      </section>
      <section className="section">
        <div className="wrap" style={{ maxWidth: 820 }}>
          <Eyebrow>Bespoke FAQ</Eyebrow>
          <h2 className="display section-h2" style={{ marginTop: 16, marginBottom: 32 }}>Good to know.</h2>
          <FAQ items={[
            ["How fast can you turn a brief around?", "Most briefs return matched, cleared options within 48 hours; complex or rare requests can take longer, and we'll tell you up front."],
            ["What does it cost?", "A bespoke search/clearance fee plus a per-clip licence scoped to your usage. Nothing is owed until you approve options."],
            ["Do you clear for commercial use?", "Where the footage and releases allow, yes, confirmed per clip in your licence."],
            ["What if nothing matches?", "Then there's no licence to pay for. We're upfront about any agreed search fee before any work begins."],
          ]} />
        </div>
      </section>
      <CTASplit />
    </Page>
  );
}

/* ============ FAQ (standalone) ============ */
function FAQPage() {
  const groups = [
    ["For creators", [
      ["Do I lose ownership of my clip?", "No. You keep your copyright at all times and grant Apex Clips the right to license it on your behalf under terms you approve."],
      ["How much do I earn?", "A revenue share on every licence, up to 70% for top contributors, depending on how widely your footage is used."],
      ["When do I get paid?", "Payouts run monthly once your balance passes the threshold, with full reporting behind every licence."],
      ["What if people are in my clip?", "Common, and not a blocker. Our team helps sort any talent or property releases needed; it just affects which usages we can clear."],
    ]],
    ["For buyers", [
      ["How do I get access to the library?", "Request access and tell us what you need; our desk opens the catalogue and returns matched, rights-cleared options."],
      ["Is the footage really cleared?", "Every clip is traced to the original creator, verified for ownership and flagged with its release status. Editorial-only clips are clearly marked."],
      ["Can I use it in monetised or paid content?", "Where those rights are available, yes, marked per clip and confirmed in your licence."],
      ["Do you offer bulk or revenue-share deals?", "Yes, for high-output channels, alongside single-clip and campaign licences."],
    ]],
    ["Rights & verification", [
      ["How do you know the creator owns the footage?", "We verify identity and trace provenance to the original capture before listing. Anything we can't substantiate doesn't go live."],
      ["What's the difference between editorial and cleared?", "Editorial clips are licensable for news/editorial context only; fully-cleared clips carry the releases needed for commercial and paid use."],
      ["Who is liable if a rights issue arises?", "Licences are backed by our contributor agreements and warranties, with takedown and rights-protection support if misuse occurs."],
    ]],
  ];
  return (
    <Page>
      <section className="section--tight" style={{ paddingTop: 64 }}>
        <div className="wrap">
          <Eyebrow>FAQ</Eyebrow>
          <h1 className="display" style={{ fontSize: "clamp(40px,6vw,82px)", marginTop: 14 }}>Questions, answered.</h1>
          <p className="section-lead" style={{ maxWidth: 560 }}>Everything creators, buyers and rights teams ask, in one place. Still stuck? <Link to="/contact" style={{ color: "var(--accent)", fontWeight: 600 }}>Talk to us →</Link></p>
        </div>
      </section>
      <section className="section--tight" style={{ paddingTop: 8, paddingBottom: 96 }}>
        <div className="wrap" style={{ maxWidth: 860 }}>
          {groups.map(([group, items]) => (
            <div key={group} style={{ marginBottom: 40 }}>
              <h2 className="display" style={{ fontSize: 26, marginBottom: 8 }}>{group}</h2>
              <FAQ items={items} />
            </div>
          ))}
        </div>
      </section>
    </Page>
  );
}

Object.assign(window, { Rights, Pricing, About, PriceCard, Bespoke, FAQPage });