// GetContent — inlogpagina. Simpel, met onderscheid tussen opdrachtgever en
// creator via een segmented toggle. Niet in de hoofdnavigatie.
function LoginPage({ onNav, onSignup }) {
  const NS = window.GetContentDesignSystem_aa0f52;
  const { Input, Button } = NS;
  const [f, setF] = React.useState({ email: '', password: '' });
  const [error, setError] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const upd = (k) => (e) => setF((s) => Object.assign({}, s, { [k]: e.target.value }));

  const submit = async (e) => {
    e.preventDefault();
    setError(''); setLoading(true);
    const res = await window.GC_STORE.signIn(f.email, f.password);
    setLoading(false);
    if (res && res.error) { setError(res.error); return; }
    onNav('dashboard');
  };

  return (
    <main>
      <PageHero
        compact
        eyebrow="Welkom terug"
        title="Inloggen"
        lead="Log in met het account dat je hebt aangemaakt."
        onNav={onNav}
      >
        <form onSubmit={submit} className="gc-form-card">
          <Input label="E-mailadres" type="email" required placeholder="jij@email.nl" icon={<i data-lucide="mail"></i>} value={f.email} onChange={upd('email')} />
          <div>
            <Input label="Wachtwoord" type="password" required placeholder="••••••••" icon={<i data-lucide="lock"></i>} value={f.password} onChange={upd('password')} />
            <div style={{ textAlign: 'right', marginTop: 8 }}>
              <a onClick={() => onNav('forgot')} style={{ cursor: 'pointer', fontSize: 13, color: 'var(--text-muted)' }}
                onMouseEnter={(e) => e.currentTarget.style.color = 'var(--accent)'}
                onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-muted)'}>Wachtwoord vergeten?</a>
            </div>
          </div>
          {error && <p style={{ margin: 0, fontSize: 13.5, fontWeight: 'var(--fw-semibold)', color: 'var(--gc-danger)' }}>{error}</p>}
          <Button type="submit" variant="primary" size="lg" fullWidth disabled={loading} iconRight={<i data-lucide="arrow-right"></i>}>{loading ? 'Bezig…' : 'Inloggen'}</Button>
          <div className="gc-or">of</div>
          <window.GoogleButton label="Inloggen met Google" />
        </form>

        <p className="gc-hero-foot">
          Nog geen account?{' '}
          <a onClick={() => onSignup && onSignup()}>Maak nu gratis je account aan</a>
        </p>
      </PageHero>
    </main>
  );
}
window.LoginPage = LoginPage;