/* ============================================================
   ZURIEL AFRIQUE — Hero
   Four full-bleed vertical video panels. One short headline and
   the CTAs sit over the first panel, running slightly into the
   second — the only scrim on the piece.
   ============================================================ */
function HeroCollage({ onNav }) {
  const clips = ["videos/hero-panel-1.mp4", "videos/hero-panel-2.mp4", "videos/hero-panel-3.mp4", "videos/hero-panel-4.mp4"];
  return (
    <section className="hero hcol-root" aria-label="Zuriel Afrique — new arrivals">
      <div className="hcol-grid">
        {clips.map((src, i) => (
          <div key={src} className="hcol-panel" data-panel={i + 1}>
            <video
              src={src}
              autoPlay muted loop playsInline
              preload={i === 0 ? "auto" : "metadata"}
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }}
            />
          </div>
        ))}
        <div className="hcol-scrim" />
        <div className="hcol-caption">
          <h1 className="display hcol-h">Softness, in every seam.</h1>
          <div className="hcol-cta-row">
            <Btn onClick={() => onNav("shop", {})}>Shop the Collection</Btn>
            <Btn variant="ghost" arrow={false} className="on-dark" onClick={() => onNav("custom", {})}>Custom Orders</Btn>
          </div>
        </div>
        <span className="hcol-credit">Zuriel Afrique · {(window.BRAND && window.BRAND.igHandle) || "@zurielafrique"}</span>
      </div>
    </section>
  );
}

Object.assign(window, { HeroCollage });