// شاشة الجوال: اختيار المقعد
function SeatsScreen() {
  // 11 صفاً × 4 أعمدة (2-ممر-2)، الصف الأخير 5 مقاعد
  // الحالات: 'free' | 'fem' | 'male' | 'sel' | 'na'
  const rows = 11;
  const layout = [];
  for (let r=1; r<=rows; r++) layout.push(['free','free','aisle','free','free']);
  const set = (r, c, v) => { layout[r-1][c] = v; };
  set(1,0,'fem'); set(1,1,'fem'); set(1,3,'male'); set(1,4,'male');
  set(2,0,'male'); set(2,1,'male');
  set(3,3,'male'); set(3,4,'male');
  set(4,0,'fem'); set(4,1,'fem');
  set(5,0,'na'); set(5,1,'na');
  set(6,3,'fem');
  set(7,1,'sel'); // 7ب محدد
  set(7,3,'male'); set(7,4,'male');
  set(8,1,'sel'); // 8ب محدد
  set(9,4,'male');
  set(10,0,'fem'); set(10,1,'fem'); set(10,3,'male'); set(10,4,'male');

  const colors = {
    free: {bg:'#fff', border:'#E6E2D9', fg:'#0E1116'},
    fem:  {bg:'#FDE6F0', border:'#F7C5DC', fg:'#9B2C5A'},
    male: {bg:'#E0E9F7', border:'#C5D5EE', fg:'#1F3C73'},
    sel:  {bg:'#8FE5A8', border:'#6BD085', fg:'#0E1116'},
    na:   {bg:'#F0EDE5', border:'#E6E2D9', fg:'#C9C4B8'},
  };

  // Arabic-friendly seat labels: 7أ, 7ب, 7ج, 7د
  const letters = ['أ','ب','','ج','د'];

  const Seat = ({state, label}) => {
    const c = colors[state];
    return (
      <div style={{
        width:36, height:42, borderRadius:'10px 10px 4px 4px',
        background:c.bg, border:`1.5px solid ${c.border}`,
        display:'flex', alignItems:'center', justifyContent:'center',
        position:'relative', fontSize:11, fontWeight:700, color:c.fg,
      }}>
        {state==='na' ? <span style={{fontSize:9}}>×</span> : <span className="mono">{label}</span>}
        {state==='sel' && <span style={{position:'absolute', top:-6, insetInlineEnd:-6, width:16, height:16, background:'#0E1116', color:'#fff', borderRadius:'50%', display:'flex', alignItems:'center', justifyContent:'center', fontSize:9}}><Ico.check/></span>}
      </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'}}>القدموس · <span className="ltr">06:45</span></div>
          <div style={{fontSize:16, fontWeight:700, marginTop:2}}>اختر مقعدك</div>
        </div>
        <div style={{width:40, height:40, borderRadius:'50%', background:'#0E1116', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontSize:11, fontWeight:700}} className="mono ltr">
          2/4
        </div>
      </div>

      {/* ملخص الرحلة */}
      <div style={{margin:'14px 18px 0', background:'#0E1116', color:'#fff', borderRadius:22, padding:'14px 16px', display:'flex', alignItems:'center', gap:14, position:'relative', overflow:'hidden'}}>
        <div style={{position:'absolute', insetInlineStart:-30, top:-30, width:140, height:140, borderRadius:'50%', background:'rgba(143,229,168,.10)'}}/>
        <LogoMark initials="قد" bg="#FFFFFF" fg="#0E1116" size={36}/>
        <div style={{flex:1, position:'relative'}}>
          <div style={{display:'flex', alignItems:'center', gap:6, fontWeight:600, fontSize:14}}>
            <span>دمشق</span><Ico.arrowRight className="flip-rtl"/><span>حلب</span>
          </div>
          <div style={{fontSize:11, color:'rgba(255,255,255,.6)', marginTop:2}}>الأربعاء 20 تشرين 2 · 4س 20د · فولفو 9700</div>
        </div>
        <div className="mono" style={{position:'relative', fontSize:13, fontWeight:700}}>7,500 / مقعد</div>
      </div>

      {/* مفتاح الألوان */}
      <div style={{padding:'16px 22px 0', display:'flex', flexWrap:'wrap', gap:14, fontSize:11, color:'#5B6270'}}>
        {[
          {label:'متاح', sw:{background:'#fff', border:'1.5px solid #E6E2D9'}},
          {label:'محدد', sw:{background:'#8FE5A8', border:'1.5px solid #6BD085'}},
          {label:'نساء', sw:{background:'#FDE6F0', border:'1.5px solid #F7C5DC'}},
          {label:'رجال', sw:{background:'#E0E9F7', border:'1.5px solid #C5D5EE'}},
          {label:'غير متاح', sw:{background:'#F0EDE5', border:'1.5px solid #E6E2D9'}},
        ].map(l=>(
          <span key={l.label} style={{display:'inline-flex', alignItems:'center', gap:6}}>
            <span style={{width:14, height:14, borderRadius:4, ...l.sw}}/> {l.label}
          </span>
        ))}
      </div>

      {/* مخطط الباص */}
      <div style={{margin:'14px 18px 0', background:'#fff', borderRadius:24, padding:'18px 0 22px', boxShadow:'0 1px 0 rgba(0,0,0,.03)'}}>
        {/* السائق */}
        <div style={{display:'flex', justifyContent:'flex-end', padding:'0 26px 10px'}}>
          <div style={{display:'flex', alignItems:'center', gap:6, fontSize:10, color:'#8B919C'}}>
            <span style={{width:24, height:14, borderRadius:'14px 6px 6px 14px', border:'1.5px solid #C9C4B8'}}/>
            السائق
          </div>
        </div>

        <div style={{display:'flex', flexDirection:'column', gap:8, padding:'0 26px'}}>
          {layout.map((row, ri) => (
            <div key={ri} style={{display:'flex', alignItems:'center', gap:6}}>
              <div className="mono" style={{width:18, fontSize:10, color:'#8B919C', textAlign:'center'}}>{ri+1}</div>
              {row.map((cell, ci) => {
                if (cell === 'aisle') return <div key={ci} style={{width:14}}/>;
                return <Seat key={ci} state={cell} label={`${ri+1}${letters[ci]}`}/>;
              })}
            </div>
          ))}
          {/* الصف الخلفي (5 مقاعد) */}
          <div style={{display:'flex', alignItems:'center', gap:6, marginTop:4, paddingTop:10, borderTop:'1px dashed #E6E2D9'}}>
            <div className="mono" style={{width:18, fontSize:10, color:'#8B919C', textAlign:'center'}}>12</div>
            <Seat state="male" label="12أ"/><Seat state="male" label="12ب"/>
            <Seat state="free" label="12ج"/>
            <Seat state="male" label="12د"/><Seat state="male" label="12هـ"/>
          </div>
        </div>
      </div>

      {/* ملخص الاختيار */}
      <div style={{margin:'14px 18px 0', background:'#fff', borderRadius:22, padding:'14px 16px', display:'flex', alignItems:'center', gap:12, boxShadow:'0 1px 0 rgba(0,0,0,.03)'}}>
        <div style={{flex:1}}>
          <div style={{fontSize:11, color:'#5B6270'}}>المقاعد المختارة · 2 مقعد</div>
          <div style={{display:'flex', gap:6, marginTop:6}}>
            <span style={{padding:'4px 10px', background:'#0E1116', color:'#fff', borderRadius:8, fontSize:12, fontWeight:700}} className="mono">7ب</span>
            <span style={{padding:'4px 10px', background:'#0E1116', color:'#fff', borderRadius:8, fontSize:12, fontWeight:700}} className="mono">8ب</span>
          </div>
        </div>
        <div style={{textAlign:'end'}}>
          <div className="mono" style={{fontSize:20, fontWeight:700, letterSpacing:-.4}}>15,000</div>
          <div style={{fontSize:10, color:'#8B919C'}}>ل.س الإجمالي</div>
        </div>
      </div>

      {/* الزر الرئيسي */}
      <div style={{padding:'14px 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',
        }}>
          متابعة الدفع <Ico.arrowRight className="flip-rtl"/>
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { SeatsScreen });