// Customer Mobile — تسجيل الدخول / إنشاء حساب
function LoginScreen() {
  return (
    <div dir="rtl" lang="ar" style={{paddingTop: 50, paddingBottom: 24, background:'#0E1116', minHeight:'100%', fontFamily:'Rubik', color:'#fff', position:'relative', overflow:'hidden'}}>
      {/* الخلفية الزخرفية */}
      <div style={{position:'absolute', insetInlineStart:-80, top:-40, width:280, height:280, borderRadius:'50%', background:'rgba(143,229,168,.10)'}}/>
      <div style={{position:'absolute', insetInlineEnd:-100, top:140, width:240, height:240, borderRadius:'50%', background:'rgba(143,229,168,.06)'}}/>

      {/* الترويسة */}
      <div style={{position:'relative', padding:'18px 22px 0', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <div style={{width:46, height:46, borderRadius:14, background:'#8FE5A8', color:'#0E1116', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:800, fontSize:20}}>Q.</div>
        <span style={{fontSize:12, color:'rgba(255,255,255,.55)'}}>العربية · ar-SY</span>
      </div>

      {/* العنوان */}
      <div style={{position:'relative', padding:'48px 22px 24px'}}>
        <div style={{fontSize:11, color:'#8FE5A8', letterSpacing:1, fontWeight:600, textTransform:'uppercase'}}>QTICKET</div>
        <h1 style={{margin:'8px 0 0', fontSize:40, fontWeight:700, letterSpacing:-1.5, lineHeight:1.1}}>أهلاً بعودتك.</h1>
        <div style={{fontSize:14, color:'rgba(255,255,255,.6)', marginTop:8, lineHeight:1.55}}>
          ادخل إلى حسابك لمتابعة الحجز<br/>والاطّلاع على تذاكرك ومحفظتك.
        </div>
      </div>

      {/* تبويب دخول / إنشاء حساب */}
      <div style={{position:'relative', margin:'0 22px', background:'rgba(255,255,255,.08)', borderRadius:14, padding:4, display:'flex', gap:2}}>
        {[{l:'تسجيل الدخول', sel:true},{l:'حساب جديد'}].map(t=>(
          <div key={t.l} style={{flex:1, textAlign:'center', padding:'10px 0', fontSize:13, fontWeight:600, borderRadius:10, background: t.sel ? '#8FE5A8' : 'transparent', color: t.sel ? '#0E1116' : 'rgba(255,255,255,.55)'}}>{t.l}</div>
        ))}
      </div>

      {/* الحقول */}
      <div style={{position:'relative', padding:'22px 22px 0', display:'flex', flexDirection:'column', gap:14}}>
        <div>
          <div style={{fontSize:11, color:'rgba(255,255,255,.55)', marginBottom:8, fontWeight:600}}>رقم الجوال</div>
          <div style={{height:54, padding:'0 16px', borderRadius:14, background:'rgba(255,255,255,.06)', border:'1px solid rgba(255,255,255,.10)', display:'flex', alignItems:'center', gap:10}}>
            <span style={{padding:'4px 8px', background:'rgba(143,229,168,.16)', color:'#8FE5A8', borderRadius:6, fontSize:11, fontWeight:700}} className="mono ltr">+963</span>
            <span className="mono ltr" style={{flex:1, fontSize:15, fontWeight:500}}>9•• ••• 4421</span>
            <span style={{width:8, height:8, background:'#8FE5A8', borderRadius:'50%'}}/>
          </div>
        </div>

        <div>
          <div style={{fontSize:11, color:'rgba(255,255,255,.55)', marginBottom:8, fontWeight:600, display:'flex', justifyContent:'space-between'}}>
            <span>كلمة المرور</span>
            <span style={{color:'#8FE5A8', fontWeight:600}}>هل نسيتها؟</span>
          </div>
          <div style={{height:54, padding:'0 16px', borderRadius:14, background:'rgba(255,255,255,.06)', border:'1px solid rgba(255,255,255,.10)', display:'flex', alignItems:'center', gap:10}}>
            <span style={{flex:1, fontSize:18, color:'#fff', letterSpacing:6}}>••••••••</span>
            <span style={{fontSize:14, color:'rgba(255,255,255,.55)'}}>👁</span>
          </div>
        </div>

        <div style={{display:'flex', alignItems:'center', gap:8, marginTop:4}}>
          <div style={{width:20, height:20, borderRadius:5, background:'#8FE5A8', display:'flex', alignItems:'center', justifyContent:'center', color:'#0E1116'}}><Ico.check/></div>
          <span style={{fontSize:12, color:'rgba(255,255,255,.7)'}}>تذكّرني على هذا الجهاز</span>
        </div>
      </div>

      {/* زر الدخول */}
      <div style={{position:'relative', padding:'24px 22px 0'}}>
        <button style={{
          width:'100%', height:56, borderRadius:16, border:'none',
          background:'#8FE5A8', color:'#0E1116', fontWeight:700, fontSize:15,
          display:'flex', alignItems:'center', justifyContent:'center', gap:8,
          fontFamily:'Rubik',
        }}>
          تسجيل الدخول <Ico.arrowRight className="flip-rtl"/>
        </button>
      </div>

      {/* فاصل */}
      <div style={{position:'relative', padding:'22px 22px 0', display:'flex', alignItems:'center', gap:14}}>
        <div style={{flex:1, height:0, borderTop:'1px solid rgba(255,255,255,.10)'}}/>
        <span style={{fontSize:11, color:'rgba(255,255,255,.4)'}}>أو</span>
        <div style={{flex:1, height:0, borderTop:'1px solid rgba(255,255,255,.10)'}}/>
      </div>

      {/* OTP بديل */}
      <div style={{position:'relative', padding:'16px 22px 0'}}>
        <button style={{
          width:'100%', height:52, borderRadius:14, border:'1px solid rgba(255,255,255,.16)',
          background:'transparent', color:'#fff', fontWeight:600, fontSize:13,
          display:'flex', alignItems:'center', justifyContent:'center', gap:8,
          fontFamily:'Rubik',
        }}>
          إرسال رمز عبر SMS بدل كلمة المرور
        </button>
      </div>

      {/* ملاحظة الشروط */}
      <div style={{position:'absolute', bottom:42, insetInlineStart:22, insetInlineEnd:22, textAlign:'center', fontSize:11, color:'rgba(255,255,255,.4)', lineHeight:1.6}}>
        بمتابعتك، فإنك توافق على <span style={{color:'#8FE5A8', fontWeight:600}}>الشروط والأحكام</span> و<span style={{color:'#8FE5A8', fontWeight:600}}>سياسة الخصوصية</span>.
      </div>
    </div>
  );
}

Object.assign(window, { LoginScreen });