/* ============================================================
   BILLZ NG — Fanned Card Deck Hero
   ============================================================
   A shallow arc of overlapping shoe panels, each rotated a few
   degrees off-center like a fanned hand of cards. The front/
   center card is enlarged and sharp; side cards recede with a
   blur + dim. The centered card auto-advances through the deck.
   Category-accurate stock stills stand in for real billz ng
   media — swap the FAN_ITEMS "img" keys for uploaded bn_pic/
   bn_vid files (see comment below) once available.
   ============================================================ */

/* To go live with real billz ng media: replace each RB_IMGS key
   below with the matching bn_pic 1-2 / bn_vid 1-12 asset once
   those files are uploaded into the project (this hero is video-
   ready — swap the <img> for a muted autoplay <video> per card
   using the same layout classes). */
const FAN_ITEMS = [
  { img: "assets/bn-pic-2.webp", cat: "Sneakers", gender: "Women" },
  { img: "assets/bn-pic-2.webp", cat: "Loafers",  gender: "Men" },
  { img: "assets/bn-pic-1.webp", cat: "Boots",    gender: "Men" },
  { img: "assets/bn-pic-1.webp", cat: "Heels",    gender: "Women" },
  { img: "assets/bn-pic-1.webp", cat: "Sandals",  gender: "Women" },
];

const FAN_GEOM = [
  { x: -380, y: 46, rot: -16, scale: 0.74 },
  { x: -200, y: 18, rot: -8,  scale: 0.88 },
  { x: 0,    y: 0,  rot: 0,   scale: 1.08 },
  { x: 200,  y: 18, rot: 8,   scale: 0.88 },
  { x: 380,  y: 46, rot: 16,  scale: 0.74 },
];

function FanCard({ item, geomIdx, isCenter }) {
  const g = FAN_GEOM[geomIdx];
  return (
    <div
      className={"hfan-card" + (isCenter ? " center" : " side")}
      style={{
        transform: `translate(-50%,-50%) translate(${g.x}px, ${g.y}px) rotate(${g.rot}deg) scale(${g.scale})`,
        zIndex: 10 - Math.abs(g.x) / 100,
      }}
    >
      <img src={item.img} alt="" aria-hidden="true" />
      <div className="hfan-card-tag mono">{item.cat}</div>
    </div>
  );
}

function HeroCollage({ onNav }) {
  const [center, setCenter] = useState(2);

  useEffect(() => {
    const t = setInterval(() => setCenter((c) => (c + 1) % FAN_ITEMS.length), 4200);
    return () => clearInterval(t);
  }, []);

  /* rotate the item order so `center` index always renders at geom slot 2 */
  const ordered = FAN_ITEMS.map((_, i) => FAN_ITEMS[(center - 2 + i + FAN_ITEMS.length * 2) % FAN_ITEMS.length]);

  return (
    <section className="hero hfan-root" aria-label="Hero banner">
      <div className="hfan-stage">
        {ordered.map((item, i) => (
          <FanCard key={item.img + i} item={item} geomIdx={i} isCenter={i === 2} />
        ))}
      </div>

      <div className="hfan-content">
        <p className="hfan-eyebrow mono">{(window.BRAND && window.BRAND.igHandle) || "@billz.ng"} · {(window.BRAND && window.BRAND.seasonTag) || "New arrivals"}</p>
        <h1 className="display hfan-h">Shoes,<br /><em>for every step.</em></h1>
        <div className="hfan-cta">
          <Btn onClick={() => onNav("shop", {})}>Shop the Collection</Btn>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HeroCollage });