function Reminders({ ctx }) {
  return (
    <div className="stack">
      <div className="row between">
        <span className="eyebrow">REMINDER & NOTIFICATION CENTER</span>
        <div className="row" style={{ gap: 8 }}>
          <button className="btn ghost"><Icon name="settings" size={14} /> Atur preferensi</button>
          <button className="btn primary"><Icon name="plus" size={14} /> Buat Reminder</button>
        </div>
      </div>

      <div className="grid grid-4">
        <Stat label="Overdue" value="3" tone="red" icon="clock" />
        <Stat label="Hari ini" value="9" tone="amber" icon="bell" />
        <Stat label="Minggu ini" value="34" tone="blue" icon="meeting" />
        <Stat label="Completed (7d)" value="142" delta="+18" tone="green" icon="check" />
      </div>

      <div className="split-2-1">
        <div className="stack">
          <Section eyebrow="OVERDUE & HARI INI" title="Perlu aksi segera">
            <div className="stack" style={{ gap: 10 }}>
              {REMINDERS.filter(r => ['red', 'amber'].includes(r.tone)).map(r => (
                <div key={r.id} className={`reminder-item ${r.tone}`}>
                  <span className="rem-mark" />
                  <div className="rem-body">
                    <b>{r.title}</b>
                    <p>Kontak: {r.who} · {r.when}</p>
                  </div>
                  <div className="rem-meta">
                    <StatusPill tone={r.tone}>{r.tag}</StatusPill>
                    <div className="row" style={{ gap: 4 }}>
                      <button className="icon-btn" style={{ width: 28, height: 28 }} onClick={() => ctx.notify('Reminder ditandai selesai')}><Icon name="check" size={13} /></button>
                      <button className="icon-btn" style={{ width: 28, height: 28 }}><Icon name="clock" size={13} /></button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </Section>

          <Section eyebrow="UPCOMING" title="3–7 hari ke depan">
            <div className="stack" style={{ gap: 10 }}>
              {REMINDERS.filter(r => !['red', 'amber'].includes(r.tone)).map(r => (
                <div key={r.id} className={`reminder-item ${r.tone}`}>
                  <span className="rem-mark" />
                  <div className="rem-body">
                    <b>{r.title}</b>
                    <p>Kontak: {r.who} · {r.when}</p>
                  </div>
                  <div className="rem-meta">
                    <StatusPill tone={r.tone}>{r.tag}</StatusPill>
                  </div>
                </div>
              ))}
            </div>
          </Section>
        </div>

        <div className="stack">
          <div className="card">
            <div className="card-head"><h3>Notification Center</h3><button className="link-btn">Tandai semua dibaca</button></div>
            <div className="stack" style={{ gap: 10 }}>
              {[
                { i: 'mail', t: 'Bayu Saputra membalas email', d: '2 menit lalu', tone: 'indigo' },
                { i: 'check', t: 'Deal "Hotel Aruna Bali" pindah ke Won', d: '14 menit lalu', tone: 'green' },
                { i: 'ticket', t: 'Ticket TKT-1042 di-escalate', d: '32 menit lalu', tone: 'red' },
                { i: 'meeting', t: 'Meeting dengan dr. Anindya dimulai 30 menit lagi', d: '40 menit lalu', tone: 'pink' },
                { i: 'wa', t: 'Mira Anggraini mengirim WhatsApp', d: '1 jam lalu', tone: 'green' },
                { i: 'star', t: 'Reza Mahendra memberi rating 5/5', d: '3 jam lalu', tone: 'amber' },
              ].map((n, i) => (
                <div key={i} className="row" style={{ gap: 12, padding: 10, background: i === 0 ? 'var(--primary-soft)' : 'transparent', borderRadius: 10 }}>
                  <span className={`tl-icon ${n.tone}`}><Icon name={n.i} size={14} /></span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, color: 'var(--text)' }}>{n.t}</div>
                    <div style={{ fontSize: 11.5, color: 'var(--muted)', marginTop: 2 }}>{n.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="card">
            <div className="card-head"><h3>SLA Alerts</h3></div>
            <div className="stack" style={{ gap: 8 }}>
              <div style={{ padding: 12, background: 'var(--danger-soft)', borderRadius: 10 }}>
                <div className="row between" style={{ marginBottom: 4 }}><b style={{ fontSize: 12.5, color: 'var(--danger)' }}>TKT-1040 · Kopi Senja</b><small style={{ color: 'var(--danger)' }}>36m left</small></div>
                <small style={{ color: 'var(--text2)', fontSize: 11.5 }}>SLA response akan terlampaui</small>
              </div>
              <div style={{ padding: 12, background: 'var(--warning-soft)', borderRadius: 10 }}>
                <div className="row between" style={{ marginBottom: 4 }}><b style={{ fontSize: 12.5, color: 'var(--warning)' }}>TKT-1042 · PT Sinar Retail</b><small style={{ color: 'var(--warning)' }}>2j 14m</small></div>
                <small style={{ color: 'var(--text2)', fontSize: 11.5 }}>Resolution time approaching</small>
              </div>
            </div>
          </div>

          <div className="card">
            <div className="card-head"><h3>Email Digest</h3></div>
            <div className="stack" style={{ gap: 10, fontSize: 12.5, color: 'var(--text2)' }}>
              <div className="row between"><span>Daily summary</span><span className="status-pill green">ON · 08:00</span></div>
              <div className="row between"><span>Weekly review</span><span className="status-pill green">ON · Jumat 17:00</span></div>
              <div className="row between"><span>Overdue alert</span><span className="status-pill green">Real-time</span></div>
              <div className="row between"><span>Calendar sync</span><span className="status-pill blue">Google Calendar</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { Reminders });