function LoginScreen({ onLogin, notice, onForgot }) {
  const { Input, PasswordInput, Button, Alert } = window.VRticeDesignSystem_d763eb;
  const [email, setEmail] = React.useState('');
  const [pw, setPw] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [touched, setTouched] = React.useState(false);
  const [err, setErr] = React.useState('');
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
  const eErr = touched && !email.trim() ? 'Informe seu e-mail.' : touched && !re.test(email.trim()) ? 'Digite um e-mail válido.' : '';
  const pErr = touched && !pw ? 'Informe sua senha.' : '';
  const live = window.VxAuth && window.VxAuth.live;
  const submit = async e => {
    e.preventDefault(); setTouched(true); setErr('');
    if (!live || !email.trim() || !re.test(email.trim()) || !pw) return;
    setBusy(true);
    const { session, error } = await window.VxAuth.signIn(email.trim(), pw);
    if (error || !session) { setBusy(false); setErr(error || 'Não foi possível entrar. Tente novamente.'); return; }
    onLogin(session);
  };
  return (
    <div style={{ minHeight: '100vh', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 40, padding: '40px 20px' }}>
      <img src="assets/vertice-logo.svg" alt="Vértice Operations & Solutions" style={{ width: 220, maxWidth: '70%' }} />
      <main style={{ width: '100%', maxWidth: 420, boxSizing: 'border-box', background: 'var(--surface-dialog)', border: '1px solid var(--border-default)', borderRadius: 20, padding: '36px 32px', display: 'flex', flexDirection: 'column', gap: 28, animation: 'vx-enter 0.4s ease both' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <span style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, letterSpacing: '0.16em', color: 'var(--text-muted)' }}><i className="ph ph-lock-simple" style={{ fontSize: 14, color: 'var(--action-selected-icon)' }} />ÁREA OPERACIONAL · ACESSO RESTRITO</span>
          <h1 style={{ margin: 0, fontSize: 26, fontWeight: 600, letterSpacing: '-0.02em' }}>Entre na sua conta</h1>
          <span style={{ fontSize: 14, color: 'var(--text-muted)' }}>Use suas credenciais corporativas para acessar o Vértice OS.</span>
        </div>
        {notice && !err && <Alert>{notice}</Alert>}
        {!live && <Alert tone="danger">Login indisponível: a autenticação não está configurada neste ambiente.</Alert>}
        {err && <Alert tone="danger">{err}</Alert>}
        <form onSubmit={submit} noValidate style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <Input label="E-mail" type="email" size="lg" placeholder="nome@empresa.com" value={email} onChange={e => setEmail(e.target.value)} error={eErr} disabled={busy || !live} />
          <PasswordInput placeholder="Sua senha" value={pw} onChange={e => setPw(e.target.value)} error={pErr} disabled={busy || !live} />
          <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
            <Button variant="link" onClick={() => onForgot && onForgot(email.trim())}>Esqueci minha senha</Button>
          </div>
          <Button type="submit" size="lg" block loading={busy} disabled={!live}>{busy ? 'Entrando…' : 'Entrar'}</Button>
        </form>
      </main>
      <span style={{ fontSize: 12, color: 'var(--text-subtle)', textAlign: 'center' }}>Vértice Operations &amp; Solutions · Acesso restrito a usuários autorizados.</span>
    </div>
  );
}
window.LoginScreen = LoginScreen;