/* 6ix Mela — venue / grounds section with swappable photo gallery.
   Desktop: main + facts, thumbnails full-width below. Mobile: main, then
   thumbnails directly below it, then the facts. */
const VENUE_FACTS = [
  { ic: 'map-pin', t: 'The Bowl at Sobeys Stadium', d: '1 Shoreham Dr, Toronto — an open-air bowl at York University, right on the subway line.' },
  { ic: 'music', t: 'One Mega Stage', d: 'A single mega stage built for one massive night — every set, one crowd, one sound.' },
  { ic: 'utensils', t: 'Food & Drink On Site', d: 'Food vendors and licensed bars throughout the grounds. Come hungry.' },
  { ic: 'accessibility', t: 'Accessible Venue', d: 'Step-free access, accessible viewing platforms and dedicated entry lanes.' },
];
const VENUE_PHOTOS = [
  { src: 'assets/venue/sobeys-1.jpg', alt: 'The Bowl at Sobeys Stadium — crowd at dusk' },
  { src: 'assets/venue/sobeys-2.jpg', alt: 'Sobeys Stadium aerial with the Toronto skyline' },
  { src: 'assets/venue/sobeys-3.jpg', alt: 'Main stage and crowd at Sobeys Stadium' },
  { src: 'assets/venue/sobeys-4.jpg', alt: 'Live performance at Sobeys Stadium' },
];

function Venue() {
  const [order, setOrder] = React.useState([0, 1, 2, 3]);
  const swap = (pos) => setOrder((o) => { const n = o.slice(); const m = n[0]; n[0] = n[pos]; n[pos] = m; return n; });
  const main = VENUE_PHOTOS[order[0]];
  return (
    <section className="section venue" id="venue">
      <div className="maxw">
        <div className="sec-head">
          <div>
            <div className="eyebrow eyebrow-cyan">The grounds</div>
            <h2>Where It Goes Down</h2>
            <div className="under-bar"></div>
          </div>
          <p className="sec-sub" style={{ marginTop: 0 }}>One mega stage, food and drink, art and light installs — a whole village built for one night in the heart of the 6ix.</p>
        </div>
        <div className="venue-grid">
          <div className="venue-map">
            <img className="venue-photo" src={main.src} alt={main.alt} key={main.src} />
            <div className="venue-tag">
              <div className="t">The Bowl at Sobeys Stadium</div>
              <div className="s">TORONTO · ON · CAP 8,000</div>
            </div>
          </div>
          <div className="venue-side">
            {VENUE_FACTS.map((f) => (
              <div key={f.t} className="venue-fact">
                <span className="ic"><Icon name={f.ic} size={24} /></span>
                <div>
                  <div className="t">{f.t}</div>
                  <div className="d">{f.d}</div>
                </div>
              </div>
            ))}
          </div>
          <div className="venue-thumbs">
            {order.slice(1).map((imgIdx, i) => {
              const p = VENUE_PHOTOS[imgIdx];
              return (
                <button key={imgIdx} className="venue-thumb" onClick={() => swap(i + 1)} aria-label={'Show ' + p.alt}>
                  <img className="venue-photo" src={p.src} alt={p.alt} loading="lazy" />
                </button>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Venue = Venue;