/* ============================================================
   AUSTICH — Homepage Hero: full-bleed vertical split screen
   ============================================================
   Three equal-width, full-height columns — a split screen, not a
   filmstrip. Each column runs its own image (or, once real footage
   is uploaded, an autoplay/muted/looped video) with an independent,
   slow Ken Burns zoom — different duration/scale/delay per column
   so the three never feel synced.

   To swap in real austich.ng media later: replace the <img src>
   in each SplitPanel below, and/or add a <video> (muted, autoPlay,
   loop, playsInline) with a poster pointing at the same still —
   each panel is marked with a data-slot id for that handoff.
   ============================================================ */

/* Real austich.ng footage (owner-supplied). Two clips available — the
   third panel reuses the first at an offset timing so it never syncs. */
const SPLIT_PANELS = [
  {
    slot: "hero-panel-1",
    video: "uploads/as_vid%208.mp4",
    poster: "uploads/as_pic%201.jpg",
    dur: 26, scale: 1.14, delay: 0,
  },
  {
    slot: "hero-panel-2",
    video: "uploads/as_vid%203.mp4",
    poster: "uploads/as_pic%203.jpg",
    dur: 32, scale: 1.09, delay: -6,
  },
  {
    slot: "hero-panel-3",
    video: "uploads/as_vid%208.mp4",
    poster: "uploads/as_pic%202.jpg",
    dur: 29, scale: 1.18, delay: -14,
  },
];

function SplitPanel({ panel }) {
  return (
    <div className="split-col" data-slot={panel.slot}>
      {/* Real austich.ng footage for this panel goes here — swap the src below. */}
      <video
        className="split-media"
        src={panel.video}
        poster={panel.poster}
        autoPlay
        muted
        loop
        playsInline
        style={{
          "--split-dur": panel.dur + "s",
          "--split-scale": panel.scale,
          animationDelay: panel.delay + "s",
        }}
      />
    </div>
  );
}

function HeroCollage({ onNav }) {
  return (
    <section className="hero split-root" aria-label="Hero banner">
      <div className="split-cols" aria-hidden="true">
        {SPLIT_PANELS.map((p) => <SplitPanel key={p.slot} panel={p} />)}
      </div>

      <div className="split-scrim" aria-hidden="true" />

      <div className="split-content">
        <p className="split-eyebrow mono">{(window.BRAND && window.BRAND.name) || "Austich"} · Clothing for Men &amp; Women</p>
        <h1 className="display split-h">Contemporary clothing,<br /><em>made to be worn.</em></h1>
        <div className="split-cta-row">
          <Btn onClick={() => onNav("shop", {})}>Shop the Collection</Btn>
          <Btn variant="ghost" arrow={false} className="on-dark" onClick={() => onNav("shop", { gender: "Women" })}>
            Shop Women
          </Btn>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HeroCollage });