/* ============================================================
   ZHALIMA GRAZIONI — Homepage hero: 4-panel video collage
   ============================================================
   Four equal panels in a 2×2 grid, each playing a real brand
   video (autoplay, muted, looped). To swap an asset, replace
   that slot's `src` below — each slot has a stable id
   ("hero-slot-1" … "hero-slot-4"). A slot falls back to a clean
   labelled placeholder if its video fails to load.
   ============================================================ */

const HERO_SLOTS = [
  { id: "hero-slot-1", label: "WOMENSWEAR",   src: "uploads/zg_vid 1-3eb66b96.mp4" },
  { id: "hero-slot-2", label: "MENSWEAR",     src: "uploads/zg_vid 2-ed51446c.mp4" },
  { id: "hero-slot-3", label: "OCCASIONWEAR", src: "uploads/zg_vid 3-34f2ef0c.mp4" },
  { id: "hero-slot-4", label: "EVENINGWEAR",  src: "uploads/zg_vid 5.mp4" },
];

function MoodPanel({ slot }) {
  const [failed, setFailed] = useState(false);
  return (
    <div data-hero-slot={slot.id} className="hmb-panel">
      {!failed ? (
        <video className="hmb-video" src={slot.src} autoPlay muted loop playsInline onError={() => setFailed(true)} />
      ) : (
        <div className="hmb-fallback"><span className="mono">{slot.label}</span></div>
      )}
      <span className="hmb-panel-label mono">{slot.label}</span>
    </div>
  );
}

function HeroMoodboard({ headline, sub, onNav }) {
  return (
    <section className="hero hmb-root" aria-label="Hero banner">
      <div className="hmb-cluster" aria-hidden="true">
        {HERO_SLOTS.map((s) => <MoodPanel key={s.id} slot={s} />)}
      </div>
      <div className="hmb-content">
        <Eyebrow line>{(window.BRAND && window.BRAND.tagline) || "Clothing for women and men"}</Eyebrow>
        <h1 className="display hmb-h">{headline}</h1>
        <p className="lede hmb-sub">{sub}</p>
        <div className="hero-cta">
          <Btn onClick={() => onNav("shop", {})}>Shop Now</Btn>
        </div>
        <div className="hmb-quicklinks">
          <button onClick={() => onNav("shop", { gender: "Women" })}>Shop Women</button>
          <span className="hmb-sep">/</span>
          <button onClick={() => onNav("shop", { gender: "Men" })}>Shop Men</button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HeroMoodboard });