/* ============================================================
   SPARKS & SPLENDOUR — Mosaic Hero
   Asymmetric collage: one large panel + 3 smaller tiles, built
   from the brand's real product photography (@splendourofficial).
   Two tiles carry a short muted autoplay video (brand asset)
   layered over a full-colour still fallback/poster.
   ============================================================ */
function MosaicTile({ src, videoSrc, className }) {
  return (
    <div className={"ssm-tile " + className}>
      <img className="ssm-media ssm-poster" src={src} alt="" aria-hidden="true" />
      {videoSrc && (
        <video className="ssm-media" src={videoSrc} poster={src} autoPlay muted loop playsInline aria-hidden="true" />
      )}
    </div>
  );
}

function HeroCollage({ onNav, headline, sub }) {
  const S = window.SS_STILLS || {};
  const V = window.RB_VIDEOS || [];
  const logoSrc = "uploads/logo-emblem.png";

  return (
    <section className="hero ssm-root" aria-label="Hero banner">
      <div className="ssm-grid" aria-hidden="true">
        <MosaicTile className="ssm-tile-a" src={S.groomsmenOlive} videoSrc={V[0]} />
        <MosaicTile className="ssm-tile-b" src={S.pinstripeDuo} videoSrc={V[1]} />
        <MosaicTile className="ssm-tile-c" src={S.burgundyCard} videoSrc={V[2]} />
        <MosaicTile className="ssm-tile-d" src={S.agbadaRedShoes} videoSrc={V[3]} />
      </div>

      <div className="ssm-scrim" aria-hidden="true" />

      <div className="ssm-content">
        <p className="ssm-eyebrow mono">Bespoke Menswear</p>
        <h1 className="display ssm-h">{headline}</h1>
        <p className="ssm-sub">{sub}</p>
        <div className="ssm-cta-row">
          <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="ssm-corner mono" aria-hidden="true">Sparks &amp; Splendour</div>
    </section>
  );
}

Object.assign(window, { HeroCollage });