// Auth screens — Login, Register, Forgot, Sent, Reset, ResetDone
// Uses aliases to avoid collision with globally-scoped React hooks from primitives.jsx
const { useState: useAuthState, useEffect: useAuthEffect } = React;

/* ===== shared chrome ===== */

const AuthShell = ({ children, showBack, onBack, withLogo = true }) => (
  <div style={{
    minHeight: '100vh',
    display: 'flex', flexDirection: 'column',
    padding: '20px 20px 40px',
    paddingTop:    'calc(env(safe-area-inset-top, 0px) + 20px)',
    paddingBottom: 'calc(env(safe-area-inset-bottom, 0px) + 40px)',
  }}>
    {showBack && (
      <button onClick={onBack} style={{
        background: 'transparent', border: 'none', color: 'var(--text-2)',
        display: 'inline-flex', alignItems: 'center', gap: 6,
        padding: '6px 0', fontSize: 14, alignSelf: 'flex-start', cursor: 'pointer',
      }}>
        <Ic name="chevronLeft" size={16}/> Back
      </button>
    )}
    {withLogo && (
      <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', marginTop: 28, marginBottom: 24}}>
        <div style={{
          width: 64, height: 64, borderRadius: 18,
          background: '#ffffff',
          display: 'grid', placeItems: 'center',
          boxShadow: '0 12px 32px rgba(0,0,0,0.15)',
          marginBottom: 12,
        }}>
          <svg viewBox="0 0 48 48" width={38} height={38} fill="none">
            <circle cx="24" cy="24" r="19" stroke="#1D9E75" strokeWidth="0.75" fill="none" opacity="0.45"/>
            <line x1="24" y1="15" x2="24" y2="5" stroke="#1D9E75" strokeWidth="1"/>
            <line x1="31.79" y1="19.5" x2="40.45" y2="14.5" stroke="#1D9E75" strokeWidth="1"/>
            <line x1="31.79" y1="28.5" x2="40.45" y2="33.5" stroke="#1D9E75" strokeWidth="1"/>
            <line x1="24" y1="33" x2="24" y2="43" stroke="#1D9E75" strokeWidth="1"/>
            <line x1="16.21" y1="28.5" x2="7.55" y2="33.5" stroke="#1D9E75" strokeWidth="1"/>
            <line x1="16.21" y1="19.5" x2="7.55" y2="14.5" stroke="#1D9E75" strokeWidth="1"/>
            <circle cx="24" cy="24" r="9" fill="#1D9E75"/>
            <path d="M 26 20.54 A 4 4 0 1 1 22 20.54" stroke="white" strokeWidth="1.4" fill="none" strokeLinecap="round"/>
            <line x1="24" y1="18" x2="24" y2="22.5" stroke="white" strokeWidth="1.4" strokeLinecap="round"/>
            <circle cx="24" cy="5" r="3" fill="#185FA5"/>
            <circle cx="40.45" cy="14.5" r="3" fill="#D85A30"/>
            <circle cx="40.45" cy="33.5" r="3" fill="#7F77DD"/>
            <circle cx="24" cy="43" r="3" fill="#EF9F27"/>
            <circle cx="7.55" cy="33.5" r="3" fill="#D4537E"/>
            <circle cx="7.55" cy="14.5" r="3" fill="#639922"/>
          </svg>
        </div>
        <div style={{fontSize: 22, fontWeight: 700, letterSpacing: -0.4}}>Velonics Hub</div>
        <div style={{fontSize: 12, color: 'var(--text-3)', marginTop: 2, letterSpacing: 0.3}}>Unified IoT Control</div>
      </div>
    )}
    <div style={{flex: 1}}>{children}</div>
  </div>
);

const AuthCard = ({ title, children }) => (
  <div style={{
    background: 'var(--card)', border: '1px solid var(--border)',
    borderRadius: 20, padding: 22, backdropFilter: 'blur(10px)',
    boxShadow: '0 12px 36px rgba(0,0,0,0.25)',
    animation: 'pop-in 320ms ease both',
  }}>
    {title && <div style={{fontSize: 18, fontWeight: 600, marginBottom: 18}}>{title}</div>}
    {children}
  </div>
);

const AuthField = ({ label, error, hint, children }) => (
  <label style={{display: 'block', marginBottom: 14}}>
    <div style={{fontSize: 12, color: 'var(--text-2)', marginBottom: 6, fontWeight: 500}}>{label}</div>
    {children}
    {error && <div style={{fontSize: 11, color: 'var(--red)', marginTop: 4}}>{error}</div>}
    {hint && !error && <div style={{fontSize: 11, color: 'var(--text-3)', marginTop: 4}}>{hint}</div>}
  </label>
);

