function AuthScreen() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const submit = (event) => {
    event.preventDefault();
    setLoading(true);
    setError("");
    API.login({ email, password })
      .then((session) => {
        API.setSession(session);
        window.location.href = session.redirect;
      })
      .catch(() => setError("Email o contraseña incorrectos."))
      .finally(() => setLoading(false));
  };

  return (
    <div className="auth-page">
      <form className="auth-card" onSubmit={submit}>
        <div className="logo auth-logo">
          <div className="logo-mark"><span>ia</span></div>
          <div className="logo-txt">
            <strong>DataVoices</strong>
            <span>Academia</span>
          </div>
        </div>
        <div className="auth-head">
          <h1>Ingresar</h1>
          <p>Accedé con tus credenciales a la Academia DataVoices.</p>
        </div>
        <label className="field">
          <span className="field-label">Email</span>
          <input className="inp" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="tu@email.com" required />
        </label>
        <label className="field">
          <span className="field-label">Contraseña</span>
          <input className="inp" type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Tu contraseña" required />
        </label>
        {error && <div className="auth-error">{error}</div>}
        <Btn variant="primary" icon="login" disabled={loading}>{loading ? "Ingresando..." : "Entrar"}</Btn>
      </form>
    </div>
  );
}

ICONS.login = "M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3";

Object.assign(window, { AuthScreen });