// شاشة الجوال: قائمة الرحلات
function TripsScreen() {
  const dates = [
    {dow:'الاثنين', d:'18', mon:'تشرين 2'},
    {dow:'الثلاثاء', d:'19', mon:'تشرين 2'},
    {dow:'الأربعاء', d:'20', mon:'تشرين 2'},
    {dow:'الخميس', d:'21', mon:'تشرين 2'},
    {dow:'الجمعة', d:'22', mon:'تشرين 2'},
  ];
  const trips = [
    {
      co:'القدموس', initials:'قد', bg:'#0E1116', fg:'#fff',
      bus:'فولفو 9700 · فاخر',
      depart:'06:45', arrive:'11:05', dur:'4س 20د',
      seats:'28 / 44', tag:'سريع', amen:['wifi','snow','outlet'],
      price:'7,500', state:'avail',
    },
    {
      co:'الكرنك +', initials:'كر', bg:'#8FE5A8', fg:'#0E1116',
      bus:'مرسيدس تريفيغو · في آي بي',
      depart:'07:30', arrive:'12:00', dur:'4س 30د',
      seats:'9 / 38', tag:'في آي بي', amen:['wifi','snow','outlet'],
      price:'9,200', state:'fill',
    },
    {
      co:'دمشق باص', initials:'دم', bg:'#0E1116', fg:'#fff',
      bus:'ستيرا S417 · عادي',
      depart:'09:15', arrive:'13:50', dur:'4س 35د',
      seats:'0 / 44', tag:'عادي', amen:['snow'],
      price:'5,400', state:'sold',
    },
  ];

  const amenIcon = { wifi: Ico.wifi, snow: Ico.snow, outlet: Ico.outlet };

  const StateBadge = ({s}) => {
    const map = {
      avail: {bg:'#C7F0D2', fg:'#0E1116', label:'متاحة'},
      fill:  {bg:'#FFE3B8', fg:'#7A4A0A', label:'قاربت على الامتلاء'},
      sold:  {bg:'#F0EDE5', fg:'#8B919C', label:'ممتلئة'},
    }[s];
    return (
      <span style={{display:'inline-flex', alignItems:'center', gap:5, height:22, padding:'0 9px', borderRadius:999, background:map.bg, color:map.fg, fontSize:11, fontWeight:600}}>
        <span style={{width:5, height:5, borderRadius:'50%', background:map.fg, opacity:.7}}/>{map.label}
      </span>
    );
  };

  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', boxShadow:'0 1px 0 rgba(0,0,0,.04)'}}>
          <Ico.back className="flip-rtl"/>
        </div>
        <div style={{flex:1, textAlign:'center'}}>
          <div style={{fontSize:11, color:'#5B6270'}}>الأربعاء · 20 تشرين 2</div>
          <div style={{fontSize:16, fontWeight:700, marginTop:2, display:'inline-flex', alignItems:'center', gap:6}}>
            دمشق <Ico.arrowRight className="flip-rtl"/> حلب
          </div>
        </div>
        <div style={{width:40, height:40, borderRadius:'50%', background:'#0E1116', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center'}}>
          <Ico.search/>
        </div>
      </div>

      {/* شريط التواريخ */}
      <div style={{margin:'14px 14px 0', background:'#fff', borderRadius:18, padding:4, boxShadow:'0 1px 0 rgba(0,0,0,.03)'}}>
        <DateStripPill items={dates} selectedIdx={2}/>
      </div>

      {/* شريط التصفية */}
      <div style={{padding:'18px 22px 8px', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <div>
          <h3 style={{margin:0, fontSize:20, fontWeight:700, letterSpacing:-.4}}>23 رحلة</h3>
          <div style={{fontSize:12, color:'#5B6270', marginTop:2}}>مُرتبة حسب وقت المغادرة</div>
        </div>
        <div style={{display:'flex', gap:6}}>
          {[{l:'الكل', sel:true},{l:'الأرخص'},{l:'الأسرع'}].map((f,i)=>(
            <span key={f.l} style={{
              height:30, padding:'0 12px', display:'inline-flex', alignItems:'center',
              fontSize:12, fontWeight:600, borderRadius:999,
              background: f.sel ? '#0E1116' : '#fff', color: f.sel ? '#fff' : '#0E1116',
              border: f.sel ? 'none' : '1px solid #E6E2D9',
            }}>{f.sel && <Ico.filter style={{marginInlineEnd:5}}/>}{f.l}</span>
          ))}
        </div>
      </div>

      {/* بطاقات الرحلات */}
      <div style={{padding:'8px 18px 0', display:'flex', flexDirection:'column', gap:12}}>
        {trips.map((t,i)=>(
          <div key={i} style={{
            background:'#fff', borderRadius:22, padding:'16px 16px 14px',
            opacity: t.state==='sold' ? .8 : 1,
            boxShadow:'0 1px 0 rgba(0,0,0,.03), 0 18px 30px -18px rgba(15,17,22,.12)',
          }}>
            {/* أعلى البطاقة: الشركة + الحالة */}
            <div style={{display:'flex', alignItems:'center', gap:10}}>
              <LogoMark initials={t.initials} bg={t.bg} fg={t.fg} size={32}/>
              <div style={{flex:1}}>
                <div style={{fontSize:14, fontWeight:700}}>{t.co}</div>
                <div style={{fontSize:11, color:'#5B6270', marginTop:1}}>{t.bus}</div>
              </div>
              <StateBadge s={t.state}/>
            </div>

            {/* الجدول الزمني */}
            <div style={{display:'flex', alignItems:'center', marginTop:14, gap:10}}>
              <div>
                <div className="mono ltr" style={{fontSize:22, fontWeight:600, letterSpacing:-.5}}>{t.depart}</div>
                <div style={{fontSize:10, color:'#8B919C', marginTop:1}}>دمشق</div>
              </div>
              <div style={{flex:1, position:'relative', height:30, display:'flex', alignItems:'center'}}>
                <div style={{width:6, height:6, borderRadius:'50%', background:'#8FE5A8'}}/>
                <div style={{flex:1, height:0, borderTop:'1.5px dashed #C9C4B8', margin:'0 2px'}}/>
                <div style={{
                  position:'absolute', insetInlineStart:'50%', top:'50%', transform:'translate(50%,-50%)',
                  background:'#F0EDE5', borderRadius:999, padding:'2px 8px',
                  fontSize:10, fontWeight:600, color:'#0E1116',
                  display:'flex', alignItems:'center', gap:4,
                }}>
                  <Ico.bus/> {t.dur}
                </div>
                <div style={{width:6, height:6, borderRadius:'50%', background:'#0E1116'}}/>
              </div>
              <div style={{textAlign:'end'}}>
                <div className="mono ltr" style={{fontSize:22, fontWeight:600, letterSpacing:-.5}}>{t.arrive}</div>
                <div style={{fontSize:10, color:'#8B919C', marginTop:1}}>حلب</div>
              </div>
            </div>

            {/* المرافق + الذيل */}
            <div style={{marginTop:14, paddingTop:12, borderTop:'1px dashed #E6E2D9', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
              <div style={{display:'flex', alignItems:'center', gap:10, color:'#5B6270'}}>
                <span className="mono" style={{fontSize:11, fontWeight:600, color:'#0E1116'}}>{t.seats} مقعد</span>
                <span style={{width:3, height:3, background:'#C9C4B8', borderRadius:'50%'}}/>
                <div style={{display:'flex', gap:6}}>
                  {t.amen.map(a=>{ const Ic = amenIcon[a]; return <Ic key={a}/>; })}
                </div>
              </div>
              <div style={{display:'flex', alignItems:'center', gap:10}}>
                <div style={{textAlign:'end'}}>
                  <div className="mono" style={{fontSize:16, fontWeight:700, letterSpacing:-.3}}>{t.price}</div>
                  <div style={{fontSize:9, color:'#8B919C'}}>ل.س</div>
                </div>
                <button style={{
                  height:38, padding:'0 16px', borderRadius:999, border:'none',
                  background: t.state==='sold' ? '#F0EDE5' : '#8FE5A8',
                  color: t.state==='sold' ? '#8B919C' : '#0E1116',
                  fontWeight:700, fontSize:13, display:'inline-flex', alignItems:'center', gap:4,
                  fontFamily:'Rubik',
                }}>
                  {t.state==='sold' ? 'قائمة الانتظار' : 'اختيار'} {t.state!=='sold' && <Ico.chevR className="flip-rtl"/>}
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { TripsScreen });