// Customer Mobile — المحفظة (Wallet)
function WalletScreen() {
  const tx = [
    {kind:'in',  label:'شحن من شام كاش',           date:'اليوم 14:22', amt:'+ 100,000', mono:'TU-7128'},
    {kind:'out', label:'حجز رحلة · دمشق ← حلب',    date:'اليوم 09:08', amt:'− 14,000',  mono:'QT-058321'},
    {kind:'in',  label:'استرداد · رحلة ملغاة',     date:'أمس 18:40',  amt:'+ 6,200',   mono:'RF-2014'},
    {kind:'out', label:'حجز رحلة · حمص ← اللاذقية',date:'أمس 11:12',  amt:'− 7,800',   mono:'QT-058208'},
    {kind:'in',  label:'كوبون · WINTER25',          date:'قبل 3 أيام', amt:'+ 1,500',   mono:'CP-21'},
  ];

  return (
    <div dir="rtl" lang="ar" style={{paddingTop: 50, paddingBottom: 100, background:'#ECEAE4', minHeight:'100%', fontFamily:'Rubik'}}>
      {/* الترويسة */}
      <div style={{padding:'12px 18px 0', display:'flex', alignItems:'center', gap:12}}>
        <div style={{width:40, height:40, borderRadius:'50%', background:'#fff', display:'flex', alignItems:'center', justifyContent:'center'}}>
          <Ico.back className="flip-rtl"/>
        </div>
        <div style={{flex:1, textAlign:'center'}}>
          <div style={{fontSize:11, color:'#5B6270'}}>QTicket</div>
          <div style={{fontSize:16, fontWeight:700, marginTop:2}}>المحفظة</div>
        </div>
        <div style={{width:40, height:40, borderRadius:'50%', background:'#fff', display:'flex', alignItems:'center', justifyContent:'center'}}>
          <span style={{fontSize:20, lineHeight:1, color:'#5B6270', marginTop:-4}}>⋯</span>
        </div>
      </div>

      {/* بطاقة الرصيد */}
      <div style={{margin:'18px 18px 0', background:'#0E1116', color:'#fff', borderRadius:24, padding:'22px 22px 26px', position:'relative', overflow:'hidden'}}>
        <div style={{position:'absolute', insetInlineStart:-40, top:-40, width:200, height:200, borderRadius:'50%', background:'rgba(143,229,168,.10)'}}/>
        <div style={{position:'absolute', insetInlineEnd:-30, bottom:-30, width:140, height:140, borderRadius:'50%', background:'rgba(143,229,168,.06)'}}/>
        <div style={{position:'relative'}}>
          <div style={{fontSize:11, color:'rgba(255,255,255,.55)'}}>الرصيد المتاح</div>
          <div style={{display:'flex', alignItems:'flex-end', gap:8, marginTop:6}}>
            <span className="mono" style={{fontSize:42, fontWeight:700, letterSpacing:-1.5, color:'#8FE5A8', lineHeight:1}}>42,180</span>
            <span style={{fontSize:14, color:'rgba(255,255,255,.55)', paddingBottom:4}}>ل.س</span>
          </div>
          <div style={{display:'flex', alignItems:'center', gap:10, marginTop:14, fontSize:11, color:'rgba(255,255,255,.55)'}}>
            <span>رقم المحفظة</span>
            <span className="mono ltr" style={{padding:'3px 9px', background:'rgba(255,255,255,.08)', borderRadius:6, color:'#fff', fontWeight:600}}>QT•8201•4419</span>
            <span style={{fontSize:11, color:'#8FE5A8', fontWeight:600}}>نسخ</span>
          </div>
        </div>
      </div>

      {/* بطاقة الإجراءات (متراكبة) */}
      <div style={{margin:'-14px 18px 0', position:'relative', zIndex:1}}>
        <div style={{background:'#fff', borderRadius:18, padding:'14px 14px', boxShadow:'0 1px 0 rgba(0,0,0,.03), 0 18px 30px -18px rgba(15,17,22,.18)', display:'flex', gap:10}}>
          <button style={{flex:1.4, height:54, borderRadius:14, background:'#8FE5A8', color:'#0E1116', border:'none', fontWeight:700, fontSize:14, fontFamily:'Rubik', display:'inline-flex', alignItems:'center', justifyContent:'center', gap:8}}>
            <Ico.plus/> شحن الرصيد
          </button>
          <button style={{flex:1, height:54, borderRadius:14, background:'#F5F2EC', color:'#0E1116', border:'none', fontWeight:600, fontSize:13, fontFamily:'Rubik', display:'inline-flex', alignItems:'center', justifyContent:'center', gap:6}}>
            <Ico.swap/> تحويل
          </button>
        </div>
      </div>

      {/* مؤشرات صغيرة */}
      <div style={{margin:'14px 18px 0', display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:8}}>
        {[
          {l:'صرفت هذا الشهر', v:'42,800', sub:'5 حجوزات'},
          {l:'استُلم',          v:'108,200', sub:'3 شحنات'},
          {l:'كوبونات',          v:'1,500',  sub:'مفعّلة'},
        ].map(s=>(
          <div key={s.l} style={{background:'#fff', borderRadius:14, padding:'12px 12px'}}>
            <div style={{fontSize:10, color:'#5B6270'}}>{s.l}</div>
            <div className="mono" style={{fontSize:16, fontWeight:700, marginTop:4}}>{s.v}</div>
            <div style={{fontSize:10, color:'#8B919C', marginTop:2}}>{s.sub}</div>
          </div>
        ))}
      </div>

      {/* تبويبات + قائمة المعاملات */}
      <div style={{margin:'18px 22px 0', display:'flex', alignItems:'baseline', justifyContent:'space-between'}}>
        <h3 style={{margin:0, fontSize:16, fontWeight:700}}>السجل</h3>
        <span style={{fontSize:12, color:'#5B6270'}}>هذا الشهر</span>
      </div>

      <div style={{margin:'10px 18px 0', background:'#F0EDE5', borderRadius:14, padding:4, display:'flex', gap:2}}>
        {[{l:'المعاملات', sel:true},{l:'طلبات الشحن'},{l:'الكوبونات'}].map(t=>(
          <div key={t.l} style={{flex:1, textAlign:'center', padding:'8px 0', fontSize:12, fontWeight:600, borderRadius:10, background: t.sel ? '#fff' : 'transparent', color: t.sel ? '#0E1116' : '#5B6270'}}>{t.l}</div>
        ))}
      </div>

      <div style={{margin:'12px 18px 0', background:'#fff', borderRadius:18, padding:'4px 14px', boxShadow:'0 1px 0 rgba(0,0,0,.03)'}}>
        {tx.map((t,i)=>(
          <div key={i} style={{display:'flex', alignItems:'center', gap:12, padding:'14px 0', borderTop: i? '1px dashed #E6E2D9':'none'}}>
            <div style={{
              width:38, height:38, borderRadius:'50%',
              background: t.kind==='in' ? '#C7F0D2' : '#F5F2EC',
              color: t.kind==='in' ? '#0E8A4A' : '#5B6270',
              display:'flex', alignItems:'center', justifyContent:'center',
              fontWeight:700, fontSize:14,
            }}>{t.kind==='in' ? '↘' : '↗'}</div>
            <div style={{flex:1, minWidth:0}}>
              <div style={{fontSize:13, fontWeight:600}}>{t.label}</div>
              <div style={{fontSize:11, color:'#8B919C', marginTop:2, display:'flex', gap:6}}>
                <span>{t.date}</span>
                <span style={{width:3, height:3, background:'#C9C4B8', borderRadius:'50%', alignSelf:'center'}}/>
                <span className="mono ltr">{t.mono}</span>
              </div>
            </div>
            <div className="mono ltr" style={{fontSize:14, fontWeight:700, color: t.kind==='in' ? '#0E8A4A' : '#0E1116'}}>{t.amt}</div>
          </div>
        ))}
      </div>

      <BottomNav active="wallet"/>
    </div>
  );
}

Object.assign(window, { WalletScreen });