{[ { id: 'route', label: 'Optimal route', icon: 'route' }, { id: 'free', label: 'Free explore', icon: 'compass' }, ].map(o => ( ))}

); } function FTStopCard({ restaurant, idx, visit, accent, night, onTap, isNext, userPos }) { const visited = !!visit?.visitedAt; // Dark-leaning card (like the Gilded Bun ref). Flips with day/night but // stays rich and moody in both. const bg = night ? '#14110f' : '#1a1411'; const text = '#fff'; const muted = 'rgba(255,255,255,0.55)'; const hair = 'rgba(255,255,255,0.10)'; // Seeded "rating" per stop so it's stable and deduplicated; real backend // would supply this. Range 4.3–4.9. const seed = restaurant.id.charCodeAt(1) || 1; const rating = (4.3 + ((seed * 7) % 7) / 10).toFixed(1); // Real distance from user → stop const meters = userPos ? ftMeters(userPos, restaurant.coords) : null; const distLabel = meters == null ? '' : meters < 1000 ? `${meters} M` : `${(meters/1000).toFixed(1)} KM`; // "OPEN" logic — seeded-random but stable const isOpen = (seed % 5) !== 0; return ( ); } function FTHome({ tour, restaurants, visits, userPos, setUserPos, mode, setMode, accent, night, filter = 'all', setFilter, onOpenStop, onOpenWallet, }) { const [activeIdx, setActiveIdx] = useStateHome(0); const scrollerRef = useRefHome(null); const orderedStops = tour.stopIds .map(id => restaurants.find(r => r.id === id)) .filter(Boolean); // Filter applied to BOTH the carousel and the map pins const filteredStops = orderedStops.filter(r => { const v = !!visits[r.id]?.visitedAt; if (filter === 'visited') return v; if (filter === 'unvisited') return !v; return true; }); const done = orderedStops.filter(r => visits[r.id]?.visitedAt).length; const total = orderedStops.length; // Next-up = first in optimized order from the user position const remaining = orderedStops.filter(r => !visits[r.id]?.visitedAt); const optimized = mode === 'route' ? ftOptimalOrder(userPos, remaining) : []; const nextId = optimized[0]?.id; const onScroll = () => { const s = scrollerRef.current; if (!s) return; const cards = s.querySelectorAll('[data-stop-card]'); let closest = 0, min = Infinity; const center = s.scrollLeft + s.clientWidth / 2; cards.forEach((c, i) => { const mid = c.offsetLeft + c.offsetWidth / 2; const d = Math.abs(mid - center); if (d < min) { min = d; closest = i; } }); setActiveIdx(closest); }; const activeStop = filteredStops[activeIdx] || filteredStops[0]; const scrollToStop = (idx) => { const s = scrollerRef.current; if (!s) return; const c = s.querySelectorAll('[data-stop-card]')[idx]; if (c) s.scrollTo({ left: c.offsetLeft - (s.clientWidth - c.offsetWidth) / 2, behavior: 'smooth' }); }; const next = nextId ? orderedStops.find(r => r.id === nextId) : null; return (

r.id) }} visits={visits} userPos={userPos} ambient={filter === 'all' ? (window.FT_AMBIENT || []) : []} activeId={activeStop?.id} mode={mode} night={night} accent={accent} onTapStop={(id) => { const i = orderedStops.findIndex(r => r.id === id); if (i >= 0) scrollToStop(i); setTimeout(() => onOpenStop(id), 260); }} onDragUser={(latlng) => setUserPos(latlng)} />

{/* Top chrome */}

FT · Toronto

{tour.name}

{/* Mode toggle */}

{/* Next-up hero band */} {mode === 'route' && next && ( )} {/* Filter pill — slides between All / Visited / Unvisited. Hides/shows pins on the map AND filters the cards. */} visits[r.id]?.visitedAt).length, unvisited: orderedStops.filter(r => !visits[r.id]?.visitedAt).length, }} /> {/* Card stack — wrapper has pointer-events:auto so swipes work in the gap between cards too (not only on a card). */}

{filteredStops.map((r, i) => (

o.id === r.id) + 1} visit={visits[r.id]} accent={accent} night={night} userPos={userPos} isNext={r.id === nextId} onTap={() => onOpenStop(r.id)} />

))}

{/* Page indicator — sits between cards and bottom nav, doesn't block scroll */}

{filteredStops.map((_, i) => (

))}

{/* Floating bottom nav — Preferences · Map · Profile */}

); } // Sliding filter pill — sits just above the carousel. function FTFilterPill({ filter, setFilter, accent, night, counts }) { const items = [ { id: 'all', label: 'All' }, { id: 'visited', label: 'Visited' }, { id: 'unvisited', label: 'To go' }, ]; const idx = Math.max(0, items.findIndex(i => i.id === filter)); const bg = night ? 'rgba(22,19,17,0.86)' : 'rgba(255,255,255,0.92)'; return (

{items.map(it => { const active = filter === it.id; return ( ); })}

); } function FTBottomNav({ accent, night, active = 'map', onProfile }) { // Glassy pill with three equally-spaced buttons. Purely visual in the MVP — // Map is the current screen; Preferences and Profile are stubs that flash // a tooltip so taps feel alive. const bg = night ? 'rgba(22,19,17,0.86)' : 'rgba(255,255,255,0.92)'; const hair = night ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)'; const muted = night ? 'rgba(255,255,255,0.55)' : 'rgba(0,0,0,0.5)'; const [flash, setFlash] = useStateHome(null); const ping = (label) => { setFlash(label); clearTimeout(window.__ftNavFlash); window.__ftNavFlash = setTimeout(() => setFlash(null), 1400); }; const items = [ { id: 'prefs', label: 'Prefs', icon: 'sliders' }, { id: 'map', label: 'Map', icon: 'near' }, { id: 'profile', label: 'Profile', icon: 'user' }, ]; return (

{items.map(it => { const isActive = it.id === active; return ( ); })} {flash && (

{flash} coming soon

)}

); } Object.assign(window, { FTHome, FTProgressRing, FTModeToggle });