/* ============================================================
   THREDLY — Login
   Email + password, then on to 2FA. No social sign-in.
   ============================================================ */
function LoginApp() {
  const [email, setEmail] = useAu('');
  const [pw, setPw] = useAu('');
  const [remember, setRemember] = useAu(true);
  const [err, setErr] = useAu('');
  const [busy, setBusy] = useAu(false);

  const submit = () => {
    setErr('');
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) { setErr('Enter a valid email address.'); return; }
    if (pw.length < 1) { setErr('Enter your password.'); return; }
    setBusy(true);
    setTimeout(() => { location.href = 'Two-Factor.html?email=' + encodeURIComponent(email); }, 850);
  };

  return (
    <AuShell scene={{
      eyebrow: 'Welcome back',
      title: 'Pick up right where your courses left off.',
      sub: 'Sign in to manage workspaces, courses and the people building them.',
    }}>
      <AuTop />
      <div className="au-head">
        <div className="au-kicker">Sign in</div>
        <h1 className="au-title">Sign in to <span className="tw">Thredly</span></h1>
        <p className="au-sub">Welcome back. Enter your details to continue.</p>
      </div>

      {err && <div className="au-formerr"><Icon.info size={14} /> {err}</div>}

      <div className="au-form">
        <div className="au-field">
          <label className="au-label" htmlFor="lg-email">Email</label>
          <div className="au-inwrap">
            <span className="au-in-ico"><Icon.mail size={17} /></span>
            <input id="lg-email" className="au-input has-ico" type="email" value={email}
              onChange={e => setEmail(e.target.value)} placeholder="you@institution.edu"
              autoComplete="email" onKeyDown={e => { if (e.key === 'Enter') document.getElementById('lg-pw').focus(); }} />
          </div>
        </div>

        <div className="au-field">
          <label className="au-label" htmlFor="lg-pw">
            Password
            <a className="au-link-sm" href="Forgot Password.html">Forgot password?</a>
          </label>
          <AuPw id="lg-pw" value={pw} onChange={setPw} placeholder="Your password"
            autoComplete="current-password" onEnter={submit} />
        </div>

        <div className="au-metarow">
          <AuCheck on={remember} onToggle={() => setRemember(r => !r)}>Remember this device</AuCheck>
        </div>

        <button className="au-submit" onClick={submit} disabled={busy}>
          {busy ? <span className="au-spin"></span> : <React.Fragment>Sign in <Icon.arrowRight size={17} /></React.Fragment>}
        </button>

        <div className="au-or">New to Thredly?</div>
        <a className="au-secondary" href="Register.html">Create an account</a>
      </div>
    </AuShell>
  );
}

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