const AuthInput = ({ value, onChange, type = 'text', placeholder, error, rightSlot, ...rest }) => (
  <div style={{position: 'relative'}}>
    <input
      type={type} value={value}
      onChange={e => onChange(e.target.value)}
      placeholder={placeholder}
      style={{
        width: '100%', padding: '13px 14px',
        paddingRight: rightSlot ? 44 : 14,
        background: 'rgba(255,255,255,0.05)',
        border: `1px solid ${error ? 'var(--red)' : 'var(--border)'}`,
        borderRadius: 12, color: '#fff', fontSize: 14, outline: 'none',
        transition: 'border-color 180ms, box-shadow 180ms',
      }}
      onFocus={e => {
        e.target.style.borderColor = error ? 'var(--red)' : 'var(--cyan)';
        e.target.style.boxShadow  = `0 0 0 3px ${error ? 'rgba(255,82,82,0.15)' : 'rgba(0,212,255,0.15)'}`;
      }}
      onBlur={e => {
        e.target.style.borderColor = error ? 'var(--red)' : 'var(--border)';
        e.target.style.boxShadow   = 'none';
      }}
      {...rest}
    />
    {rightSlot && (
      <div style={{position: 'absolute', right: 6, top: '50%', transform: 'translateY(-50%)'}}>{rightSlot}</div>
    )}
  </div>
);

const AuthPrimaryBtn = ({ children, loading, disabled, onClick, kind = 'primary' }) => (
  <button onClick={onClick} disabled={disabled || loading} style={{
    width: '100%', padding: '14px 16px',
    background: disabled
      ? 'rgba(255,255,255,0.06)'
      : kind === 'danger'
        ? 'var(--red)'
        : 'linear-gradient(135deg, var(--cyan), var(--teal))',
    color: disabled ? 'var(--text-3)' : kind === 'danger' ? '#fff' : '#0a0e27',
    border: 'none', borderRadius: 12, fontSize: 15, fontWeight: 600,
    cursor: disabled ? 'not-allowed' : 'pointer',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    transition: 'transform 100ms, opacity 200ms',
    boxShadow: disabled ? 'none' : '0 8px 20px rgba(0,212,255,0.25)',
  }}
  onMouseDown={e => !disabled && (e.currentTarget.style.transform = 'scale(0.98)')}
  onMouseUp={e   => (e.currentTarget.style.transform = '')}
  onTouchStart={e => !disabled && (e.currentTarget.style.transform = 'scale(0.98)')}
  onTouchEnd={e   => (e.currentTarget.style.transform = '')}>
    {loading && (
      <span style={{
        width: 14, height: 14, borderRadius: '50%',
        border: '2px solid rgba(10,14,39,0.3)', borderTopColor: '#0a0e27',
        animation: 'spin 700ms linear infinite',
        display: 'inline-block',
      }}/>
    )}
    {children}
  </button>
);

/* ===== validators ===== */

const validateEmail = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);

const passwordChecks = (p) => ({
  len:   p.length >= 8,
  upper: /[A-Z]/.test(p),
  num:   /[0-9]/.test(p),
});

const passwordStrength = (p) => {
  const c = passwordChecks(p);
  return [c.len, c.upper, c.num, p.length >= 12].filter(Boolean).length;
};

const StrengthBar = ({ password }) => {
  const score  = passwordStrength(password);
  const colors = ['#3a3f5e', 'var(--red)', 'var(--amber)', 'var(--info)', 'var(--green)'];
  const labels = ['', 'Weak', 'Fair', 'Good', 'Strong'];
  return (
    <div style={{marginTop: 8}}>
      <div style={{display: 'flex', gap: 4, marginBottom: 6}}>
        {[1,2,3,4].map(i => (
          <div key={i} style={{
            flex: 1, height: 4, borderRadius: 2,
            background: i <= score ? colors[score] : 'rgba(255,255,255,0.06)',
            transition: 'background 200ms',
          }}/>
        ))}
      </div>
      {password.length > 0 && (
        <div style={{fontSize: 11, color: colors[score], fontWeight: 500}}>
          Password strength: {labels[score]}
        </div>
      )}
    </div>
  );
};

