function Explore({ ctx }) {
  const tabs = ['Semua', 'K-Pop', 'Indie', 'Festival', 'EDM', 'Jakarta', 'Bandung', 'Bali', 'Minggu ini'];
  return <div className="stack">
    <section className="explore-head glass-card"><div><span className="eyebrow">EXPLORE</span><h2>Cari konser, circle, dan tiket resmi.</h2></div><div className="mega-search"><Icon name="search"/><input placeholder="Cari LUNA//WAVE, Pestapora, Bandung gig..."/></div></section>
    <div className="tab-row">{tabs.map((t, i) => <button key={t} className={i === 0 ? 'active' : ''}>{t}</button>)}</div>
    <div className="filter-bar"><button><Icon name="map"/> Lokasi</button><button>Genre</button><button>Tanggal</button><button>Harga</button><button>Nearby</button></div>
    <div className="explore-layout"><div className="event-grid vertical">{EVENTS.map(e => <EventCard key={e.id} event={e} ctx={ctx}/>)}</div><aside className="side-panel"><h3>Trending nearby</h3>{EVENTS.slice(0,3).map(e => <EventCard key={e.id} event={e} ctx={ctx} compact/>)}<h3>Artist populer</h3>{ARTISTS.slice(0,4).map((a,i)=><ArtistCard key={a} name={a} i={i}/>)}</aside></div>
  </div>;
}
Object.assign(window, { Explore });
