/* ============================================================
   SMB DESIGNS — Homepage Hero: Honeycomb Collage
   ============================================================
   Ten hexagon-cropped panels arranged in a honeycomb grid, each
   with a slow Ken Burns zoom so the banner doesn't feel static.
   No real product photos/videos exist for this brand yet, so
   every panel below uses a generic, category-accurate stock
   photo of women's shoes as a placeholder.

   TO SWAP IN REAL MEDIA LATER:
   - Photo only: update the matching "HERO · SHOE 0N" entry in
     images.js to the real photo URL/path.
   - Photo + video: also set PANEL_VIDEOS[N-1] below to a real
     muted/looping clip's path (its bytes must live in this
     project — see readme.md). The still stays as the poster/
     instant-paint fallback behind the video.
   ============================================================ */

const PANEL_LABELS = [
  "HERO · SHOE 01", "HERO · SHOE 02", "HERO · SHOE 03", "HERO · SHOE 04", "HERO · SHOE 05",
  "HERO · SHOE 06", "HERO · SHOE 07", "HERO · SHOE 08", "HERO · SHOE 09", "HERO · SHOE 10",
];

// Fill with real clip paths later, e.g. "videos/panel-03.mp4" — left empty for now.
const PANEL_VIDEOS = ["", "", "", "", "", "", "", "", "", ""];

// Column layout: 4 columns of 3/2/3/2 hexes = 10 panels total.
const COLS = [[0, 1, 2], [3, 4], [5, 6, 7], [8, 9]];

function HexPanel({ n, delay }) {
  const label = PANEL_LABELS[n];
  const src = (window.RB_IMGS && window.RB_IMGS[label]) || "";
  const video = PANEL_VIDEOS[n];
  const [failed, setFailed] = useState(false);
  return (
    <div className="hcomb-hex">
      {src && !failed ? (
        <img
          className="hcomb-media"
          src={src}
          alt=""
          aria-hidden="true"
          onError={() => setFailed(true)}
          style={{ animationDelay: delay + "ms" }}
        />
      ) : (
        <span className="hcomb-fallback mono">{label.replace("HERO · ", "")}</span>
      )}
      {video ? (
        <video
          className="hcomb-media"
          src={video}
          poster={src}
          autoPlay muted loop playsInline aria-hidden="true"
          style={{ animationDelay: delay + "ms" }}
        />
      ) : null}
    </div>
  );
}

function HeroCollage({ onNav, headline, sub }) {
  return (
    <section className="hero hcomb-hero" aria-label="Hero banner">
      <div className="hcomb-text">
        <p className="hcomb-eyebrow mono">{(window.BRAND && window.BRAND.igHandle) || "@smb_designs_abuja"} · Women's Footwear</p>
        <h1 className="display hcomb-h">{headline || "Step out in style."}</h1>
        <p className="lede hcomb-sub">{sub || "Shop women's shoes online — secure checkout, delivery across Nigeria and worldwide."}</p>
        <div className="hero-cta">
          <Btn onClick={() => onNav("shop", {})}>Shop the Collection</Btn>
        </div>
      </div>

      <div className="hcomb-grid" aria-hidden="true">
        {COLS.map((col, ci) => (
          <div key={ci} className={"hcomb-col" + (ci % 2 === 1 ? " down" : "")}>
            {col.map((n, ri) => <HexPanel key={n} n={n} delay={(ci * 3 + ri) * 260} />)}
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { HeroCollage });