/* Login screen — dark navy gradient */
function LoginScreen({ onSignIn }) {
  const [show, setShow] = React.useState(false);
  const [lang, setLang] = React.useState(window.JL_LANG || 'en');
  const pick = (id) => { window.JL_LANG = id; try { localStorage.setItem('jl_lang', id); } catch(e){} setLang(id); };
  const es = lang === 'es';
  const field = {
    display:'flex', alignItems:'center', gap:11,
    background:'rgba(255,255,255,.07)', border:'1px solid rgba(255,255,255,.16)',
    borderRadius:14, padding:'15px 15px', marginBottom:13,
  };
  const input = {
    flex:1, border:0, background:'transparent', outline:'none',
    color:'#fff', fontSize:15, fontFamily:'var(--font-sans)',
  };
  return (
    <div style={{
      minHeight:'100%', background:'var(--color-grad-login)',
      padding:'92px 26px 40px', boxSizing:'border-box',
      display:'flex', flexDirection:'column',
    }}>
      <div style={{ display:'flex', flexDirection:'column', alignItems:'center', marginBottom:28 }}>
        <div style={{ background:'#fff', borderRadius:22, padding:'18px 22px', boxShadow:'0 14px 34px rgba(0,0,0,.28)' }}>
          <img src={window.JL_LOGO_FULL || 'assets/logo-full-color.png'} alt="JewelLink EDU" style={{ height:64, display:'block' }} />
        </div>
      </div>
      <div style={{ display:'flex', justifyContent:'center', gap:8, marginBottom:20 }}>
        {window.JL_LANGS.map(l => {
          const on = l.id === lang;
          return (
            <button key={l.id} onClick={()=>pick(l.id)} style={{ display:'inline-flex', alignItems:'center', gap:7, padding:'8px 16px', borderRadius:'999px', cursor:'pointer', fontFamily:'var(--font-sans)', fontWeight:700, fontSize:13, border: on?'0':'1px solid rgba(255,255,255,.2)', background: on?'var(--gold-400)':'rgba(255,255,255,.08)', color: on?'var(--on-gold)':'#fff' }}>
              <span style={{ fontFamily:'var(--font-mono)', fontWeight:800 }}>{l.flag}</span>{l.label}
            </button>
          );
        })}
      </div>
      <div style={{ textAlign:'center', marginBottom:26 }}>
        <div style={{ fontSize:22, fontWeight:800, color:'#fff' }}>{es ? '¡Bienvenido!' : 'Welcome back!'}</div>
        <div style={{ fontSize:14, color:'var(--on-navy-soft)', marginTop:3 }}>{es ? 'Inicia sesión para continuar' : 'Sign in to continue'}</div>
      </div>

      <div style={field}>
        <Icon name="mail" size={19} color="var(--on-navy-soft)" />
        <input style={input} placeholder={es ? 'Correo o teléfono' : 'Email or Phone'} defaultValue="jermaine@email.com" />
      </div>
      <div style={field}>
        <Icon name="lock" size={19} color="var(--on-navy-soft)" />
        <input style={input} type={show?'text':'password'} placeholder={es ? 'Contraseña' : 'Password'} defaultValue="parent123" />
        <button onClick={()=>setShow(s=>!s)} style={{ border:0, background:'transparent', cursor:'pointer', display:'flex' }}>
          <Icon name={show?'eye-off':'eye'} size={19} color="var(--on-navy-soft)" />
        </button>
      </div>
      <div style={{ fontSize:13, color:'var(--on-navy-soft)', marginBottom:22, fontWeight:600 }}>{es ? '¿Olvidaste tu contraseña?' : 'Forgot password?'}</div>

      <button onClick={onSignIn} style={{
        background:'var(--gold-400)', color:'var(--on-gold)', border:0,
        borderRadius:14, padding:'16px', fontWeight:800, fontSize:16,
        cursor:'pointer', boxShadow:'var(--shadow-gold)', fontFamily:'var(--font-sans)',
      }}>{es ? 'Iniciar sesión' : 'Sign In'}</button>

      <div style={{ display:'flex', alignItems:'center', gap:12, margin:'20px 0' }}>
        <div style={{ flex:1, height:1, background:'rgba(255,255,255,.16)' }} />
        <span style={{ fontSize:12, color:'var(--on-navy-soft)' }}>{es ? 'o continúa con' : 'or continue with'}</span>
        <div style={{ flex:1, height:1, background:'rgba(255,255,255,.16)' }} />
      </div>

      <div style={{ display:'flex', gap:12 }}>
        <button onClick={onSignIn} style={oauth('#fff','var(--ink)')}>
          <span style={{ fontWeight:800, color:'#EA4335', fontSize:16 }}>G</span> Google
        </button>
        <button onClick={onSignIn} style={oauth('#000','#fff')}>
          <Icon name="apple" size={17} color="#fff" fill="#fff" /> Apple
        </button>
      </div>

      <div style={{ textAlign:'center', marginTop:'auto', paddingTop:26, fontSize:13, color:'var(--on-navy-soft)' }}>
        {es ? '¿No tienes cuenta? ' : "Don't have an account? "}<span style={{ color:'var(--gold-400)', fontWeight:700 }}>{es ? 'Regístrate' : 'Sign up'}</span>
      </div>
    </div>
  );
}
function oauth(bg, fg){ return { flex:1, display:'flex', alignItems:'center', justifyContent:'center', gap:8, background:bg, color:fg, border:'1px solid rgba(255,255,255,.16)', borderRadius:12, padding:'13px', fontWeight:700, fontSize:14, cursor:'pointer', fontFamily:'var(--font-sans)' }; }

Object.assign(window, { LoginScreen });