/* ============================================================
   PEPPLE ROBERT — Hero: 4-Panel Vertical Collage (video)
   ============================================================
   Four vertical panels of unequal width, offset up/down for a
   collage read. All 4 panels play real Pepple Robert product
   video (uploads/pr-vid-1..4.mp4 via window.RB_VIDEOS).
   ============================================================ */

const COLLAGE_SLIDES = [
  { eyebrow: "New Season", h: ["Made for", "everyday."], cta: "Shop the Collection", ctaFn: (nav) => nav("shop", {}) },
  { eyebrow: "Just In", h: ["Easy pieces,", "worn often."], cta: "Shop New In", ctaFn: (nav) => nav("shop", {}) },
];

function CollagePanel({ videoKey, className }) {
  const src = (window.RB_VIDEOS && window.RB_VIDEOS[videoKey]) || "";
  return (
    <div className={"hcol-panel " + className}>
      <video className="hcol-vid" src={src} autoPlay muted loop playsInline />
    </div>
  );
}

function HeroCollage({ onNav }) {
  const INTERVAL = 6500;
  const [idx, setIdx] = useState(0);
  const [textIn, setTextIn] = useState(true);

  useEffect(() => {
    const t = setInterval(() => {
      setTextIn(false);
      setTimeout(() => { setIdx((i) => (i + 1) % COLLAGE_SLIDES.length); setTextIn(true); }, 400);
    }, INTERVAL);
    return () => clearInterval(t);
  }, []);

  const slide = COLLAGE_SLIDES[idx];

  return (
    <section className="hero hcol-root" aria-label="Hero banner">
      <div className="wrap-wide hcol-grid">
        <div className={"hcol-content" + (textIn ? " hcol-in" : " hcol-out")} key={idx}>
          <p className="mono hcol-eyebrow">{slide.eyebrow}</p>
          <h1 className="display hcol-h">
            <span className="hcol-line">{slide.h[0]}</span>
            <em className="hcol-line hcol-em">{slide.h[1]}</em>
          </h1>
          <div className="hcol-cta-row">
            <Btn onClick={() => slide.ctaFn(onNav)}>{slide.cta}</Btn>
          </div>
        </div>

        <div className="hcol-stage">
          <CollagePanel videoKey="v1" className="hcol-p1" />
          <CollagePanel videoKey="v2" className="hcol-p2" />
          <CollagePanel videoKey="v3" className="hcol-p3" />
          <CollagePanel videoKey="v4" className="hcol-p4" />
        </div>
      </div>

      <div className="horb-corner mono" aria-hidden="true">
        {((window.BRAND && window.BRAND.name) || "Pepple Robert") + " · " + ((window.BRAND && window.BRAND.seasonTag) || "New Season")}
      </div>
    </section>
  );
}

Object.assign(window, { HeroCollage });