/* ============================================================
   HOUSE OF DOVA — Collage Hero  (3 equal vertical video panels)
   ============================================================
   Three full-height columns, each an autoplay/muted/looped
   vertical clip layered over a category-accurate still as the
   instant-paint / no-JS fallback poster. Sources come from
   window.RB_VIDEOS (images.js); STARTS staggers playback.
   Text overlay cycles through headline sets every 6s.
   To swap footage: update POSTERS / VIDEOS / STARTS below.
   ============================================================ */

/* Placeholder stills — full colour, category-accurate, no wash */
const POSTERS = [
(window.RB_IMGS && window.RB_IMGS["DRESS · EVENING"]) || "",
(window.RB_IMGS && window.RB_IMGS["SET · COORD"]) || "",
(window.RB_IMGS && window.RB_IMGS["GOWN · BRIDAL"]) || "",
(window.RB_IMGS && window.RB_IMGS["GOWN · RECEPTION"]) || ""];

/* Hero footage — four vertical panels from RB_VIDEOS, repeating the
   second clip to fill the extra panel. Panels fall back to POSTERS
   if a source is missing. */
const VIDS = window.RB_VIDEOS || [];
const VIDEOS = [VIDS[1] || VIDS[0] || "", VIDS[1] || VIDS[0] || "", VIDS[0] || "", VIDS[1] || VIDS[0] || ""];
const STARTS = [0, 2, 4, 6];


const SLIDES = [
{
  h: ["Bridal,", "Made to Last."],
  cta: "Shop Bridal",
  ctaFn: (nav) => nav("shop", { cat: "Gowns" })
},
{
  h: ["Dressed for", "the Moment."],
  cta: "Shop the Collection",
  ctaFn: (nav) => nav("shop", {})
},
{
  h: ["Made", "to You."],
  cta: "Shop the Edit",
  ctaFn: (nav) => nav("shop", {})
}];

function nav_shop(onNav, slide) { slide.ctaFn(onNav); }


/* ── Single vertical panel (poster still behind an autoplay video) ── */
function ImageStrip({ src, videoSrc, delay, start }) {
  return (
    <div className="hcol-strip">
      <img
        className="hcol-media hcol-poster"
        src={src}
        alt=""
        aria-hidden="true"
        style={{ animationDelay: delay + "ms", opacity: 1 }} />
      {videoSrc ? (
        <video
          className="hcol-media"
          src={videoSrc}
          poster={src}
          autoPlay
          muted
          loop
          playsInline
          aria-hidden="true"
          onLoadedMetadata={(e) => {
            const v = e.currentTarget;
            if (start && v.duration) v.currentTime = start % v.duration;
          }}
          style={{ animationDelay: delay + "ms" }} />
      ) : null}
    </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 panels ── */}
      <div className="hcol-strips" aria-hidden="true">
        <ImageStrip src={POSTERS[0]} videoSrc={VIDEOS[0]} delay={0} start={STARTS[0]} />
        <ImageStrip src={POSTERS[1]} videoSrc={VIDEOS[1]} delay={200} start={STARTS[1]} />
        <ImageStrip src={POSTERS[2]} videoSrc={VIDEOS[2]} delay={400} start={STARTS[2]} />
        <ImageStrip src={POSTERS[3]} videoSrc={VIDEOS[3]} delay={600} start={STARTS[3]} />
      </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 panels */}
      <div className="hcol-dividers" aria-hidden="true">
        <span /><span /><span /><span />
      </div>

      {/* Editorial text */}
      <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={() => nav_shop(onNav, slide)}>Shop</Btn>
          <Btn variant="ghost" className="on-dark" onClick={() => onNav("bespoke", {})}>Bespoke</Btn>
        </div>
      </div>




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

    </section>);

}

Object.assign(window, { HeroCollage });