/* ============================================================
   KAY FASHION — Collage Hero  (asymmetric video mosaic)
   ============================================================
   7 real Kay Fashion reels in a distinct asymmetric mosaic: one
   tall hero panel on the left, spanning three stacked pairs of
   tiles down the right. Every panel layers its matching full-colour
   poster still behind the <video> as the instant-paint fallback,
   so a slow/undecodable clip never shows a blank box.
   Text overlay cycles through editorial headline sets every 6 s.
   ============================================================ */

const MOSAIC_VIDEOS = window.RB_VIDEOS || [];
const MOSAIC_POSTERS = window.RB_VIDEO_POSTERS || [];

const SLIDES = [
{
  eyebrow: "Kay Fashion · Made in Abuja",
  h: ["Gold thread,", "Measured."],
  cta: "Shop Bespoke",
  ctaFn: (nav) => nav("shop", {})
},
{
  eyebrow: "The Groom's Atelier · Agbada",
  h: ["Dressed for", "Forever."],
  cta: "Explore Wedding",
  ctaFn: (nav) => nav("shop", { cat: "Agbada" })
},
{
  eyebrow: "Celebration Season · Bespoke",
  h: ["Show up.", "Show out."],
  cta: "Shop the Collection",
  ctaFn: (nav) => nav("bespoke", {})
}];


/* ── Single mosaic panel (poster still behind an autoplay video) ── */
function MosaicPanel({ area, src, videoSrc, delay }) {
  const [videoReady, setVideoReady] = useState(false);
  return (
    <div className={"hcol-strip hcol-" + area + (src ? " has-img" : "")}>
      {src && (
        <img
          className="hcol-media hcol-poster"
          src={src}
          alt=""
          aria-hidden="true"
          style={{ animationDelay: delay + "ms", opacity: 1 }} />
      )}
      {videoSrc ? (
        <video
          className={"hcol-media hcol-video" + (videoReady ? " video-ready" : "")}
          src={videoSrc}
          poster={src || undefined}
          autoPlay
          muted
          loop
          playsInline
          aria-hidden="true"
          onLoadedData={() => setVideoReady(true)}
          onCanPlay={() => setVideoReady(true)}
          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">

      {/* ── asymmetric 7-panel video mosaic ── */}
      <div className="hcol-strips hcol-mosaic" aria-hidden="true">
        <MosaicPanel area="a" src={MOSAIC_POSTERS[1]} videoSrc={MOSAIC_VIDEOS[1]} delay={0} />
        <MosaicPanel area="b" src={MOSAIC_POSTERS[0]} videoSrc={MOSAIC_VIDEOS[0]} delay={150} />
        <MosaicPanel area="c" src={MOSAIC_POSTERS[3]} videoSrc={MOSAIC_VIDEOS[3]} delay={300} />
        <MosaicPanel area="d" src={MOSAIC_POSTERS[2]} videoSrc={MOSAIC_VIDEOS[2]} delay={450} />
        <MosaicPanel area="e" src={MOSAIC_POSTERS[4]} videoSrc={MOSAIC_VIDEOS[4]} delay={600} />
        <MosaicPanel area="f" src={MOSAIC_POSTERS[5]} videoSrc={MOSAIC_VIDEOS[5]} delay={750} />
        <MosaicPanel area="g" src={MOSAIC_POSTERS[6]} videoSrc={MOSAIC_VIDEOS[6]} delay={900} />
      </div>

      {/* Cinematic gradient overlay */}
      <div className="hcol-overlay" aria-hidden="true" />

      {/* Gold top rule */}
      <div className="hcol-top-rule" aria-hidden="true" />

      {/* 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">
        {((window.BRAND && window.BRAND.name) || "Rack & Box") + " · " + ((window.BRAND && window.BRAND.seasonTag) || "SS26")}
      </div>

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

    </section>);

}

Object.assign(window, { HeroCollage });