/* ============================================================
   RACK & BOX — Collage Hero  (3 equal vertical video strips)
   ============================================================
   Three full-height columns, each playing one uploaded video.
   Text overlay cycles through editorial headline sets every 6 s.
   To swap videos: update VIDEOS array below.
   ============================================================ */

const VIDEOS = [
  "uploads/Screen_Recording_20260615_173916_Instagram.webm",
  "uploads/Screen_Recording_20260615_215705_Instagram.webm",
  "uploads/Screen_Recording_20260615_215924_Instagram.webm",
];

const SLIDES = [
  {
    eyebrow: "Bridal & Custom · SS26",
    h: ["You were made", "for this moment."],
    cta: "Explore Bridal",
    ctaFn: (nav) => nav("collections", {}),
  },
  {
    eyebrow: "Traditional / Beaded · Heritage Collection",
    h: ["Where heritage", "meets desire."],
    cta: "Shop the Collection",
    ctaFn: (nav) => nav("collections", {}),
  },
  {
    eyebrow: "New Arrivals · SS26",
    h: ["Dressed to be", "unforgettable."],
    cta: "Shop New Arrivals",
    ctaFn: (nav) => nav("shop", {}),
  },
];

/* Poster fallbacks (shown when the source video is unavailable). */
const POSTERS = [
  (window.RB_IMGS || {})["HERO · GROOM IN EMERALD AGBADA"],
  (window.RB_IMGS || {})["FESTIVE · OWAMBE"],
  (window.RB_IMGS || {})["HERO · EDITORIAL · LAGOS NIGHTS"],
];

/* ── Single video strip ─────────────────────────────────── */
function VideoStrip({ src, delay, poster }) {
  const mime = src.endsWith(".webm") ? "video/webm"
             : src.endsWith(".mov")  ? "video/quicktime"
             : "video/mp4";
  return (
    <div className="hcol-strip">
      <video
        className="hcol-media"
        autoPlay
        muted
        loop
        playsInline
        poster={poster}
        style={{ animationDelay: delay + "ms" }}
      >
        <source src={src} type={mime} />
      </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">

      {/* ── 3 equal vertical video strips ── */}
      <div className="hcol-strips" aria-hidden="true">
        <VideoStrip src={VIDEOS[0]} delay={0}    poster={POSTERS[0]} />
        <VideoStrip src={VIDEOS[1]} delay={200}  poster={POSTERS[1]} />
        <VideoStrip src={VIDEOS[2]} delay={400}  poster={POSTERS[2]} />
      </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 />
      </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">
        Prudential Atelier · SS26
      </div>

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

    </section>
  );
}

Object.assign(window, { HeroCollage });