// screens-transport.jsx — transport providers list + detail + request form + trip tracking (النقل) (function(){ const { useState } = React; const Icon = window.Icon; const { Header, HorseAvatar, Stars, Segmented, SecureNote } = window; // ── heart favorite toggle ── function FavBtn({ on, onClick, size=34 }){ return ( ); } // ── truck icon tile ── function TruckTile({ size=62, accent }){ return ( ); } // ── inline dropdown select ── function Select({ value, options, onChange, icon }){ const [open,setOpen] = useState(false); return (
{open && (
{options.map(o=>( ))}
)}
); } /* ───────────────────────── PROVIDERS LIST ───────────────────────── */ function ProviderCard({ p, fav, onFav, onOpen }){ return (
{p.name} {p.typeLabel}
{p.tagline}
({p.reviews}) {p.eta} {p.price} د.ك
); } function TransportScreen({ go, favTransport, toggleFavT }){ const D = window.DATA; const [type,setType] = useState('all'); const list = D.transportProviders.filter(p=>{ if(type==='all') return true; if(type==='fav') return favTransport.includes(p.id); return p.type===type; }); return (
go('tripTrack')}>} />
اختر شركة نقل لطلب رحلة لخيلك
{/* type filter chips */}
{D.transportTypes.map(s=>( ))}
{/* providers */}
{list.length ? list.map(p=>( toggleFavT(p.id)} onOpen={()=>go('transportProvider',{id:p.id})} /> )) : (
{type==='fav' ? 'لم تقم بإضافة شركات للمفضلة بعد' : 'لا توجد شركات في هذا التصنيف'}
)}
); } /* ───────────────────────── PROVIDER DETAIL ───────────────────────── */ function TransportProviderScreen({ back, params, go, favTransport, toggleFavT }){ const D = window.DATA; const p = D.transportProviders.find(x=>x.id===params.id) || D.transportProviders[0]; const fav = favTransport.includes(p.id); const stats = [ ['التقييم', p.rating, 'star'], ['الأسطول', p.fleet, 'truck'], ['الوصول', p.eta, 'clock'] ]; return (
} />
{/* head */}
{p.name} {p.typeLabel}
{p.tagline}
({p.reviews} تقييم)
toggleFavT(p.id)} size={38}/>
{/* stat strip */}
{stats.map((s,i)=>(
{s[1]}
{s[0]}
))}
{/* features */}

المميزات

{p.features.map((f,i)=>(
{f}
))}
{/* price */}
تبدأ الأسعار من {p.price} د.ك
); } /* ───────────────────────── REQUEST FORM ───────────────────────── */ function TransportRequestScreen({ back, params, go }){ const D = window.DATA; const p = D.transportProviders.find(x=>x.id===params.id) || D.transportProviders[0]; const [from,setFrom] = useState(D.transportPlaces[0]); const [to,setTo] = useState(D.transportPlaces[2]); const [day,setDay] = useState('d0'); const [slot,setSlot] = useState('10:00 ص'); const [notes,setNotes] = useState(''); const [done,setDone] = useState(false); const swap = ()=>{ setFrom(to); setTo(from); }; if(done){ const d = D.transportDays.find(x=>x.id===day); return (
تم إرسال طلب الرحلة!
{p.name} · {from} ← {to}
{d.label} {d.date} · {slot}
); } return (
{/* provider chip */}
{p.name}
{p.typeLabel} · يبدأ من {p.price} د.ك
{/* route */}

المسار

نقطة الانطلاق
{/* date */}

التاريخ والوقت

{D.transportDays.map(d=>{ const on = day===d.id; return ( ); })}
{D.transportSlots.map(t=>{ const on = slot===t; return ( ); })}
{/* horse */}

الخيل

{D.horse.name}
{D.horse.breed} · {D.horse.age}
محدد
{/* notes */}

ملاحظات (اختياري)