/* ============================================================
   ZICHAEL — Collage Hero  (3 equal vertical video strips)
   ============================================================ */

function HeroCollage({ onNav }) {
  const INTERVAL = 6200;
  const [idx, setIdx] = useState(0);
  const [phase, setPhase] = useState("in");

  const slides = [
    {
      eyebrow: "SS26 · Signature Menswear",
      headline: "Details Define\nthe Difference.",
      sub: "Not for the crowd. Never was.",
      cta: "Explore Collection",
      ctaRoute: () => onNav("shop", {}),
    },
    {
      eyebrow: "The Groom Atelier · 2026",
      headline: "The Groom\nBecomes Sovereign.",
      sub: "Agbadas, kaftans and bespoke tailoring — built to be remembered.",
      cta: "Shop the Wedding Edit",
      ctaRoute: () => onNav("shop", { occasion: "Wedding" }),
    },
    {
      eyebrow: "Owambe Season · Abuja",
      headline: "Show Up.\nCommand the Room.",
      sub: "Statement kaftans and aso-ebi — made for the dancefloor.",
      cta: "Shop Occasion Wear",
      ctaRoute: () => onNav("shop", { occasion: "Festive" }),
    },
  ];

  useEffect(() => {
    const t = setInterval(() => {
      setPhase("out");
      setTimeout(() => {
        setIdx((i) => (i + 1) % slides.length);
        setPhase("in");
      }, 500);
    }, INTERVAL);
    return () => clearInterval(t);
  }, []);

  const slide = slides[idx];

  const videos = [
    "uploads/Screen_Recording_20260629_110738_Instagram.webm",
    "uploads/Screen_Recording_20260629_110948_Instagram.webm",
    "uploads/Screen_Recording_20260629_111149_Instagram.webm",
  ];

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

      {/* 3 equal vertical strips */}
      <div className="hcol-strips" aria-hidden="true">
        {videos.map((src, i) => (
          <div className="hcol-strip" key={i}>
            <VideoStrip src={src} />
          </div>
        ))}
      </div>

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

      {/* content */}
      <div className={"hcol-content hcol-content-" + phase} key={idx}>
        <h1 className="display hcol-h1">
          {slide.headline.split("\n").map((l, i) => (
            <span key={i} className="hcol-h1-line">{l}</span>
          ))}
        </h1>
        <div className="hcol-btns">
          <Btn onClick={slide.ctaRoute}>{slide.cta}</Btn>
          <Btn variant="ghost" arrow={false} className="on-dark" onClick={() => onNav("booking", {})}>Book a Fitting</Btn>
        </div>
      </div>

    </section>
  );
}

function VideoStrip({ src }) {
  const ref = useRef(null);
  useEffect(() => {
    const v = ref.current;
    if (!v) return;
    v.play().catch(() => {});
  }, []);
  return (
    <video ref={ref} autoPlay muted loop playsInline className="hcol-video">
      <source src={src} type="video/webm" />
    </video>
  );
}

Object.assign(window, { HeroCollage });