function UserDashboard({ ctx }) {
  return <div className="stack"><div className="stats-grid"><Stat label="Konser mendatang" value="3"/><Stat label="Circle aktif" value="12" tone="cyan"/><Stat label="Badge" value="18" tone="pink"/><Stat label="Fandom level" value="Lv. 42" tone="lime"/></div><div className="dashboard-grid"><section className="glass-card"><span className="eyebrow">UPCOMING</span><EventCard event={EVENTS[0]} ctx={ctx}/><EventCard event={EVENTS[1]} ctx={ctx} compact/></section><section className="glass-card"><span className="eyebrow">BADGE COLLECTION</span><div className="badge-grid">{BADGES.map(b=><div className="badge-card" key={b}><Icon name="spark"/><b>{b}</b></div>)}</div></section><section className="glass-card"><span className="eyebrow">FAVORITE ARTISTS</span><div className="artist-row column">{ARTISTS.slice(0,5).map((a,i)=><ArtistCard key={a} name={a} i={i}/>)}</div></section><section className="glass-card"><span className="eyebrow">SOCIAL ACTIVITY</span><div className="feed">{ACTIVITY.map(a=><div key={a}><span className="pulse"/><p>{a}</p></div>)}</div></section></div></div>;
}
Object.assign(window, { UserDashboard });