// شاشة الجوال: الرئيسية · حجز التذاكر
// مصممة بمقاس 402 × 874 لتطابق إطار IOSDevice الافتراضي.

function HomeScreen() {
  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'},
  ];
  return (
    <div dir="rtl" lang="ar" style={{paddingTop: 64, paddingBottom: 100, background:'#ECEAE4', minHeight:'100%', fontFamily:'Rubik'}}>
      {/* الترويسة */}
      <div style={{padding:'12px 22px 0', display:'flex', alignItems:'center', justifyContent:'space-between'}}>
        <div style={{display:'flex', alignItems:'center', gap:12}}>
          <div style={{width:44, height:44, borderRadius:'50%', background:'#0E1116', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontWeight:700, fontSize:14, position:'relative', overflow:'hidden'}}>
            <StripeFill color="#FFFFFF" opacity={0.08} angle={30}/>
            <span style={{position:'relative'}}>ل.ح</span>
          </div>
          <div>
            <div style={{fontSize:11, color:'#5B6270'}}>مرحباً بعودتك</div>
            <div style={{fontSize:15, fontWeight:600, marginTop:1}}>ليلى الحداد</div>
          </div>
        </div>
        <div style={{width:42, height:42, borderRadius:'50%', background:'#fff', display:'flex', alignItems:'center', justifyContent:'center', boxShadow:'0 1px 0 rgba(0,0,0,.04), 0 8px 24px rgba(15,17,22,.04)', position:'relative'}}>
          <Ico.bell/>
          <span style={{position:'absolute', top:10, insetInlineEnd:11, width:7, height:7, background:'#8FE5A8', border:'1.5px solid #fff', borderRadius:'50%'}}/>
        </div>
      </div>

      {/* العنوان */}
      <div style={{padding:'22px 22px 18px'}}>
        <h1 style={{margin:0, fontSize:38, lineHeight:1.15, fontWeight:700, letterSpacing:-1}}>
          احجز رحلتك<br/>القادمة بسهولة.
        </h1>
      </div>

      {/* نوع الرحلة */}
      <div style={{padding:'0 22px'}}>
        <div style={{background:'#0E1116', borderRadius:14, padding:4, display:'flex', gap:2}}>
          {['ذهاب فقط','ذهاب وعودة','تاريخ مفتوح'].map((t,i)=>(
            <div key={t} style={{
              flex:1, textAlign:'center', padding:'10px 0', fontSize:13, fontWeight:600,
              borderRadius:10,
              background: i===0 ? '#FFFFFF' : 'transparent',
              color: i===0 ? '#0E1116' : 'rgba(255,255,255,.55)',
            }}>{t}</div>
          ))}
        </div>
      </div>

      {/* بطاقة البحث */}
      <div style={{margin:'14px 22px 0', background:'#fff', borderRadius:24, padding:18, position:'relative', boxShadow:'0 1px 0 rgba(0,0,0,.03), 0 18px 40px -18px rgba(15,17,22,.18)'}}>
        {/* من */}
        <div style={{display:'flex', alignItems:'center', gap:14}}>
          <div style={{width:18, display:'flex', justifyContent:'center'}}>
            <div style={{width:10, height:10, borderRadius:'50%', border:'2.5px solid #8FE5A8'}}/>
          </div>
          <div style={{flex:1}}>
            <div style={{fontSize:11, color:'#5B6270'}}>من</div>
            <div style={{fontSize:16, fontWeight:600, marginTop:2}}>دمشق <span style={{color:'#8B919C', fontWeight:500, fontSize:13}}>· البرامكة</span></div>
          </div>
        </div>

        {/* خط متقطع + زر التبديل */}
        <div style={{display:'flex', alignItems:'center', margin:'12px 0'}}>
          <div style={{width:18, display:'flex', justifyContent:'center'}}>
            <div style={{width:0, borderInlineStart:'1.5px dashed #C9C4B8', height:22}}/>
          </div>
          <div style={{flex:1, borderTop:'1px dashed #E6E2D9', marginInlineStart:6}}/>
          <button style={{
            width:44, height:44, borderRadius:'50%', background:'#0E1116',
            color:'#fff', display:'flex', alignItems:'center', justifyContent:'center',
            border:'4px solid #fff', boxShadow:'0 6px 14px rgba(15,17,22,.18)',
            marginInlineStart:-22, cursor:'pointer',
          }}><Ico.swap/></button>
        </div>

        {/* إلى */}
        <div style={{display:'flex', alignItems:'center', gap:14}}>
          <div style={{width:18, display:'flex', justifyContent:'center'}}>
            <div style={{width:10, height:10, borderRadius:'50%', background:'#0E1116'}}/>
          </div>
          <div style={{flex:1}}>
            <div style={{fontSize:11, color:'#5B6270'}}>إلى</div>
            <div style={{fontSize:16, fontWeight:600, marginTop:2}}>حلب <span style={{color:'#8B919C', fontWeight:500, fontSize:13}}>· الراموسة</span></div>
          </div>
        </div>
      </div>

      {/* شريط التواريخ */}
      <div style={{margin:'18px 18px 0'}}>
        <DateStripPill items={dates} selectedIdx={2}/>
      </div>

      {/* الوجهات الشائعة */}
      <div style={{padding:'22px 22px 0', display:'flex', alignItems:'baseline', justifyContent:'space-between'}}>
        <h3 style={{margin:0, fontSize:18, fontWeight:700, letterSpacing:-.3}}>الوجهات الشائعة</h3>
        <span style={{fontSize:12, color:'#5B6270'}}>عرض الكل</span>
      </div>

      <div style={{padding:'12px 22px 0', display:'flex', flexDirection:'column', gap:10}}>
        {[
          {a:'دمشق', b:'اللاذقية', co:'القدموس',  price:'7,500', mins:'4س 20د', tag:'سريع'},
          {a:'حمص',   b:'حلب',       co:'الكرنك',   price:'5,800', mins:'3س 05د', tag:'عادي'},
        ].map((r,i)=>(
          <div key={i} style={{background:'#fff', borderRadius:18, padding:'14px 16px', display:'flex', alignItems:'center', gap:14, boxShadow:'0 1px 0 rgba(0,0,0,.02)'}}>
            <LogoMark initials={r.co.slice(0,2)} bg={i===0?'#0E1116':'#8FE5A8'} fg={i===0?'#fff':'#0E1116'} size={42}/>
            <div style={{flex:1, minWidth:0}}>
              <div style={{display:'flex', alignItems:'center', gap:6, fontSize:14, fontWeight:600}}>
                <span>{r.a}</span><Ico.arrowRight className="flip-rtl"/><span>{r.b}</span>
              </div>
              <div style={{display:'flex', alignItems:'center', gap:8, marginTop:4, fontSize:11, color:'#5B6270'}}>
                <span>{r.co}</span><span>·</span><span>{r.mins}</span><span>·</span><span>{r.tag}</span>
              </div>
            </div>
            <div style={{textAlign:'end'}}>
              <div className="mono" style={{fontSize:15, fontWeight:600}}>{r.price}</div>
              <div style={{fontSize:10, color:'#8B919C'}}>ل.س / مقعد</div>
            </div>
          </div>
        ))}
      </div>

      {/* الشريط السفلي */}
      <BottomNav active="home"/>
    </div>
  );
}

