/* ============================================================
   YARTEL — Collage Hero  (4-panel video/photo grid)
   ============================================================
   Two panels are real reels (autoplay muted loop playsinline),
   each with its matching poster still layered behind as an <img>
   for instant paint / fallback if the video can't decode.
   The remaining panels are real product stills.
   ============================================================ */

const COLLAGE_PANELS = [
  { kind: "video", key: "reel1" },
  { kind: "video", key: "reel3" },
  { kind: "photo", label: "COLLAGE · STILL B" },
  { kind: "video", key: "reel2" },
];

const SLIDES = [
{
  eyebrow: "YARTEL · Accra",
  h: ["Occasionwear,", "Cut to be Worn."],
  cta: "Shop the Collection",
  ctaFn: (nav) => nav("shop", {})
},
{
  eyebrow: "Kente & Occasionwear",
  h: ["Heritage Cloth,", "Cut for Today."],
  cta: "Shop Occasionwear",
  ctaFn: (nav) => nav("shop", { cat: "Kente & Occasionwear" })
},
{
  eyebrow: "Bridal",
  h: ["Bridal-White", "Gowns."],
  cta: "Shop Bridal",
  ctaFn: (nav) => nav("shop", { cat: "Bridal" })
}];

/* ── Single video panel: poster <img> behind, <video> on top ── */
function VideoPanel({ videoKey, delay }) {
  const v = (window.RB_VIDEOS || {})[videoKey];
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const p = el.play();
    if (p && p.catch) p.catch(() => {});
  }, []);
  if (!v) return <div className="hcol-strip" />;
  return (
    <div className="hcol-strip">
      <img src={v.poster} alt="" className="hcol-media hcol-poster" style={{ position: "absolute", inset: 0, animationDelay: delay + "ms" }} />
      <video
        ref={ref}
        className="hcol-media hcol-video"
        src={v.src}
        poster={v.poster}
        autoPlay
        muted
        loop
        playsInline
        preload="auto"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", animationDelay: delay + "ms" }}
      />
    </div>
  );
}

/* ── Single photo panel (real still via Ph) ── */
function PhotoPanel({ label, delay }) {
  return (
    <div className="hcol-strip">
      <Ph label={label} ratio="tall" className="hcol-media hcol-poster" style={{ position: "absolute", inset: 0, animationDelay: delay + "ms" }} />
    </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">

      <div className="hcol-strips" aria-hidden="true">
        {COLLAGE_PANELS.map((p, i) =>
          p.kind === "video" ?
            <VideoPanel key={i} videoKey={p.key} delay={i * 200} /> :
            <PhotoPanel key={i} label={p.label} delay={i * 200} />
        )}
      </div>

      <div className="hcol-overlay" aria-hidden="true" />
      <div className="hcol-top-rule" aria-hidden="true" />

      <div className="hcol-dividers" aria-hidden="true">
        <span /><span /><span />
      </div>

      <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("custom", {})}>
            Bespoke Enquiry
          </Btn>
        </div>
      </div>

      <div className="hcol-corner mono" aria-hidden="true">
        {(window.BRAND && window.BRAND.name) || "YARTEL"}
      </div>

      <div className="hcol-scroll" aria-hidden="true">
        <span className="hcol-scroll-line" />
      </div>

    </section>);

}

Object.assign(window, { HeroCollage });