const PwChecklist = ({ password }) => {
  const c = passwordChecks(password);
  const Item = ({ ok, label }) => (
    <div style={{display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: ok ? 'var(--green)' : 'var(--text-3)'}}>
      <Ic name={ok ? 'check' : 'x'} size={11} color={ok ? 'var(--green)' : 'var(--text-3)'}/>
      {label}
    </div>
  );
  return (
    <div style={{display: 'flex', flexDirection: 'column', gap: 3, marginTop: 8}}>
      <Item ok={c.len}   label="At least 8 characters"/>
      <Item ok={c.upper} label="Uppercase letter"/>
      <Item ok={c.num}   label="At least one number"/>
    </div>
  );
};

/* ===== LOGIN ===== */

const AuthLogin = ({ onLogIn, navigate }) => {
  const [email,    setEmail]    = useAuthState('');
  const [password, setPassword] = useAuthState('');
  const [showPw,   setShowPw]   = useAuthState(false);
  const [errs,     setErrs]     = useAuthState({});
  const [loading,  setLoading]  = useAuthState(false);

  const submit = async () => {
    const e = {};
    if (!email) e.email = 'Email is required';
    else if (!validateEmail(email)) e.email = 'Enter a valid email';
    if (!password) e.password = 'Password is required';
    setErrs(e);
    if (Object.keys(e).length) return;
    setLoading(true);
    try {
      const { token, user: u } = await window.API.post('/api/auth/login', { email, password });
      localStorage.setItem(window.API.TOKEN_KEY, token);
      const initials = (u.name || u.email).split(' ').map(s => s[0]).slice(0, 2).join('').toUpperCase();
      onLogIn({ ...u, initials, joinedAt: u.createdAt });
    } catch (err) {
      const status = err.message.includes('401') ? 'Incorrect email or password' : 'Login failed — check connection and try again';
      setErrs({ form: status });
    } finally {
      setLoading(false);
    }
  };

  return (
    <AuthShell>
      <AuthCard title="Welcome Back">
        <AuthField label="Email" error={errs.email}>
          <AuthInput type="email" value={email} onChange={setEmail} placeholder="your@email.com"
            error={errs.email} autoComplete="email"/>
        </AuthField>
        <AuthField label="Password" error={errs.password}>
          <AuthInput
            type={showPw ? 'text' : 'password'} value={password} onChange={setPassword}
            placeholder="••••••••" error={errs.password} autoComplete="current-password"
            rightSlot={
              <button onClick={() => setShowPw(s => !s)}
                style={{background: 'transparent', border: 'none', padding: 8, cursor: 'pointer'}}>
                <Ic name={showPw ? 'eyeOff' : 'eye'} size={16} color="var(--text-2)"/>
              </button>
            }/>
        </AuthField>
        {errs.form && (
          <div style={{
            fontSize: 12, color: 'var(--red)', marginBottom: 12, padding: 10,
            background: 'rgba(255,82,82,0.08)', borderRadius: 8, border: '1px solid rgba(255,82,82,0.25)',
          }}>{errs.form}</div>
        )}
        <div style={{marginBottom: 16}}>
          <AuthPrimaryBtn loading={loading} onClick={submit}>Log In</AuthPrimaryBtn>
        </div>
        <div style={{textAlign: 'center', marginBottom: 16}}>
          <button onClick={() => navigate('/auth/forgot')}
            style={{background: 'none', border: 'none', color: 'var(--cyan)', fontSize: 13, fontWeight: 500, cursor: 'pointer'}}>
            Forgot Password?
          </button>
        </div>
        <div style={{display: 'flex', alignItems: 'center', gap: 10, margin: '20px 0'}}>
          <div style={{flex: 1, height: 1, background: 'var(--border)'}}/>
          <span style={{fontSize: 11, color: 'var(--text-3)', letterSpacing: 1}}>OR</span>
          <div style={{flex: 1, height: 1, background: 'var(--border)'}}/>
        </div>
        <div style={{textAlign: 'center', fontSize: 13, color: 'var(--text-2)'}}>
          Don't have an account?{' '}
          <button onClick={() => navigate('/auth/register')}
            style={{background: 'none', border: 'none', color: 'var(--cyan)', fontSize: 13, fontWeight: 600, cursor: 'pointer'}}>
            Create Account
          </button>
        </div>
      </AuthCard>
    </AuthShell>
  );
};

/* ===== REGISTER ===== */

