function LoginView({ onLogin, busy, error, onToggleTheme, theme }) {
  const [email, setEmail] = React.useState("verlaine@nazidetech.com");
  const [pwd, setPwd] = React.useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (busy) return;
    onLogin(email, pwd);
  };

  return (
    <div className="login">
      {onToggleTheme && <div className="login-theme"><ThemeToggle theme={theme} onToggle={onToggleTheme} /></div>}
      <div className="login-aside">
        <div className="login-brand">
          <div className="brand-mark"><BrandGlyph size={22} color="var(--accent)" /></div>
          <div>
            <div className="brand-name">NAZIDE <span className="pressus">PRESSUS</span></div>
            <div className="brand-sub" style={{ color: "var(--navy-faint)" }}>Plataforma de simulação clínica em RV</div>
          </div>
        </div>
        <div className="login-aside-mid">
          <div className="login-tagline">Casos clínicos que ganham vida no Meta&nbsp;Quest.</div>
          <div className="login-tagsub">Configure casos e solicite simulações de fisioterapia pélvica para os óculos de realidade virtual dos seus alunos.</div>
        </div>
        <div className="login-meta">
          <div><div className="lm-n">—</div><div className="lm-l">casos no acervo</div></div>
          <div><div className="lm-n">—</div><div className="lm-l">casos publicados</div></div>
          <div><div className="lm-n">—</div><div className="lm-l">execuções no mês</div></div>
        </div>
      </div>

      <div className="login-main">
        <form className="login-card" onSubmit={handleSubmit}>
          <h1>Entrar no portal</h1>
          <div className="sub">Acesso restrito a usuários cadastrados da plataforma.</div>
          {error && (
            <div className="login-error" role="alert">
              <Icon name="alert" size={16} />
              <span>{error}</span>
            </div>
          )}
          <div className="login-field">
            <label>E-mail institucional</label>
            <input className="login-input" value={email} onChange={(e) => setEmail(e.target.value)} autoComplete="email" />
          </div>
          <div className="login-field">
            <label>Senha</label>
            <input className="login-input" type="password" value={pwd} onChange={(e) => setPwd(e.target.value)} autoComplete="current-password" />
          </div>
          <Btn kind="primary lg" type="submit" iconR="arrowR" style={{ width: "100%" }} disabled={busy}>
            {busy ? "Entrando..." : "Entrar"}
          </Btn>
          <div style={{ textAlign: "center", marginTop: "var(--sp-4)", fontSize: 12, color: "var(--text-faint)" }}>
            Protegido por autenticação institucional · Nazide Tech
          </div>
        </form>
      </div>
    </div>
  );
}
window.LoginView = LoginView;