const NAV = [
  ['landing', 'Landing', 'home'], ['explore', 'Explore', 'search'], ['detail', 'Detail Konser', 'ticket'], ['queue', 'Smart Queue', 'queue'], ['checkout', 'Checkout', 'wallet'], ['dashboard', 'Dashboard', 'chart'], ['circle', 'Social Circle', 'users'], ['ticket', 'Digital Ticket', 'ticket'], ['organizer', 'Organizer', 'chart'], ['mobile', 'Mobile App', 'phone'],
];

function Sidebar({ ctx }) {
  return (
    <aside className="sidebar">
      <button className="brand" onClick={() => ctx.go('landing')}>
        <span className="brand-mark">V</span>
        <span><b>VIBRA</b><small>Concert OS</small></span>
      </button>
      <nav className="nav-list">
        {NAV.map(([id, label, icon]) => (
          <button key={id} className={`nav-item ${ctx.page === id ? 'active' : ''}`} onClick={() => ctx.go(id)}>
            <Icon name={icon} size={17} /> {label}
          </button>
        ))}
      </nav>
      <div className="sidebar-card">
        <span className="pulse" />
        <b>Live demand</b>
        <p>12.840 fans aktif cari tiket minggu ini.</p>
      </div>
    </aside>
  );
}

function Topbar({ ctx }) {
  return (
    <header className="topbar">
      <div>
        <span className="eyebrow">INDONESIA-FIRST CONCERT PLATFORM</span>
        <h1>{NAV.find(x => x[0] === ctx.page)?.[1] || 'VIBRA'}</h1>
      </div>
      <div className="top-actions">
        <button className="searchbar" onClick={() => ctx.go('explore')}><Icon name="search" size={16} /> Cari konser, artist, fandom...</button>
        <button className="icon-btn"><Icon name="bell" size={18} /></button>
        <button className="avatar">AR</button>
      </div>
    </header>
  );
}

function Section({ eyebrow, title, action, children }) {
  return <section className="section"><div className="section-head"><div><span className="eyebrow">{eyebrow}</span><h2>{title}</h2></div>{action}</div>{children}</section>;
}

function Stat({ label, value, tone = 'violet' }) {
  return <div className={`stat-card ${tone}`}><span>{label}</span><b>{value}</b><small>Live updated</small></div>;
}

function EventCard({ event, ctx, compact = false }) {
  return (
    <article className={`event-card ${compact ? 'compact' : ''}`} onClick={() => ctx.go('detail')}>
      <div className="event-art" style={{ background: event.cover }}><span>{event.genre}</span></div>
      <div className="event-body">
        <div className="row between"><span className="chip">{event.city}</span><span className="sold">{event.sold}% sold</span></div>
        <h3>{event.title}</h3>
        <p>{event.venue} · {event.date}</p>
        <div className="row between"><b>{fmtIDR(event.price)}</b><button className="mini-btn">Detail</button></div>
      </div>
    </article>
  );
}

function ArtistCard({ name, i }) {
  const gradients = ['#8B5CF6,#F472B6', '#22D3EE,#2563EB', '#FBBF24,#FB7185', '#A3E635,#22D3EE'];
  return <div className="artist-card"><div className="artist-orb" style={{ background: `linear-gradient(135deg,${gradients[i % gradients.length]})` }}>{name[0]}</div><b>{name}</b><span>{(42 - i * 4).toFixed(1)}K followers</span></div>;
}

function AvatarStack({ count = 5 }) {
  return <div className="avatar-stack">{ATTENDEES.slice(0, count).map((n, i) => <span key={n} style={{ zIndex: 10 - i }}>{n[0]}</span>)}<em>+{count * 128}</em></div>;
}

Object.assign(window, { Sidebar, Topbar, Section, Stat, EventCard, ArtistCard, AvatarStack });