/* ============================================================
   IRO LAGOS — Polaroid Hero
   A scattered, overlapping stack of real Iro Lagos photos at
   slightly different rotations, each with a slow Ken Burns zoom.
   Distinct from a quad grid / filmstrip / mosaic / split-diagonal /
   framed-centerpiece.
   ============================================================ */

const HERO_CARDS = [
  { key: "p1", tag: "Kaftans", img: () => "uploads/il_pic 1.jpg",
    top: "2%", left: "4%", w: 300, rot: -5, z: 2 },
  { key: "p2", tag: "New In", img: () => "uploads/il_pic 6.jpg",
    top: "0%", left: "38%", w: 220, rot: 4, z: 3 },
  { key: "p3", tag: "Studio", img: () => "uploads/il_pic 5.jpg",
    top: "32%", left: "2%", w: 210, rot: 6, z: 2 },
  { key: "p4", tag: "Kaftans", img: () => "uploads/il_pic 3.jpg",
    top: "36%", left: "56%", w: 250, rot: -4, z: 4 },
  { key: "p5", tag: "Prints", img: () => "uploads/il_pic 7.jpg",
    top: "60%", left: "22%", w: 195, rot: 7, z: 1 },
  { key: "p6", tag: "Look", img: () => "uploads/il_pic 9.jpg",
    top: "62%", left: "60%", w: 215, rot: -6, z: 3 },
];

function HeroPolaroid({ headline, sub, onNav }) {
  return (
    <section className="hero hero-polaroid" aria-label="Hero banner">
      <div className="hpol-content">
        <Eyebrow line>{(window.BRAND && window.BRAND.igHandle) || "@irolagos"} · {(window.BRAND && window.BRAND.regionLine) || "Lagos, Nigeria"}</Eyebrow>
        <h1 className="display hero-h">{headline}</h1>
        <p className="lede hero-sub">{sub}</p>
        <div className="hero-cta">
          <Btn onClick={() => onNav("shop", {})}>Shop the Collection</Btn>
          <Btn variant="ghost" arrow={false} onClick={() => onNav("shop", { cat: "Artworks" })}>Shop Artworks</Btn>
        </div>
      </div>
      <div className="hpol-stack" aria-hidden="true">
        {HERO_CARDS.map((s, i) => (
          <div key={s.key} className="hpol-card"
            style={{ top: s.top, left: s.left, width: s.w, transform: "rotate(" + s.rot + "deg)", zIndex: s.z }}>
            <div className="hpol-photo">
              <img className="hpol-img" src={s.img()} alt="" style={{ animationDelay: (i * 1400) + "ms" }} />
            </div>
            <span className="hpol-tag mono">{s.tag}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { HeroPolaroid });