// Hero photo collage — real generated kid-class photos arranged in a grid
// behind the centered hero card. 9 unique images, tiled across 21 cells
// with a deterministic but varied pattern.
function HeroCollage() {
  const imgs = [
    "assets/hero/ballet.jpg",
    "assets/hero/gymnastics.jpg",
    "assets/hero/art.jpg",
    "assets/hero/soccer.jpg",
    "assets/hero/music.jpg",
    "assets/hero/coding.jpg",
    "assets/hero/swim.jpg",
    "assets/hero/dance.jpg",
    "assets/hero/outdoor.jpg",
  ];
  // 7 cols x 3 rows = 21 tiles. Deterministic order so the layout is
  // stable across reloads, but mixed enough to not feel rigid.
  const order = [0, 1, 2, 3, 4, 5, 6,
                 7, 8, 0, 1, 2, 3, 4,
                 5, 6, 7, 8, 0, 1, 2];
  return (
    <div className="hero-grid">
      {order.map((idx, i) => (
        <div
          key={i}
          className="tile"
          style={{ backgroundImage: `url(${imgs[idx]})` }}
        />
      ))}
    </div>
  );
}

window.HeroCollage = HeroCollage;