declare const React: any; declare const useCallback: any; declare const useEffect: any; declare const useMemo: any; declare const useRef: any; declare const useState: any; function App({ data, setData, user, isMultiplayer, sharedData, setSharedData, patchSharedData, pushToSharedArray, memberActivity, members, openProfile, share, startChat, pickAndUploadPhoto, getImageUrl, uploadImage, saveToPhotos, captureCanvas, pickAndUploadAudio, getAudioUrl, uploadAudio, pickAndUploadVideo, getVideoUrl, uploadVideo, openAuth, ai, getCurrentLocation }) { const THEME = useMemo(() => ({ bg: '#ffffff', surface: '#f7f7f7', surface2: '#ffffff', text: '#0b0b0b', textMuted: '#5f6368', border: '#e6e6e6', borderStrong: '#d0d0d0', shadow: '0 12px 30px rgba(0,0,0,0.08)', shadowSoft: '0 6px 18px rgba(0,0,0,0.06)', primary: '#0b0b0b', primaryText: '#ffffff', danger: '#b42318', dangerBg: 'rgba(180,35,24,0.08)', }), []); const appData = isMultiplayer ? sharedData : data; const writePatch = useCallback((patch) => { if (isMultiplayer && typeof patchSharedData === 'function') { patchSharedData(patch); } else { setData({ ...(data || {}), ...patch }); } }, [isMultiplayer, patchSharedData, setData, data]); const memberList = useMemo(() => { if (isMultiplayer && members?.length > 0) return members; return [{ id: user?.id, displayName: user?.name || 'You', handle: user?.handle, avatarUrl: user?.avatarUrl, role: 'owner' }]; }, [isMultiplayer, members, user]); const sharedDataRef = useRef(sharedData); const dataRef = useRef(data); useEffect(() => { sharedDataRef.current = sharedData; }, [sharedData]); useEffect(() => { dataRef.current = data; }, [data]); const getLatestAppData = useCallback( () => (isMultiplayer ? (sharedDataRef.current || {}) : (dataRef.current || {})), [isMultiplayer] ); const locations = useMemo(() => Array.isArray(appData?.locations) ? appData.locations : [], [appData?.locations]); const suggestions = useMemo(() => appData?.suggestions || null, [appData?.suggestions]); const realLocations = useMemo(() => (locations || []).filter(l => !l?.isDemo), [locations]); const [view, setView] = useState('map'); const [searchQuery, setSearchQuery] = useState(''); const [searchResults, setSearchResults] = useState([]); const [searching, setSearching] = useState(false); const [showSearch, setShowSearch] = useState(false); const [selectedCategory, setSelectedCategory] = useState('all'); const [showNearby, setShowNearby] = useState(false); const [loadingSuggestions, setLoadingSuggestions] = useState(false); const [animatingPin, setAnimatingPin] = useState(null); const [midpointPulse, setMidpointPulse] = useState(false); const [showFilters, setShowFilters] = useState(false); const [filters, setFilters] = useState({ cuisines: [], activities: [], priceRange: 'any' }); const searchInputRef = useRef(null); const mapRef = useRef(null); const lastSuggestionsKeyRef = useRef(''); const SYDNEY_SEED_SUGGESTIONS = useMemo(() => ({ restaurants: [ { name: 'Bennelong', type: 'Modern Australian', description: 'Iconic dining inside the Sydney Opera House with harbour views.', distance: 'CBD', price: '$$$$', rating: 4.6 }, { name: 'Quay', type: 'Fine dining', description: 'Tasting menus with seasonal produce; landmark Circular Quay setting.', distance: 'Circular Quay', price: '$$$$', rating: 4.7 }, { name: 'Chin Chin', type: 'Thai-inspired', description: 'Loud, fun share plates and great cocktails in Surry Hills.', distance: 'Surry Hills', price: '$$$', rating: 4.4 }, { name: 'Tetsuya’s', type: 'Japanese-French', description: 'Elegant degustation in a heritage space; Sydney classic.', distance: 'CBD', price: '$$$$', rating: 4.5 }, { name: 'Mr. Wong', type: 'Cantonese', description: 'Big-room Cantonese, dumplings and roasts near Wynyard.', distance: 'CBD', price: '$$$', rating: 4.5 }, { name: 'Spice Alley', type: 'Asian street food', description: 'Casual hawker-style laneway with multiple vendors.', distance: 'Chippendale', price: '$$', rating: 4.3 }, { name: 'Fratelli Paradiso', type: 'Italian', description: 'Cozy Potts Point Italian with an excellent wine list.', distance: 'Potts Point', price: '$$$', rating: 4.4 }, { name: 'Saint Peter', type: 'Seafood', description: 'Seafood-forward menu with inventive preparations.', distance: 'Paddington', price: '$$$', rating: 4.6 }, { name: 'Ho Jiak', type: 'Malaysian', description: 'Punchy Malaysian flavours; laksa and char kway teow.', distance: 'Haymarket', price: '$$', rating: 4.4 }, { name: 'El Jannah', type: 'Charcoal chicken', description: 'Sydney favourite for garlic sauce and charcoal chicken.', distance: 'Multiple', price: '$', rating: 4.4 }, ], activities: [ { name: 'Sydney Opera House Tour', type: 'Culture', description: 'Guided tour of Australia’s most iconic performing arts venue.', distance: 'Circular Quay', duration: '1–2 hours' }, { name: 'Art Gallery of NSW', type: 'Museum', description: 'Major gallery with Australian and international collections.', distance: 'The Domain', duration: '1–3 hours' }, { name: 'Australian Museum', type: 'Museum', description: 'Natural history and culture exhibits near Hyde Park.', distance: 'CBD', duration: '1–2 hours' }, { name: 'SEA LIFE Sydney Aquarium', type: 'Family', description: 'Harbour-side aquarium with tunnels and penguins.', distance: 'Darling Harbour', duration: '1–2 hours' }, { name: 'Sydney Harbour Bridge Climb', type: 'Adventure', description: 'Climb the bridge for panoramic harbour views.', distance: 'The Rocks', duration: '2–3 hours' }, { name: 'Ferry to Manly', type: 'Scenic', description: 'Classic harbour ferry ride to Manly Beach and Corso.', distance: 'Circular Quay', duration: 'Half-day' }, { name: 'The Rocks Markets (weekends)', type: 'Shopping', description: 'Local makers, snacks, and historic streets.', distance: 'The Rocks', duration: '1–2 hours' }, { name: 'Barangaroo Reserve', type: 'Park', description: 'Harbour foreshore park with great sunset spots.', distance: 'Barangaroo', duration: '1–2 hours' }, ], walks: [ { name: 'Bondi to Coogee Coastal Walk', type: 'Coastal walk', description: 'Sydney’s signature coastal track with beaches and cliffs.', distance: 'Eastern Suburbs', duration: '2–3 hours' }, { name: 'Royal Botanic Garden Loop', type: 'Gardens', description: 'Easy loop with harbour views and plenty of shade.', distance: 'CBD', duration: '45–90 min' }, { name: 'Bradleys Head to Chowder Bay', type: 'Harbour walk', description: 'Harbour-front bush track with Opera House views.', distance: 'Mosman', duration: '1–2 hours' }, { name: 'Manly to Shelly Beach', type: 'Beach walk', description: 'Short scenic stroll with snorkel spots at Shelly.', distance: 'Manly', duration: '30–60 min' }, { name: 'Glebe Foreshore Walk', type: 'Waterside walk', description: 'Flat foreshore path with city skyline views.', distance: 'Glebe', duration: '45–75 min' }, { name: 'Centennial Park Grand Drive', type: 'Park loop', description: 'Wide loop great for walking or cycling.', distance: 'Centennial Park', duration: '60–120 min' }, ], }), []); const DEMO_LOCATIONS = useMemo(() => [ { id: 'demo-1', name: 'Sydney Opera House', lat: -33.8568, lng: 151.2153, color: '#0b0b0b', isDemo: true, userId: 'demo-1', userName: 'Alex' }, { id: 'demo-2', name: 'Bondi Beach', lat: -33.8908, lng: 151.2743, color: '#5a5a5a', isDemo: true, userId: 'demo-2', userName: 'Jordan' }, { id: 'demo-3', name: 'Darling Harbour', lat: -33.8748, lng: 151.2006, color: '#9a9a9a', isDemo: true, userId: 'demo-3', userName: 'Sam' }, ], []); const displayLocations = useMemo(() => { if ((realLocations || []).length > 0) return realLocations; return DEMO_LOCATIONS; }, [realLocations, DEMO_LOCATIONS]); const midpoint = useMemo(() => { if ((displayLocations || []).length === 0) return null; const avgLat = (displayLocations || []).reduce((s, l) => s + (l?.lat || 0), 0) / (displayLocations || []).length; const avgLng = (displayLocations || []).reduce((s, l) => s + (l?.lng || 0), 0) / (displayLocations || []).length; return { lat: avgLat, lng: avgLng }; }, [displayLocations]); const groupAreaSummary = useMemo(() => { const pts = displayLocations || []; if ((pts || []).length === 0) return null; let minLat = 90, maxLat = -90, minLng = 180, maxLng = -180; for (const p of pts) { if (!p) continue; if (p.lat < minLat) minLat = p.lat; if (p.lat > maxLat) maxLat = p.lat; if (p.lng < minLng) minLng = p.lng; if (p.lng > maxLng) maxLng = p.lng; } const bbox = { minLat, minLng, maxLat, maxLng }; const latSpan = Math.max(maxLat - minLat, 0); const lngSpan = Math.max(maxLng - minLng, 0); const approxKm = Math.max(latSpan * 111, lngSpan * 111); return { bbox, approxKm }; }, [displayLocations]); useEffect(() => { if (midpoint) { setMidpointPulse(true); const t = setTimeout(() => setMidpointPulse(false), 1500); return () => clearTimeout(t); } }, [midpoint?.lat, midpoint?.lng]); const PIN_COLORS = ['#0b0b0b', '#3a3a3a', '#5a5a5a', '#7a7a7a', '#9a9a9a', '#b0b0b0']; const searchLocation = useCallback(async (query) => { if (!query.trim()) { setSearchResults([]); return; } setSearching(true); try { const resp = await fetch( '/api/micro-apps/proxy?upstream=maptiler&path=' + encodeURIComponent('/geocoding/' + encodeURIComponent(query) + '.json?limit=5&country=au&autocomplete=true') ); const json = await resp.json(); const features = json?.features || []; setSearchResults((features || []).map(f => ({ name: f.place_name || f.text || query, lat: f.center?.[1] || 0, lng: f.center?.[0] || 0, }))); } catch (e) { console.error('Search failed:', e); setSearchResults([]); } finally { setSearching(false); } }, []); useEffect(() => { const t = setTimeout(() => { if ((searchQuery || []).length >= 2) searchLocation(searchQuery); }, 400); return () => clearTimeout(t); }, [searchQuery, searchLocation]); const addLocation = useCallback((loc) => { const latest = getLatestAppData(); const currentLocs = Array.isArray(latest?.locations) ? latest.locations : []; const realLocs = (currentLocs || []).filter(l => !l?.isDemo); const colorIndex = (realLocs || []).length % (PIN_COLORS || []).length; const newLoc = { id: 'loc-' + Date.now() + '-' + Math.random().toString(36).slice(2, 6), name: loc.name, lat: loc.lat, lng: loc.lng, color: PIN_COLORS[colorIndex], isDemo: false, userId: user?.id, userName: user?.name || 'You', userAvatar: user?.avatarUrl, userHandle: user?.handle, addedAt: Date.now(), _user: { id: user?.id, displayName: user?.displayName || user?.name, handle: user?.handle, profileImageUrl: user?.profileImageUrl || user?.avatarUrl, }, _timestamp: Date.now(), }; const updated = [...realLocs, newLoc]; writePatch({ locations: updated, suggestions: null }); setAnimatingPin(newLoc.id); setTimeout(() => setAnimatingPin(null), 800); setShowSearch(false); setSearchQuery(''); setSearchResults([]); }, [getLatestAppData, writePatch, user, PIN_COLORS]); const removeLocation = useCallback((locId) => { const latest = getLatestAppData(); const currentLocs = Array.isArray(latest?.locations) ? latest.locations : []; const updated = (currentLocs || []).filter(l => l?.id !== locId); writePatch({ locations: updated, suggestions: null }); }, [getLatestAppData, writePatch]); const handleGetMyLocation = useCallback(async () => { if (typeof getCurrentLocation !== 'function') return; try { const loc = await getCurrentLocation({ enableHighAccuracy: true }); const resp = await fetch('/api/micro-apps/proxy?upstream=maptiler&path=' + encodeURIComponent('/geocoding/' + loc.longitude + ',' + loc.latitude + '.json?limit=1')); const json = await resp.json(); const name = json?.features?.[0]?.place_name || 'My Location'; addLocation({ name, lat: loc.latitude, lng: loc.longitude }); } catch (e) { console.error('Location error:', e); } }, [getCurrentLocation, addLocation]); const kmBetween = useCallback((lat1, lon1, lat2, lon2) => { const toRad = (d) => (d * Math.PI) / 180; const R = 6371; const dLat = toRad(lat2 - lat1); const dLon = toRad(lon2 - lon1); const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon / 2) * Math.sin(dLon / 2); const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); return R * c; }, []); const fetchSuggestions = useCallback(async () => { if (!midpoint || (displayLocations || []).length === 0) return; setLoadingSuggestions(true); setShowNearby(true); try { // 1) Triangulate POIs from MapTiler geocoding (real data) inside group bbox. const bbox = groupAreaSummary?.bbox || null; const bboxParam = bbox ? `&bbox=${bbox.minLng},${bbox.minLat},${bbox.maxLng},${bbox.maxLat}` : ''; const proximityParam = `&proximity=${midpoint.lng},${midpoint.lat}`; const fetchPoiList = async (query, limit = 10) => { const path = '/geocoding/' + encodeURIComponent(query) + `.json?limit=${limit}&country=au&types=poi${bboxParam}${proximityParam}`; const resp = await fetch('/api/micro-apps/proxy?upstream=maptiler&path=' + encodeURIComponent(path)); const json = await resp.json(); return json?.features || []; }; const [poiRestaurants, poiWalks, poiActivities] = await Promise.all([ fetchPoiList('restaurant', 12), fetchPoiList('trail', 12), fetchPoiList('attraction', 12), ]); const toDistance = (f) => { const lat = f?.center?.[1]; const lng = f?.center?.[0]; if (typeof lat !== 'number' || typeof lng !== 'number') return ''; const km = kmBetween(midpoint.lat, midpoint.lng, lat, lng); if (!Number.isFinite(km)) return ''; return km < 1 ? `${Math.round(km * 1000)} m` : `${km.toFixed(1)} km`; }; const mapPoi = (f) => ({ name: f?.text || f?.place_name || 'Unknown', type: (f?.properties?.category || f?.place_type?.[0] || 'POI').toString(), description: (f?.place_name || '').toString(), distance: toDistance(f), }); const mapWalkPoi = (f) => ({ ...mapPoi(f), duration: '', }); const mapActivityPoi = (f) => ({ ...mapPoi(f), duration: '', }); const triangulated = { restaurants: (poiRestaurants || []).map(mapPoi), walks: (poiWalks || []).map(mapWalkPoi), activities: (poiActivities || []).map(mapActivityPoi), }; const hasEnough = (triangulated.restaurants?.length || 0) + (triangulated.walks?.length || 0) + (triangulated.activities?.length || 0) >= 6; if (hasEnough) { const latest = getLatestAppData(); writePatch({ ...latest, suggestions: triangulated }); return; } const filterInfo = ((filters.cuisines || []).length > 0 || (filters.activities || []).length > 0 || filters.priceRange !== 'any') ? `\nUser preferences: ${filters.cuisines.length > 0 ? 'Cuisines: ' + filters.cuisines.join(', ') + '. ' : ''}${filters.activities.length > 0 ? 'Activities: ' + filters.activities.join(', ') + '. ' : ''}${filters.priceRange !== 'any' ? 'Price range: ' + filters.priceRange + '.' : ''}` : ''; const locNames = (displayLocations || []).map(l => l?.name).join(', '); const areaInfo = groupAreaSummary ? `\nGroup area bounding box: [${groupAreaSummary.bbox.minLng.toFixed(4)}, ${groupAreaSummary.bbox.minLat.toFixed(4)}, ${groupAreaSummary.bbox.maxLng.toFixed(4)}, ${groupAreaSummary.bbox.maxLat.toFixed(4)}] (approx span ~${groupAreaSummary.approxKm.toFixed(1)} km).` : ''; // 2) Fallback: use AI if POI lookup returns too little. const result = await ai({ model: 'gpt-5-chat-latest', intent: 'json', systemPrompt: `You are a local guide AI. Given multiple user locations and their geographic midpoint, suggest real nearby places. Return a JSON object with this exact structure: { "restaurants": [{ "name": string, "type": string, "description": string, "distance": string, "price": string, "rating": number }], "activities": [{ "name": string, "type": string, "description": string, "distance": string, "duration": string }], "walks": [{ "name": string, "type": string, "description": string, "distance": string, "duration": string }] }.\nGive 8-10 items per category. Keep results realistically inside/near the triangulated group area (use the bounding box), not across town. Prefer well-known, verifiable names.`, messages: [{ role: 'user', content: `The group is meeting near coordinates (${midpoint.lat.toFixed(4)}, ${midpoint.lng.toFixed(4)}). Their locations are: ${locNames}.${areaInfo}\n\nFind great spots near the equidistant center point for the group.${filterInfo}` }], responseSchema: { type: 'object', properties: { restaurants: { type: 'array', items: { type: 'object', properties: { name: { type: 'string' }, type: { type: 'string' }, description: { type: 'string' }, distance: { type: 'string' }, price: { type: 'string' }, rating: { type: 'number' } }, required: ['name', 'type', 'description', 'distance'] } }, activities: { type: 'array', items: { type: 'object', properties: { name: { type: 'string' }, type: { type: 'string' }, description: { type: 'string' }, distance: { type: 'string' }, duration: { type: 'string' } }, required: ['name', 'type', 'description', 'distance'] } }, walks: { type: 'array', items: { type: 'object', properties: { name: { type: 'string' }, type: { type: 'string' }, description: { type: 'string' }, distance: { type: 'string' }, duration: { type: 'string' } }, required: ['name', 'type', 'description', 'distance'] } } }, required: ['restaurants', 'activities', 'walks'] } }); const latest = getLatestAppData(); writePatch({ ...latest, suggestions: result }); } catch (e) { console.error('AI suggestions failed:', e); } finally { setLoadingSuggestions(false); } }, [midpoint, displayLocations, groupAreaSummary, filters, ai, kmBetween, getLatestAppData, writePatch]); const CUISINE_OPTIONS = ['Italian', 'Japanese', 'Mexican', 'Thai', 'Indian', 'American', 'Chinese', 'Mediterranean', 'Korean', 'Vietnamese']; const ACTIVITY_OPTIONS = ['Museums', 'Shopping', 'Parks', 'Live Music', 'Bowling', 'Art Galleries', 'Movies', 'Escape Rooms', 'Karaoke', 'Board Games']; const toggleFilter = (type, value) => { setFilters(prev => { const arr = prev[type] || []; const has = (arr || []).includes(value); return { ...prev, [type]: has ? (arr || []).filter(v => v !== value) : [...arr, value] }; }); }; const mapBounds = useMemo(() => { if ((displayLocations || []).length === 0) return { center: { lat: -33.8688, lng: 151.2093 }, zoom: 12 }; let minLat = 90, maxLat = -90, minLng = 180, maxLng = -180; (displayLocations || []).forEach(l => { if (l?.lat < minLat) minLat = l.lat; if (l?.lat > maxLat) maxLat = l.lat; if (l?.lng < minLng) minLng = l.lng; if (l?.lng > maxLng) maxLng = l.lng; }); const cLat = (minLat + maxLat) / 2; const cLng = (minLng + maxLng) / 2; const latSpan = Math.max(maxLat - minLat, 0.01); const lngSpan = Math.max(maxLng - minLng, 0.01); const span = Math.max(latSpan, lngSpan); let z = 13; if (span > 1) z = 8; else if (span > 0.5) z = 9; else if (span > 0.2) z = 10; else if (span > 0.1) z = 11; else if (span > 0.05) z = 12; return { center: { lat: cLat, lng: cLng }, zoom: z }; }, [displayLocations]); const effectiveSuggestions = useMemo(() => { if (suggestions) return suggestions; if ((realLocations || []).length > 0) return null; return SYDNEY_SEED_SUGGESTIONS; }, [suggestions, realLocations, SYDNEY_SEED_SUGGESTIONS]); const latToY = useCallback((lat, cLat, zoom, h) => { const scale = Math.pow(2, zoom) * 256; const worldY = (lat2) => (1 - Math.log(Math.tan(lat2 * Math.PI / 180) + 1 / Math.cos(lat2 * Math.PI / 180)) / Math.PI) / 2 * scale; return h / 2 + (worldY(lat) - worldY(cLat)); }, []); const lngToX = useCallback((lng, cLng, zoom, w) => { const scale = Math.pow(2, zoom) * 256; const worldX = (ln) => ((ln + 180) / 360) * scale; return w / 2 + (worldX(lng) - worldX(cLng)); }, []); const MAP_W = 380; const MAP_H = 340; const renderMap = () => { const { center, zoom } = mapBounds; const staticMapSrc = '/api/micro-apps/proxy?upstream=maptiler&path=' + encodeURIComponent(`/maps/streets-v2/static/${center.lng},${center.lat},${zoom}/${MAP_W}x${MAP_H}.png`); return (

{ e.currentTarget.style.display = 'none'; }} />

{[...Array(8)].map((_, i) => { const y = (i + 1) * MAP_H / 9; return

; })} {[...Array(8)].map((_, i) => { const x = (i + 1) * MAP_W / 9; return

; })} {(displayLocations || []).map((loc, idx) => { if (!loc) return null; const x = lngToX(loc.lng, center.lng, zoom, MAP_W); const y = latToY(loc.lat, center.lat, zoom, MAP_H); if (x < -20 || x > MAP_W + 20 || y < -20 || y > MAP_H + 20) return null; const isAnimating = animatingPin === loc.id; return (

{loc.userAvatar ? '' : (loc.isDemo ? '📍' : '👤')}

{loc.userAvatar && (

{ e.currentTarget.style.display = 'none'; }} /> )}

{loc.isDemo ? `Demo • ${loc.userName || ''}` : (loc.userName || 'Pin')}

); })} {midpoint && (

{ if (!loadingSuggestions) fetchSuggestions(); }}>

✨

GATHERGUIDE

)}

); }; const renderLocationList = () => (

{(displayLocations || []).map((loc, idx) => { if (!loc) return null; return (

{loc.isDemo && Demo • } {loc.name}

{ e.stopPropagation(); const handle = loc._user?.handle || loc.userHandle; if (handle) openProfile(handle); }} style={{ fontSize: 11, color: (loc._user?.handle || loc.userHandle) ? THEME.text : THEME.textMuted, cursor: (loc._user?.handle || loc.userHandle) ? 'pointer' : 'default', display: 'flex', alignItems: 'center', gap: 4, }} > {(loc._user?.profileImageUrl || loc.userAvatar) && (

{ e.currentTarget.style.display = 'none'; }} /> )} {loc._user?.displayName || loc.userName || 'Unknown'} {(loc._user?.handle || loc.userHandle) && ( @{loc._user?.handle || loc.userHandle} )}

{!loc.isDemo && loc.userId === user?.id && ( )}

); })}

); const renderSuggestionCard = (item, icon, colorAccent) => (

{icon}

{item?.name || 'Unknown'}

{item?.type || ''}

{item?.description || ''}

{item?.distance && 📍 {item.distance}} {item?.price && 💰 {item.price}} {item?.duration && ⏱ {item.duration}} {item?.rating && ⭐ {item.rating}}

); const filteredSuggestions = useMemo(() => { if (!effectiveSuggestions) return null; if (selectedCategory === 'all') return effectiveSuggestions; if (selectedCategory === 'restaurants') return { restaurants: effectiveSuggestions?.restaurants || [], activities: [], walks: [] }; if (selectedCategory === 'activities') return { restaurants: [], activities: effectiveSuggestions?.activities || [], walks: [] }; if (selectedCategory === 'walks') return { restaurants: [], activities: [], walks: effectiveSuggestions?.walks || [] }; return effectiveSuggestions; }, [effectiveSuggestions, selectedCategory]); useEffect(() => { if (typeof ai !== 'function') return; if ((realLocations || []).length === 0) return; if (!midpoint) return; const key = (realLocations || []) .map(l => `${(l?.lat ?? 0).toFixed(5)},${(l?.lng ?? 0).toFixed(5)}`) .sort() .join('|') + `|${filters.priceRange}|c:${(filters.cuisines || []).slice().sort().join(',')}|a:${(filters.activities || []).slice().sort().join(',')}`; if (lastSuggestionsKeyRef.current === key) return; lastSuggestionsKeyRef.current = key; const t = setTimeout(() => { fetchSuggestions(); }, 650); return () => clearTimeout(t); }, [ai, realLocations, midpoint?.lat, midpoint?.lng, filters, fetchSuggestions]); const renderNearbySheet = () => (

✨ Nearby Delights

{[{ key: 'all', label: 'All', emoji: '🌟' }, { key: 'restaurants', label: 'Eats', emoji: '🍽' }, { key: 'activities', label: 'Activities', emoji: '🎯' }, { key: 'walks', label: 'Walks', emoji: '🚶' }].map(cat => ( ))}

{loadingSuggestions ? (

✨

Finding amazing spots near your GatherGuide...

) : filteredSuggestions ? (

{(filteredSuggestions?.restaurants ?? []).length > 0 && (

🍽 Restaurants

{(filteredSuggestions.restaurants).map((r, i) => renderSuggestionCard(r, '🍽', THEME.text))}

)} {(filteredSuggestions?.activities ?? []).length > 0 && (

🎯 Activities

{(filteredSuggestions.activities).map((a, i) => renderSuggestionCard(a, '🎯', THEME.text))}

)} {(filteredSuggestions?.walks ?? []).length > 0 && (

🚶 Walks & Lookouts

{(filteredSuggestions.walks).map((w, i) => renderSuggestionCard(w, '🚶', THEME.text))}

)}

) : (

🗺

Tap the GatherGuide on the map to discover nearby spots!

)}

); const renderFilterSheet = () => (

⚙️ Preferences

🍽 Cuisine Preferences

{(CUISINE_OPTIONS || []).map(c => ( ))}

🎯 Activity Types

{(ACTIVITY_OPTIONS || []).map(a => ( ))}

💰 Price Range

{['any', '$', '$$', '$$$'].map(p => ( ))}

); return (

GatherGuide

Find your equidistant sweet spot ✨

{(memberList || []).map(m => (

m?.handle && openProfile(m.handle)} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 10px 4px 4px', borderRadius: 20, background: THEME.surface, border: `1px solid ${THEME.border}`, cursor: 'pointer', flexShrink: 0, transition: 'all 0.2s', }}>

{m?.avatarUrl ?

{ e.currentTarget.style.display = 'none'; }} /> : '👤'}

{m?.id === user?.id ? 'You' : (m?.displayName || 'Member')}

))}

