/* global React, Icon, Ticker */

function MGoogle({ onNav }) {
  return (
    <>
      <Ticker />
      <div className="page">
        <div className="page-header">
          <div>
            <div className="eyebrow">
              <span>Comunicação Integrada</span>
              <span className="chip">M09</span>
              <span className="badge" style={{ background: 'var(--bg-3)', color: 'var(--fg-3)' }}>DEMO · aguarda Gmail / WhatsApp / Telefonia</span>
            </div>
            <h1 className="page-title">Google Workspace · WhatsApp Business · Telefonia</h1>
            <p className="page-sub">Drive como espelho de processos · Agenda IA · Conversas catalogadas com pregoeiros e fornecedores · Disque corporativo registrado em ata.</p>
          </div>
        </div>

        <div className="card" style={{ padding: 48, marginTop: 14, textAlign: 'center' }}>
          <div style={{ display: 'inline-grid', placeItems: 'center', width: 72, height: 72, borderRadius: '50%', background: 'var(--bg-2)', border: '1px solid var(--line-2)', marginBottom: 18 }}>
            <Icon name="cloud" size={32} style={{ color: 'var(--fg-3)' }} />
          </div>
          <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 8 }}>Aguardando integrações de comunicação</div>
          <p style={{ fontSize: 13, color: 'var(--fg-2)', maxWidth: 580, margin: '0 auto 22px', lineHeight: 1.6 }}>
            Este módulo unifica conversas com pregoeiros, fornecedores e equipe interna em um só lugar.
            Precisa de três integrações: <strong>Gmail / Google Workspace OAuth</strong>, <strong>WhatsApp Business API (Meta)</strong>
            e <strong>Telefonia VoIP</strong> (Twilio ou 3CX). Configure as credenciais em <strong>M13 Configurações</strong>.
          </p>
          <div style={{ display: 'flex', justifyContent: 'center', gap: 10, flexWrap: 'wrap' }}>
            <button className="btn" onClick={() => onNav('config')}>
              <Icon name="settings" /> Abrir M13 Configurações
            </button>
          </div>

          <div style={{ marginTop: 36, padding: 18, background: 'var(--bg-2)', borderRadius: 6, maxWidth: 680, margin: '36px auto 0', textAlign: 'left' }}>
            <div className="field-label" style={{ marginBottom: 10 }}>O QUE ESTE MÓDULO FARÁ QUANDO ATIVO</div>
            <ul style={{ fontSize: 12, color: 'var(--fg-1)', lineHeight: 1.8, paddingLeft: 18, margin: 0 }}>
              <li><strong>WhatsApp Business:</strong> conversas com pregoeiros e fornecedores, IA monitora e cataloga automaticamente</li>
              <li><strong>Google Drive:</strong> pasta-espelho dos processos com versionamento (propostas, atas, comprovantes)</li>
              <li><strong>Google Calendar:</strong> agenda IA com lembretes de pregões, prazos de habilitação, vencimento de CNDs</li>
              <li><strong>Telefonia:</strong> ligações para órgãos públicos com gravação e ata automática (LGPD-compliant)</li>
            </ul>
          </div>
        </div>
      </div>
    </>
  );
}

window.MGoogle = MGoogle;