{pinToast && (

{pinToast}

)} {/* Compact Header */}

🌍 GLOBAL TIME WARP

{awakeCount}/6 cities awake •{' '} {activeStore?.pinnedBy ? `Pinned by ${activeStore.pinnedBy}` : 'Scrub dial to warp time'}

{/* HERO SCRUBBER DIAL CARD */}

{warpHours === 0 ? '🟢 LIVE NOW' : `⚡ WARPED ${warpHours > 0 ? `+${warpHours}h` : `${warpHours}h`}`}

{/* Interactive Slider */} handleWarpChange(Number(e.target.value))} style={{ width: '100%', accentColor: '#EA580C', height: '28px', cursor: 'pointer', }} /> {/* Quick Time Jump Pills */}

{[ { label: '-6h', val: -6 }, { label: '-3h', val: -3 }, { label: '⚡ NOW', val: 0 }, { label: '+3h', val: 3 }, { label: '+6h', val: 6 }, ].map((btn) => { const active = warpHours === btn.val; return ( ); })}

{/* 2x3 COMPACT WORLD GRID — All 6 cities visible without scrolling or overlap! */}

{(cityStates || []).map((c) => (

setShowCityModal(true)} style={{ background: c.bg, color: c.text, borderRadius: '18px', padding: '10px 12px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', boxShadow: '0 6px 16px rgba(15,23,42,0.12)', cursor: 'pointer', }} >

{c.flag} {c.short.toUpperCase()} {c.label}

{c.timeStr} {c.ampm}

))}

{/* City Picker Modal */} {showCityModal && (

setShowCityModal(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(15, 23, 42, 0.72)', zIndex: 70, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px', }} >

e.stopPropagation()} style={{ width: '100%', maxWidth: '340px', background: '#FFFFFF', borderRadius: '22px', padding: '16px', display: 'flex', flexDirection: 'column', gap: '10px', }} >

🌍 Swap Active Cities

{(ALL_CITIES || []).map((city) => { const active = (activeCityIds || []).includes(city.id); return ( ); })}

)}

); }