/* ============================================================
   THREDLY — Register
   Creates the first (admin) account, then continues to the
   onboarding flow. No social sign-up.
   ============================================================ */
function RegisterApp() {
  const [name, setName] = useAu('');
  const [email, setEmail] = useAu('');
  const [pw, setPw] = useAu('');
  const [agree, setAgree] = useAu(false);
  const [touched, setTouched] = useAu(false);
  const [busy, setBusy] = useAu(false);

  const nameOk = name.trim().length >= 2;
  const emailOk = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email);
  const pwOk = pw.length >= 8;
  const valid = nameOk && emailOk && pwOk && agree;

  const submit = () => {
    setTouched(true);
    if (!valid) return;
    setBusy(true);
    const q = '?name=' + encodeURIComponent(name.trim()) + '&email=' + encodeURIComponent(email);
    setTimeout(() => { location.href = 'Onboarding.html' + q; }, 850);
  };

  return (
    <AuShell scene={{
      eyebrow: 'Start free',
      title: 'Here\u2019s what happens next.',
      sub: 'Creating your account takes you straight into a quick setup:',
      steps: [
        { label: 'Tell us about you', sub: 'You\u2019ll be the organisation admin.' },
        { label: 'Set up your organisation', sub: 'Name, subdomain, country and type.' },
        { label: 'Add your branding', sub: 'Your logo and colours on every course.' },
        { label: 'Create your first workspace', sub: 'Group courses by faculty or team.' },
        { label: 'Launch your first course', sub: 'Start from a Thredly template, ready to edit.' },
      ],
    }}>
      <AuTop />
      <div className="au-head">
        <div className="au-kicker">Create account</div>
        <h1 className="au-title">Create your <span className="tw">Thredly</span> account</h1>
        <p className="au-sub">Already have one? <a href="Login.html">Sign in</a></p>
      </div>

      {touched && !valid &&
        <div className="au-formerr"><Icon.info size={14} /> Add your name, a work email, an 8+ character password, and accept the terms.</div>}

      <div className="au-form">
        <div className="au-field">
          <label className="au-label" htmlFor="rg-name">Full name</label>
          <input id="rg-name" className="au-input" value={name} onChange={e => setName(e.target.value)}
            placeholder="e.g. Priya Nair" autoComplete="name" />
        </div>

        <div className="au-field">
          <label className="au-label" htmlFor="rg-email">Work email</label>
          <div className="au-inwrap">
            <span className="au-in-ico"><Icon.mail size={17} /></span>
            <input id="rg-email" className="au-input has-ico" type="email" value={email}
              onChange={e => setEmail(e.target.value)} placeholder="you@institution.edu" autoComplete="email" />
          </div>
          <div className="au-sub" style={{ fontSize: '12px', marginTop: '6px' }}>You'll be the admin for this organisation.</div>
        </div>

        <div className="au-field">
          <label className="au-label" htmlFor="rg-pw">Password</label>
          <AuPw id="rg-pw" value={pw} onChange={setPw} placeholder="At least 8 characters"
            autoComplete="new-password" onEnter={submit} />
          <AuStrength pw={pw} />
        </div>

        <AuCheck block on={agree} onToggle={() => setAgree(a => !a)}>
          I agree to the <a href="#" onClick={e => e.preventDefault()}>Terms of Service</a> and <a href="#" onClick={e => e.preventDefault()}>Privacy Policy</a>.
        </AuCheck>

        <button className="au-submit" onClick={submit} disabled={busy} style={{ marginTop: '14px' }}>
          {busy ? <span className="au-spin"></span> : <React.Fragment>Create account <Icon.arrowRight size={17} /></React.Fragment>}
        </button>
      </div>
    </AuShell>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<RegisterApp />);