// GetContent — creator-aanmeldpagina. Simpel & doeltreffend: één compact
// formulier om je snel als creator aan te melden. Niet in de hoofdnavigatie.
function SignupPage({ onNav }) {
  const NS = window.GetContentDesignSystem_aa0f52;
  const { Input, Select, Button } = NS;
  const [done, setDone] = React.useState(false);
  const [sentTo, setSentTo] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [f, setF] = React.useState({ voornaam: '', achternaam: '', email: '', password: '', password2: '' });
  const [error, setError] = React.useState('');
  const upd = (k) => (e) => setF((s) => Object.assign({}, s, { [k]: e.target.value }));

  const submit = async (e) => {
    e.preventDefault();
    if (f.password !== f.password2) { setError('De twee wachtwoorden komen niet overeen.'); return; }
    setError(''); setLoading(true);
    const res = await window.GC_STORE.signup({ role: 'creator', name: (f.voornaam + ' ' + f.achternaam).trim(), email: f.email, password: f.password });
    setLoading(false);
    if (res && res.error) { setError(res.error); return; }
    if (res && res.needsConfirm) { setSentTo(f.email); setDone(true); return; }
    onNav('dashboard');
  };

  const disciplines = ['Fotografie', 'Video', 'Editing / montage', 'UGC video', 'Reels & shorts', 'Design', 'Anders'];
  const labelStyle = { display: 'block', fontSize: 13, fontWeight: 'var(--fw-semibold)', color: 'var(--text-strong)', marginBottom: 8 };

  if (done) {
    return (
      <main>
        <PageHero
          eyebrow="Voor creators"
          title="Check je e-mail"
          lead={'We hebben een bevestigingslink gestuurd naar ' + sentTo + '. Klik op de link in die mail om je account te activeren. Daarna kun je inloggen.'}
          primary={{ label: 'Naar inloggen', to: 'login' }}
          onNav={onNav}
        />
      </main>
    );
  }

  return (
    <main>
      <PageHero
        compact
        eyebrow="Voor creators"
        title="Meld je gratis aan"
        lead="Klaar in één minuut."
        onNav={onNav}
      >
        <form onSubmit={submit} className="gc-form-card">
          <div className="gc-form-2" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 16 }}>
            <Input label="Voornaam" placeholder="Bijv. Sanne" value={f.voornaam} onChange={upd('voornaam')} />
            <Input label="Achternaam" placeholder="Bijv. de Vries" value={f.achternaam} onChange={upd('achternaam')} />
          </div>
          <Input label="E-mailadres" type="email" required placeholder="jij@email.nl" icon={<i data-lucide="mail"></i>} value={f.email} onChange={upd('email')} />
          <window.PasswordInput label="Wachtwoord" required placeholder="Kies een wachtwoord" value={f.password} onChange={upd('password')} />
          <window.PasswordInput label="Herhaal wachtwoord" required placeholder="Herhaal je wachtwoord" value={f.password2} onChange={upd('password2')} />
          <Select label="Wat maak je?" defaultValue="Fotografie">
            {disciplines.map((d) => <option key={d}>{d}</option>)}
          </Select>
          <Input label="Plaats" placeholder="Bijv. Amsterdam" icon={<i data-lucide="map-pin"></i>} />

          {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>} style={{ marginTop: 4 }}>{loading ? 'Bezig…' : 'Gratis aanmelden'}</Button>

          <div className="gc-or">of</div>
          <window.GoogleButton label="Aanmelden met Google" role="creator" />

          <p style={{ fontSize: 12.5, color: 'var(--text-muted)', textAlign: 'center', lineHeight: 1.5, margin: 0 }}>
            Gratis &amp; vrijblijvend. Door je aan te melden ga je akkoord met de voorwaarden.
          </p>
        </form>

        <p className="gc-hero-foot">
          Wil je juist content láten maken?{' '}
          <a onClick={() => onNav('post')}>Plaats een opdracht</a>
        </p>
      </PageHero>
    </main>
  );
}
window.SignupPage = SignupPage;