function Dashboard({ ctx }) {
  const topCustomers = CUSTOMERS.slice(0, 5).sort((a, b) => b.deal - a.deal);
  return (
    <div className="stack">
      <div className="welcome-hero">
        <div>
          <span className="eyebrow accent">SELAMAT DATANG KEMBALI · SELASA, 26 MEI</span>
          <h2>Halo Rina, ada 9 follow-up jatuh tempo hari ini.</h2>
          <p>Pipeline minggu ini naik 18% dibanding minggu lalu. Tim sales sudah closed Rp 1,2M deal baru.</p>
        </div>
        <div className="hero-actions">
          <button className="btn ghost" onClick={() => ctx.go('reminders')}><Icon name="bell" size={15} /> Lihat reminder</button>
          <button className="btn primary" onClick={() => ctx.go('pipeline')}><Icon name="pipeline" size={15} /> Buka Pipeline</button>
        </div>
      </div>

      <div className="grid grid-5">
        <Stat label="Total Customer" value={DASHBOARD_STATS.customers} delta="+12" tone="indigo" icon="users" />
        <Stat label="Lead Baru" value={DASHBOARD_STATS.newLeads} delta="+34%" tone="blue" icon="user" />
        <Stat label="Follow-up Overdue" value={DASHBOARD_STATS.overdue} delta="+3" tone="red" icon="clock" />
        <Stat label="Pipeline Value" value={fmtShort(DASHBOARD_STATS.pipeline)} delta="+18%" tone="green" icon="money" />
        <Stat label="Ticket Aktif" value={DASHBOARD_STATS.tickets} delta="-2" tone="amber" icon="ticket" />
      </div>

      <div className="split-2-1">
        <div className="card">
          <div className="card-head">
            <div><h3>Revenue Pipeline · 12 bulan terakhir</h3><small>Forecast vs realisasi</small></div>
            <button className="link-btn" onClick={() => ctx.go('sales')}>Lihat detail →</button>
          </div>
          <BarChart data={REVENUE_TREND} color="#2563eb" height={200} />
        </div>
        <div className="card">
          <div className="card-head"><h3>Reminder Hari Ini</h3><span className="status-pill red">{REMINDERS.filter(r => r.tone === 'red' || r.tone === 'amber').length} urgent</span></div>
          <div className="stack" style={{ gap: 8 }}>
            {REMINDERS.slice(0, 4).map(r => (
              <div key={r.id} className={`reminder-item ${r.tone}`}>
                <span className="rem-mark" />
                <div className="rem-body">
                  <b>{r.title}</b>
                  <p>{r.who} · {r.when}</p>
                </div>
              </div>
            ))}
          </div>
          <button className="btn ghost block sm" style={{ marginTop: 12 }} onClick={() => ctx.go('reminders')}>Lihat semua reminder</button>
        </div>
      </div>

      <div className="split-1-2">
        <div className="card">
          <div className="card-head"><h3>Segmen Customer</h3></div>
          <div className="stack" style={{ gap: 10 }}>
            {SEGMENTS.slice(0, 5).map(s => (
              <div key={s.name} className="row between" style={{ padding: '8px 0', borderBottom: '1px solid var(--line2)' }}>
                <div className="row" style={{ gap: 10 }}>
                  <span className={`avatar-mini ${s.color}`}><Icon name="segment" size={13} /></span>
                  <div>
                    <b style={{ fontSize: 13 }}>{s.name}</b>
                    <div style={{ fontSize: 11.5, color: 'var(--muted)' }}>{s.count} customer</div>
                  </div>
                </div>
                <span className={`status-pill ${s.growth >= 0 ? 'green' : 'red'}`}>{s.growth >= 0 ? '+' : ''}{s.growth}%</span>
              </div>
            ))}
          </div>
        </div>
        <div className="card">
          <div className="card-head"><h3>Top Customer · Berdasarkan Deal Value</h3><button className="link-btn" onClick={() => ctx.go('customers')}>Database →</button></div>
          <table className="table" style={{ border: 0 }}>
            <thead><tr><th>Company</th><th>Owner</th><th>Lifecycle</th><th>Deal Value</th><th>Skor</th></tr></thead>
            <tbody>
              {topCustomers.map(c => (
                <tr key={c.id} onClick={() => ctx.go('detail')} style={{ cursor: 'pointer' }}>
                  <td>
                    <div className="cell-user">
                      <Avatar name={c.company} tone={c.tone} />
                      <div><b>{c.company}</b><span>{c.contact} · {c.city}</span></div>
                    </div>
                  </td>
                  <td><Avatar name={c.owner} tone="slate" /> <span style={{ marginLeft: 6 }}>{c.owner}</span></td>
                  <td><StatusPill tone={c.tone}>{c.lifecycle}</StatusPill></td>
                  <td><b>{fmtShort(c.deal)}</b></td>
                  <td>
                    <div className={`score-bar ${c.score >= 80 ? '' : c.score >= 60 ? 'med' : 'low'}`}>
                      <div className="score-bar-track"><div className="score-bar-fill" style={{ width: c.score + '%' }} /></div>
                      <b>{c.score}</b>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>Aktivitas Terbaru</h3><button className="link-btn" onClick={() => ctx.go('activity')}>Activity tracker →</button></div>
        <div className="timeline">
          {ACTIVITIES.slice(0, 6).map((a, i) => (
            <div key={i} className="timeline-item">
              <span className={`tl-icon ${a.tone}`}><ChannelIcon ch={a.type} /></span>
              <div className="tl-body">
                <div className="tl-title"><b>{a.who}</b> · {a.desc} <span style={{ color: 'var(--muted)' }}>— {a.target}</span></div>
                <div className="tl-meta">{a.when}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="footer-note"><span>© 2026 Relate CRM · Indonesia Workspace</span><span>Sinkronisasi real-time · Update 2 detik lalu</span></div>
    </div>
  );
}
Object.assign(window, { Dashboard });