/* ============================================================
   ABBAS — Collage Hero  (4 equal vertical strips)
   ============================================================
   Four full-height columns, each a real ABBAS video reel
   (served from GCS at deploy) layered over its matching still
   photo for instant paint / fallback. In the editor preview the
   mp4 bytes aren't reachable, so only the poster stills render —
   expected, not a bug. Text overlay cycles through headline
   sets every 6s.
   ============================================================ */

const COLLAGE_LABELS = [
  "EVENING GOWN · CORSETED BODICE",
  "SHOWPIECE · ARCHITECTURAL",
  "ATELIER · HERITAGE CRAFT",
  "ATELIER · DETAIL",
];

const POSTERS = COLLAGE_LABELS.map((l) => (window.RB_IMGS && window.RB_IMGS[l]) || "");
// Real ABBAS reels — served from GCS at deploy; not present in the editor
// preview, so only poster stills paint here. That is expected.
const VIDEOS = [
  "https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/abbas-storefront/abbas_w_v1_45s.mp4",
  "https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/abbas-storefront/abbas_m_v2_44s.mp4#t=15",
  "https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/abbas-storefront/abbas_w_v2_40s.mp4",
  "https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/abbas-storefront/abbas_m_v2_44s.mp4",
];


const SLIDES = [
{
  eyebrow: "ABBAS · Made in Lagos",
  h: ["Sculpted,", "by Hand."],
  cta: "Shop the Atelier",
  ctaFn: (nav) => nav("shop", {})
},
{
  eyebrow: "The Bridal Atelier · Corseted White Gowns",
  h: ["Dressed for", "Forever."],
  cta: "Explore Bridal",
  ctaFn: (nav) => nav("shop", { cat: "Bridal" })
},
{
  eyebrow: "Avant-Garde · Showpieces",
  h: ["Wearable", "Sculpture."],
  cta: "Shop Showpieces",
  ctaFn: (nav) => nav("shop", { cat: "Showpiece" })
}];


/* ── Single strip (poster still behind a real video reel) ── */
function ImageStrip({ src, videoSrc, label, delay }) {
  return (
    <div className="hcol-strip">
      {src ? (
        <img
          className="hcol-media hcol-poster"
          src={src}
          alt=""
          aria-hidden="true"
          style={{ animationDelay: delay + "ms", opacity: 1 }} />
      ) : (
        <Ph label={label} ratio="tall" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", animationDelay: delay + "ms" }} />
      )}
      {videoSrc ? (
        <video
          className="hcol-media"
          src={videoSrc}
          poster={src}
          autoPlay
          muted
          loop
          playsInline
          aria-hidden="true"
          style={{ animationDelay: delay + "ms" }} />
      ) : null}
    </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 strips ── */}
      <div className="hcol-strips" aria-hidden="true">
        <ImageStrip src={POSTERS[0]} videoSrc={VIDEOS[0]} label={COLLAGE_LABELS[0]} delay={0} />
        <ImageStrip src={POSTERS[1]} videoSrc={VIDEOS[1]} label={COLLAGE_LABELS[1]} delay={200} />
        <ImageStrip src={POSTERS[2]} videoSrc={VIDEOS[2]} label={COLLAGE_LABELS[2]} delay={400} />
        <ImageStrip src={POSTERS[3]} videoSrc={VIDEOS[3]} label={COLLAGE_LABELS[3]} delay={600} />
      </div>

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

      {/* 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>
          <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("custom", {})}>
            Enquire Bespoke
          </Btn>
        </div>
      </div>



      {/* Bottom corner label */}
      <div className="hcol-corner mono" aria-hidden="true">
        {((window.BRAND && window.BRAND.name) || "ABBAS") + " · " + ((window.BRAND && window.BRAND.hashtag) || "#TheKingOfCorset")}
      </div>

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

    </section>);

}

Object.assign(window, { HeroCollage });