function BottomNav({ active }) {
  const items = [
    {id:'home', icon:Ico.home, label:'الرئيسية'},
    {id:'tickets', icon:Ico.ticket, label:'تذاكري'},
    {id:'wallet', icon:Ico.wallet, label:'المحفظة'},
    {id:'profile', icon:Ico.user, label:'حسابي'},
  ];
  return (
    <div dir="rtl" style={{
      position:'absolute', bottom:0, left:0, right:0,
      paddingBottom: 28, paddingTop:10, paddingLeft:14, paddingRight:14,
      background:'linear-gradient(180deg, rgba(236,234,228,0) 0%, #ECEAE4 30%)',
    }}>
      <div style={{
        background:'#fff', borderRadius:28, height:64,
        display:'flex', alignItems:'center', justifyContent:'space-around',
        boxShadow:'0 1px 0 rgba(0,0,0,.03), 0 18px 40px -18px rgba(15,17,22,.18)',
        padding:'0 8px',
      }}>
        {items.map(it => {
          const sel = it.id === active;
          return (
            <div key={it.id} style={{
              display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
              gap:3, color: sel ? '#0E1116' : '#8B919C',
              padding:'6px 14px', borderRadius:18,
              background: sel ? '#F0EDE5' : 'transparent',
            }}>
              <it.icon/>
              <span style={{fontSize:10, fontWeight:600}}>{it.label}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Object.assign(window, { HomeScreen, BottomNav });