/* ============================================================
   WINNS COUTURE — Collage Hero  (4-panel video grid)
   ============================================================
   Four full-height panels, each a live <video> with a full-colour
   studio still layered behind as an instant, full-richness fallback.
   Adjacent panels never repeat the same clip.
   ============================================================ */

const VIDEOS = [
"https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/winncouture-storefront/Screen_Recording_20260703_151253_Instagram.webm",
"https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/winncouture-storefront/Screen_Recording_20260703_151405_Instagram.webm",
"https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/winncouture-storefront/Screen_Recording_20260703_151941_Instagram.webm",
"https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/winncouture-storefront/Screen_Recording_20260703_152044_Instagram.webm"];

/* Full-colour studio stills of the same subject — painted instantly
   behind each video and kept if a clip fails to decode. */
const POSTERS = [
(window.RB_IMGS && window.RB_IMGS["LOOK 01 · BRIDAL"]) || "",
(window.RB_IMGS && window.RB_IMGS["ASOEBI · OWAMBE"]) || "",
(window.RB_IMGS && window.RB_IMGS["RED CARPET · GALA"]) || "",
(window.RB_IMGS && window.RB_IMGS["RECEPTION · SECOND LOOK"]) || ""];


const SLIDES = [
{
  eyebrow: "The Bridal Atelier · SS26",
  h: ["Dressed for", "The Grand Ceremony."],
  sub: "Hand-beaded lace, sculpted silhouettes and sweeping trains — bespoke bridal couture, made to measure.",
  cta: "Explore Bridal",
  ctaFn: (nav) => nav("shop", { cat: "Bridal" })
},
{
  eyebrow: "Owambe & Asoebi · SS26",
  h: ["Reign at", "Every Celebration."],
  sub: "Beaded iro-and-buba, Aso-Oke sets and statement gowns for the family front row.",
  cta: "Shop Asoebi",
  ctaFn: (nav) => nav("shop", { cat: "Asoebi" })
},
{
  eyebrow: "Red Carpet · SS26",
  h: ["Show up.", "Show out."],
  sub: "Velvet, sequin and slit gowns for galas, premieres and milestone nights.",
  cta: "Shop Red Carpet",
  ctaFn: (nav) => nav("shop", { cat: "Red Carpet" })
}];


/* ── Single video panel (live <video> + full-colour still behind) ── */
function VideoPanel({ src, poster, delay }) {
  const ref = useRef(null);
  const [ready, setReady] = useState(false);

  useEffect(() => {
    let cancelled = false;
    let objUrl = null;
    const el = ref.current;
    /* Asset server ignores Range requests, which can stall a plain
       <source>. Fetch the bytes and play from a blob: URL. The
       full-colour still underneath stays if a clip can't decode. */
    (async () => {
      try {
        const res = await fetch(src);
        if (!res.ok) throw new Error("HTTP " + res.status);
        const blob = await res.blob();
        if (cancelled || !el) return;
        objUrl = URL.createObjectURL(blob);
        el.src = objUrl;
        el.load();
        const p = el.play();
        if (p && p.catch) p.catch(() => {});
      } catch (e) {/* keep the still */}
    })();
    return () => { cancelled = true; if (objUrl) URL.revokeObjectURL(objUrl); };
  }, [src]);

  return (
    <div className="hcol-strip">
      {/* Full-colour still underneath — instant paint, no dimming */}
      <img
        className="hcol-media hcol-poster"
        src={poster}
        alt=""
        aria-hidden="true"
        loading="eager"
        style={{ animationDelay: delay + "ms" }} />
      <video
        ref={ref}
        className="hcol-media hcol-video"
        autoPlay
        muted
        loop
        playsInline
        preload="auto"
        poster={poster}
        onLoadedData={() => setReady(true)}
        onCanPlay={() => setReady(true)}
        style={{ opacity: ready ? 1 : 0, transition: "opacity .8s ease" }}>
      </video>
    </div>);

}

/* ══════════════════════════════════════════════════════════
   MAIN COMPONENT
   ══════════════════════════════════════════════════════════ */
function HeroCollage({ onNav }) {
  const INTERVAL = 6000;

  const [idx, setIdx] = useState(0);
  const [textIn, setTextIn] = useState(true);

  useEffect(() => {
    const t = setInterval(() => {
      setTextIn(false);
      setTimeout(() => {
        setIdx((i) => (i + 1) % SLIDES.length);
        setTextIn(true);
      }, 450);
    }, INTERVAL);
    return () => clearInterval(t);
  }, []);

  const slide = SLIDES[idx];

  return (
    <section className="hero hcol-root" aria-label="Hero banner">

      {/* ── 4-panel live-video collage ── */}
      <div className="hcol-strips" aria-hidden="true">
        <VideoPanel src={VIDEOS[0]} poster={POSTERS[0]} delay={0} />
        <VideoPanel src={VIDEOS[1]} poster={POSTERS[1]} delay={200} />
        <VideoPanel src={VIDEOS[2]} poster={POSTERS[2]} delay={400} />
        <VideoPanel src={VIDEOS[3]} poster={POSTERS[3]} delay={600} />
      </div>

      {/* Cinematic gradient overlay */}
      <div className="hcol-overlay" aria-hidden="true" />

      {/* Gold top rule */}
      <div className="hcol-top-rule" aria-hidden="true" />

      {/* Vertical gap lines between strips */}
      <div className="hcol-dividers" aria-hidden="true">
        <span /><span /><span /><span />
      </div>

      {/* Editorial text */}
      <div
        className={"hcol-content" + (textIn ? " hcol-content-in" : " hcol-content-out")}
        key={idx}>
        
        <p className="hcol-eyebrow mono">{slide.eyebrow}</p>
        <h1 className="display hcol-h">
          <span className="hcol-hline">{slide.h[0]}</span>
          <em className="hcol-hline hcol-hem">{slide.h[1]}</em>
        </h1>
        <div className="hcol-cta-row">
          <Btn onClick={() => slide.ctaFn(onNav)}>{slide.cta}</Btn>
          <Btn variant="ghost" arrow={false} className="on-dark"
          onClick={() => onNav("bespoke", {})}>
            Book a Fitting
          </Btn>
        </div>
      </div>



      {/* Bottom corner label */}
      <div className="hcol-corner mono" aria-hidden="true">
        Winns Couture · SS26
      </div>

      {/* Scroll pulse line */}
      <div className="hcol-scroll" aria-hidden="true">
        <span className="hcol-scroll-line" />
      </div>

    </section>);

}

Object.assign(window, { HeroCollage });