const AuthRegister = ({ onSignUp, navigate }) => {
  const [name,     setName]     = useAuthState('');
  const [email,    setEmail]    = useAuthState('');
  const [password, setPassword] = useAuthState('');
  const [confirm,  setConfirm]  = useAuthState('');
  const [showPw,   setShowPw]   = useAuthState(false);
  const [agree,    setAgree]    = useAuthState(false);
  const [loading,  setLoading]  = useAuthState(false);
  const [regErr,   setRegErr]   = useAuthState('');

  const checks  = passwordChecks(password);
  const matchOk = confirm.length > 0 && password === confirm;
  const allValid = name.length >= 2 && validateEmail(email) &&
                   checks.len && checks.upper && checks.num && matchOk && agree;

  const submit = async () => {
    if (!allValid) return;
    setLoading(true);
    setRegErr('');
    try {
      const { token, user: u, activatedShareCount } = await window.API.post('/api/auth/register', { name, email, password });
      localStorage.setItem(window.API.TOKEN_KEY, token);
      const initials = u.name.split(' ').map(s => s[0]).slice(0, 2).join('').toUpperCase();
      onSignUp({ ...u, initials, joinedAt: u.createdAt });
      if (window.__toast) window.__toast(`Welcome, ${u.name.split(' ')[0]}!`, { kind: 'success' });
      if (activatedShareCount > 0) {
        setTimeout(() => {
          if (window.__toast) window.__toast(
            `${activatedShareCount} device${activatedShareCount > 1 ? 's have' : ' has'} been shared with you — already in your dashboard`,
            { kind: 'info' }
          );
        }, 1500);
      }
    } catch (err) {
      const msg = err.message.includes('409') ? 'Email already registered — please log in' : 'Registration failed — check connection and try again';
      setRegErr(msg);
    } finally {
      setLoading(false);
    }
  };

  return (
    <AuthShell showBack onBack={() => navigate('/auth/login')}>
      <AuthCard title="Create Your Account">
        <AuthField label="Full Name">
          <AuthInput value={name} onChange={setName} placeholder="Rajesh Kumar" autoComplete="name"/>
        </AuthField>
        <AuthField label="Email">
          <AuthInput type="email" value={email} onChange={setEmail} placeholder="you@example.com" autoComplete="email"/>
        </AuthField>
        <AuthField label="Password">
          <AuthInput
            type={showPw ? 'text' : 'password'} value={password} onChange={setPassword}
            placeholder="••••••••"
            rightSlot={
              <button onClick={() => setShowPw(s => !s)}
                style={{background: 'transparent', border: 'none', padding: 8, cursor: 'pointer'}}>
                <Ic name={showPw ? 'eyeOff' : 'eye'} size={16} color="var(--text-2)"/>
              </button>
            }/>
          {password.length > 0 && <><StrengthBar password={password}/><PwChecklist password={password}/></>}
        </AuthField>
        <AuthField label="Confirm Password">
          <AuthInput
            type={showPw ? 'text' : 'password'} value={confirm} onChange={setConfirm}
            placeholder="••••••••"/>
          {confirm.length > 0 && (
            <div style={{display: 'flex', alignItems: 'center', gap: 6, marginTop: 6, fontSize: 11,
              color: matchOk ? 'var(--green)' : 'var(--red)'}}>
              <Ic name={matchOk ? 'check' : 'x'} size={11} color={matchOk ? 'var(--green)' : 'var(--red)'}/>
              {matchOk ? 'Passwords match' : "Passwords don't match"}
            </div>
          )}
        </AuthField>
        <label style={{display: 'flex', alignItems: 'flex-start', gap: 10, marginBottom: 16, cursor: 'pointer'}}>
          <input type="checkbox" checked={agree} onChange={e => setAgree(e.target.checked)}
            style={{marginTop: 2, accentColor: 'var(--cyan)', width: 16, height: 16}}/>
          <span style={{fontSize: 12, color: 'var(--text-2)', lineHeight: 1.4}}>
            I agree to the <span style={{color: 'var(--cyan)'}}>Terms of Service</span> and <span style={{color: 'var(--cyan)'}}>Privacy Policy</span>
          </span>
        </label>
        {regErr && (
          <div style={{fontSize: 12, color: 'var(--red)', marginBottom: 12, padding: 10,
            background: 'rgba(255,82,82,0.08)', borderRadius: 8, border: '1px solid rgba(255,82,82,0.25)'}}>
            {regErr}
          </div>
        )}
        <AuthPrimaryBtn loading={loading} disabled={!allValid} onClick={submit}>Create Account</AuthPrimaryBtn>
        <div style={{textAlign: 'center', marginTop: 18, fontSize: 13, color: 'var(--text-2)'}}>
          Already have an account?{' '}
          <button onClick={() => navigate('/auth/login')}
            style={{background: 'none', border: 'none', color: 'var(--cyan)', fontSize: 13, fontWeight: 600, cursor: 'pointer'}}>
            Log In
          </button>
        </div>
      </AuthCard>
    </AuthShell>
  );
};

