// AuthScreen — sign in / register. Warm Sunrise glow behind the wordmark.
function AuthScreen({ onContinue }) {
  const { Button, Input } = window.PraigoDesignSystem_290071;
  const { useState } = React;
  const [registering, setRegistering] = useState(false);

  return (
    <div style={{ minHeight: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 24, position: 'relative' }}>
      {/* sunrise glow */}
      <div aria-hidden style={{
        position: 'absolute', top: 40, left: '50%', transform: 'translateX(-50%)',
        width: 320, height: 320, borderRadius: '50%', background: 'var(--grad-sunrise)',
        filter: 'blur(70px)', opacity: 0.28, pointerEvents: 'none',
      }} />
      <div style={{ position: 'relative' }}>
        <div className="praigo-wordmark" style={{ fontSize: 44 }}>
          PRA<span className="i">i</span>GO
        </div>
        <div style={{ color: 'var(--text-secondary)', fontSize: 16, marginTop: 6, marginBottom: 32 }}>
          Do more together.
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--radius-card)', padding: 20, boxShadow: 'var(--shadow-sm)' }}>
          <Input label="Email" placeholder="you@university.edu" leadingIcon="mail" />
          <Input label="Password" type="password" placeholder="••••••••" leadingIcon="lock" />
          <Button fullWidth size="lg" onClick={onContinue} style={{ marginTop: 4 }}>
            {registering ? 'Create account' : 'Continue'}
          </Button>
          <Button variant="ghost" fullWidth onClick={() => setRegistering(v => !v)}>
            {registering ? 'Have an account? Sign in' : 'New here? Register'}
          </Button>
        </div>

        <div style={{ textAlign: 'center', fontSize: 12, color: 'var(--text-secondary)', marginTop: 20 }}>
          Friendship-first. No swiping, ever.
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AuthScreen });