function Login({ onLogin }) {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: 'radial-gradient(120% 90% at 85% 8%, #ffffff 0%, rgba(255,255,255,0) 50%), radial-gradient(80% 60% at 15% 95%, #ffffff 0%, rgba(255,255,255,0) 55%), linear-gradient(160deg, #1B2D70 0%, #4F6FB5 45%, #ADD5EB 80%, #FFFFFF 100%)',
      padding: '32px 28px 28px', display: 'flex', flexDirection: 'column', color: '#fff'
    }}>
      <div style={{ display: 'flex', gap: 4, marginBottom: 'auto', marginTop: 8 }}>
        <div style={{ width: 8, height: 32, background: '#fff' }} />
        <div style={{ width: 8, height: 32, background: '#fff' }} />
        <div style={{ width: 8, height: 32, background: '#fff' }} />
      </div>
      <div style={{ marginTop: 100 }}>
        <div style={{ fontFamily: 'Inter', fontSize: 11, fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.85, marginBottom: 12 }}>
          App do Condômino
        </div>
        <h1 style={{ fontFamily: 'Saira', fontWeight: 300, fontSize: 38, lineHeight: 1.05, letterSpacing: '-0.02em', margin: 0 }}>
          Preocupe-se<br/>apenas em morar.
        </h1>
      </div>

      <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 10 }}>
        <input placeholder="E-mail" defaultValue="mariana@email.com" style={{
          background: 'rgba(255,255,255,0.18)', border: '1px solid rgba(255,255,255,0.4)',
          borderRadius: 8, padding: '14px 16px', color: '#fff', fontFamily: 'Inter', fontSize: 15, outline: 'none'
        }} />
        <input type="password" placeholder="Senha" defaultValue="••••••••" style={{
          background: 'rgba(255,255,255,0.18)', border: '1px solid rgba(255,255,255,0.4)',
          borderRadius: 8, padding: '14px 16px', color: '#fff', fontFamily: 'Inter', fontSize: 15, outline: 'none'
        }} />
        <a href="#" style={{ fontFamily: 'Inter', fontSize: 13, color: '#fff', opacity: 0.9, marginTop: 4 }}>Esqueci minha senha</a>
      </div>

      <button onClick={onLogin} style={{
        marginTop: 24, padding: '16px', background: '#fff', color: '#1B2D70', border: 'none',
        borderRadius: 8, fontFamily: 'Inter', fontSize: 15, fontWeight: 600, letterSpacing: '0.02em', cursor: 'pointer'
      }}>Entrar</button>
      <div style={{ marginTop: 16, textAlign: 'center', fontFamily: 'Inter', fontSize: 13, opacity: 0.85 }}>
        Síndico? <a href="#" style={{ color: '#fff', textDecoration: 'underline' }}>Acesse o portal</a>
      </div>
    </div>
  );
}
window.SemogLogin = Login;