function Landing({ ctx }) {
  const hero = EVENTS[0];
  return <div className="stack">
    <section className="hero-panel">
      <div className="hero-copy">
        <span className="eyebrow neon">SMART TICKETING + FANDOM SOCIAL</span>
        <h2>Konser lebih dekat, fandom lebih hidup.</h2>
        <p>VIBRA menyatukan tiket konser, smart queue, digital pass, dan komunitas fans Indonesia dalam satu pengalaman premium.</p>
        <div className="hero-actions"><button className="btn primary" onClick={() => ctx.go('explore')}>Jelajah Konser</button><button className="btn ghost" onClick={() => ctx.go('circle')}>Cari Circle</button></div>
        <div className="hero-stats"><Stat label="Fans aktif" value="128K"/><Stat label="Konser live" value="84" tone="cyan"/><Stat label="Kota" value="12" tone="pink"/></div>
      </div>
      <div className="concert-banner" style={{ background: hero.cover }}>
        <div className="banner-top"><span>UPCOMING</span><Icon name="music" size={22}/></div>
        <h3>{hero.title}</h3><p>{hero.venue} · {hero.date}</p>
        <div className="banner-bottom"><AvatarStack/><button onClick={() => ctx.go('detail')}>Lihat Detail</button></div>
      </div>
    </section>
    <Section eyebrow="TRENDING" title="Konser paling ramai minggu ini" action={<button className="link-btn" onClick={() => ctx.go('explore')}>Lihat semua</button>}><div className="event-grid">{EVENTS.map(e => <EventCard key={e.id} event={e} ctx={ctx}/>)}</div></Section>
    <div className="split-grid">
      <section className="glass-card big"><span className="eyebrow">FANDOM COMMUNITY</span><h2>Discord-style fan hub untuk tiap konser.</h2><p>Gabung channel, cari teman nonton, plan meetup, dan lihat siapa saja yang punya taste musik mirip.</p><div className="community-grid small">{COMMUNITIES.slice(0,3).map(c => <div className="community-card" key={c.name}><b>{c.name}</b><span>{c.members} members</span><em>{c.match}% match</em></div>)}</div></section>
      <section className="glass-card organizer-cta"><Icon name="chart" size={36}/><h2>Untuk organizer</h2><p>Launch event, pantau demand, kelola queue, dan baca demografi audiens real-time.</p><button className="btn primary" onClick={() => ctx.go('organizer')}>Buka Organizer OS</button></section>
    </div>
    <Section eyebrow="FEATURED ARTISTS" title="Artist yang sedang naik"><div className="artist-row">{ARTISTS.map((a, i) => <ArtistCard key={a} name={a} i={i}/>)}</div></Section>
    <footer className="footer"><b>VIBRA</b><span>Ticketing konser & fandom platform untuk generasi panggung Indonesia.</span><button onClick={() => ctx.go('mobile')}>Lihat mobile app</button></footer>
  </div>;
}
Object.assign(window, { Landing });
