function Login({ onLoggedIn }) {
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [error, setError] = React.useState('');
  const [busy, setBusy] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setError(''); setBusy(true);
    try {
      const { user } = await api('/api/login', { method: 'POST', body: JSON.stringify({ email, password }) });
      onLoggedIn(user);
    } catch (err) {
      // Visa serverns riktiga besked. Tidigare stod det alltid "Fel e‑post
      // eller lösenord" här — även när servern svarat med ett helt annat fel
      // (t.ex. serverfel eller för många försök), vilket gjorde felsökning
      // omöjlig: meddelandet pekade åt fel håll.
      setError(err && err.message && err.message !== 'Något gick fel'
        ? err.message
        : 'Kunde inte logga in — servern svarade med ett fel. Kontakta en admin.');
    } finally {
      setBusy(false);
    }
  };

  return (
    <div style={{
      height: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'var(--ulab-cool-grey)', fontFamily: 'var(--font-sans)',
    }}>
      <form onSubmit={submit} style={{
        background: '#fff', border: '1px solid var(--border)', borderRadius: 8,
        padding: 36, width: 340, boxShadow: '0 8px 24px rgba(0,54,95,.08)',
      }}>
        <img src="assets/ulab-logo.png" alt="ULAB" style={{ height: 32, marginBottom: 20 }} />
        <h1 style={{
          fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 22, color: 'var(--ulab-navy)',
          margin: '0 0 20px',
        }}>Logga in på Offertverktyget</h1>
        <label style={{ display: 'block', marginBottom: 14 }}>
          <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--ulab-navy)' }}>E‑post</span>
          <input type="email" required value={email} onChange={e => setEmail(e.target.value)}
            style={inputStyle} autoFocus />
        </label>
        <label style={{ display: 'block', marginBottom: 20 }}>
          <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--ulab-navy)' }}>Lösenord</span>
          <input type="password" required value={password} onChange={e => setPassword(e.target.value)}
            style={inputStyle} />
        </label>
        {error && <div style={{ color: 'var(--ulab-coral)', fontSize: 13, marginBottom: 14 }}>{error}</div>}
        <button type="submit" disabled={busy} style={{
          width: '100%', background: 'var(--ulab-navy)', color: '#fff', border: 'none',
          padding: '10px 14px', borderRadius: 4, fontSize: 14, fontWeight: 600, cursor: 'pointer',
        }}>{busy ? 'Loggar in…' : 'Logga in'}</button>
      </form>
    </div>
  );
}
const inputStyle = {
  display: 'block', width: '100%', marginTop: 6, fontSize: 14, padding: '10px 12px',
  border: '1px solid var(--border-strong)', borderRadius: 4, color: 'var(--ulab-navy)',
  boxSizing: 'border-box', fontFamily: 'var(--font-sans)',
};
window.Login = Login;