// شاشة الجوال: التذكرة المؤكدة
function TicketScreen() {
  // باركود مولّد عشوائياً بقيم ثابتة
  const bars = [];
  let seed = 1729;
  for (let i=0; i<70; i++) {
    seed = (seed * 9301 + 49297) % 233280;
    const w = (seed % 4) + 1;
    const h = (seed % 3 === 0) ? 60 : 70;
    bars.push({w, h, gap: (seed%3===0)?2:1});
  }

  return (
    <div dir="rtl" lang="ar" style={{paddingTop: 50, paddingBottom: 24, background:'#0E1116', minHeight:'100%', color:'#fff', fontFamily:'Rubik'}}>
      {/* الترويسة */}
      <div style={{padding:'12px 18px 0', display:'flex', alignItems:'center', gap:12}}>
        <div style={{width:40, height:40, borderRadius:'50%', background:'rgba(255,255,255,.08)', display:'flex', alignItems:'center', justifyContent:'center', color:'#fff'}}><Ico.back className="flip-rtl"/></div>
        <div style={{flex:1, textAlign:'center'}}>
          <div style={{fontSize:11, color:'rgba(255,255,255,.55)'}}>مؤكد</div>
          <div style={{fontSize:16, fontWeight:700, marginTop:2}}>تذكرتك</div>
        </div>
        <div style={{width:40, height:40, borderRadius:'50%', background:'rgba(255,255,255,.08)', display:'flex', alignItems:'center', justifyContent:'center', color:'#fff'}}><Ico.download/></div>
      </div>

      {/* شارة النجاح */}
      <div style={{padding:'16px 22px 6px'}}>
        <div style={{display:'inline-flex', alignItems:'center', gap:8, padding:'6px 12px', background:'rgba(143,229,168,.14)', color:'#8FE5A8', borderRadius:999, fontSize:11, fontWeight:700}}>
          <span style={{width:6, height:6, background:'#8FE5A8', borderRadius:'50%'}}/>
          تم استلام الدفع · <span className="mono ltr">14,000</span> ل.س
        </div>
      </div>

      {/* بطاقة التذكرة */}
      <div style={{margin:'14px 18px 0', position:'relative'}}>
        <div style={{background:'#fff', color:'#0E1116', borderRadius:'26px 26px 0 0', padding:'22px 22px 14px'}}>
          <div style={{fontSize:11, color:'#5B6270'}}>الراكب</div>
          <div style={{fontSize:22, fontWeight:700, letterSpacing:-.5, marginTop:4}}>ليلى الحداد <span style={{fontSize:13, color:'#8B919C', fontWeight:500}}>+ 1</span></div>

          <div style={{display:'flex', alignItems:'center', marginTop:18}}>
            <div style={{flex:1}}>
              <div className="mono ltr" style={{fontSize:22, fontWeight:700, letterSpacing:-.5}}>06:45</div>
              <div style={{fontSize:11, color:'#8B919C', marginTop:2}}>دمشق</div>
              <div style={{fontSize:12, color:'#5B6270', marginTop:1}}>البرامكة</div>
            </div>
            <div style={{flex:1, position:'relative', display:'flex', alignItems:'center', justifyContent:'center'}}>
              <div style={{position:'absolute', insetInlineStart:0, insetInlineEnd:0, top:'50%', borderTop:'1.5px dashed #C9C4B8'}}/>
              <div style={{position:'relative', background:'#fff', padding:'0 8px', display:'flex', alignItems:'center', gap:5, fontSize:10, fontWeight:600, color:'#0E1116'}}>
                <Ico.bus/> 4س 20د
              </div>
            </div>
            <div style={{flex:1, textAlign:'end'}}>
              <div className="mono ltr" style={{fontSize:22, fontWeight:700, letterSpacing:-.5}}>11:05</div>
              <div style={{fontSize:11, color:'#8B919C', marginTop:2}}>حلب</div>
              <div style={{fontSize:12, color:'#5B6270', marginTop:1}}>الراموسة</div>
            </div>
          </div>
        </div>

        {/* خط التمزيق */}
        <div style={{display:'flex', height:24, alignItems:'center', position:'relative', background:'#fff'}}>
          <div style={{width:24, height:24, borderRadius:'50%', background:'#0E1116', marginInlineStart:-12}}/>
          <div style={{flex:1, height:0, borderTop:'1.5px dashed #C9C4B8', margin:'0 4px'}}/>
          <div style={{width:24, height:24, borderRadius:'50%', background:'#0E1116', marginInlineEnd:-12}}/>
        </div>

        <div style={{background:'#fff', color:'#0E1116', borderRadius:'0 0 26px 26px', padding:'14px 22px 22px'}}>
          {/* جدول الحقول */}
          <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:14}}>
            {[
              {l:'التاريخ', v:'الأربعاء 20 تشرين 2'},
              {l:'الباص',  v:'فولفو 9700'},
              {l:'الفئة',  v:'فاخر'},
              {l:'البوابة', v:'ب · 04', mono:true},
              {l:'المقاعد', v:'7ب · 8ب', mono:true},
              {l:'الصعود', v:'06:25', mono:true},
            ].map((f,i)=>(
              <div key={i}>
                <div style={{fontSize:10, color:'#8B919C'}}>{f.l}</div>
                <div className={f.mono?'mono ltr':''} style={{fontSize:14, fontWeight:600, marginTop:3}}>{f.v}</div>
              </div>
            ))}
          </div>

          {/* رقم الحجز */}
          <div style={{marginTop:16, padding:'12px 14px', background:'#F5F2EC', borderRadius:14, display:'flex', alignItems:'center', gap:10}}>
            <Ico.qr style={{color:'#0E1116'}}/>
            <div style={{flex:1}}>
              <div style={{fontSize:10, color:'#8B919C'}}>رقم الحجز</div>
              <div className="mono ltr" style={{fontSize:15, fontWeight:700, marginTop:2}}>QT-2026-058321</div>
            </div>
            <span style={{fontSize:11, color:'#0E1116', fontWeight:600}}>نسخ</span>
          </div>

          {/* الباركود */}
          <div style={{marginTop:18, background:'#fff', borderRadius:12, padding:'4px 0', display:'flex', alignItems:'center', justifyContent:'center', height:84}}>
            <div style={{display:'flex', alignItems:'center', gap:1}}>
              {bars.map((b,i)=>(
                <div key={i} style={{width:b.w, height:b.h, background:'#0E1116', marginInlineEnd:b.gap}}/>
              ))}
            </div>
          </div>
          <div className="mono ltr" style={{textAlign:'center', fontSize:11, color:'#5B6270', letterSpacing:3, marginTop:6}}>QT 2026 058321</div>
        </div>
      </div>

      {/* الأزرار */}
      <div style={{padding:'18px 18px 0', display:'flex', gap:10}}>
        <button style={{
          flex:1, height:52, borderRadius:16, border:'1px solid rgba(255,255,255,.16)',
          background:'transparent', color:'#fff', fontWeight:600, fontSize:13,
          display:'inline-flex', alignItems:'center', justifyContent:'center', gap:6,
          fontFamily:'Rubik',
        }}><Ico.download/> حفظ PDF</button>
        <button style={{
          flex:1.2, height:52, borderRadius:16, border:'none',
          background:'#8FE5A8', color:'#0E1116', fontWeight:700, fontSize:13,
          display:'inline-flex', alignItems:'center', justifyContent:'center', gap:6,
          fontFamily:'Rubik',
        }}>إضافة للمحفظة</button>
      </div>
    </div>
  );
}

Object.assign(window, { TicketScreen });