/* 6ix Mela — lineup grid (photos + names). One mega stage, Sat Sep 12 '26. */
const ARTISTS = [
  { name: 'NAV',           img: 'assets/artists/nav.jpg' },
  { name: 'Tegi Pannu',    img: 'assets/artists/tegi-pannu.jpg' },
  { name: 'Chani Nattan',  img: 'assets/artists/chani-nattan.jpg' },
  { name: 'Inderpal Moga', img: 'assets/artists/inderpal-moga.jpg' },
  { name: 'AR Paisley',    img: 'assets/artists/ar-paisley.jpg' },
  { name: 'BK',            img: 'assets/artists/bk.jpg' },
  { name: 'Supreme Sidhu', img: 'assets/artists/supreme-sidhu.jpg' },
  { name: 'Gav',           img: 'assets/artists/gav.jpg' },
];

function Lineup() {
  return (
    <section className="section" id="lineup">
      <div className="maxw">
        <div className="sec-head">
          <div>
            <h2>The Lineup</h2>
            <div className="under-bar"></div>
          </div>
        </div>
        <div className="lineup-grid">
          {ARTISTS.map((a) => (
            <div key={a.name} className="artist">
              <div className="ph"><img src={a.img} alt={a.name} loading="lazy" /></div>
              <div className="artist-name">{a.name}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Lineup = Lineup;
window.ARTISTS = ARTISTS;