/* People.jsx — centered text block + bottom-edge horizontal carousel of gallery1–27 */
function People() {
  const all = Array.from({ length: 27 }).map((_, i) => `assets/gallery${i + 1}.jpg`);
  const doubled = [...all, ...all];
  return (
    <section className="people dotbg" id="people">
      <div className="people-inner">
        <h2>The People</h2>
        <p>Sgt Pepe World exists because people show up.</p>
        <p>
          It started with one person, Arsonic, showing up consistently over time. Not to build a brand, but to support artists, ideas, and culture.
        </p>
        <p>
          It continues through communities like 6529.io, people who keep showing up again and again, without needing permission or recognition.
        </p>
        <p>
          And those who own a full set deserve recognition: a custom Meme Card created by Arsonic.
        </p>
        <p>The family keeps growing with time.</p>
        <div className="cta">
          <a href="pages/gallery.html" className="btn">explore the 1/1 gallery</a>
        </div>
      </div>

      <div className="carousel" data-carousel>
        <div className="carousel-track">
          {doubled.map((src, i) => (
            <div className="photo" key={i}>
              <img src={src} alt="" loading="lazy" />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.People = People;