/* ============================================================
   ZHALIMA GRAZIONI — Homepage hero: 4-panel video collage
   ============================================================
   Four looping video panels in a fixed grid. Each entry in
   HERO_SLOTS is one panel with a stable `id` ("hero-slot-1" …
   "hero-slot-4"). To swap in a different clip, replace that
   entry's `src`. Videos autoplay muted/looped/inline; a gradient
   fallback (label only) shows if a clip fails to load.
   ============================================================ */

const VIDS = window.RB_VIDEOS || [];
const HERO_SLOTS = [
  { id: "hero-slot-1", label: "WOMENSWEAR",   src: VIDS[0] || "" },
  { id: "hero-slot-2", label: "MENSWEAR",     src: VIDS[1] || "" },
  { id: "hero-slot-3", label: "OCCASIONWEAR", src: VIDS[2] || "" },
  { id: "hero-slot-4", label: "EVENINGWEAR",  src: VIDS[3] || "" },
];

function MoodPanel({ slot, delay }) {
  const [failed, setFailed] = useState(false);
  const [visible, setVisible] = useState(false);
  const ref = useRef(null);
  const wrapRef = useRef(null);

  useEffect(() => {
    const el = wrapRef.current;
    if (!el || typeof IntersectionObserver === "undefined") { setVisible(true); return; }
    const io = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) { setVisible(true); io.disconnect(); }
    }, { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  useEffect(() => {
    if (!visible) return;
    const el = ref.current;
    if (!el) return;
    const t = setTimeout(() => {
      el.load();
      const p = el.play();
      if (p && p.catch) p.catch(() => {});
    }, delay);
    return () => clearTimeout(t);
  }, [visible, delay]);

  return (
    <div data-hero-slot={slot.id} className="hmb-panel" ref={wrapRef}>
      {!failed ? (
        <video
          ref={ref}
          className="hmb-video"
          src={visible ? slot.src : undefined}
          muted
          loop
          playsInline
          preload="none"
          onError={() => setFailed(true)}
        />
      ) : (
        <div className="hmb-fallback">
          <span className="mono">{slot.label}</span>
        </div>
      )}
      <span className="hmb-panel-label mono">{slot.label}</span>
    </div>
  );
}

function HeroMoodboard({ headline, sub, onNav }) {
  return (
    <section className="hero hmb-root" aria-label="Hero banner">
      <div className="hmb-cluster" aria-hidden="true">
        {HERO_SLOTS.map((s, i) => <MoodPanel key={s.id} slot={s} delay={i * 400} />)}
      </div>
      <div className="hmb-content">
        <Eyebrow line>{(window.BRAND && window.BRAND.tagline) || "Clothing for women and men"}</Eyebrow>
        <h1 className="display hmb-h">{headline}</h1>
        <p className="lede hmb-sub">{sub}</p>
        <div className="hero-cta">
          <Btn onClick={() => onNav("shop", {})}>Shop Now</Btn>
        </div>
        <div className="hmb-quicklinks">
          <button onClick={() => onNav("shop", { gender: "Women" })}>Shop Women</button>
          <span className="hmb-sep">/</span>
          <button onClick={() => onNav("shop", { gender: "Men" })}>Shop Men</button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HeroMoodboard });