/* ============================================================
   COSABELLA — Home Hero: 4-panel vertical collage
   All 4 panels play REAL Cosabella brand video, posters are the
   2 real Cosabella photos (repeated). To swap in new real media
   later: edit the `src` (poster) or `video` URL of any entry in
   PANELS below — no other code changes are needed, layout and
   the Ken Burns motion carry over automatically.
   ============================================================ */
const PANELS = [
  { id: "p1", src: "uploads/cbb_pic 1.jpg", video: null, alt: "Cosabella — product photo" },
  { id: "p2", src: "uploads/cbb_pic 2.jpg", video: null, alt: "Cosabella — product photo" },
  { id: "p3", src: "uploads/cbb_pic 1.jpg", video: "uploads/cbb_vid 7.mp4", alt: "Cosabella — brand film" },
  { id: "p4", src: "uploads/cbb_pic 2.jpg", video: "uploads/cbb_vid 9.mp4", alt: "Cosabella — brand film" },
];

function CollagePanel({ panel, delay }) {
  const ref = React.useRef(null);
  const [playVideo, setPlayVideo] = React.useState(false);
  React.useEffect(() => {
    if (!panel.video || !ref.current) return;
    const io = new IntersectionObserver((ents) => {
      ents.forEach((e) => { if (e.isIntersecting) setPlayVideo(true); });
    }, { threshold: 0.2 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [panel.video]);

  return (
    <div className="hcol-strip" ref={ref}>
      {panel.video && playVideo ? (
        <video className="hcol-media hcol-kb" src={panel.video} poster={panel.src} autoPlay muted loop playsInline preload="none" aria-hidden="true" style={{ animationDelay: delay + "ms" }} />
      ) : (
        <img className="hcol-media hcol-kb" src={panel.src} alt={panel.alt} aria-hidden="true" style={{ animationDelay: delay + "ms" }} />
      )}
    </div>
  );
}

function HeroCollage({ onNav }) {
  return (
    <section className="hero hcol-root" aria-label="Hero banner">
      <div className="hcol-strips" aria-hidden="true">
        {PANELS.map((p, i) => <CollagePanel key={p.id} panel={p} delay={i * 150} />)}
      </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">
        <p className="hcol-eyebrow mono">{(window.BRAND && window.BRAND.seasonTag) || "SS26"}</p>
        <h1 className="display hcol-h">
          <span className="hcol-hline">{(window.BRAND && window.BRAND.name) || "Cosabella"}</span>
        </h1>
        <div className="hcol-cta-row">
          <Btn onClick={() => onNav("shop", {})}>Shop the Collection</Btn>
        </div>
      </div>

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

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

Object.assign(window, { HeroCollage });