/* ============================================================
   SIMI DEFINED — Motion Collage Hero
   Full-bleed collage: every cell is real brand video, edge to
   edge with no empty canvas. The headline occupies one cell.
   ============================================================ */
const COLLAGE_CELLS = [
  { key: "a", area: "a" },
  { key: "b", area: "b" },
  { key: "c", area: "c" },
  { key: "d", area: "d" },
  { key: "e", area: "e" },
];

const HERO_SLIDES = [
  { h: ["Style,", "Defined."], cta: "Shop the Collection" },
  { h: ["Cut with", "Intention."], cta: "Shop New Arrivals" },
  { h: ["Made for", "Her Moment."], cta: "Shop Evening" },
];

function CollageCell({ area, media, delay }) {
  if (!media) return <div className={"mc-cell mc-" + area} />;
  return (
    <div className={"mc-cell mc-" + area} style={{ animationDelay: delay + "ms" }}>
      <video className="mc-vid" src={media.src} poster={media.poster} muted autoPlay loop playsInline />
    </div>
  );
}

function HeroCollage({ onNav }) {
  const reel = window.RB_HERO_REEL || [];
  const [idx, setIdx] = useState(0);

  useEffect(() => {
    const t = setInterval(() => setIdx((n) => (n + 1) % HERO_SLIDES.length), 6000);
    return () => clearInterval(t);
  }, []);

  const slide = HERO_SLIDES[idx];

  return (
    <section className="hero mc-root" aria-label="Hero">
      <div className="mc-grid">
        {COLLAGE_CELLS.map((c, i) => (
          <CollageCell key={c.key} area={c.area} media={reel[i % (reel.length || 1)]} delay={i * 130} />
        ))}
        <div className="mc-cell mc-text">
          <div className="mc-text-inner" key={idx}>
            <h1 className="display mc-h">
              <span className="mc-hline">{slide.h[0]}</span>
              <span className="mc-hline mc-hem">{slide.h[1]}</span>
            </h1>
            <Btn onClick={() => onNav("shop", {})}>{slide.cta}</Btn>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HeroCollage });