// GetContent — opdrachtgever-aanmeldpagina. Spiegel van de creator-aanmelding,
// maar met relevante velden voor opdrachtgevers. Niet in de hoofdnavigatie.
function SignupBusinessPage({ 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: '', bedrijf: '', 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: 'opdrachtgever', name: (f.voornaam + ' ' + f.achternaam).trim(), email: f.email, password: f.password, extra: { bedrijf: f.bedrijf } });
    setLoading(false);
    if (res && res.error) { setError(res.error); return; }
    if (res && res.needsConfirm) { setSentTo(f.email); setDone(true); return; }
    onNav('dashboard');
  };

  const needs = ['Video', 'Fotografie', 'Paid social', 'UGC video', 'Reels & shorts', 'Design', 'Anders'];

  if (done) {
    return (
      <main>
        <PageHero
          eyebrow="Voor opdrachtgevers"
          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 opdrachtgevers"
        title="Meld je gratis aan"
        lead="Klaar in één minuut. Plaatsen is gratis."
        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. Tom" value={f.voornaam} onChange={upd('voornaam')} />
            <Input label="Achternaam" placeholder="Bijv. Hendriks" value={f.achternaam} onChange={upd('achternaam')} />
          </div>
          <Input label="Bedrijfsnaam" placeholder="Bijv. Bloom Skincare" icon={<i data-lucide="building-2"></i>} value={f.bedrijf} onChange={upd('bedrijf')} />
          <Input label="E-mailadres" type="email" required placeholder="jij@bedrijf.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')} />

          {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="opdrachtgever" />

          <p style={{ fontSize: 12.5, color: 'var(--text-muted)', textAlign: 'center', lineHeight: 1.5, margin: 0 }}>
            Gratis &amp; vrijblijvend. Je betaalt pas als de klus geklaard is.
          </p>
        </form>

        <p className="gc-hero-foot">
          Wil je juist content máken?{' '}
          <a onClick={() => onNav('signup')}>Meld je aan als creator</a>
        </p>
      </PageHero>
    </main>
  );
}
window.SignupBusinessPage = SignupBusinessPage;