/* ============================================================
   ARMONI CAPEL — Collage Hero  (4 equal vertical video strips)
   ============================================================
   4 strips, 3 real videos (one repeats, never adjacent to itself):
   a, b, c, a — each with its extracted frame as an instant-paint
   poster behind the <video>. Text box: headline + exactly two
   buttons (Shop, Collections). No eyebrow/pretext copy.
   ============================================================ */

const HEADLINES = [
  ["Rooted in Modern", "Self-Expression."],
  ["Your Everyday", "Pick."],
  ["Every Set Has", "a Story."],
];

const STRIP_ORDER = ["a", "c", "b", "a"];

/* ── Single strip: real video, its own extracted frame as instant-paint fallback ── */
function ImageStrip({ videoKey, delay }) {
  const vid = (window.RB_VIDEOS || []).find((v) => v.key === videoKey);
  const [ready, setReady] = useState(false);
  if (!vid) return <div className="hcol-strip" />;
  return (
    <div className="hcol-strip">
      <img src={vid.poster} alt="" className="hcol-media hcol-poster" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", animationDelay: delay + "ms" }} />
      <video className="hcol-media" src={vid.src} poster={vid.poster} autoPlay muted loop playsInline
        onLoadedData={() => setReady(true)}
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", animation: "none", opacity: ready ? 1 : 0, transition: "opacity .3s ease" }} />
    </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) % HEADLINES.length);
        setTextIn(true);
      }, 450);
    }, INTERVAL);
    return () => clearInterval(t);
  }, []);

  const h = HEADLINES[idx];

  return (
    <section className="hero hcol-root" aria-label="Hero banner">
      <div className="hcol-strips" aria-hidden="true">
        {STRIP_ORDER.map((k, i) => <ImageStrip key={i} videoKey={k} delay={i * 200} />)}
      </div>

      <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}>
        <h1 className="display hcol-h">
          <span className="hcol-hline">{h[0]}</span>
          <span className="hcol-hline hcol-hem">{h[1]}</span>
        </h1>
        <div className="hcol-cta-row">
          <Btn variant="ghost" arrow={false} className="on-dark" onClick={() => onNav("shop", {})}>Shop</Btn>
          <Btn size="lg" onClick={() => onNav("collections", {})}>Collections</Btn>
        </div>
      </div>

      <div className="hcol-corner mono" aria-hidden="true">
        {((window.BRAND && window.BRAND.name) || "Armoni Capel") + " · " + ((window.BRAND && window.BRAND.seasonTag) || "Your Everyday Pick")}
      </div>

      <div className="hcol-scroll" aria-hidden="true"><span className="hcol-scroll-line" /></div>
    </section>);
}

Object.assign(window, { HeroCollage });