function Login() {
  const { login } = useAuth();
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [error, setError] = React.useState(null);
  const [loading, setLoading] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setError(null);
    setLoading(true);
    try {
      await login(email, password);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="login-screen">
      <div className="login-hero">
        <div className="login-hero__brand">
          <IconBattery size={20} /> CONTROL DE BATERÍAS Y LUCES
        </div>
        <div>
          <h1 className="login-hero__title">Saber siempre dónde está cada batería.</h1>
          <p className="login-hero__subtitle">
            Registra, rastrea y controla cada batería en tiempo real.
          </p>
        </div>
        <div className="login-hero__footer">
          Desarrollado por Jesus Gamboa Talavera © 2026
        </div>
      </div>

      <div className="login-panel">
        <form className="login-card" onSubmit={submit}>
          <h1>Iniciar sesión</h1>
          <p className="hint">Ingresa con tu cuenta del sistema.</p>

          {error && <div className="login-error">{error}</div>}

          <div className="field">
            <label>Correo</label>
            <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="ejemplo@ideiperu.com" autoComplete="username" maxLength={254} required autoFocus />
          </div>
          <div className="field">
            <label>Contraseña</label>
            <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="••••••••" autoComplete="current-password" maxLength={200} required />
          </div>

          <button className="btn btn-primary btn-block" disabled={loading} type="submit">
            {loading ? 'Ingresando…' : 'Ingresar'}
          </button>
        </form>
        <div className="login-footer-mobile">
          Desarrollado por Jesus Gamboa Talavera © 2026
        </div>
      </div>
    </div>
  );
}