/* ============================================================
   WILLZ WEARS — Filmstrip Hero
   4-panel horizontal video collage of REAL @official_willzwears
   footage/photography. Full-colour, no wash — light theme only
   touches UI chrome.

   SWAP-IN NOTE: each panel reads `img` (poster still) and an
   optional `video` src — replace either to update a panel with
   zero other code changes.
   ============================================================ */

const FILMSTRIP_PANELS = [
  {
    id: "panel-1",
    eyebrow: "Velvet",
    caption: "Occasion tailoring",
    img: "uploads/ow_pic_sm_5.jpg",
    video: "", // drop a real product/runway clip here
  },
  {
    id: "panel-2",
    eyebrow: "Colour",
    caption: "Statement suiting",
    img: "uploads/ow_pic_sm_6.jpg",
    video: "", // static poster only — kept off autoplay to protect performance
  },
  {
    id: "panel-3",
    eyebrow: "Sets",
    caption: "Made to measure",
    img: "uploads/ow_pic_sm_8.jpg",
    video: "", // static poster only — kept off autoplay to protect performance
  },
  {
    id: "panel-4",
    eyebrow: "Detail",
    caption: "Cut with purpose",
    img: "uploads/ow_pic_sm_7.jpg",
    video: "", // static poster only — kept off autoplay to protect performance
  },
];

function FilmstripPanel({ panel, index }) {
  return (
    <div className="fs-panel" style={{ animationDelay: (index * 120) + "ms" }}>
      <div className="fs-panel-media">
        <img className="fs-panel-img fs-kenburns" src={panel.img} alt="" aria-hidden="true" loading={index < 2 ? "eager" : "lazy"} decoding="async"
          style={{ animationDelay: (index * 900) + "ms" }} />
      </div>
      <div className="fs-panel-tag">
        <span className="mono">{panel.eyebrow}</span>
        <span className="serif">{panel.caption}</span>
      </div>
    </div>
  );
}

function HeroFilmstrip({ onNav }) {
  return (
    <section className="hero fs-root" aria-label="Hero banner">
      <div className="fs-strip" aria-hidden="true">
        {FILMSTRIP_PANELS.map((p, i) => <FilmstripPanel key={p.id} panel={p} index={i} />)}
      </div>

      <div className="fs-overlay" aria-hidden="true" />

      <div className="fs-content wrap">
        <Eyebrow style={{ color: "var(--accent-bright)" }}>
          {((window.BRAND && window.BRAND.seasonTag) || "SS26") + " Collection"}
        </Eyebrow>
        <h1 className="display fs-h">Cut with purpose.</h1>
        <p className="lede fs-sub">Menswear and tailored pieces, made to measure.</p>
        <div className="hero-cta">
          <Btn onClick={() => onNav("shop", {})}>Shop the Collection</Btn>
          <Btn variant="ghost" arrow={false} className="on-dark" onClick={() => onNav("bespoke", {})}>Book a Fitting</Btn>
        </div>
      </div>

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

Object.assign(window, { HeroFilmstrip });