/* APEX CLIPS — Home */

function HeroMosaic() {
  // 5 vertical columns of clips, auto-scrolling like a video wall.
  const cols = [
    { keys: ["el-5573", "el-6691", "el-2204", "el-8856"], dur: 38, dir: 1 },
    { keys: ["el-6620", "el-3382", "el-7350", "el-4429"], dur: 46, dir: -1 },
    { keys: ["el-7741", "el-4471", "el-9938", "el-1108"], dur: 42, dir: 1 },
    { keys: ["el-3019", "el-5512", "el-2876", "el-9015"], dur: 50, dir: -1 },
    { keys: ["el-2204", "el-7741", "el-3382", "el-6620"], dur: 44, dir: 1 },
  ];
  const find = (id) => CLIPS.find((c) => c.id === id) || CLIPS[0];
  return (
    <div className="hero-mosaic" aria-hidden="true">
      {cols.map((col, i) => (
        <div key={i} className="hero-col" style={{ "--d": col.dur + "s" }} data-dir={col.dir}>
          <div className="hero-track" style={{ animationDuration: `calc(${col.dur}s / var(--motion))`, animationDirection: col.dir > 0 ? "normal" : "reverse" }}>
            {[...col.keys, ...col.keys].map((k, j) => (
              <Thumb key={j} clip={find(k)} className="hero-tile" />
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

function Hero() {
  return (
    <section className="hero">
      <HeroMosaic />
      <div className="hero-veil"></div>
      <div className="wrap hero-inner">
        <Reveal>
          <span className="pill pill--accent" style={{ marginBottom: 22 }}><span className="dot"></span>Verified · Rights-cleared · Creator-first</span>
        </Reveal>
        <Reveal delay={60}>
          <h1 className="display hero-h1">
            License the world's best travel, sport &amp; <span className="hero-em">adventure</span> moments.
          </h1>
        </Reveal>
        <Reveal delay={140}>
          <p className="hero-sub">
            Rights-cleared UGC footage for publishers, brands, agencies and producers, sourced from real creators, athletes and travellers around the world.
          </p>
        </Reveal>
        <Reveal delay={220}>
          <div className="hero-cta">
            <Link to="/license" className="btn btn--accent btn--lg">License Footage →</Link>
            <Link to="/submit" className="btn btn--ghost btn--lg">Submit Your Clip</Link>
          </div>
        </Reveal>
        <Reveal delay={300}>
          <div className="hero-stats">
            <Stat value="100%" label="Rights-cleared" />
            <div className="hero-stat-div"></div>
            <Stat value="Global" label="Creator network" />
            <div className="hero-stat-div"></div>
            <Stat value="48h" label="Avg. clearance" />
          </div>
        </Reveal>
      </div>
      <div className="hero-scroll mono">SCROLL · LIVE FEED</div>
    </section>
  );
}

function TrustStrip() {
  const items = ["Verified rights", "Creator-approved", "Social-ready", "Fast clearance", "Global footage"];
  return (
    <div className="trust-strip">
      <div className="wrap trust-strip__inner">
        {items.map((t, i) => (
          <div key={t} className="trust-item">
            <span className="trust-check">✓</span>
            <span>{t}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function AudienceSplit() {
  const cards = [
    { tag: "Media & Publishers", title: "Feed the algorithm, legally.", body: "Daily social-ready clips, revenue-share options and fully cleared rights, formatted for every platform.", to: "/publishers", cta: "For Publishers", cat: "travel" },
    { tag: "Brands & Agencies", title: "Authentic, not stock.", body: "Real adventure and travel footage for campaigns, paid social and brand storytelling, cleared for commercial use.", to: "/brands", cta: "For Brands", cat: "drone" },
    { tag: "Creators", title: "Keep your clip. Get paid.", body: "Submit your best moments, keep your copyright, and earn every time your footage licenses.", to: "/creators", cta: "For Creators", cat: "extreme" },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="kicker-row">
          <div>
            <Eyebrow>Two sides, one marketplace</Eyebrow>
            <h2 className="display section-h2" style={{ marginTop: 16 }}>Built for the people who<br />make and move footage.</h2>
          </div>
        </div>
        <div className="aud-grid">
          {cards.map((c, i) => (
            <Reveal key={c.tag} delay={i * 80}>
              <Link to={c.to} className="card aud-card">
                <Thumb cat={c.cat} className="aud-thumb" />
                <div className="aud-body">
                  <span className="mono aud-tag">{c.tag}</span>
                  <h3 className="display aud-title">{c.title}</h3>
                  <p className="aud-text">{c.body}</p>
                  <span className="arrow-link">{c.cta} →</span>
                </div>
              </Link>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeaturedCategories() {
  return (
    <section className="section" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="wrap">
        <div className="kicker-row">
          <div>
            <Eyebrow>Featured categories</Eyebrow>
            <h2 className="display section-h2" style={{ marginTop: 16 }}>Eight worlds of footage.</h2>
          </div>
          <Link to="/library" className="arrow-link">Browse the full library →</Link>
        </div>
        <div className="cat-grid">
          {CATEGORIES.map((c, i) => (
            <Reveal key={c.key} delay={(i % 4) * 60}>
              <Link to={"/library?cat=" + c.key} className="cat-card">
                <Thumb cat={c.cat || c.key} img={"/images/categories/" + (c.cat || c.key) + ".webp"} className="cat-thumb" />
                <div className="cat-overlay">
                  <span className="pill pill--solid" style={{ alignSelf: "flex-start" }}>{c.tag}</span>
                  <div>
                    <h3 className="display cat-title">{c.name}</h3>
                    <p className="cat-blurb">{c.blurb}</p>
                  </div>
                </div>
              </Link>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const [tab, setTab] = useState("creators");
  const steps = {
    creators: [
      ["Upload your clip", "Submit from your phone in minutes. Raw or edited, vertical or wide."],
      ["We verify & package", "We check rights, add editorial context and prep every format."],
      ["We pitch & license", "Your clip goes to our global buyer network of media, brands and producers."],
      ["You get paid", "Transparent reporting and your share, every time it licenses."],
    ],
    buyers: [
      ["Search or brief us", "Filter the library, or send a brief and let our content desk source it."],
      ["Review verified clips", "Preview watermarked footage with rights and release status up front."],
      ["Choose license terms", "Pick platforms, territory and term. Quoted fast, cleared for use."],
      ["Download & publish", "Get clean masters in the formats you need, ready to ship."],
    ],
  };
  return (
    <section className="section">
      <div className="wrap">
        <div className="kicker-row">
          <div>
            <Eyebrow>How it works</Eyebrow>
            <h2 className="display section-h2" style={{ marginTop: 16 }}>Simple on both sides.</h2>
          </div>
          <div className="seg">
            <button data-on={tab === "creators"} onClick={() => setTab("creators")}>For Creators</button>
            <button data-on={tab === "buyers"} onClick={() => setTab("buyers")}>For Buyers</button>
          </div>
        </div>
        <div className="how-grid" key={tab}>
          {steps[tab].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 style={{ marginTop: 40 }}>
          {tab === "creators"
            ? <Link to="/submit" className="btn btn--accent btn--lg">Submit Your Clip →</Link>
            : <Link to="/license" className="btn btn--accent btn--lg">License Footage →</Link>}
        </div>
      </div>
    </section>
  );
}

function RightsBand() {
  const badges = [
    ["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."],
  ];
  return (
    <section className="section" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="wrap">
        <div style={{ maxWidth: 720 }}>
          <Eyebrow>Rights &amp; verification</Eyebrow>
          <h2 className="display section-h2" style={{ marginTop: 16 }}>Cleared footage. Clear paperwork.<br /><span style={{ color: "var(--accent)" }}>No guesswork.</span></h2>
          <p className="section-lead">Every clip on Apex Clips passes the same chain of checks before a buyer ever sees it. Your legal and rights teams get the paper trail they expect.</p>
        </div>
        <div className="rights-grid">
          {badges.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>
        <Link to="/rights" className="arrow-link" style={{ marginTop: 36, display: "inline-flex" }}>See the full verification process →</Link>
      </div>
    </section>
  );
}

function LibraryPreview() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="kicker-row">
          <div>
            <Eyebrow>Library preview</Eyebrow>
            <h2 className="display section-h2" style={{ marginTop: 16 }}>Verified footage, ready to license.</h2>
          </div>
          <Link to="/library" className="btn btn--line">Explore the library →</Link>
        </div>
        <FilterBar compact locked />
        <div style={{ marginTop: 22 }}>
          <LibraryWall count={8} />
        </div>
        <LibraryGate compact />
      </div>
    </section>
  );
}

function BespokeBand() {
  return (
    <section className="section bespoke">
      <Thumb cat="drone" className="bespoke-bg" kenBurns />
      <div className="bespoke-veil"></div>
      <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
        <div style={{ maxWidth: 760 }}>
          <Eyebrow>Bespoke sourcing</Eyebrow>
          <h2 className="display section-h2" style={{ marginTop: 16, fontSize: "clamp(34px,5vw,68px)" }}>Need something specific?<br />Brief our content desk.</h2>
          <p className="section-lead" style={{ color: "var(--ink-2)" }}>
            Tell us what you need: heli-skiing fails, Bali drone shots, grassroots football moments, ultra-running POV, safari encounters or festival travel clips, and our team will source, verify and clear options for your project.
          </p>
          <Link to="/license" className="btn btn--accent btn--lg" style={{ marginTop: 28 }}>Send a Brief →</Link>
        </div>
      </div>
    </section>
  );
}

function TrustColumns() {
  const creator = ["Keep your copyright", "Earn from every sale", "Transparent reporting", "Global buyer network", "Rights protection support", "Fair revenue share"];
  const buyer = ["Social-first formats", "Fast preview and quoting", "Cleared for agreed usage", "Editorial context included", "Bulk & revenue-share options", "Fresh clips added weekly"];
  const Col = ({ eyebrow, title, list, cta, to, accent }) => (
    <div className="card trust-col">
      <Eyebrow>{eyebrow}</Eyebrow>
      <h3 className="display trust-col-title" style={{ marginTop: 14 }}>{title}</h3>
      <ul className="trust-list">
        {list.map((t) => (
          <li key={t}><span className="trust-list-mark" style={accent ? { background: "var(--accent)", color: "var(--accent-ink)", borderColor: "transparent" } : null}>✓</span>{t}</li>
        ))}
      </ul>
      <Link to={to} className={"btn " + (accent ? "btn--accent" : "btn--line")} style={{ marginTop: 8 }}>{cta} →</Link>
    </div>
  );
  return (
    <section className="section" style={{ background: "var(--bg-2)", borderTop: "1px solid var(--line)" }}>
      <div className="wrap trust-cols">
        <Reveal><Col eyebrow="For creators" title="Creators keep ownership. We do the licensing work." list={creator} cta="Become a contributor" to="/creators" accent /></Reveal>
        <Reveal delay={90}><Col eyebrow="For buyers" title="Built for social teams, producers and rights managers." list={buyer} cta="Start licensing" to="/publishers" /></Reveal>
      </div>
    </section>
  );
}

function FinalCTA() {
  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 travel, sport or adventure 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 access to verified, rights-cleared adventure UGC.</p>
            <span className="btn btn--accent btn--lg">License Footage →</span>
          </div>
        </Link>
      </div>
    </section>
  );
}

function Home() {
  return (
    <Page>
      <Hero />
      <TrustStrip />
      <AudienceSplit />
      <FeaturedCategories />
      <HowItWorks />
      <RightsBand />
      <LibraryPreview />
      <BespokeBand />
      <TrustColumns />
      <FinalCTA />
    </Page>
  );
}

Object.assign(window, { Home, FilterBarHostFromHome: true });