function Register({ navigate }) {
  const { login } = window.AuthContext.useAuth();
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [social, setSocial] = React.useState(''); // Pseudo Discord / Twitch
  const [postal, setPostal] = React.useState('');
  const [error, setError] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  async function onSubmit(e) {
    e.preventDefault();
    setLoading(true); setError('');
    try {
  await window.AuthAPI.register(name, email, password, social, postal);
      // auto-login
      await login(email, password);
      navigate('/');
    } catch (err) {
      setError(err?.error?.message || 'Erreur lors de l\'inscription');
    } finally { setLoading(false); }
  }

  return (
    <div className="container">
      <h1>Créer un compte</h1>
      <form onSubmit={onSubmit} style={{ maxWidth: 420 }}>
        <label>Nom<br/><input value={name} onChange={(e)=>setName(e.target.value)} required /></label><br/>
        <label>Email<br/><input type="email" value={email} onChange={(e)=>setEmail(e.target.value)} required /></label><br/>
        <label>Mot de passe<br/><input type="password" value={password} onChange={(e)=>setPassword(e.target.value)} required minLength={6} /></label><br/>
        <label>Pseudo Discord / Twitch<br/>
          <input value={social} onChange={(e)=>setSocial(e.target.value)} placeholder="ex: wenyn#1234 ou @wenyn" />
        </label><br/>
        <label>Adresse postale<br/>
          <textarea value={postal} onChange={(e)=>setPostal(e.target.value)} placeholder="Rue, code postal, ville, pays" rows={4} />
        </label><br/>
        {error && <p style={{ color: 'red' }}>{error}</p>}
        <button type="submit" disabled={loading}>{loading ? 'Création...' : "S'inscrire"}</button>
      </form>
    </div>
  );
}

window.Pages = window.Pages || {};
window.Pages.Register = Register;