/* ============================================================
   ZAYNAB SAPHIR — Collage Hero  (4 equal vertical strips)
   ============================================================
   Four full-height columns — placeholder media until real product
   photography/video is dropped in. Text overlay cycles through
   editorial headline sets every 6 s.
   ============================================================ */

const POSTERS = [
(window.RB_IMGS && window.RB_IMGS["LOOK 01 · DRESS"]) || "",
(window.RB_IMGS && window.RB_IMGS["LOOK · EVENING EDIT"]) || "",
(window.RB_IMGS && window.RB_IMGS["LOOK · WARDROBE ESSENTIALS"]) || "",
(window.RB_IMGS && window.RB_IMGS["LOOK 02 · CO-ORD"]) || ""];

/* Motion on strips 1 and 3 only — stills on 2 and 4 keeps the hero
   light and gives the collage a deliberate still/motion rhythm. */
const VIDS = window.RB_VIDEOS || [];
const VIDEOS = [VIDS[0] || "", "", VIDS[2] || "", ""];


const SLIDES = [
{
  eyebrow: "Zaynab Saphir · Women's Clothing",
  h: ["New Season,", "New Arrivals."],
  cta: "Shop New In",
  ctaFn: (nav) => nav("shop", {})
},
{
  eyebrow: "Evening Edit",
  h: ["Dressed for", "Evenings Out."],
  cta: "Shop Evening Edit",
  ctaFn: (nav) => nav("collections", {})
},
{
  eyebrow: "Wardrobe Essentials",
  h: ["Considered", "Basics."],
  cta: "Shop the Collection",
  ctaFn: (nav) => nav("shop", {})
}];


/* ── Single strip (poster still behind an optional autoplay video) ── */
function ImageStrip({ src, videoSrc, delay, label }) {
  return (
    <div className="hcol-strip">
      {src ? (
        <img
          className="hcol-media hcol-poster"
          src={src}
          alt=""
          aria-hidden="true"
          style={{ animationDelay: delay + "ms", opacity: 1 }} />
      ) : (
        <div className="ph tall has-img" style={{ position: "absolute", inset: 0 }}><span className="ph-label">{label}</span></div>
      )}
      {videoSrc ? (
        <video
          className="hcol-media"
          src={videoSrc}
          poster={src}
          autoPlay
          muted
          loop
          playsInline
          preload="metadata"
          aria-hidden="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];
  const labels = ["NEW IN", "EVENING", "ESSENTIALS", "CO-ORDS"];

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

      <div className="hcol-strips" aria-hidden="true">
        <ImageStrip src={POSTERS[0]} videoSrc={VIDEOS[0]} delay={0} label={labels[0]} />
        <ImageStrip src={POSTERS[1]} videoSrc={VIDEOS[1]} delay={200} label={labels[1]} />
        <ImageStrip src={POSTERS[2]} videoSrc={VIDEOS[2]} delay={400} label={labels[2]} />
        <ImageStrip src={POSTERS[3]} videoSrc={VIDEOS[3]} delay={600} label={labels[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}>

        <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>
        </div>
      </div>

      <div className="hcol-corner mono" aria-hidden="true">
        {((window.BRAND && window.BRAND.name) || "Zaynab Saphir") + " · " + ((window.BRAND && window.BRAND.seasonTag) || "New In")}
      </div>

      <div className="hcol-scroll" aria-hidden="true">
        <span className="hcol-scroll-line" />
      </div>

    </section>);

}

Object.assign(window, { HeroCollage });