{s.label}

); } // ── BOTTOM TAB BAR ──────────────────────────────────────────── // IA spec: exactly 5 tabs — Home · Jobs · Belle · Schedule · More. function TabBar({ active, onTab }) { const tabs = [ { id:'home', label:'Home', icon: Icons.home }, { id:'jobs', label:'Jobs', icon: Icons.jobs }, { id:'belle', label:'Belle', icon: null }, { id:'schedule', label:'Schedule', icon: Icons.schedule }, { id:'more', label:'More', icon: Icons.more }, ]; return (

{tabs.map(t => { if (t.id === 'belle') { const isActive = active === 'belle'; return (

onTab('belle')} style={{flex:1,display:'flex',flexDirection:'column', alignItems:'center',cursor:'pointer',gap:0,paddingTop:2}}>

{/* Bell icon — matching real app */}

Belle

); } const isActive = active === t.id; return (

onTab(t.id)} style={{flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:3, cursor:'pointer', paddingTop:2, color: isActive ? '#0071e3' : 'rgba(0,0,0,0.26)', transition:'color 0.1s'}}>

{React.cloneElement(t.icon, { width:22, height:22, strokeWidth: isActive ? 2.05 : 1.6, })}

{t.label}

); })}

); } // ── TOP NAV HEADER ──────────────────────────────────────────── function NavHeader({ title, subtitle, backLabel, onBack, action, transparent }) { const nav = useNav(); // Special sentinel: onBack="__back" means "use context goBack, hide if unavailable" let effectiveOnBack; if (onBack === '__back') { effectiveOnBack = nav.goBack; // null when stack is empty → back button hides } else if (onBack !== undefined) { effectiveOnBack = onBack; } else { effectiveOnBack = nav.goBack; } const effectiveLabel = backLabel !== undefined ? backLabel : nav.backLabel; const showBack = !!effectiveOnBack; return (

{showBack ? (

{Icons.back} {effectiveLabel && {effectiveLabel}}

{title}

) : (

{subtitle &&

{subtitle}

}

{title}

)} {action &&

{action}

}

); } // ── SECTION HEADER ──────────────────────────────────────────── function SectionHeader({ title, action, onAction }) { return (

{title} {action && {action}}

); } // ── CARD CONTAINER ──────────────────────────────────────────── function Card({ children, style, onClick, mx = 16 }) { const [pressed, setPressed] = useState(false); return (

setPressed(true) : undefined} onMouseUp={onClick ? () => setPressed(false) : undefined} onMouseLeave={onClick ? () => setPressed(false) : undefined} style={{ margin: `0 ${mx}px`, background: pressed ? 'rgba(247,247,248,0.92)' : IOS.card, borderRadius:22, border:IOS.line, overflow:'hidden', cursor: onClick ? 'pointer' : undefined, transition:'background 0.1s, transform 0.1s', boxShadow:IOS.shadow, backdropFilter:'blur(18px)', WebkitBackdropFilter:'blur(18px)', transform: pressed ? 'scale(0.995)' : 'scale(1)', ...style, }}> {children}

); } // ── LIST CELL ───────────────────────────────────────────────── function ListCell({ icon, iconBg, title, subtitle, right, badge, onTap, isLast, chevron=true }) { const [pressed, setPressed] = useState(false); return (

setPressed(true) : undefined} onMouseUp={onTap ? () => setPressed(false) : undefined} onMouseLeave={onTap ? () => setPressed(false) : undefined} style={{ padding:'13px 16px', display:'flex',alignItems:'center',gap:12, background: pressed ? 'rgba(242,242,244,0.74)' : 'transparent', borderBottom: isLast ? 'none' : IOS.line, cursor: onTap ? 'pointer' : 'default', transition:'background 0.1s', }}> {icon && (

{icon}

)}

{title}

{subtitle &&

{subtitle}

}

{badge &&

{badge}

} {right &&

{right}

} {chevron && onTap &&

{Icons.chevronR}

}

); } // ── BIG ACTION BUTTON ───────────────────────────────────────── function PrimaryButton({ label, icon, onTap, color='#0071e3', textColor='white', style }) { const [pressed, setPressed] = useState(false); return (

setPressed(true)} onMouseUp={() => setPressed(false)} onMouseLeave={() => setPressed(false)} style={{ height:52, borderRadius:16, background: pressed ? '#0062c4' : color, display:'flex',alignItems:'center',justifyContent:'center',gap:8, color:textColor, fontSize:16, fontWeight:600, cursor:'pointer', letterSpacing:'-0.012em', transition:'all 0.1s', transform: pressed ? 'scale(0.98)' : 'scale(1)', ...style, }}> {icon && {icon}} {label}

); } function SecondaryButton({ label, icon, onTap, style }) { const [pressed, setPressed] = useState(false); return (

setPressed(true)} onMouseUp={() => setPressed(false)} onMouseLeave={() => setPressed(false)} style={{ height:48, borderRadius:16, background: pressed ? '#eaeaec' : 'rgba(255,255,255,0.82)', display:'flex',alignItems:'center',justifyContent:'center',gap:7, color:'#111', fontSize:15, fontWeight:500, cursor:'pointer', letterSpacing:'-0.008em', transition:'background 0.1s, transform 0.1s', transform: pressed ? 'scale(0.985)' : 'scale(1)', ...style, }}> {icon && {icon}} {label}

); } // ── QUICK ACTION TILE ───────────────────────────────────────── function QuickTile({ icon, label, color, bg, onTap }) { const [pressed, setPressed] = useState(false); return (

setPressed(true)} onMouseUp={() => setPressed(false)} onMouseLeave={() => setPressed(false)} style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', gap:6, padding:'12px 4px', background: pressed ? '#eaeaec' : bg||'rgba(255,255,255,0.78)', borderRadius:16, cursor:'pointer', transition:'background 0.1s, transform 0.1s', transform: pressed ? 'scale(0.985)' : 'scale(1)', border:IOS.line, minWidth:0, }}>

{icon}

{label}

); } // ── BOTTOM SHEET ────────────────────────────────────────────── function BottomSheet({ open, onClose, title, children, halfHeight }) { // Important: fully unmount when closed. Hidden translated sheets were still // visible in snapshots and could look like frozen menus inside the phone frame. if (!open) return null; return ( <>