/* ============================================================
   CHOCOLATE CLOTHES GLOBAL — Collage Hero (4 equal vertical strips)
   ============================================================
   Four full-height columns. Real showroom photography/video will
   be sourced from the brand's Drive Assets Folder and wired in as
   RB_IMGS / RB_VIDEOS (see images.js) — until then each strip is
   an on-brand colour block with a mono label describing the shot
   to drop in, never a stock photo.
   Text overlay cycles through editorial headline sets every 6 s.
   ============================================================ */

const STRIP_LABELS = ["HIS · RUNWAY STILL", "HERS · RED CARPET STILL", "SHOWROOM · ACCRA", "HIS & HERS · EDITORIAL"];
const STRIP_TONES = ["a", "b", "c", "d"];
const img = (label) => (window.RB_IMGS || {})[label] || "";
const VIDS = window.RB_VIDEOS || [];

const SLIDES = [
{
  eyebrow: "His & Hers · Runway to Red Carpet",
  h: ["Dressed for", "the Room."],
  cta: "Shop His & Hers",
  ctaFn: (nav) => nav("shop", {})
},
{
  eyebrow: "Visit the Showroom · Accra",
  h: ["Runway,", "Made Real."],
  cta: "Shop Now",
  ctaFn: (nav) => nav("shop", {})
}];


/* ── Single strip — full-colour photo poster with an autoplay video layered on top ── */
function ImageStrip({ label, tone, delay, videoSrc }) {
  const src = img(label);
  if (!src) {
    return (
      <div className="hcol-strip">
        <div
          className={"hcol-media hcol-block tone-" + tone}
          style={{ animationDelay: delay + "ms" }}
          aria-hidden="true">
          <span className="hcol-block-label mono" dangerouslySetInnerHTML={{ __html: label }} />
        </div>
      </div>);
  }
  return (
    <div className="hcol-strip">
      <img className="hcol-media" src={src} alt="" aria-hidden="true" />
      {videoSrc &&
      <video
        className="hcol-media"
        src={videoSrc}
        poster={src}
        autoPlay
        muted
        loop
        playsInline
        aria-hidden="true" />}

    </div>);
}

/* ══════════════════════════════════════════════════════════
   MAIN COMPONENT
   ══════════════════════════════════════════════════════════ */
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">

      {/* ── 4 equal vertical colour-block strips (placeholder media) ── */}
      <div className="hcol-strips" aria-hidden="true">
        <ImageStrip label={STRIP_LABELS[0]} tone={STRIP_TONES[0]} delay={0} videoSrc={VIDS[0]} />
        <ImageStrip label={STRIP_LABELS[1]} tone={STRIP_TONES[1]} delay={200} videoSrc={VIDS[1]} />
        <ImageStrip label={STRIP_LABELS[2]} tone={STRIP_TONES[2]} delay={400} videoSrc={VIDS[2]} />
        <ImageStrip label={STRIP_LABELS[3]} tone={STRIP_TONES[3]} delay={600} videoSrc={VIDS[3]} />
      </div>

      {/* Cinematic gradient overlay */}
      <div className="hcol-overlay" aria-hidden="true" />

      {/* Gold top rule */}
      <div className="hcol-top-rule" aria-hidden="true" />

      {/* Vertical gap lines between strips */}
      <div className="hcol-dividers" aria-hidden="true">
        <span /><span /><span />
      </div>

      {/* Editorial text */}
      <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>
          <span className="hcol-hline hcol-hem">{slide.h[1]}</span>
        </h1>
        <div className="hcol-cta-row">
          <Btn onClick={() => slide.ctaFn(onNav)}>{slide.cta}</Btn>
          <Btn variant="ghost" arrow={false} className="on-dark"
          onClick={() => onNav("bespoke", {})}>
            Book a Fitting
          </Btn>
        </div>
      </div>



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

      {/* Scroll pulse line */}
      <div className="hcol-scroll" aria-hidden="true">
        <span className="hcol-scroll-line" />
      </div>

    </section>);

}

Object.assign(window, { HeroCollage });