/* ============================================================
   TOE COUTURE — Collage Hero (4 equal vertical panels)
   ============================================================
   Four full-height panels using the shared <Ph> placeholder —
   swap in real bridal/asoebi/RTW photography or video later by
   keying window.RB_IMGS / RB_VIDEOS to these same labels.
   ============================================================ */

const COLLAGE_LABELS = [
  "BRIDAL · CUSTOM GOWN",
  "ASOEBI · CUSTOM SET",
  "READY-TO-WEAR · EDIT",
  "BRIDAL · DETAIL",
];

const COLLAGE_VIDEOS = [
  "assets/hero-collage-1.mp4",
  "assets/hero-collage-2.mp4",
  "assets/hero-collage-3.mp4",
  "assets/hero-collage-4.mp4",
];

const SLIDES = [
  { eyebrow: "TOE Couture · Abuja", h: ["Custom-made,", "celebrated."], cta: "Shop Bridal", ctaFn: (nav) => nav("shop", { cat: "Bridal" }) },
  { eyebrow: "Asoebi · Made to Match", h: ["Show up,", "in colour."], cta: "Shop Asoebi", ctaFn: (nav) => nav("shop", { cat: "Asoebi" }) },
  { eyebrow: "Ready-to-Wear · New In", h: ["Off the rack,", "on point."], cta: "Shop Ready-to-Wear", ctaFn: (nav) => nav("shop", { cat: "Ready-to-Wear" }) },
];

function ImageStrip({ label, delay, src }) {
  const ref = useRef(null);
  useEffect(() => {
    const v = ref.current;
    if (!v) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) v.play().catch(() => {});
      else v.pause();
    }, { threshold: 0.1 });
    io.observe(v);
    return () => io.disconnect();
  }, []);
  return (
    <div className="hcol-strip">
      {src
        ? <video ref={ref} className="hcol-strip-video" src={src} loop muted playsInline preload="metadata" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", animationDelay: delay + "ms" }} aria-label={label} />
        : <Ph label={label} ratio="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", animationDelay: delay + "ms" }} />}
    </div>
  );
}

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_LABELS.map((label, i) => <ImageStrip key={label} label={label} delay={i * 200} src={COLLAGE_VIDEOS[i]} />)}
      </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", {})}>Start a Custom Order</Btn>
        </div>
      </div>

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

      <div className="hcol-scroll" aria-hidden="true"><span className="hcol-scroll-line" /></div>
    </section>
  );
}

Object.assign(window, { HeroCollage });