// شاشة الجوال: مراجعة الدفع
function CheckoutScreen() {
  const Row = ({l, r, b=false}) => (
    <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', padding:'10px 0', borderBottom: b ? '1px dashed #E6E2D9' : 'none'}}>
      <div style={{fontSize:13, color:'#5B6270'}}>{l}</div>
      <div style={{fontSize:13, fontWeight:600}}>{r}</div>
    </div>
  );

  return (
    <div dir="rtl" lang="ar" style={{paddingTop: 50, paddingBottom: 24, 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'}}>الخطوة 3 من 3</div>
          <div style={{fontSize:16, fontWeight:700, marginTop:2}}>مراجعة و دفع</div>
        </div>
        <div style={{width:40}}/>
      </div>

      {/* بطاقة الرحلة */}
      <div style={{margin:'14px 18px 0', background:'#fff', borderRadius:22, padding:'16px 16px', boxShadow:'0 1px 0 rgba(0,0,0,.03)'}}>
        <div style={{display:'flex', alignItems:'center', gap:12}}>
          <LogoMark initials="قد" bg="#0E1116" fg="#fff" size={36}/>
          <div style={{flex:1}}>
            <div style={{fontSize:14, fontWeight:700}}>القدموس · سريع</div>
            <div style={{fontSize:11, color:'#5B6270', marginTop:1}}>فولفو 9700 · فاخر</div>
          </div>
          <Chip>الأربعاء · 20 تشرين 2</Chip>
        </div>

        <div style={{display:'flex', alignItems:'center', marginTop:14, gap:10}}>
          <div>
            <div className="mono ltr" style={{fontSize:20, fontWeight:600, letterSpacing:-.5}}>06:45</div>
            <div style={{fontSize:10, color:'#8B919C', marginTop:1}}>دمشق</div>
            <div style={{fontSize:10, color:'#5B6270'}}>البرامكة</div>
          </div>
          <div style={{flex:1, position:'relative', height:32, display:'flex', alignItems:'center', justifyContent:'center'}}>
            <div style={{flex:1, height:0, borderTop:'1.5px dashed #C9C4B8'}}/>
            <div style={{padding:'2px 8px', background:'#F0EDE5', borderRadius:999, fontSize:10, fontWeight:600}}>4س 20د</div>
            <div style={{flex:1, height:0, borderTop:'1.5px dashed #C9C4B8'}}/>
          </div>
          <div style={{textAlign:'end'}}>
            <div className="mono ltr" style={{fontSize:20, fontWeight:600, letterSpacing:-.5}}>11:05</div>
            <div style={{fontSize:10, color:'#8B919C', marginTop:1}}>حلب</div>
            <div style={{fontSize:10, color:'#5B6270'}}>الراموسة</div>
          </div>
        </div>
      </div>

      {/* الركاب */}
      <div style={{padding:'18px 22px 6px', display:'flex', alignItems:'baseline', justifyContent:'space-between'}}>
        <h3 style={{margin:0, fontSize:14, fontWeight:700}}>الركاب (2)</h3>
        <span style={{fontSize:11, color:'#5B6270'}}>مأخوذة من حسابك</span>
      </div>
      <div style={{margin:'4px 18px 0', background:'#fff', borderRadius:22, padding:'4px 16px', boxShadow:'0 1px 0 rgba(0,0,0,.03)'}}>
        {[
          {name:'ليلى الحداد', meta:'أنثى · هوية •••5821 · مقعد 7ب'},
          {name:'عمر الحداد',  meta:'ذكر · هوية •••4099 · مقعد 8ب'},
        ].map((p,i)=>(
          <div key={i} style={{display:'flex', alignItems:'center', gap:12, padding:'12px 0', borderTop: i? '1px dashed #E6E2D9':'none'}}>
            <div style={{width:36, height:36, borderRadius:'50%', background:'#F0EDE5', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:12}}>{p.name.slice(0,2)}</div>
            <div style={{flex:1}}>
              <div style={{fontSize:14, fontWeight:600}}>{p.name}</div>
              <div style={{fontSize:11, color:'#5B6270', marginTop:2}}>{p.meta}</div>
            </div>
            <span style={{width:22, height:22, borderRadius:'50%', background:'#8FE5A8', display:'flex', alignItems:'center', justifyContent:'center'}}><Ico.check/></span>
          </div>
        ))}
      </div>

      {/* الكوبون */}
      <div style={{margin:'14px 18px 0', background:'#fff', borderRadius:22, padding:'4px 16px', boxShadow:'0 1px 0 rgba(0,0,0,.03)'}}>
        <div style={{display:'flex', alignItems:'center', gap:12, padding:'12px 0'}}>
          <div style={{width:36, height:36, borderRadius:10, background:'#0E1116', color:'#8FE5A8', display:'flex', alignItems:'center', justifyContent:'center'}}>
            <Ico.bolt/>
          </div>
          <div style={{flex:1}}>
            <div style={{fontSize:14, fontWeight:600}}>الكوبون WINTER25 مُفعَّل</div>
            <div style={{fontSize:11, color:'#5B6270', marginTop:1}}>خصم 1,500 ل.س على هذا الحجز</div>
          </div>
          <span style={{fontSize:11, color:'#5B6270'}}>تغيير</span>
        </div>
      </div>

      {/* الفاتورة */}
      <div style={{margin:'14px 18px 0', background:'#fff', borderRadius:22, padding:'4px 16px', boxShadow:'0 1px 0 rgba(0,0,0,.03)'}}>
        <Row l="2 × مقعد (7,500)" r={<span className="mono">15,000</span>} b/>
        <Row l="رسوم الخدمة" r={<span className="mono">+ 500</span>} b/>
        <Row l="كوبون · WINTER25" r={<span className="mono" style={{color:'#0E8A4A'}}>− 1,500</span>} b/>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', padding:'14px 0 12px'}}>
          <div style={{fontSize:14, fontWeight:700}}>الإجمالي</div>
          <div className="mono" style={{fontSize:24, fontWeight:700, letterSpacing:-.6}}>14,000 <span style={{fontSize:10, color:'#8B919C', fontWeight:500}}>ل.س</span></div>
        </div>
      </div>

      {/* طريقة الدفع */}
      <div style={{padding:'18px 22px 6px'}}>
        <h3 style={{margin:0, fontSize:14, fontWeight:700}}>طريقة الدفع</h3>
      </div>
      <div style={{margin:'4px 18px 0', display:'flex', gap:10}}>
        <div style={{flex:1, background:'#0E1116', color:'#fff', borderRadius:18, padding:'14px 14px', position:'relative', overflow:'hidden'}}>
          <div style={{position:'absolute', insetInlineStart:-20, bottom:-20, width:80, height:80, borderRadius:'50%', background:'rgba(143,229,168,.16)'}}/>
          <div style={{fontSize:11, color:'rgba(255,255,255,.6)'}}>محفظة QTicket</div>
          <div className="mono" style={{fontSize:18, fontWeight:700, marginTop:6}}>42,180 ل.س</div>
          <div style={{display:'inline-flex', alignItems:'center', gap:5, marginTop:8, background:'#8FE5A8', color:'#0E1116', padding:'3px 8px', borderRadius:999, fontSize:10, fontWeight:700}}>
            <Ico.check/> محدد
          </div>
        </div>
        <div style={{flex:1, background:'#fff', borderRadius:18, padding:'14px 14px', border:'1px solid #E6E2D9'}}>
          <div style={{fontSize:11, color:'#5B6270'}}>شام كاش</div>
          <div className="mono" style={{fontSize:14, fontWeight:600, marginTop:6}}>09•• ••• 4421</div>
          <div style={{fontSize:10, color:'#8B919C', marginTop:8}}>اضغط للتبديل</div>
        </div>
      </div>

      {/* الزر الرئيسي */}
      <div style={{padding:'18px 18px 0'}}>
        <button style={{
          width:'100%', height:54, borderRadius:18, border:'none',
          background:'#8FE5A8', color:'#0E1116', fontWeight:700, fontSize:15,
          display:'flex', alignItems:'center', justifyContent:'center', gap:8,
          fontFamily:'Rubik',
        }}>
          تأكيد و دفع <span className="mono ltr">14,000</span> ل.س
        </button>
        <div style={{textAlign:'center', fontSize:11, color:'#5B6270', marginTop:10}}>
          إلغاء مجاني حتى 4 ساعات قبل الانطلاق
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CheckoutScreen });
