function Phone({ title, children }) {
  return <div className="phone"><div className="phone-screen"><header><b>VIBRA</b><span>{title}</span></header><main>{children}</main><nav><Icon name="home"/><Icon name="search"/><Icon name="ticket"/><Icon name="users"/></nav></div></div>;
}
function MobileShowcase({ ctx }) {
  return <div className="stack"><section className="glass-card"><span className="eyebrow">MOBILE APP SCREENS</span><h2>Pengalaman mobile untuk fans konser Indonesia.</h2><p>Home, explore, purchase, profile, social fandom, dan wallet ticket dalam gaya dark premium.</p></section><div className="phone-grid">
    <Phone title="Home"><div className="mobile-hero">LUNA//WAVE<br/><small>Jakarta Night</small></div><EventCard event={EVENTS[1]} ctx={ctx} compact/></Phone>
    <Phone title="Explore"><div className="mobile-search">Cari konser...</div>{EVENTS.slice(0,3).map(e=><div className="mini-event" key={e.id}><b>{e.title}</b><span>{e.city}</span></div>)}</Phone>
    <Phone title="Purchase"><div className="tier-list mini">{TIER_PRICES.slice(0,3).map(t=><div className="tier-card" key={t.name}><b>{t.name}</b><span>{fmtIDR(t.price)}</span></div>)}</div><button className="btn primary full">Checkout</button></Phone>
    <Phone title="Profile"><div className="profile-mobile"><div className="avatar big">AR</div><h3>Alya R.</h3><span>Lv.42 Fandom</span></div><div className="badge-grid compact">{BADGES.slice(0,4).map(b=><div className="badge-card" key={b}>{b}</div>)}</div></Phone>
    <Phone title="Circle"><div className="community-grid small">{COMMUNITIES.slice(0,3).map(c=><div className="community-card" key={c.name}><b>{c.name}</b><em>{c.match}%</em></div>)}</div></Phone>
    <Phone title="Wallet"><DigitalPass mini/></Phone>
  </div></div>;
}
Object.assign(window, { MobileShowcase });