/* ============================================================
   YAYTUNES APPAREL — Collage Hero (4 equal vertical video strips)
   Ambient RTW motion footage layered over a gradient placeholder
   fallback. No per-panel product claims — this is brand/mood
   banner, not a category tile.
   ============================================================ */
const VIDEOS = window.RB_VIDEOS || [];

const SLIDES = [
  { eyebrow: "Yaytunes Apparel · " + ((window.BRAND && window.BRAND.igHandle) || "@yaytunes_apparel"), h: ["RTW Ankara", "Wears."], cta: "Shop Now", ctaFn: (nav) => nav("shop", {}) },
  { eyebrow: "Ready to Wear · Abuja", h: ["Ready to wear.", "Ready for you."], cta: "Shop the Pieces", ctaFn: (nav) => nav("shop", {}) },
];

function ImageStrip({ videoSrc, delay }) {
  return (
    <div className="hcol-strip">
      <Ph ratio="tall" className="hcol-media hcol-poster" style={{ animationDelay: delay + "ms", position: "absolute", inset: 0 }} />
      {videoSrc ? (
        <video
          className="hcol-media"
          src={videoSrc}
          autoPlay muted loop playsInline aria-hidden="true"
          ref={(el) => { if (el) el.muted = true; }}
          onVolumeChange={(e) => { e.currentTarget.muted = true; }}
          style={{ animationDelay: delay + "ms" }} />
      ) : null}
    </div>
  );
}

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">
      <div className="hcol-strips" aria-hidden="true">
        <ImageStrip videoSrc={VIDEOS[0]} delay={0} />
        <ImageStrip videoSrc={VIDEOS[1]} delay={200} />
        <ImageStrip videoSrc={VIDEOS[2]} delay={400} />
        <ImageStrip videoSrc={VIDEOS[3]} delay={600} />
      </div>
      <div className="hcol-overlay" aria-hidden="true" />
      <div className="hcol-top-rule" aria-hidden="true" />
      <div className="hcol-dividers" aria-hidden="true"><span /><span /><span /></div>

      <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>
          <span className="hcol-hline hcol-hem">{slide.h[1]}</span>
        </h1>
        <div className="hcol-cta-row">
          <Btn onClick={() => slide.ctaFn(onNav)}>{slide.cta}</Btn>
        </div>
      </div>

      <div className="hcol-corner mono" aria-hidden="true">
        {((window.BRAND && window.BRAND.name) || "Yaytunes Apparel")}
      </div>
      <div className="hcol-scroll" aria-hidden="true"><span className="hcol-scroll-line" /></div>
    </section>
  );
}

Object.assign(window, { HeroCollage });