function SocialCircle({ ctx }) {
  return <div className="stack"><section className="circle-hero glass-card"><div><span className="eyebrow neon">CONCERT SOCIAL CIRCLE</span><h2>Temukan teman nonton dengan taste musik yang cocok.</h2><p>Match berdasarkan artist favorit, kota, budget tiket, dan gaya nonton: front row, santai, atau festival runner.</p></div><button className="btn primary" onClick={() => ctx.notify('Circle match dikirim')}>Cari Match</button></section><div className="circle-grid">{COMMUNITIES.map(c=><div className="community-card large" key={c.name}><div className="row between"><span className="chip">{c.tag}</span><b>{c.match}% cocok</b></div><h3>{c.name}</h3><p>{c.city} · {c.members} members</p><AvatarStack count={4}/><button className="mini-btn">Gabung</button></div>)}</div><div className="split-grid"><section className="glass-card chat-card"><span className="eyebrow">CHAT PREVIEW</span>{['Gate 3 meetup jam 17.00?', 'Aku bawa lightstick cadangan', 'Setlist prediction drop malam ini'].map(m=><div className="chat-bubble" key={m}>{m}</div>)}</section><section className="glass-card meetup-card"><span className="eyebrow">MEETUP PLAN</span><div className="timeline"><div><b>16:00</b><span>Kumpul MRT Ancol</span></div><div><b>17:30</b><span>Gate 3 check-in</span></div><div><b>20:00</b><span>Main show starts</span></div></div></section></div></div>;
}
Object.assign(window, { SocialCircle });