function EmailIntegration({ ctx }) {
  return (
    <div className="stack">
      <div className="row between">
        <span className="eyebrow">EMAIL INTEGRATION · Gmail & Outlook tersinkron</span>
        <div className="row" style={{ gap: 8 }}>
          <button className="btn ghost"><Icon name="settings" size={14} /> Inbox settings</button>
          <button className="btn primary"><Icon name="plus" size={14} /> Compose</button>
        </div>
      </div>

      <div className="grid grid-4">
        <Stat label="Sent (7d)" value="287" delta="+32" tone="indigo" icon="mail" />
        <Stat label="Open Rate" value="68%" delta="+4%" tone="blue" icon="trend" />
        <Stat label="Click Rate" value="32%" delta="+2%" tone="cyan" icon="target" />
        <Stat label="Reply Rate" value="21%" delta="+3%" tone="green" icon="chat" />
      </div>

      <div className="split-2-1">
        <div className="card">
          <div className="card-head"><h3>Inbox Terbaru</h3><div className="row" style={{ gap: 6 }}><button className="chip-filter active">All</button><button className="chip-filter">Starred</button><button className="chip-filter">Tracked</button></div></div>
          <div>
            {EMAILS.map(e => (
              <div key={e.id} className="email-row" onClick={() => ctx.go('communications')}>
                <Icon name="star" size={16} />
                <div className="efrom"><b>{e.from}</b><small>{e.company}</small></div>
                <div className="esubj"><b>{e.subject}</b><small>{e.preview}</small></div>
                <div className="estat">
                  <span style={{ display: 'block', color: 'var(--muted)', fontSize: 11 }}>{e.open}× open</span>
                  <span style={{ display: 'block', color: 'var(--primary)', fontSize: 11, fontWeight: 600 }}>{e.click}× click</span>
                </div>
                <span className="etime">{e.when}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="stack">
          <div className="card">
            <div className="card-head"><h3>Connected Inboxes</h3></div>
            <div className="stack" style={{ gap: 10 }}>
              <div className="row" style={{ gap: 10 }}>
                <span className="tl-icon indigo"><Icon name="mail" size={14} /></span>
                <div style={{ flex: 1 }}><b style={{ fontSize: 13 }}>rina@relate.id</b><div style={{ fontSize: 11.5, color: 'var(--muted)' }}>Gmail · sync 2 dtk lalu</div></div>
                <span className="status-pill green"><span className="dot" />Active</span>
              </div>
              <div className="row" style={{ gap: 10 }}>
                <span className="tl-icon blue"><Icon name="mail" size={14} /></span>
                <div style={{ flex: 1 }}><b style={{ fontSize: 13 }}>sales@relate.id</b><div style={{ fontSize: 11.5, color: 'var(--muted)' }}>Outlook 365 · sync 1 mnt lalu</div></div>
                <span className="status-pill green"><span className="dot" />Active</span>
              </div>
              <div className="row" style={{ gap: 10 }}>
                <span className="tl-icon amber"><Icon name="mail" size={14} /></span>
                <div style={{ flex: 1 }}><b style={{ fontSize: 13 }}>cs@relate.id</b><div style={{ fontSize: 11.5, color: 'var(--muted)' }}>Last sync 14 mnt lalu</div></div>
                <span className="status-pill amber">Delayed</span>
              </div>
            </div>
            <button className="btn ghost block sm" style={{ marginTop: 12 }}><Icon name="plus" size={13} /> Connect inbox baru</button>
          </div>

          <div className="card">
            <div className="card-head"><h3>Email Templates</h3><button className="link-btn">Kelola</button></div>
            <div className="stack" style={{ gap: 10 }}>
              {EMAIL_TEMPLATES.map(t => (
                <div key={t.name} style={{ padding: 12, background: 'var(--elev)', borderRadius: 10 }}>
                  <div className="row between" style={{ marginBottom: 6 }}>
                    <b style={{ fontSize: 13, color: 'var(--text)' }}>{t.name}</b>
                    <small style={{ color: 'var(--muted)', fontSize: 11.5 }}>{t.used}× dipakai</small>
                  </div>
                  <div className="row" style={{ gap: 12, fontSize: 11.5, color: 'var(--muted)' }}>
                    <span>Open: <b style={{ color: 'var(--success)' }}>{t.open}%</b></span>
                    <span>Click: <b style={{ color: 'var(--primary)' }}>{t.click}%</b></span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      <div className="composer">
        <div className="row between">
          <h3 style={{ fontSize: 15 }}>Compose Email · Quick</h3>
          <div className="row" style={{ gap: 6 }}>
            <button className="chip-filter"><Icon name="sparkle" size={12} /> Smart compose</button>
            <button className="chip-filter">Pilih template</button>
          </div>
        </div>
        <div className="row" style={{ gap: 8 }}>
          <input style={{ flex: 1 }} placeholder="To: customer@example.com" />
          <input style={{ width: 220 }} placeholder="CC" />
        </div>
        <input placeholder="Subject — Follow-up proposal Q3" />
        <textarea defaultValue="Halo {{first_name}}, semoga kabarnya baik. Saya ingin follow-up terkait proposal yang kami kirim minggu lalu untuk integrasi sistem di {{company}}…"></textarea>
        <div className="composer-actions">
          <div className="row" style={{ gap: 6 }}>
            <button className="icon-btn" style={{ width: 32, height: 32 }}><Icon name="link" size={14} /></button>
            <button className="icon-btn" style={{ width: 32, height: 32 }}><Icon name="clock" size={14} /> </button>
            <span style={{ fontSize: 11.5, color: 'var(--muted)', marginLeft: 8 }}>📎 0 attachment · Tracking ON</span>
          </div>
          <div className="row" style={{ gap: 8 }}>
            <button className="btn ghost"><Icon name="clock" size={13} /> Schedule</button>
            <button className="btn primary" onClick={() => ctx.notify('Email terkirim · tracking diaktifkan')}>Kirim sekarang</button>
          </div>
        </div>
      </div>
    </div>
  );
}
Object.assign(window, { EmailIntegration });