// ============================================================
//  Login.jsx — Tela de login com Google
// ============================================================

const Login = ({ onSignIn, loading, error }) => {
  return (
    <div style={ls.screen}>
      <div style={ls.card}>
        {/* Logo */}
        <div style={ls.logoWrap}>
          <div style={ls.logoMark}>
            <svg width="28" height="28" viewBox="0 0 18 18" fill="none">
              <rect x="1" y="1" width="7" height="7" rx="2" fill="#4f7cff"/>
              <rect x="10" y="1" width="7" height="7" rx="2" fill="#4f7cff" opacity="0.5"/>
              <rect x="1" y="10" width="7" height="7" rx="2" fill="#4f7cff" opacity="0.5"/>
              <rect x="10" y="10" width="7" height="7" rx="2" fill="#4ade80"/>
            </svg>
          </div>
          <div>
            <div style={ls.logoName}>CRM</div>
            <div style={ls.logoSub}>Gestão de Vendas</div>
          </div>
        </div>

        <div style={ls.divider} />

        <div style={ls.headline}>Bem-vindo de volta</div>
        <div style={ls.subline}>
          Entre com sua conta Google para acessar ou criar sua planilha de leads.
        </div>

        {error && (
          <div style={ls.errorBox}>
            <span>⚠ </span>{error}
          </div>
        )}

        <button style={{ ...ls.googleBtn, opacity: loading ? 0.6 : 1 }}
          onClick={onSignIn} disabled={loading}>
          {loading ? (
            <span style={ls.spinner}>⏳</span>
          ) : (
            <svg width="18" height="18" viewBox="0 0 48 48">
              <path fill="#EA4335" d="M24 9.5c3.5 0 6.6 1.2 9 3.2l6.7-6.7C35.6 2.4 30.1 0 24 0 14.6 0 6.6 5.4 2.7 13.3l7.8 6C12.4 13.1 17.7 9.5 24 9.5z"/>
              <path fill="#4285F4" d="M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v8.5h12.7c-.6 3-2.3 5.5-4.8 7.2l7.5 5.8c4.4-4.1 7.1-10.1 7.1-17z"/>
              <path fill="#FBBC05" d="M10.5 28.7A14.5 14.5 0 0 1 9.5 24c0-1.6.3-3.2.8-4.7l-7.8-6A23.9 23.9 0 0 0 0 24c0 3.9.9 7.5 2.7 10.7l7.8-6z"/>
              <path fill="#34A853" d="M24 48c6.1 0 11.2-2 14.9-5.5l-7.5-5.8c-2 1.4-4.6 2.2-7.4 2.2-6.3 0-11.6-3.6-13.5-9.2l-7.8 6C6.6 42.6 14.6 48 24 48z"/>
            </svg>
          )}
          <span>{loading ? 'Conectando...' : 'Entrar com Google'}</span>
        </button>

        <div style={ls.footer}>
          Seus dados ficam na <strong>sua própria conta Google</strong>.<br />
          Nenhuma informação é armazenada em servidores externos.
        </div>
      </div>
    </div>
  );
};

const ls = {
  screen: {
    minHeight: '100vh', background: '#0d1020',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    padding: 24,
  },
  card: {
    background: '#151828', border: '1px solid #1e2235', borderRadius: 16,
    padding: '40px 44px', width: '100%', maxWidth: 420,
    boxShadow: '0 24px 60px rgba(0,0,0,0.5)',
    display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0,
  },
  logoWrap: { display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 },
  logoMark: {
    width: 52, height: 52, borderRadius: 14, background: '#1a1d2e',
    border: '1px solid #1e2235', display: 'flex', alignItems: 'center', justifyContent: 'center',
  },
  logoName: { fontSize: 20, fontWeight: 800, color: '#e8eaf0', letterSpacing: 1 },
  logoSub: { fontSize: 11, color: '#4a4f6a', marginTop: 2 },
  divider: { width: '100%', height: 1, background: '#1e2235', marginBottom: 28 },
  headline: { fontSize: 22, fontWeight: 700, color: '#e8eaf0', marginBottom: 10, textAlign: 'center' },
  subline: { fontSize: 13, color: '#6b7194', textAlign: 'center', lineHeight: 1.6, marginBottom: 28 },
  errorBox: {
    background: 'rgba(251,146,60,0.1)', border: '1px solid rgba(251,146,60,0.3)',
    borderRadius: 8, padding: '10px 14px', fontSize: 12, color: '#fb923c',
    marginBottom: 16, width: '100%', textAlign: 'center',
  },
  googleBtn: {
    display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12,
    width: '100%', padding: '13px 20px', borderRadius: 10,
    background: '#fff', border: 'none', cursor: 'pointer',
    fontSize: 14, fontWeight: 600, color: '#1a1a2e', fontFamily: 'inherit',
    transition: 'opacity 0.15s', boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
  },
  spinner: { fontSize: 16 },
  footer: {
    marginTop: 24, fontSize: 11, color: '#4a4f6a', textAlign: 'center', lineHeight: 1.7,
  },
};