/* ============================================================
   RENIE O FASHION — Homepage hero: 2x2 real-photo quad collage
   Four equal panels, each a real brand photo (full colour, no
   wash). Editorial headline cycles every 6s. Swap PHOTOS below
   to change imagery.
   ============================================================ */

const VIDEOS = [
  "uploads/rof_vid 2.mp4",
  "uploads/rof_vid 3.mp4",
  "uploads/rof_vid 4.mp4",
  "uploads/rof_vid 5.mp4",
];

const SLIDES = [
  { eyebrow: "Renie O Fashion", h: ["Colour,", "Cut For You."], cta: "Shop the Collection" },
  { eyebrow: "New This Week", h: ["Dress To", "Be Seen."], cta: "Shop New In" },
  { eyebrow: "Everyday To Evening", h: ["Style That", "Moves With You."], cta: "Shop the Collection" },
];

function CollagePanel({ src, delay }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const t = setTimeout(() => { el.play && el.play().catch(() => {}); }, delay);
    return () => clearTimeout(t);
  }, []);
  return (
    <div className="hcol-strip">
      <video ref={ref} className="hcol-media hcol-poster" src={src} preload="metadata" loop muted playsInline aria-hidden="true" />
    </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 hcol-quad" aria-hidden="true">
        {VIDEOS.map((src, i) => <CollagePanel key={i} src={src} delay={i * 350} />)}
      </div>

      <div className="hcol-overlay" aria-hidden="true" />
      <div className="hcol-top-rule" aria-hidden="true" />

      <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={() => onNav("shop", {})}>{slide.cta}</Btn>
        </div>
      </div>

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

      <div className="hcol-dots" role="tablist">
        {SLIDES.map((_, i) => (
          <button key={i} role="tab" aria-label={"Slide " + (i + 1)} aria-selected={i === idx}
            className={"hcol-dot" + (i === idx ? " active" : "")}
            onClick={() => { setTextIn(false); setTimeout(() => { setIdx(i); setTextIn(true); }, 300); }} />
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { HeroCollage });