/* ============================================================
   ELLA'S TABITHA — Collage Hero (4 vertical panels)
   Three panels are real product stills; one panel is the real
   reel (autoplay/muted/loop) layered over its poster still for
   instant paint + graceful fallback if the video can't decode.
   ============================================================ */

const ET_POSTERS = [
(window.RB_IMGS && window.RB_IMGS["KAFTAN · SKY APPLIQUÉ"]) || "",
(window.RB_IMGS && window.RB_IMGS["AGBADA · WHITE WEDDING"]) || "",
(window.RB_IMGS && window.RB_IMGS["HERO · REEL POSTER"]) || "",
(window.RB_IMGS && window.RB_IMGS["FESTIVE · OWAMBE"]) || ""];

const ET_VIDS = window.RB_VIDEOS || [];

const ET_SLIDES = [
{ eyebrow: "Ella's Tabitha · Made to order", h: ["Made to", "be worn."], cta: "Shop the Edit", ctaFn: (nav) => nav("shop", {}) },
{ eyebrow: "Appliqué Kaftans & Boubou", h: ["Everyday,", "elevated."], cta: "Shop Kaftans & Boubou", ctaFn: (nav) => nav("shop", { cat: "Kaftan & Boubou" }) },
{ eyebrow: "Occasion & Embellished", h: ["Dressed for", "the moment."], cta: "Shop Occasion Wear", ctaFn: (nav) => nav("shop", { cat: "Occasion & Embellished" }) },
];

function ETStrip({ src, videoSrc, active }) {
  const [videoOk, setVideoOk] = useState(true);
  const vidRef = useRef(null);

  useEffect(() => {
    if (!videoSrc || !active) return;
    setVideoOk(true);
    const v = vidRef.current;
    if (!v) return;
    const fail = () => setVideoOk(false);
    v.play && v.play().catch(() => {});
    const t = setTimeout(() => { if (v.readyState < 2) fail(); }, 6000);
    v.addEventListener("error", fail);
    v.addEventListener("stalled", fail);
    return () => { clearTimeout(t); v.removeEventListener("error", fail); v.removeEventListener("stalled", fail); };
  }, [videoSrc, active]);

  return (
    <div className="hcol-strip">
      <img className="hcol-media hcol-poster" src={src} alt="" aria-hidden="true" style={{ opacity: 1 }} />
      {videoSrc && active && videoOk ? (
        <video ref={vidRef} className="hcol-media" src={videoSrc} poster={src} preload="metadata" muted loop playsInline aria-hidden="true" />
      ) : null}
    </div>
  );
}

function HeroCollage({ onNav }) {
  const INTERVAL = 6000;
  const [idx, setIdx] = useState(0);
  const [textIn, setTextIn] = useState(true);
  const [vidIdx, setVidIdx] = useState(0);

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

  useEffect(() => {
    if (ET_VIDS.length < 2) return;
    const t = setInterval(() => { setVidIdx((i) => (i + 1) % ET_VIDS.length); }, 9000);
    return () => clearInterval(t);
  }, []);

  const slide = ET_SLIDES[idx];

  return (
    <section className="hero hcol-root" aria-label="Hero banner">
      <div className="hcol-strips" aria-hidden="true">
        <ETStrip src={ET_POSTERS[0]} videoSrc={ET_VIDS[vidIdx]} active={vidIdx % 4 === 0} />
        <ETStrip src={ET_POSTERS[1]} videoSrc={ET_VIDS[vidIdx]} active={vidIdx % 4 === 1} />
        <ETStrip src={ET_POSTERS[2]} videoSrc={ET_VIDS[vidIdx]} active={vidIdx % 4 === 2} />
        <ETStrip src={ET_POSTERS[3]} videoSrc={ET_VIDS[vidIdx]} active={vidIdx % 4 === 3} />
      </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>
          <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("custom", {})}>Custom &amp; Bespoke</Btn>
        </div>
      </div>

      <div className="hcol-corner mono" aria-hidden="true">
        {(window.BRAND && window.BRAND.name) || "Ella's Tabitha"}
      </div>

      <div className="hcol-scroll" aria-hidden="true"><span className="hcol-scroll-line" /></div>
    </section>
  );
}

Object.assign(window, { HeroCollage });