function Activity({ ctx }) {
  const ACT_DAILY = [
    { m: 'Sen', v: 42 }, { m: 'Sel', v: 58 }, { m: 'Rab', v: 51 }, { m: 'Kam', v: 67 },
    { m: 'Jum', v: 72 }, { m: 'Sab', v: 28 }, { m: 'Min', v: 12 },
  ];
  return (
    <div className="stack">
      <div className="row between">
        <span className="eyebrow">SALES ACTIVITY · 7 hari terakhir</span>
        <div className="row" style={{ gap: 8 }}>
          <button className="chip-filter active">7 hari</button>
          <button className="chip-filter">30 hari</button>
          <button className="chip-filter">Quarter</button>
        </div>
      </div>

      <div className="grid grid-4">
        <Stat label="Calls" value="142" delta="+18" tone="blue" icon="phone" />
        <Stat label="Emails Terkirim" value="287" delta="+32" tone="indigo" icon="mail" />
        <Stat label="Meeting" value="38" delta="+5" tone="pink" icon="meeting" />
        <Stat label="Tasks Selesai" value="94%" delta="+6%" tone="green" icon="check" />
      </div>

      <div className="split-2-1">
        <div className="card">
          <div className="card-head"><h3>Aktivitas Harian per Channel</h3><small>Total 330 aktivitas minggu ini</small></div>
          <BarChart data={ACT_DAILY} color="#4f46e5" height={200} />
        </div>
        <div className="card">
          <div className="card-head"><h3>Sales Rep Leaderboard</h3></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.split(' ')[0]}</div>
                <small>{r.calls} calls · {r.emails} emails</small>
              </div>
              <div></div>
              <div></div>
              <b style={{ textAlign: 'right', fontFamily: 'var(--display)' }}>{r.won}</b>
            </div>
          ))}
        </div>
      </div>

      <div className="card">
        <div className="card-head"><h3>Activity Feed · Real-time</h3><span className="status-pill green"><span className="dot" />Live</span></div>
        <div className="timeline">
          {[...ACTIVITIES, ...ACTIVITIES.slice(0, 4)].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>
              <span className="msg-time">{a.type}</span>
            </div>
          ))}
        </div>
      </div>

      <div className="grid grid-3">
        <div className="card">
          <div className="card-head"><h3>Call Log</h3></div>
          <div className="stack" style={{ gap: 8 }}>
            {[['Bayu S.', '28 menit', 'Outbound', 'blue'], ['Mira A.', '12 menit', 'Inbound', 'green'], ['dr. Anindya', '18 menit', 'Outbound', 'blue'], ['Hendro K.', '7 menit', 'Missed', 'red']].map(([n, d, t, c]) => (
              <div key={n + d} className="row between" style={{ padding: 10, background: 'var(--elev)', borderRadius: 10 }}>
                <div className="row" style={{ gap: 10 }}>
                  <span className={`tl-icon ${c}`}><Icon name="phone" size={14} /></span>
                  <div><b style={{ fontSize: 13 }}>{n}</b><div style={{ fontSize: 11.5, color: 'var(--muted)' }}>{t}</div></div>
                </div>
                <small style={{ color: 'var(--muted)' }}>{d}</small>
              </div>
            ))}
          </div>
        </div>
        <div className="card">
          <div className="card-head"><h3>Email Performance</h3></div>
          <div className="stack" style={{ gap: 14 }}>
            {[['Open rate', 68, 'green'], ['Click rate', 32, 'blue'], ['Reply rate', 21, 'indigo'], ['Bounce', 3, 'red']].map(([l, v, c]) => (
              <div key={l}>
                <div className="row between" style={{ marginBottom: 6, fontSize: 12.5 }}><span style={{ color: 'var(--text2)' }}>{l}</span><b style={{ fontFamily: 'var(--display)' }}>{v}%</b></div>
                <div style={{ height: 6, background: 'var(--slate-soft)', borderRadius: 3 }}><div style={{ height: '100%', width: v + '%', background: 'var(--' + c + ')', borderRadius: 3 }} /></div>
              </div>
            ))}
          </div>
        </div>
        <div className="card">
          <div className="card-head"><h3>Task Completion</h3><span className="status-pill green">94% on time</span></div>
          <div className="stack" style={{ gap: 10 }}>
            <div className="row between"><span style={{ fontSize: 13 }}>Hari ini</span><b style={{ fontFamily: 'var(--display)' }}>18 / 22</b></div>
            <div className="row between"><span style={{ fontSize: 13 }}>Minggu ini</span><b style={{ fontFamily: 'var(--display)' }}>112 / 124</b></div>
            <div className="row between"><span style={{ fontSize: 13 }}>Overdue</span><b style={{ fontFamily: 'var(--display)', color: 'var(--danger)' }}>4</b></div>
            <div style={{ marginTop: 6, padding: 12, background: 'var(--success-soft)', borderRadius: 10, fontSize: 12, color: 'var(--success)' }}>
              <b>🎉 Team streak:</b> 14 hari berturut-turut achieve daily target
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { Activity });