/* ===== FORGOT ===== */

const AuthForgot = ({ navigate }) => {
  const [email,   setEmail]   = useAuthState('');
  const [err,     setErr]     = useAuthState('');
  const [loading, setLoading] = useAuthState(false);

  const submit = () => {
    if (!validateEmail(email)) { setErr('Enter a valid email address'); return; }
    setLoading(true);
    setTimeout(() => {
      sessionStorage.setItem('aq_reset_email', email);
      navigate('/auth/sent');
    }, 1300);
  };

  return (
    <AuthShell showBack onBack={() => navigate('/auth/login')} withLogo={false}>
      <div style={{marginTop: 40, marginBottom: 24}}>
        <div style={{fontSize: 26, fontWeight: 700, letterSpacing: -0.4, marginBottom: 8}}>Forgot Password?</div>
        <div style={{fontSize: 14, color: 'var(--text-2)', lineHeight: 1.5}}>
          Enter the email address linked to your account. We'll send you a reset link.
        </div>
      </div>
      <AuthField label="Email" error={err}>
        <AuthInput type="email" value={email} onChange={v => { setEmail(v); setErr(''); }}
          placeholder="you@example.com" error={err}/>
      </AuthField>
      <AuthPrimaryBtn loading={loading} onClick={submit}>Send Reset Link</AuthPrimaryBtn>
      <div style={{textAlign: 'center', marginTop: 18, fontSize: 13, color: 'var(--text-2)'}}>
        Remember your password?{' '}
        <button onClick={() => navigate('/auth/login')}
          style={{background: 'none', border: 'none', color: 'var(--cyan)', fontSize: 13, fontWeight: 600, cursor: 'pointer'}}>
          Log In
        </button>
      </div>
    </AuthShell>
  );
};

/* ===== FORGOT SENT ===== */

const AuthForgotSent = ({ navigate }) => {
  const email  = sessionStorage.getItem('aq_reset_email') || 'you@example.com';
  const masked = (() => { const [u, d] = email.split('@'); return u.slice(0, 3) + '***@' + d; })();
  const [count, setCount] = useAuthState(60);

  useAuthEffect(() => {
    if (count <= 0) return;
    const t = setTimeout(() => setCount(c => c - 1), 1000);
    return () => clearTimeout(t);
  }, [count]);

  return (
    <AuthShell showBack onBack={() => navigate('/auth/login')} withLogo={false}>
      <div style={{textAlign: 'center', marginTop: 40}}>
        <div style={{
          width: 72, height: 72, borderRadius: 20, margin: '0 auto 20px',
          background: 'linear-gradient(135deg, rgba(0,212,255,0.15), rgba(0,184,148,0.15))',
          border: '1px solid rgba(0,212,255,0.3)',
          display: 'grid', placeItems: 'center',
          animation: 'pop-in 360ms ease both',
        }}>
          <Ic name="mail" size={32} color="var(--cyan)"/>
        </div>
        <div style={{fontSize: 24, fontWeight: 700, letterSpacing: -0.3, marginBottom: 8}}>Check Your Email</div>
        <div style={{fontSize: 14, color: 'var(--text-2)', lineHeight: 1.5, marginBottom: 6}}>
          We sent a password reset link to
        </div>
        <div style={{fontSize: 14, color: 'var(--cyan)', fontWeight: 600, marginBottom: 20}}>{masked}</div>
        <div style={{fontSize: 12, color: 'var(--text-3)', marginBottom: 24}}>The link will expire in 1 hour.</div>
        <div style={{
          textAlign: 'left', background: 'var(--card)', border: '1px solid var(--border)',
          borderRadius: 12, padding: 14, marginBottom: 20,
        }}>
          <div style={{fontSize: 12, fontWeight: 600, color: 'var(--text-2)', marginBottom: 6}}>Didn't receive it?</div>
          <div style={{fontSize: 12, color: 'var(--text-3)', lineHeight: 1.6}}>
            • Check your spam/junk folder<br/>
            • Make sure the email address is correct
          </div>
        </div>
        <AuthPrimaryBtn disabled={count > 0} onClick={() => setCount(60)}>
          {count > 0 ? `Resend in ${count}s` : 'Resend Link'}
        </AuthPrimaryBtn>
        <div style={{marginTop: 16}}>
          <button onClick={() => navigate('/auth/reset')}
            style={{background: 'none', border: 'none', color: 'var(--text-3)', fontSize: 11, cursor: 'pointer', fontStyle: 'italic'}}>
            (Demo: Open Reset Screen →)
          </button>
        </div>
      </div>
    </AuthShell>
  );
};

