function LoginScreen({ onLogin }) {
  const { Input, Checkbox, Button } = window.SIGADesignSystem_97fcbf;
  return (
    <div style={{ display: 'flex', height: '100%', fontFamily: 'var(--font-body)' }}>
      <div style={{ flex: 1.4, position: 'relative', overflow: 'hidden' }}>
        <img src="../../assets/images/cattle-hero.jpg" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(15,23,42,.35), rgba(15,23,42,.15) 40%, rgba(15,23,42,.55))' }} />
        <div style={{ position: 'absolute', top: 28, left: 30, right: 30, display: 'flex', justifyContent: 'flex-end' }}>
          <div style={{ background: '#fff', borderRadius: 10, padding: '8px 14px', display: 'flex', alignItems: 'center', boxShadow: 'var(--shadow-md)' }}>
            <img src="../../assets/logos/thenextd-lockup.png" style={{ height: 26 }} />
          </div>
        </div>
        <div style={{ position: 'absolute', top: '18%', left: 30, color: '#fff', maxWidth: 460 }}>
          <div style={{ fontSize: 30, fontWeight: 700 }}>Tecnología agropecuaria</div>
          <div style={{ fontSize: 15, fontWeight: 600, opacity: .9, marginTop: 6 }}>desarrollada por y para gente de campo</div>
        </div>
        <div style={{ position: 'absolute', bottom: 30, left: 30, color: '#fff' }}>
          <div style={{ fontWeight: 800, fontSize: 22, letterSpacing: .5 }}>SIGA</div>
          <div style={{ fontSize: 12, opacity: .85 }}>Solución Integral GAnadera</div>
        </div>
      </div>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 18, padding: 40, background: '#fff' }}>
        <img src="../../assets/logos/thenextd-lockup.png" style={{ height: 36 }} />
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: 24, fontWeight: 800 }}>Inicia sesión en tu cuenta</div>
          <div style={{ fontSize: 13, color: 'var(--text-secondary)', marginTop: 6 }}>Todavia no tienes cuenta? <a href="#">Registrarse</a></div>
        </div>
        <div style={{ width: 320, display: 'flex', flexDirection: 'column', gap: 12 }}>
          <Input placeholder="Usuario" />
          <Input placeholder="Contraseña" type="password" />
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 13 }}>
            <Checkbox label="Recordarme" />
            <a href="#" style={{ fontSize: 13 }}>Olvidaste tu contraseña?</a>
          </div>
          <Button variant="institutional" size="lg" onClick={onLogin}>Iniciar sesión</Button>
        </div>
      </div>
    </div>
  );
}
window.LoginScreen = LoginScreen;