/* Login screen — dark navy gradient */
function LoginScreen({ onSignIn }) {
  const [show, setShow] = React.useState(false);
  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(--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={{ textAlign:'center', marginBottom:26 }}>
        <div style={{ fontSize:22, fontWeight:800, color:'#fff' }}>Welcome back!</div>
        <div style={{ fontSize:14, color:'var(--on-navy-soft)', marginTop:3 }}>Sign in to continue</div>
      </div>

      <div style={field}>
        <Icon name="mail" size={19} color="var(--on-navy-soft)" />
        <input style={input} placeholder="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="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 }}>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)',
      }}>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)' }}>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)' }}>
        Don't have an account? <span style={{ color:'var(--gold-400)', fontWeight:700 }}>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 });