/* ============================================================
   BANNYROYALS VOGUE — Collage Hero  (3 equal vertical video strips)
   ============================================================
   Three full-height columns, each a real brand video (assets/vid*.mp4)
   layered over its poster photo (RB_IMGS) so the panel paints
   instantly and is never blank while the video loads.
   Text overlay cycles through editorial headline sets every 6 s.
   ============================================================ */

const COLLAGE_PANELS = [
  { label: "BESPOKE BRIDAL", video: "assets/vid1.mp4" },
  { label: "PROM",           video: "assets/vid2.mp4" },
  { label: "LUXURY ANKARA",  video: "assets/vid3.mp4" },
];

const SLIDES = [
{
  h: ["Bespoke,", "by design."],
  cta: "Shop",
  ctaFn: (nav) => nav("shop", {})
},
{
  h: ["Dressed for", "Forever."],
  cta: "Shop",
  ctaFn: (nav) => nav("shop", { cat: "Bridal" })
},
{
  h: ["Show up.", "Show out."],
  cta: "Shop",
  ctaFn: (nav) => nav("shop", { cat: "Asoebi" })
}];


/* ── Single strip: poster photo underneath, video on top (always painted, never blank).
   Video mount is deferred a beat past first paint so 3 simultaneous decodes never
   block initial render. ── */
function VideoStrip({ label, video, delay, playVideo }) {
  return (
    <div className="hcol-strip">
      <Ph label={label} ratio="tall" className="hcol-media hcol-poster" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", animationDelay: delay + "ms" }} />
      {playVideo && <video className="hcol-media" src={video} autoPlay muted loop playsInline preload="metadata" style={{ animationDelay: delay + "ms" }} />}
    </div>);

}

/* ══════════════════════════════════════════════════════════
   MAIN COMPONENT
   ══════════════════════════════════════════════════════════ */
function HeroCollage({ onNav }) {
  const INTERVAL = 6000;

  const [idx, setIdx] = useState(0);
  const [textIn, setTextIn] = useState(true);
  const [playVideo, setPlayVideo] = useState(false);

  useEffect(() => {
    const t0 = setTimeout(() => setPlayVideo(true), 600);
    return () => clearTimeout(t0);
  }, []);

  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">
        {COLLAGE_PANELS.map((p, i) => (
          <VideoStrip key={p.label} label={p.label} video={p.video} delay={i * 200} playVideo={playVideo} />
        ))}
      </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}>
        
        <h1 className="display hcol-h">
          <span className="hcol-hline">{slide.h[0]}</span>
          <span className="hcol-hline hcol-hem">{slide.h[1]}</span>
        </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", {})}>
            Bespoke
          </Btn>
        </div>
      </div>



      {/* Bottom corner label */}
      <div className="hcol-corner mono" aria-hidden="true">
        {((window.BRAND && window.BRAND.name) || "Bannyroyals Vogue") + " · " + ((window.BRAND && window.BRAND.seasonTag) || "2026 Collection")}
      </div>

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

    </section>);

}

Object.assign(window, { HeroCollage });