function LoginPage({ onLogin, onBack }) {
  const [email, setEmail] = useState('elena.papadaki@stlukes.hospital');
  const [password, setPassword] = useState('••••••••••');
  const [loading, setLoading] = useState(false);

  const submit = (e) => {
    e.preventDefault();
    setLoading(true);
    setTimeout(() => onLogin(), 500);
  };

  return (
    <div style={{minHeight: '100vh', display: 'flex', flexDirection: 'column', background: 'var(--bg)'}}>
      <div className="login-page" style={{flex: 1, gridTemplateColumns: '1fr 440px'}}>
        <div style={{padding: 48, display: 'flex', flexDirection: 'column', justifyContent: 'center', borderRight: '1px solid var(--border)', background: 'white', position: 'relative'}}>
          {onBack && (
            <button
              onClick={onBack}
              style={{position: 'absolute', top: 24, left: 48, display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--ink-3)', background: 'none', border: 'none', padding: '6px 0', cursor: 'pointer', fontWeight: 500}}
              onMouseEnter={e => e.currentTarget.style.color = 'var(--navy)'}
              onMouseLeave={e => e.currentTarget.style.color = 'var(--ink-3)'}
              aria-label="Back to overview"
            >
              <I.ChevronLeft size={13}/> Back to overview
            </button>
          )}
          <div style={{maxWidth: 520}}>
            <div style={{display: 'flex', alignItems: 'center', gap: 10, marginBottom: 32}}>
              <span className="logo-mark" style={{width: 32, height: 32}}><I.Shield size={16} color="white"/></span>
              <span style={{fontFamily: 'var(--serif)', fontWeight: 600, color: 'var(--navy)', fontSize: 18}}>MediShield</span>
            </div>
            <div style={{fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--ink-3)', fontWeight: 600, marginBottom: 10}}>
              Authorized personnel only
            </div>
            <h1 style={{fontSize: 28, marginBottom: 14, lineHeight: 1.2}}>
              Cybersecurity training &amp; compliance portal
            </h1>
            <p style={{color: 'var(--ink-2)', lineHeight: 1.6, fontSize: 13.5, marginBottom: 28, maxWidth: 440}}>
              Complete mandatory training, review incident reports, and acknowledge policy updates.
              All activity is logged for audit and compliance purposes in accordance with HIPAA and NIST CSF 2.0.
            </p>
            <div style={{border: '1px solid var(--border)', background: 'white', padding: 14, maxWidth: 440}}>
              <div style={{fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--ink-3)', fontWeight: 600, marginBottom: 8}}>
                System notice
              </div>
              <p style={{fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.55}}>
                Unauthorized access to this system is prohibited and may result in criminal and civil penalties.
                By signing in you consent to monitoring and recording.
              </p>
            </div>
          </div>
        </div>

        <div style={{padding: 48, display: 'grid', placeItems: 'center', background: 'white'}}>
          <div style={{width: '100%', maxWidth: 340}}>
            <h2 style={{fontSize: 20, marginBottom: 4}}>Sign in</h2>
            <p className="muted" style={{marginBottom: 24, fontSize: 12.5}}>Secure access to your training portal.</p>

            <form onSubmit={submit} className="stack">
              <div className="field">
                <label htmlFor="email">Hospital email</label>
                <input id="email" type="email" value={email} onChange={e => setEmail(e.target.value)} autoComplete="username"/>
              </div>
              <div className="field">
                <label htmlFor="password">Password</label>
                <input id="password" type="password" value={password} onChange={e => setPassword(e.target.value)} autoComplete="current-password"/>
              </div>

              <button type="submit" className="btn btn-primary btn-lg btn-block" disabled={loading}>
                {loading ? 'Signing in…' : 'Sign in'}
              </button>

              <div className="hr-sep">OR</div>

              <button type="button" className="btn btn-outline btn-lg btn-block" onClick={() => onLogin()}>
                <I.Lock size={14}/> Sign in with hospital SSO
              </button>

              <div className="callout callout-gray" style={{marginTop: 4}}>
                <I.ShieldCheck size={14} style={{flexShrink: 0, marginTop: 1, color: 'var(--ink-2)'}}/>
                <div style={{fontSize: 11.5}}>
                  <b>MFA required.</b> After sign-in, verify with your hospital badge or authenticator app.
                </div>
              </div>
            </form>

            <div style={{marginTop: 28, paddingTop: 16, borderTop: '1px solid var(--border-2)', fontSize: 10.5, color: 'var(--ink-3)', textAlign: 'center', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 500}}>
              HIPAA · WCAG 2.2 AA · NIST CSF 2.0
            </div>
          </div>
        </div>
      </div>
      <div className="page-footer">
        <div><strong style={{color: 'var(--navy)'}}>MediShield</strong><span className="sep">·</span>Demo build<span className="sep">·</span>Synthetic data only<span className="sep">·</span>St. Luke General Hospital<span className="sep">·</span>WCAG 2.2 AA</div>
      </div>
    </div>
  );
}

window.LoginPage = LoginPage;