// screens-auth.jsx — Welcome / Sign in / Sign up

// ─────────────────────────────────────────────────────────────
// Social provider glyphs (generic — not branded marks)
// ─────────────────────────────────────────────────────────────
function GApple({ s = 18 }) {
  return (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="currentColor">
      <path d="M16.4 12.6c0-2.3 1.9-3.4 2-3.5-1.1-1.6-2.8-1.8-3.4-1.9-1.5-.1-2.8.8-3.6.8-.7 0-1.9-.8-3.1-.8-1.6 0-3.1.9-3.9 2.4-1.7 2.9-.4 7.2 1.2 9.5.8 1.2 1.8 2.5 3 2.4 1.2 0 1.7-.8 3.1-.8 1.5 0 1.9.8 3.1.7 1.3 0 2.1-1.2 2.9-2.3.9-1.3 1.3-2.6 1.3-2.7-.1 0-2.5-1-2.6-3.8zM14.2 5.3c.6-.8 1.1-1.9 1-3-.9 0-2.1.6-2.7 1.4-.6.7-1.1 1.8-1 2.9 1 .1 2.1-.5 2.7-1.3z"/>
    </svg>
  );
}
function GGoogle({ s = 18 }) {
  return (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M21.6 12.2c0-.7-.1-1.4-.2-2H12v3.8h5.4c-.2 1.2-.9 2.3-2 3v2.5h3.2c1.9-1.7 3-4.3 3-7.3z" fill="#4285F4"/>
      <path d="M12 22c2.7 0 5-.9 6.6-2.5l-3.2-2.5c-.9.6-2 .9-3.4.9-2.6 0-4.8-1.7-5.6-4.1H3.1v2.6C4.8 19.8 8.1 22 12 22z" fill="#34A853"/>
      <path d="M6.4 13.7c-.2-.6-.3-1.3-.3-2s.1-1.4.3-2V7.1H3.1C2.4 8.6 2 10.2 2 12s.4 3.4 1.1 4.9l3.3-2.6.0-.6z" fill="#FBBC05"/>
      <path d="M12 5.9c1.5 0 2.8.5 3.8 1.5l2.8-2.8C16.9 3 14.7 2 12 2 8.1 2 4.8 4.2 3.1 7.1l3.3 2.6C7.2 7.6 9.4 5.9 12 5.9z" fill="#EA4335"/>
    </svg>
  );
}
function GMail({ s = 18 }) {
  return (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="5" width="18" height="14" rx="2"/>
      <path d="M3 7l9 6 9-6"/>
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// SocialBtn — full-width OAuth button
// ─────────────────────────────────────────────────────────────
function SocialBtn({ icon, label, dark = false }) {
  return (
    <button style={{
      width: '100%', height: 52, borderRadius: 14,
      border: dark ? 0 : '0.5px solid var(--line-strong)',
      background: dark ? 'var(--text)' : 'var(--bg)',
      color: dark ? '#fff' : 'var(--text)',
      fontFamily: 'var(--sans)', fontWeight: 600, fontSize: 14.5,
      letterSpacing: '-0.005em',
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
      boxShadow: dark
        ? '0 4px 0 rgba(24,30,50,0.18), 0 10px 24px rgba(24,30,50,0.15)'
        : '0 1px 0 rgba(24,30,50,0.04)',
    }}>
      {icon}
      {label}
    </button>
  );
}

// ─────────────────────────────────────────────────────────────
// WELCOME — auth landing
// ─────────────────────────────────────────────────────────────
function ScreenAuthWelcome() {
  return (
    <div className="rv-screen rv" style={{ background: 'var(--bg-1)' }}>
      <StatusBar time="9:41"/>

      {/* Decorative top-right icon cluster (faded) */}
      <div style={{
        position: 'absolute', top: 38, right: -42, opacity: 0.95,
        pointerEvents: 'none',
      }}>
        <IconStack size={260}/>
      </div>

      {/* Soft sky-blue wash behind cluster */}
      <div style={{
        position: 'absolute', top: -120, right: -160, width: 380, height: 380,
        borderRadius: '50%', background: 'var(--accent-tint)', filter: 'blur(20px)',
        pointerEvents: 'none',
      }}/>

      <div style={{
        position: 'absolute', inset: 0, padding: '70px 24px 30px',
        display: 'flex', flexDirection: 'column',
      }}>
        {/* Brand */}
        <div style={{ marginTop: 14 }}>
          <RvWordmark size={18}/>
        </div>

        <div style={{ flex: 1 }}/>

        {/* Headline */}
        <div style={{ position: 'relative', marginBottom: 28 }}>
          <div className="rv-overline" style={{ color: 'var(--accent-deep)', marginBottom: 12 }}>
            YOUR PERSONAL AI PODCAST
          </div>
          <h1 className="rv-display" style={{
            margin: 0, fontSize: 44, color: 'var(--text)', textWrap: 'balance',
          }}>
            The news,<br/>
            <span style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontWeight: 400, letterSpacing: '-0.025em' }}>
              read to you.
            </span>
          </h1>
          <p style={{
            marginTop: 16, fontSize: 15, color: 'var(--text-2)',
            lineHeight: 1.5, maxWidth: 320, letterSpacing: '-0.005em',
          }}>
            A morning brief built around the things <em>you</em> follow — with citations you can tap.
          </p>
        </div>

        {/* Auth options */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
          <SocialBtn dark icon={<GApple s={18}/>} label="Continue with Apple"/>
          <SocialBtn icon={<GGoogle s={18}/>} label="Continue with Google"/>
          <SocialBtn icon={<GMail s={18}/>} label="Continue with email"/>
        </div>

        {/* Sign in row */}
        <div style={{
          marginTop: 22, textAlign: 'center',
          fontSize: 13.5, color: 'var(--text-2)',
        }}>
          Already have an account?{' '}
          <span style={{ color: 'var(--accent-deep)', fontWeight: 600 }}>Sign in</span>
        </div>

        {/* Legal */}
        <p style={{
          marginTop: 18, marginBottom: 0, textAlign: 'center',
          fontSize: 11, color: 'var(--text-3)', lineHeight: 1.55,
          letterSpacing: '-0.005em', padding: '0 8px',
        }}>
          By continuing you agree to our{' '}
          <span style={{ color: 'var(--text-2)', textDecoration: 'underline' }}>Terms</span>
          {' '}and{' '}
          <span style={{ color: 'var(--text-2)', textDecoration: 'underline' }}>Privacy Policy</span>.
        </p>
      </div>
      <HomeIndicator/>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// EMAIL — email entry (continue with email path)
// ─────────────────────────────────────────────────────────────
function ScreenAuthEmail() {
  return (
    <div className="rv-screen rv">
      <StatusBar time="9:41"/>

      {/* Top bar */}
      <div style={{
        position: 'absolute', top: 56, left: 0, right: 0, padding: '6px 18px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', zIndex: 5,
      }}>
        <button style={{
          width: 38, height: 38, borderRadius: 12, border: 0,
          background: 'var(--bg-1)', color: 'var(--text-2)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 1px 0 rgba(24,30,50,0.04)',
        }}>
          <IcChevL s={18}/>
        </button>
        <RvWordmark size={15}/>
        <div style={{ width: 38 }}/>
      </div>

      <div style={{
        position: 'absolute', top: 110, left: 0, right: 0, bottom: 0,
        padding: '14px 24px 30px', display: 'flex', flexDirection: 'column',
      }}>
        {/* Headline */}
        <div style={{ marginBottom: 4 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
            <ColorChip size={36} kind="mic" bg="var(--accent)" radius={10} rotate={-6}/>
            <ColorChip size={30} kind="sparks" bg="var(--magenta)" radius={9} rotate={8}/>
          </div>
          <h1 className="rv-display" style={{
            margin: 0, fontSize: 32, color: 'var(--text)', textWrap: 'balance',
          }}>
            What's your<br/>email?
          </h1>
          <p style={{ marginTop: 10, fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.5, maxWidth: 300 }}>
            We'll send a six-digit code. No password to remember.
          </p>
        </div>

        {/* Email field */}
        <div style={{ marginTop: 22 }}>
          <label style={{
            display: 'block',
            fontSize: 11, fontWeight: 700, color: 'var(--text-3)',
            letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 8,
          }}>EMAIL</label>
          <div style={{
            padding: '14px 16px',
            background: 'var(--bg-1)',
            border: '1.5px solid var(--accent)',
            borderRadius: 14,
            display: 'flex', alignItems: 'center', gap: 10,
            boxShadow: '0 0 0 4px var(--accent-tint), 0 1px 0 rgba(24,30,50,0.04)',
          }}>
            <span style={{
              fontFamily: 'var(--sans)', fontSize: 16, fontWeight: 500,
              color: 'var(--text)', letterSpacing: '-0.005em',
            }}>
              niraj@
            </span>
            <span style={{
              display: 'inline-block', width: 2, height: 20,
              background: 'var(--accent)',
              animation: 'rv-pulse 1.1s ease-in-out infinite',
            }}/>
            <div style={{ flex: 1 }}/>
            <span style={{
              fontSize: 11, color: 'var(--text-3)',
              fontFamily: 'var(--mono)', letterSpacing: '0.04em',
            }}>↵</span>
          </div>
          <div style={{ marginTop: 8, fontSize: 12, color: 'var(--text-3)', letterSpacing: '-0.005em' }}>
            We'll never sell your email or send marketing.
          </div>
        </div>

        {/* Suggested domains */}
        <div style={{ marginTop: 18, display: 'flex', flexWrap: 'wrap', gap: 7 }}>
          {['@gmail.com', '@me.com', '@outlook.com'].map(d => (
            <span key={d} style={{
              padding: '6px 12px', borderRadius: 999,
              background: 'var(--bg-1)', border: '0.5px solid var(--line-strong)',
              fontSize: 12.5, color: 'var(--text-2)', fontWeight: 500,
              fontFamily: 'var(--mono)',
            }}>{d}</span>
          ))}
        </div>

        <div style={{ flex: 1 }}/>

        {/* Divider w/ social */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14,
          color: 'var(--text-3)', fontSize: 11, fontWeight: 600, letterSpacing: '0.1em',
        }}>
          <div style={{ flex: 1, height: 0.5, background: 'var(--line-strong)' }}/>
          OR
          <div style={{ flex: 1, height: 0.5, background: 'var(--line-strong)' }}/>
        </div>
        <div style={{ display: 'flex', gap: 9, marginBottom: 16 }}>
          <button style={socialIconBtn}><GApple s={18}/></button>
          <button style={socialIconBtn}><GGoogle s={18}/></button>
        </div>

        {/* CTA */}
        <button style={{
          width: '100%', height: 54, borderRadius: 14, border: 0,
          background: 'var(--accent)', color: '#fff',
          fontFamily: 'var(--display)', fontWeight: 700, fontSize: 16, letterSpacing: '-0.01em',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
          boxShadow: '0 4px 0 rgba(24,30,50,0.18), 0 14px 28px rgba(61,143,224,0.30)',
        }}>
          Send me a code
          <IcChevR s={16} w={2.6}/>
        </button>
      </div>
      <HomeIndicator/>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// VERIFY — 6-digit code entry
// ─────────────────────────────────────────────────────────────
function ScreenAuthVerify() {
  const code = ['4', '2', '8', '', '', ''];
  return (
    <div className="rv-screen rv">
      <StatusBar time="9:41"/>

      <div style={{
        position: 'absolute', top: 56, left: 0, right: 0, padding: '6px 18px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', zIndex: 5,
      }}>
        <button style={{
          width: 38, height: 38, borderRadius: 12, border: 0,
          background: 'var(--bg-1)', color: 'var(--text-2)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: '0 1px 0 rgba(24,30,50,0.04)',
        }}>
          <IcChevL s={18}/>
        </button>
        <RvWordmark size={15}/>
        <div style={{ width: 38 }}/>
      </div>

      <div style={{
        position: 'absolute', top: 110, left: 0, right: 0, bottom: 0,
        padding: '14px 24px 30px', display: 'flex', flexDirection: 'column',
      }}>
        {/* Star stamp + headline */}
        <div style={{ marginBottom: 4 }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 6, marginBottom: 14,
            padding: '5px 10px 5px 6px', borderRadius: 999,
            background: 'var(--yellow-tint)', border: '0.5px solid rgba(199,144,30,0.3)',
          }}>
            <AwesomeStar size={16} color="var(--yellow-deep)"/>
            <span style={{
              fontFamily: 'var(--display)', fontWeight: 700, fontSize: 11,
              color: 'var(--yellow-deep)', letterSpacing: '0.12em', textTransform: 'uppercase',
            }}>Almost in</span>
          </div>
          <h1 className="rv-display" style={{
            margin: 0, fontSize: 32, color: 'var(--text)', textWrap: 'balance',
          }}>
            Enter your code.
          </h1>
          <p style={{ marginTop: 10, fontSize: 13.5, color: 'var(--text-2)', lineHeight: 1.5, maxWidth: 320 }}>
            Sent to <span style={{ color: 'var(--text)', fontWeight: 600 }}>niraj@gmail.com</span>.
            {' '}<span style={{ color: 'var(--accent-deep)', fontWeight: 600 }}>Change</span>
          </p>
        </div>

        {/* 6 cells */}
        <div style={{ marginTop: 26, display: 'flex', gap: 9, justifyContent: 'space-between' }}>
          {code.map((c, i) => {
            const filled = c !== '';
            const active = !filled && i === code.findIndex(x => x === '');
            return (
              <div key={i} style={{
                flex: 1, height: 64, borderRadius: 14,
                background: filled ? 'var(--text)' : (active ? 'var(--bg-1)' : 'var(--bg-1)'),
                border: active ? '1.5px solid var(--accent)' : '0.5px solid var(--line-strong)',
                boxShadow: active ? '0 0 0 4px var(--accent-tint)' : 'none',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--display)', fontWeight: 800, fontSize: 28,
                color: filled ? '#fff' : 'var(--text)',
                letterSpacing: '-0.02em',
                position: 'relative',
              }}>
                {filled ? c : (active ? (
                  <span style={{
                    display: 'inline-block', width: 2, height: 26,
                    background: 'var(--accent)',
                    animation: 'rv-pulse 1.1s ease-in-out infinite',
                  }}/>
                ) : null)}
              </div>
            );
          })}
        </div>

        {/* Resend */}
        <div style={{
          marginTop: 22, padding: '12px 14px',
          background: 'var(--bg-1)', border: '0.5px solid var(--line)',
          borderRadius: 12,
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <div style={{
            width: 30, height: 30, borderRadius: 8,
            background: 'var(--bg-3)', color: 'var(--text-2)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'var(--mono)', fontWeight: 600, fontSize: 11,
          }}>0:24</div>
          <div style={{ flex: 1, fontSize: 13, color: 'var(--text-2)' }}>
            Didn't get it? <span style={{ color: 'var(--text-3)' }}>Resend in 24s</span>
          </div>
        </div>

        <div style={{ flex: 1 }}/>

        {/* Tiny FA-style row of glyphs as decoration */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          marginBottom: 14, opacity: 0.55,
        }}>
          <ColorChip size={22} kind="mic" bg="var(--accent)" radius={6} rotate={-8}/>
          <ColorChip size={22} kind="sparks" bg="var(--magenta)" radius={6} rotate={6}/>
          <ColorChip size={22} kind="wave" bg="var(--yellow)" fg="var(--text)" radius={6} rotate={-4}/>
          <ColorChip size={22} kind="headphones" bg="var(--text)" radius={6} rotate={8}/>
        </div>
        <div style={{
          textAlign: 'center', fontSize: 12, color: 'var(--text-3)',
          letterSpacing: '-0.005em',
        }}>
          Your brief starts the moment you're in.
        </div>
      </div>
      <HomeIndicator/>
    </div>
  );
}

const socialIconBtn = {
  flex: 1, height: 50, borderRadius: 14,
  border: '0.5px solid var(--line-strong)',
  background: 'var(--bg)', color: 'var(--text)',
  display: 'flex', alignItems: 'center', justifyContent: 'center',
  boxShadow: '0 1px 0 rgba(24,30,50,0.04)',
};

Object.assign(window, { ScreenAuthWelcome, ScreenAuthEmail, ScreenAuthVerify });