function AuthScreen({ onAuth }) {
  const [email, setEmail] = React.useState('');
  const [sent, setSent] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');

  const handleSend = async () => {
    if (!email.includes('@')) { setError('Enter a valid email address'); return; }
    setLoading(true); setError('');
    const { error: err } = await window._supabase.auth.signInWithOtp({
      email,
      options: { emailRedirectTo: window.location.origin + window.location.pathname },
    });
    if (err) { setError(err.message); setLoading(false); return; }
    setSent(true); setLoading(false);
  };

  if (sent) return (
    <div className="stage fade-up" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div className="card" style={{ maxWidth: 420, textAlign: 'center', padding: '2.5rem 2rem' }}>
        <div style={{ fontSize: '2.5rem', marginBottom: '1rem' }}>📬</div>
        <div className="h1" style={{ marginBottom: '.5rem' }}>Check your email</div>
        <p className="dim" style={{ lineHeight: 1.6 }}>
          We sent a magic link to <strong style={{ color: 'var(--text)' }}>{email}</strong>.
          <br />Click it to sign in and save your progress.
        </p>
      </div>
    </div>
  );

  return (
    <div className="stage fade-up" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div style={{ width: '100%', maxWidth: 420, padding: '0 1.5rem' }}>
        {/* Logo */}
        <div style={{ display: 'flex', alignItems: 'center', gap: '.625rem', marginBottom: '2rem', justifyContent: 'center' }}>
          <svg viewBox="0 0 64 64" fill="none" style={{ width: 36, height: 36, flexShrink: 0 }}>
            <defs>
              <linearGradient id="authBg" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0%" stopColor="#a78bfa"/>
                <stop offset="60%" stopColor="#7c3aed"/>
                <stop offset="100%" stopColor="#4c1d95"/>
              </linearGradient>
            </defs>
            <rect x="2" y="2" width="60" height="60" rx="16" fill="url(#authBg)"/>
            <path d="M 22 12 C 22 12, 48 12, 48 26 C 48 40, 22 40, 22 26" stroke="#f5f3ff" strokeWidth="5.5" strokeLinecap="round" fill="none"/>
            <line x1="22" y1="12" x2="22" y2="54" stroke="#c4b5fd" strokeWidth="5.5" strokeLinecap="round"/>
          </svg>
          <span style={{ fontWeight: 700, fontSize: '1.125rem', letterSpacing: '-.02em' }}>PathWeave</span>
        </div>

        <div className="card" style={{ padding: '2rem' }}>
          <div style={{ marginBottom: '1.5rem' }}>
            <div className="h1" style={{ marginBottom: '.25rem', fontSize: '1.5rem' }}>Sign in</div>
            <p className="dim" style={{ margin: 0 }}>Save your roadmap and progress</p>
          </div>

          <div style={{ marginBottom: '.75rem' }}>
            <label className="dim" style={{ display: 'block', fontSize: '.75rem', fontWeight: 500, marginBottom: '.375rem', textTransform: 'uppercase', letterSpacing: '.05em' }}>
              Email
            </label>
            <input
              type="email"
              placeholder="you@example.com"
              value={email}
              autoFocus
              onChange={e => { setEmail(e.target.value); setError(''); }}
              onKeyDown={e => e.key === 'Enter' && !loading && handleSend()}
              style={{
                width: '100%', boxSizing: 'border-box',
                padding: '.625rem .875rem',
                background: 'var(--bg)', border: '1px solid var(--border)',
                borderRadius: 8, color: 'var(--text)',
                fontSize: '.9375rem', outline: 'none',
                transition: 'border-color .15s',
              }}
            />
          </div>

          {error && (
            <p style={{ color: '#f87171', fontSize: '.8125rem', margin: '-.25rem 0 .75rem' }}>
              {error}
            </p>
          )}

          <button
            className="btn-primary"
            style={{ width: '100%', justifyContent: 'center' }}
            onClick={handleSend}
            disabled={loading || !email}
          >
            {loading ? 'Sending…' : 'Send magic link'}
          </button>

          <p className="dim" style={{ fontSize: '.75rem', textAlign: 'center', marginTop: '1rem', marginBottom: 0 }}>
            No password needed — we'll email you a one-click sign-in link.
          </p>
        </div>
      </div>
    </div>
  );
}
window.AuthScreen = AuthScreen;