{renderMap()}

{typeof getCurrentLocation === 'function' && ( )}

{showSearch && (

setSearchQuery(e.target.value)} placeholder="Search a location..." style={{ flex: 1, height: 44, borderRadius: 12, border: `1px solid ${THEME.borderStrong}`, background: THEME.surface2, color: THEME.text, fontSize: 16, padding: '0 14px', outline: 'none', }} />

{searching &&

Searching...

} {(searchResults || []).length > 0 && (

{(searchResults || []).map((r, i) => ( ))}

)}

)} {midpoint && (

✨ GatherGuide Center

{midpoint.lat.toFixed(4)}°N, {Math.abs(midpoint.lng).toFixed(4)}°{midpoint.lng >= 0 ? 'E' : 'W'}

)}

📍 {(displayLocations || []).length} LOCATION{(displayLocations || []).length !== 1 ? 'S' : ''}

{renderLocationList()}

{suggestions && !showNearby && ( )}

{renderNearbySheet()} {renderFilterSheet()} {showNearby && (

{ setShowNearby(false); setShowFilters(false); }} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.35)', zIndex: 90, transition: 'opacity 0.3s', }} /> )} {showFilters && !showNearby && (

setShowFilters(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.35)', zIndex: 105, transition: 'opacity 0.3s', }} /> )}

); }