/* ===== RESET ===== */

const AuthReset = ({ navigate }) => {
  const [pw,      setPw]      = useAuthState('');
  const [confirm, setConfirm] = useAuthState('');
  const [show,    setShow]    = useAuthState(false);
  const [loading, setLoading] = useAuthState(false);
  const checks  = passwordChecks(pw);
  const matchOk = confirm.length > 0 && pw === confirm;
  const valid   = checks.len && checks.upper && checks.num && matchOk;

  const submit = () => {
    if (!valid) return;
    setLoading(true);
    setTimeout(() => navigate('/auth/done'), 1300);
  };

  return (
    <AuthShell withLogo={false}>
      <div style={{marginTop: 40, marginBottom: 24}}>
        <div style={{fontSize: 24, fontWeight: 700, letterSpacing: -0.3, marginBottom: 8}}>Create New Password</div>
        <div style={{fontSize: 13, color: 'var(--text-2)'}}>Choose a strong password you haven't used before.</div>
      </div>
      <AuthField label="New Password">
        <AuthInput type={show ? 'text' : 'password'} value={pw} onChange={setPw} placeholder="••••••••"
          rightSlot={
            <button onClick={() => setShow(s => !s)}
              style={{background: 'transparent', border: 'none', padding: 8, cursor: 'pointer'}}>
              <Ic name={show ? 'eyeOff' : 'eye'} size={16} color="var(--text-2)"/>
            </button>
          }/>
        {pw.length > 0 && <><StrengthBar password={pw}/><PwChecklist password={pw}/></>}
      </AuthField>
      <AuthField label="Confirm New Password">
        <AuthInput type={show ? 'text' : 'password'} value={confirm} onChange={setConfirm} placeholder="••••••••"/>
        {confirm.length > 0 && (
          <div style={{display: 'flex', alignItems: 'center', gap: 6, marginTop: 6, fontSize: 11,
            color: matchOk ? 'var(--green)' : 'var(--red)'}}>
            <Ic name={matchOk ? 'check' : 'x'} size={11} color={matchOk ? 'var(--green)' : 'var(--red)'}/>
            {matchOk ? 'Passwords match' : "Passwords don't match"}
          </div>
        )}
      </AuthField>
      <AuthPrimaryBtn loading={loading} disabled={!valid} onClick={submit}>Reset Password</AuthPrimaryBtn>
    </AuthShell>
  );
};

/* ===== RESET DONE ===== */

const AuthResetDone = ({ navigate }) => (
  <AuthShell withLogo={false}>
    <div style={{textAlign: 'center', marginTop: 60}}>
      <div style={{
        width: 80, height: 80, borderRadius: '50%', margin: '0 auto 22px',
        background: 'linear-gradient(135deg, rgba(0,230,118,0.2), rgba(0,184,148,0.2))',
        border: '2px solid var(--green)',
        display: 'grid', placeItems: 'center',
        animation: 'pop-in 400ms ease both',
        boxShadow: '0 0 24px rgba(0,230,118,0.3)',
      }}>
        <Ic name="check" size={40} color="var(--green)" strokeWidth={2.5}/>
      </div>
      <div style={{fontSize: 24, fontWeight: 700, letterSpacing: -0.3, marginBottom: 10}}>Password Reset!</div>
      <div style={{fontSize: 14, color: 'var(--text-2)', lineHeight: 1.5, marginBottom: 32}}>
        Your password has been updated. Please log in with your new password.
      </div>
      <AuthPrimaryBtn onClick={() => navigate('/auth/login')}>Go to Login</AuthPrimaryBtn>
    </div>
  </AuthShell>
);

window.AuthLogin      = AuthLogin;
window.AuthRegister   = AuthRegister;
window.AuthForgot     = AuthForgot;
window.AuthForgotSent = AuthForgotSent;
window.AuthReset      = AuthReset;
window.AuthResetDone  = AuthResetDone;