/* ============================================================
   ZICHAEL — Collage Hero  (light video-grid collage)
   Content sits on the cream field, never over the video —
   so legibility never depends on overlay tricks.
   ============================================================ */

function HeroCollage({ onNav }) {
  const slide = {
    eyebrow: "SS26 · Signature Menswear",
    headline: "Details Define\nthe Difference.",
    sub: "Senators, kaftans and bespoke tailoring, made in Abuja — not for the crowd, never was.",
    cta: "Shop the Collection",
    ctaRoute: () => onNav("shop", {}),
  };

  const panels = [
    { src: "https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/zichael-storefront/Screen_Recording_20260629_110738_Instagram.webm", poster: img("SHIRT · RESORT"), label: "Shirt" },
    { src: "https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/zichael-storefront/Screen_Recording_20260629_110948_Instagram.webm", poster: img("FESTIVE · OWAMBE"), label: "Agbada" },
    { src: "https://storage.googleapis.com/prospect-assets-the-collective-synergy-production/zichael-storefront/Screen_Recording_20260629_111149_Instagram.webm", poster: img("LONDON · TAILORING"), label: "Tailoring" },
  ];

  return (
    <section className="hero hcol-root" aria-label="Hero banner">
      <div className="wrap-wide hcol-inner">

        {/* content — lives on the cream field, never over video */}
        <div className="hcol-content">
          <p className="hcol-eyebrow mono">{slide.eyebrow}</p>
          <h1 className="display hcol-h1">
            {slide.headline.split("\n").map((l, i) => (
              <span key={i} className="hcol-h1-line">{l}</span>
            ))}
          </h1>
          <p className="hcol-sub">{slide.sub}</p>
          <div className="hcol-btns">
            <Btn onClick={slide.ctaRoute}>{slide.cta}</Btn>
            <Btn variant="ghost" arrow={false} onClick={() => onNav("booking", {})}>Book a Fitting</Btn>
          </div>
        </div>

        {/* video-grid collage — framed in cream, rounded, bright */}
        <div className="hcol-grid">
          {panels.map((v, i) => (
            <div className="hcol-panel" key={i}>
              <VideoPanel src={v.src} poster={v.poster} label={v.label} />
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}

function VideoPanel({ src, poster, label }) {
  const ref = useRef(null);
  const [videoReady, setVideoReady] = useState(false);
  const [videoOk, setVideoOk] = useState(true);
  useEffect(() => {
    const v = ref.current;
    if (!v) return;
    v.play().catch(() => {});
    // If the clip never becomes playable, drop it and keep the still.
    const t = setTimeout(() => {
      if (v.readyState < 2) setVideoOk(false);
    }, 4000);
    return () => clearTimeout(t);
  }, []);
  return (
    <React.Fragment>
      {/* real still of the same subject — always painted, instantly */}
      {poster && <img src={poster} alt="" className="hcol-media" />}
      {videoOk && (
        <video
          ref={ref} autoPlay muted loop playsInline
          className={"hcol-media hcol-video" + (videoReady ? " ready" : "")}
          onPlaying={() => setVideoReady(true)}
          onError={() => setVideoOk(false)}
        >
          <source src={src} type="video/webm" />
        </video>
      )}
      <span className="hcol-panel-tag mono">{label}</span>
    </React.Fragment>
  );
}

Object.assign(window, { HeroCollage });