/* ============================================================
   RACK & BOX — Collage Hero  (4 equal vertical video strips)
   ============================================================
   Four full-height columns, each an autoplay/muted/looped video —
   the real Rack & Box hero footage from thecollectivesynergy.com —
   layered over a full-colour category-accurate still as the
   instant-paint fallback (these videos are cross-origin, so they
   won't decode in the sandbox preview, but play normally live).
   Text overlay cycles through editorial headline sets every 6 s.
   To swap imagery: update POSTERS / VIDEOS arrays below.
   ============================================================ */

/* Escak Couture stills, pulled from the same footage that plays over them */
const POSTERS = [
(window.RB_IMGS && window.RB_IMGS["PANEL 01 · BEADWORK"]) || "",
(window.RB_IMGS && window.RB_IMGS["PANEL 02 · ASO-EBI"]) || "",
(window.RB_IMGS && window.RB_IMGS["PANEL 03 · OWAMBE"]) || "",
(window.RB_IMGS && window.RB_IMGS["PANEL 04 · BRIDAL"]) || ""];

/* Escak Couture's own atelier footage, one clip per panel */
const VIDS = window.RB_VIDEOS || [];
const VIDEOS = [VIDS[0] || "", VIDS[1] || "", VIDS[2] || "", VIDS[3] || ""];


const SLIDES = [
{
  eyebrow: (((window.BRAND && window.BRAND.name) || "Escak Couture") + " · Made to Measure"),
  h: ["Beaded by hand.", "Cut to you."],
  cta: "Shop the Collection",
  ctaFn: (nav) => nav("shop", {})
},
{
  eyebrow: "The Bridal Room",
  h: ["For the day", "they photograph."],
  cta: "Shop Bridal",
  ctaFn: (nav) => nav("shop", { cat: "Bridal" })
},
{
  eyebrow: "Aso-Ebi & Owambe",
  h: ["One fabric.", "Every body."],
  cta: "Shop Aso-Ebi",
  ctaFn: (nav) => nav("shop", { cat: "Aso-Ebi" })
}];


/* ── Single video strip (poster still behind an autoplay video) ──
   Only ONE strip's video is ever mounted at a time (controlled by
   the parent via `active`) — four simultaneous decodes was enough
   to stall the main thread, so the rest stay stills until their turn. */
function ImageStrip({ src, videoSrc, active }) {
  const vidRef = useRef(null);
  useEffect(() => {
    const v = vidRef.current;
    if (!v) return;
    const io = new IntersectionObserver(
      (es) => es.forEach((e) => { if (e.isIntersecting) { v.play().catch(() => {}); } else { v.pause(); } }),
      { threshold: 0.05 }
    );
    io.observe(v);
    return () => io.disconnect();
  }, [active]);
  return (
    <div className="hcol-strip">
      <img
        className="hcol-media hcol-poster"
        src={src}
        alt=""
        aria-hidden="true"
        style={{ animationDelay: "0ms", opacity: 1 }} />
      {active && videoSrc ? (
        <video
          ref={vidRef}
          className="hcol-media"
          src={videoSrc}
          poster={src}
          autoPlay
          muted
          loop
          playsInline
          preload="metadata"
          aria-hidden="true"
          style={{ animationDelay: "0ms" }} />
      ) : 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);
  }, []);

  /* Only 2 clips ever decode at once (0+1, then 2+3) — 4 concurrent
     decodes stalled the render thread on this hardware. */
  const [pair, setPair] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setPair((p) => (p === 0 ? 1 : 0)), 8000);
    return () => clearInterval(t);
  }, []);

  const slide = SLIDES[idx];

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

      {/* ── 4 equal vertical stock-image strips ── */}
      <div className="hcol-strips" aria-hidden="true">
        <ImageStrip src={POSTERS[0]} videoSrc={VIDEOS[0]} active={pair === 0} />
        <ImageStrip src={POSTERS[1]} videoSrc={VIDEOS[1]} active={pair === 0} />
        <ImageStrip src={POSTERS[2]} videoSrc={VIDEOS[2]} active={pair === 1} />
        <ImageStrip src={POSTERS[3]} videoSrc={VIDEOS[3]} active={pair === 1} />
      </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 /><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", {})}>
            Start a Commission
          </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 });