// Login — dark mode v2
const Login = ({ onNavigate }) => {
  const [email, setEmail] = React.useState('admin@automatiza.com.br');
  const [pwd, setPwd] = React.useState('••••••••');
  const [loading, setLoading] = React.useState(false);

  const submit = (e) => {
    e.preventDefault();
    setLoading(true);
    setTimeout(() => { onNavigate('dashboard'); }, 700);
  };

  return (
    <div data-screen-label="02 Login" className="fade-in" style={{
      minHeight: '100vh', display: 'grid', gridTemplateColumns: '1fr 1fr',
      background: 'var(--bg-base)', color: 'var(--text-1)',
    }}>
      <style>{`
        @media (max-width: 900px) { .login-art { display: none !important; } .login-pane { grid-column: 1 / -1 !important; } }
        .login-input {
          width: 100%; padding: 12px 14px; border-radius: 10px;
          border: 1px solid var(--line-2); font-size: 14px;
          background: var(--bg-2); color: var(--text-0); transition: all .15s;
        }
        .login-input:focus { outline: none; border-color: rgba(139,92,246,.6); box-shadow: 0 0 0 3px rgba(139,92,246,.22); }
        .login-input::placeholder { color: var(--text-4); }
      `}</style>

      <div className="login-pane" style={{ padding: '48px 48px', display: 'flex', flexDirection: 'column', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -120, left: -80, width: 320, height: 320, background: 'radial-gradient(circle, rgba(139,92,246,.18), transparent 60%)', filter: 'blur(40px)', pointerEvents: 'none' }}/>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', position: 'relative' }}>
          <button onClick={() => onNavigate('landing')} style={{ cursor: 'pointer' }}>
            <BrandMark size={34} textSize={20}/>
          </button>
          <div style={{ fontSize: 13, color: 'var(--text-3)' }}>
            Ainda não tem conta?{' '}
            <button onClick={() => onNavigate('onboarding')} style={{ color: '#a78bfa', fontWeight: 500, padding: 0 }}>Criar grátis</button>
          </div>
        </div>

        <div style={{ flex: 1, display: 'grid', placeItems: 'center', position: 'relative' }}>
          <form onSubmit={submit} style={{ width: '100%', maxWidth: 380 }}>
            <h1 style={{
              fontSize: 40, letterSpacing: '-0.025em',
              fontWeight: 700, margin: '0 0 10px', color: 'var(--text-0)', lineHeight: 1.1,
            }}>
              Bem-vindo <span className="grad-text">de volta</span>
            </h1>
            <p style={{ color: 'var(--text-2)', fontSize: 15, margin: '0 0 32px' }}>
              Acesse seu workspace e retome a operação.
            </p>

            <label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 6, color: 'var(--text-1)' }}>E-mail corporativo</label>
            <input type="email" className="login-input" value={email} onChange={e=>setEmail(e.target.value)} style={{ marginBottom: 14 }} />

            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
              <label style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-1)' }}>Senha</label>
              <a style={{ fontSize: 12, color: '#a78bfa', cursor: 'pointer' }}>Esqueci a senha</a>
            </div>
            <input type="password" className="login-input" value={pwd} onChange={e=>setPwd(e.target.value)} style={{ marginBottom: 20 }} />

            <button type="submit" disabled={loading} className="btn btn-primary" style={{
              width: '100%', padding: '14px', fontSize: 15, opacity: loading ? .7 : 1,
            }}>
              {loading ? 'Entrando...' : 'Entrar no sistema'}
              {!loading && <Icon name="arrowRight" size={16}/>}
            </button>

            <div style={{
              margin: '24px 0', display: 'flex', alignItems: 'center', gap: 12,
              fontSize: 12, color: 'var(--text-4)'
            }}>
              <div style={{ flex: 1, height: 1, background: 'var(--line-1)' }}/>
              OU
              <div style={{ flex: 1, height: 1, background: 'var(--line-1)' }}/>
            </div>

            <button type="button" className="btn btn-outline" style={{ width: '100%', padding: '12px', marginBottom: 8 }}>
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none"><path d="M22 12.2c0-.7-.1-1.3-.2-2H12v3.8h5.6c-.2 1.3-1 2.3-2.1 3v2.5h3.4c2-1.8 3.1-4.5 3.1-7.3z" fill="#4285F4"/><path d="M12 22c2.8 0 5.2-.9 6.9-2.5l-3.4-2.5c-.9.6-2.1 1-3.5 1-2.7 0-5-1.8-5.8-4.2H2.7v2.6A10 10 0 0012 22z" fill="#34A853"/><path d="M6.2 13.8a6 6 0 010-3.6V7.5H2.7a10 10 0 000 9l3.5-2.7z" fill="#FBBC05"/><path d="M12 5.9c1.5 0 2.9.5 4 1.5l2.9-2.9C17.1 2.9 14.8 2 12 2a10 10 0 00-9.3 5.5l3.5 2.7A6 6 0 0112 5.9z" fill="#EA4335"/></svg>
              Entrar com Google
            </button>
            <button type="button" className="btn btn-outline" style={{ width: '100%', padding: '12px' }}>
              <Icon name="lock" size={16}/>
              Certificado Digital (ICP-Brasil)
            </button>
          </form>
        </div>

        <div style={{ fontSize: 12, color: 'var(--text-4)', textAlign: 'center', position: 'relative' }}>
          Protegido por TLS 1.3 · LGPD · Dados em São Paulo, Brasil 🇧🇷
        </div>
      </div>

      <div className="login-art" style={{
        background: 'linear-gradient(135deg, #0a0818 0%, #0f1430 100%)',
        padding: 48, color: 'white',
        position: 'relative', overflow: 'hidden',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        borderLeft: '1px solid var(--line-1)',
      }}>
        <div style={{ position: 'absolute', top: -100, right: -100, width: 460, height: 460, background: 'radial-gradient(circle, rgba(139,92,246,.35), transparent 60%)', filter: 'blur(40px)' }}/>
        <div style={{ position: 'absolute', bottom: -100, left: -100, width: 400, height: 400, background: 'radial-gradient(circle, rgba(59,130,246,.3), transparent 60%)', filter: 'blur(40px)' }}/>

        <div style={{ position: 'relative' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8, padding: '5px 12px', borderRadius: 999,
            background: 'rgba(139,92,246,.15)', color: '#c4b5fd',
            fontSize: 12, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.08em',
            marginBottom: 32, border: '1px solid rgba(139,92,246,.3)',
          }}>
            <Icon name="sparkle" size={12}/> Novidade · Abril/2026
          </div>
          <h2 style={{
            fontSize: 44, letterSpacing: '-0.025em',
            fontWeight: 700, lineHeight: 1.1, margin: '0 0 20px', color: 'white',
          }}>
            Claude agora responde chamados de <span className="grad-text">primeiro nível sozinho</span>.
          </h2>
          <p style={{ color: 'var(--text-2)', fontSize: 15, lineHeight: 1.6, maxWidth: 480 }}>
            A central de atendimento do Automatiza consulta sua base de conhecimento
            e responde dúvidas comuns via WhatsApp e e-mail, 24/7 — em português brasileiro.
          </p>
        </div>

        <div style={{ position: 'relative' }}>
          <div style={{
            background: 'rgba(255,255,255,.04)', backdropFilter: 'blur(10px)',
            border: '1px solid rgba(255,255,255,.1)', borderRadius: 16,
            padding: 20, maxWidth: 420,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
              <div style={{
                width: 32, height: 32, borderRadius: 8, background: 'var(--brand-gradient)',
                display: 'grid', placeItems: 'center',
              }}>
                <Icon name="sparkle" size={16} color="white"/>
              </div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 500 }}>IA Automatiza</div>
                <div style={{ fontSize: 11, color: 'var(--text-3)' }}>Agora mesmo · WhatsApp</div>
              </div>
            </div>
            <div style={{
              background: 'rgba(0,0,0,.3)', padding: 12, borderRadius: 10,
              fontSize: 13, lineHeight: 1.55, color: 'var(--text-1)',
              border: '1px solid rgba(255,255,255,.05)',
            }}>
              Olá, Renata! Vi que você quer emitir a 2ª via do boleto de abril.
              Já gerei aqui: <span style={{ color: '#a78bfa' }}>automati.za/b/9f2a1c</span>.
              Vence dia 22/04. Posso ajudar em mais algo? ✨
            </div>
            <div style={{ display: 'flex', gap: 8, marginTop: 12, fontSize: 11, color: 'var(--text-3)' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
                <Icon name="zap" size={11} color="var(--amber)"/> Resolvido em 3s
              </span>
              <span>·</span>
              <span>Sem intervenção humana</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Login });