function ConcertDetail({ ctx }) {
  const event = EVENTS[0];
  return <div className="stack">
    <section className="detail-hero" style={{ background: event.cover }}><div><span className="eyebrow">LIVE IN JAKARTA</span><h2>{event.title}</h2><p>{event.date} · {event.time} · {event.venue}</p><div className="hero-actions"><button className="btn primary" onClick={() => ctx.go('queue')}>Masuk Smart Queue</button><button className="btn ghost" onClick={() => ctx.go('circle')}>Join Community</button></div></div><div className="countdown-card"><span>Sale dimulai</span><b>02:14:38</b><small>Anti-bot queue aktif</small></div></section>
    <div className="detail-grid"><section className="glass-card"><span className="eyebrow">TICKET TIERS</span><div className="tier-list">{TIER_PRICES.map(t => <div className="tier-card" key={t.name}><div><h3>{t.name}</h3><p>{t.perk}</p></div><div><b>{fmtIDR(t.price)}</b><span>{t.left} tersisa</span></div></div>)}</div></section><section className="glass-card seat-map"><span className="eyebrow">SEAT PREVIEW</span><div className="stage">STAGE</div>{Array.from({length: 36}).map((_,i)=><span key={i} className={i%7===0?'taken':''}/>)}</section></div>
    <div className="split-grid"><section className="glass-card"><span className="eyebrow">LINEUP</span><div className="artist-row">{ARTISTS.slice(0,4).map((a,i)=><ArtistCard key={a} name={a} i={i}/>)}</div></section><section className="glass-card"><span className="eyebrow">PEOPLE GOING</span><AvatarStack count={7}/><p>4.820 fans sudah bookmark konser ini. 312 circle meetup terbentuk.</p><button className="btn ghost" onClick={() => ctx.go('circle')}>Lihat fandom attendees</button></section></div>
    <Section eyebrow="RELATED" title="Konser lain yang cocok"><div className="event-grid">{EVENTS.slice(1).map(e => <EventCard key={e.id} event={e} ctx={ctx}/>)}</div></Section>
  </div>;
}
Object.assign(window, { ConcertDetail });