{/* Featured ribbon */} {featured && (

أفضل خيار

)} {/* HEADER ROW: business + payout (no third column) */}

{order.business}

{verticalLabel} · ~{order.eta} د · {order.distance.toFixed(1)} كم

₪{perKm}/كم

{/* ROUTE — two stacked rows: pickup (from your location), dropoff (from restaurant) */}

{/* Pickup row */}

{order.pickup}

{order.toPickup?.toFixed(1) ?? '—'} كم من موقعك

{/* Connector */}

{/* Dropoff row */}

{order.dropoff}

{order.toDropoff?.toFixed(1) ?? '—'} كم من المتجر

{/* BOTTOM ROW: bonus + accept button */}

{order.bonus > 0 && ( +₪{order.bonus} مكافأة )} {!compatible && غير متوافق} {order.notes && ( ملاحظة )}

); } // ──────────────────────────────────────────────────────────── // Action sheet — bottom anchored, used for active-order next-step. // ──────────────────────────────────────────────────────────── function ActionSheet({ children, padding = 16 }) { return (

{children}

); } // ──────────────────────────────────────────────────────────── // Big primary action button — glove-friendly, 56dp+ // ──────────────────────────────────────────────────────────── function PrimaryButton({ children, onClick, tone = 'primary', size = 'lg', disabled = false, leadingIcon, fullWidth = true }) { const tones = { primary: { bg: 'var(--primary)', fg: '#fff', sh: '0 6px 20px color-mix(in oklch, var(--primary) 28%, transparent)' }, success: { bg: 'var(--success)', fg: '#fff', sh: '0 6px 20px rgba(22,163,74,0.30)' }, danger: { bg: 'var(--danger)', fg: '#fff', sh: '0 6px 20px rgba(220,38,38,0.30)' }, accent: { bg: 'var(--accent)', fg: '#1A1300', sh: '0 6px 20px rgba(245,158,11,0.30)' }, ghost: { bg: 'var(--surface-2)', fg: 'var(--text)', sh: 'none', bd: '1px solid var(--line)' }, outline: { bg: 'transparent', fg: 'var(--text)', sh: 'none', bd: '1.5px solid var(--line-strong)' }, }; const t = tones[tone] || tones.primary; const h = size === 'lg' ? 60 : size === 'md' ? 52 : 44; return ( ); } // ──────────────────────────────────────────────────────────── // "Go online" lever toggle — custom, big // ──────────────────────────────────────────────────────────── function OnlineLever({ online, onToggle }) { return ( ); } // ──────────────────────────────────────────────────────────── // Slide-to-confirm — deliberate destructive/important action // ──────────────────────────────────────────────────────────── function SlideToConfirm({ label = 'اسحب للتأكيد', onConfirm, color = 'var(--success)', icon = 'check' }) { const trackRef = React.useRef(null); const [x, setX] = React.useState(0); const [done, setDone] = React.useState(false); const draggingRef = React.useRef(false); const startXRef = React.useRef(0); const startPosRef = React.useRef(0); const onStart = (e) => { if (done) return; draggingRef.current = true; const clientX = e.touches ? e.touches[0].clientX : e.clientX; startXRef.current = clientX; startPosRef.current = x; }; const onMove = (e) => { if (!draggingRef.current || done) return; const clientX = e.touches ? e.touches[0].clientX : e.clientX; const track = trackRef.current; if (!track) return; const trackW = track.clientWidth; const maxX = trackW - 64; // thumb width + 8 padding // RTL: thumb starts on the right (x=maxX initially via CSS), user drags it LEFT. // We track displacement positively. let delta = startXRef.current - clientX; // positive when moving left let nx = startPosRef.current + delta; nx = Math.max(0, Math.min(maxX, nx)); setX(nx); if (nx >= maxX - 4) { setDone(true); draggingRef.current = false; setTimeout(() => onConfirm && onConfirm(), 200); } }; const onEnd = () => { if (!draggingRef.current) return; draggingRef.current = false; if (!done) setX(0); }; React.useEffect(() => { window.addEventListener('mousemove', onMove); window.addEventListener('mouseup', onEnd); window.addEventListener('touchmove', onMove, { passive: false }); window.addEventListener('touchend', onEnd); return () => { window.removeEventListener('mousemove', onMove); window.removeEventListener('mouseup', onEnd); window.removeEventListener('touchmove', onMove); window.removeEventListener('touchend', onEnd); }; }); // In RTL, "right" is the leading side. The thumb starts on the right and travels left. return (

{/* Filled trail */}

{/* Label */}

{done ? 'تم' : label}

{/* Thumb — starts on the right (RTL leading), drags left */}

); } // ──────────────────────────────────────────────────────────── // Top "Today's earnings" summary bar (sits above map) // ──────────────────────────────────────────────────────────── function EarningsHeader({ today = 142, orders = 4, rating = 4.8 }) { return (

أرباح اليوم

طلبات {orders}

التقييم {rating} ★

); } // ──────────────────────────────────────────────────────────── // "Connecting" radar — used on incoming alert. Calm, dispatch-radio vibe. // ──────────────────────────────────────────────────────────── function RadarPulse({ size = 180, color = 'var(--primary)' }) { const wave = (delay) => ( ); return (

{[0, 0.6, 1.2].map(wave)}

); } Object.assign(window, { Icon, VehicleIcon, VerticalChip, BigNumber, StatusPill, OrderCard, ActionSheet, PrimaryButton, OnlineLever, SlideToConfirm, EarningsHeader, RadarPulse, });