/* ============================================================
   CHINASA MARTINS — Collage Hero (4-panel real photography)
   No video exists yet for this brand — 4 real shoot stills only.
   ============================================================ */
const CM_PANELS = [
  { poster: (window.RB_IMGS && window.RB_IMGS["LOOK · LACE WRAP SET"]) || "", video: null },
  { poster: (window.RB_IMGS && window.RB_IMGS["LOOK · CAMOUFLAGE TAILORING"]) || "", video: "videos/nasa_v2.mp4" },
  { poster: (window.RB_IMGS && window.RB_IMGS["LOOK · RUFFLE CAPE GOWN"]) || "", video: "videos/nasa_v4.mp4" },
  { poster: (window.RB_IMGS && window.RB_IMGS["LOOK · STRAPLESS EVENING"]) || "", video: null },
];

const CM_SLIDES = [
  { eyebrow: "Chinasa Martins · Lagos", h: ["Made to", "be seen."], cta: "Shop the Edit", ctaFn: (nav) => nav("shop", {}) },
  { eyebrow: "Contemporary Ready-to-Wear", h: ["Statement", "Dressing."], cta: "Explore Looks", ctaFn: (nav) => nav("collections", {}) },
];

function ImageStrip({ panel, delay }) {
  return (
    <div className="hcol-strip">
      <img className="hcol-media hcol-poster" src={panel.poster} alt="" aria-hidden="true" style={{ animationDelay: delay + "ms", opacity: 1 }} />
      {panel.video && (
        <video className="hcol-media" src={panel.video} poster={panel.poster} autoPlay muted loop playsInline
          style={{ animationDelay: delay + "ms" }} />
      )}
    </div>
  );
}

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

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

  const words = (headline || "Made to be seen.").split(" ");
  const mid = Math.ceil(words.length / 2);
  const slide = idx === 0
    ? { eyebrow: sub || CM_SLIDES[0].eyebrow, h: [words.slice(0, mid).join(" "), words.slice(mid).join(" ")], cta: CM_SLIDES[0].cta, ctaFn: CM_SLIDES[0].ctaFn }
    : CM_SLIDES[idx];

  return (
    <section className="hero hcol-root" aria-label="Hero banner">
      <div className="hcol-strips" aria-hidden="true">
        <ImageStrip panel={CM_PANELS[0]} delay={0} />
        <ImageStrip panel={CM_PANELS[1]} delay={200} />
        <ImageStrip panel={CM_PANELS[2]} delay={400} />
        <ImageStrip panel={CM_PANELS[3]} delay={600} />
      </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" + (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={() => slide.ctaFn(onNav)}>{slide.cta}</Btn>
          <Btn variant="ghost" arrow={false} className="on-dark" onClick={() => onNav("contact", {})}>Enquire</Btn>
        </div>
      </div>

      <div className="hcol-corner mono" aria-hidden="true">
        {(window.BRAND && window.BRAND.name) || "Chinasa Martins"}
      </div>
      <div className="hcol-scroll" aria-hidden="true"><span className="hcol-scroll-line" /></div>
    </section>
  );
}

Object.assign(window, { HeroCollage });