function SalesPerformance({ ctx }) {
  return (
    <div className="stack">
      <div className="row between">
        <span className="eyebrow">SALES PERFORMANCE · Q2 2026</span>
        <div className="row" style={{ gap: 8 }}>
          <button className="chip-filter">Bulan</button>
          <button className="chip-filter active">Quarter</button>
          <button className="chip-filter">Tahun</button>
          <button className="btn ghost"><Icon name="download" size={14} /> Export</button>
        </div>
      </div>

      <div className="grid grid-4">
        <Stat label="Revenue Closed" value={fmtShort(5210000000)} delta="+24%" tone="green" icon="money" />
        <Stat label="Target Achievement" value="87%" delta="+12%" tone="indigo" icon="target" />
        <Stat label="Conversion Rate" value="14.6%" delta="+2.1%" tone="blue" icon="trend" />
        <Stat label="Avg Response Time" value="2.4j" delta="-18%" tone="cyan" icon="clock" />
      </div>

      <div className="split-2-1">
        <div className="card">
          <div className="card-head"><h3>Revenue Trend · 12 bulan</h3><span className="status-pill green">+24% YoY</span></div>
          <BarChart data={REVENUE_TREND} color="#10b981" height={220} />
        </div>
        <div className="card">
          <div className="card-head"><h3>Target Progress</h3><small>Q2 2026</small></div>
          <div className="stack" style={{ gap: 16 }}>
            {[['Revenue', 5210, 6000, 'green'], ['Deals Won', 30, 38, 'indigo'], ['New Customer', 142, 180, 'blue'], ['Activities', 1840, 2000, 'cyan']].map(([l, v, t, c]) => (
              <div key={l}>
                <div className="row between" style={{ marginBottom: 6, fontSize: 12.5 }}>
                  <b style={{ color: 'var(--text)' }}>{l}</b>
                  <span style={{ color: 'var(--muted)' }}>{l === 'Revenue' ? fmtShort(v * 1e6) : v} / {l === 'Revenue' ? fmtShort(t * 1e6) : t}</span>
                </div>
                <div style={{ height: 10, background: 'var(--slate-soft)', borderRadius: 5, overflow: 'hidden' }}>
                  <div style={{ height: '100%', width: ((v / t) * 100) + '%', background: `var(--${c})`, borderRadius: 5 }} />
                </div>
                <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 4 }}>{Math.round((v / t) * 100)}% achieved</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="split-1-2">
        <div className="card">
          <div className="card-head"><h3>Conversion Funnel</h3></div>
          <div className="funnel">
            {FUNNEL.map((f, i) => (
              <div key={f.stage} className="funnel-row">
                <span className="flabel">{f.stage}</span>
                <div className="fbar"><div style={{ width: Math.max(f.pct * 4, 8) + '%' }}>{f.pct}%</div></div>
                <span className="fnum">{f.n.toLocaleString('id-ID')}</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 12, padding: 12, background: 'var(--primary-soft)', borderRadius: 10, fontSize: 12, color: 'var(--primary)' }}>
            <b>Insight:</b> Conversion lead→qualified naik 18%, tapi qualified→proposal drop 4%. Perlu sales coaching di tahap discovery.
          </div>
        </div>

        <div className="card">
          <div className="card-head"><h3>Team Leaderboard</h3><span className="status-pill indigo">Q2 2026</span></div>
          {SALES_REPS.map((r, i) => (
            <div key={r.name} className={`leaderboard-row ${i === 0 ? 'top1' : i === 1 ? 'top2' : i === 2 ? 'top3' : ''}`}>
              <span className="rank">{i + 1}</span>
              <div>
                <div className="lname"><Avatar name={r.name} tone="indigo" />{r.name}</div>
                <small>{r.deals} deals · {r.won} won</small>
              </div>
              <div>
                <small>Revenue</small>
                <div style={{ fontFamily: 'var(--display)', fontWeight: 600, color: 'var(--text)', fontSize: 13 }}>{fmtShort(r.value)}</div>
              </div>
              <div>
                <small>Target {Math.round((r.value / r.target) * 100)}%</small>
                <div className="progress-mini" style={{ marginTop: 4 }}><div style={{ width: Math.min((r.value / r.target) * 100, 100) + '%' }} /></div>
              </div>
              <b style={{ textAlign: 'right', fontFamily: 'var(--display)', fontSize: 15, color: 'var(--text)' }}>{r.won}<small style={{ fontSize: 11, color: 'var(--muted)', fontWeight: 400 }}> won</small></b>
            </div>
          ))}
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>Closed Deals · Bulan ini</h3><button className="link-btn">Lihat semua</button></div>
        <table className="table" style={{ border: 0 }}>
          <thead><tr><th>Deal</th><th>Customer</th><th>Owner</th><th>Stage</th><th>Closed Date</th><th>Value</th></tr></thead>
          <tbody>
            {[
              ['Bumi Hijau · Implementation Phase 1', 'PT Bumi Hijau Energi', 'Rina W.', 'won', '24 Mei', 1200000000],
              ['Sekolah Cendekia · Annual License', 'Sekolah Cendekia Mulia', 'Andini S.', 'won', '20 Mei', 180000000],
              ['Yayasan Pelita · Renewal', 'Yayasan Pelita Bangsa', 'Dimas P.', 'won', '18 Mei', 210000000],
              ['Toko Laris · Starter Package', 'Toko Laris Jaya', 'Andini S.', 'won', '14 Mei', 45000000],
              ['Pradnya Stationery · Q2', 'Pradnya Bali Indonesia', 'Rina W.', 'won', '10 Mei', 88000000],
            ].map(([d, c, o, s, dt, v]) => (
              <tr key={d}>
                <td><b>{d}</b></td>
                <td>{c}</td>
                <td><div className="cell-user"><Avatar name={o} tone="indigo" /><span>{o}</span></div></td>
                <td><StatusPill tone="green"><Icon name="check" size={11} />{s}</StatusPill></td>
                <td>{dt} 2026</td>
                <td><b style={{ color: 'var(--success)' }}>{fmtShort(v)}</b></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="grid grid-3">
        <div className="card">
          <div className="card-head"><h3>Response Time</h3></div>
          <b style={{ fontFamily: 'var(--display)', fontSize: 32, color: 'var(--text)' }}>2.4 <small style={{ fontSize: 14, color: 'var(--muted)', fontWeight: 400 }}>jam</small></b>
          <p style={{ fontSize: 12, marginTop: 4 }}>Rata-rata respon lead baru. <span style={{ color: 'var(--success)', fontWeight: 600 }}>↓ 18% lebih cepat</span></p>
          <div style={{ marginTop: 14 }}><Spark data={[4.2, 3.8, 3.5, 3.1, 2.9, 2.7, 2.4]} color="#0891b2" height={50} /></div>
        </div>
        <div className="card">
          <div className="card-head"><h3>Retention Rate</h3></div>
          <b style={{ fontFamily: 'var(--display)', fontSize: 32, color: 'var(--text)' }}>94<small style={{ fontSize: 14, color: 'var(--muted)', fontWeight: 400 }}>%</small></b>
          <p style={{ fontSize: 12, marginTop: 4 }}>Customer aktif rolling 12 bulan. <span style={{ color: 'var(--success)', fontWeight: 600 }}>+2% YoY</span></p>
          <div style={{ marginTop: 14 }}><Spark data={[88, 89, 90, 92, 91, 93, 94]} color="#10b981" height={50} /></div>
        </div>
        <div className="card">
          <div className="card-head"><h3>Avg Deal Size</h3></div>
          <b style={{ fontFamily: 'var(--display)', fontSize: 32, color: 'var(--text)' }}>{fmtShort(310000000)}</b>
          <p style={{ fontSize: 12, marginTop: 4 }}>Naik dari Rp 248jt quarter lalu. <span style={{ color: 'var(--success)', fontWeight: 600 }}>+25%</span></p>
          <div style={{ marginTop: 14 }}><Spark data={[180, 210, 245, 248, 270, 295, 310]} color="#4f46e5" height={50} /></div>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { SalesPerformance });