setSelectedPin(pin)} style={{ position: 'absolute', left: pos.x - 12, top: pos.y - 24, cursor: 'pointer', zIndex: isSelected ? 20 : 10, transition: 'transform 0.3s ease', transform: isBouncing ? 'translateY(-16px) scale(1.4)' : isGlowing ? 'scale(1.3)' : isSelected ? 'scale(1.2)' : 'scale(1)', filter: isGlowing ? `drop-shadow(0 0 8px ${color}) drop-shadow(0 0 16px ${color})` : isBouncing ? `drop-shadow(0 0 12px ${color})` : 'none', }} > {(isGlowing || isBouncing) && (

)}

📍

{pin._user?.profileImageUrl && (

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

); }); }, [filteredPins, mapSize, latLngToXY, pinColor, showFilterGlow, glowCountry, pinBounce, selectedPin]); const bgGrad = 'linear-gradient(135deg, #0a0015 0%, #1a0030 30%, #0d0025 60%, #05001a 100%)'; const cardBg = 'rgba(30, 10, 60, 0.7)'; const glassBorder = '1px solid rgba(255, 113, 206, 0.2)'; const glassEffect = { backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)' }; const pulseKeyframes = ` @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.2; } 50% { transform: scale(1.8); opacity: 0; } } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes celebrationPop { 0% { transform: scale(0.5); opacity: 0; } 50% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } } @keyframes neonFlicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.8; } } `; return (

{/* Header */}

USYD Roots Map

{(pins ?? []).length} pins from {Object.keys(countryCounts || {}).length} countries

{/* Tab Bar */}

{[{ key: 'map', label: '🗺️ Map' }, { key: 'list', label: '📋 List' }, { key: 'stats', label: '📊 Stats' }].map(tab => ( ))}

{/* Scrollable content */}

{view === 'map' && (

{/* Search */}

setSearchQuery(e.target.value)} placeholder="🔍 Search cities, countries, people..." style={{ width: '100%', height: 44, fontSize: 16, padding: '0 16px', borderRadius: 12, border: glassBorder, background: 'rgba(20, 5, 40, 0.6)', color: '#F5F0E8', outline: 'none', boxSizing: 'border-box', ...glassEffect, }} />

{/* Continent Filter */}

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

{/* Country Filter */} {(allCountries || []).length > 2 && (

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

)} {/* Map Area */}

{renderWorldMap()} {renderPins()} {/* Connection lines between pins */} {(filteredPins || []).length > 1 && ( )} {(filteredPins || []).length === 0 && (

🌐

No pins match your filter

)}

{/* Selected Pin Detail */} {selectedPin && (

selectedPin._user?.handle && openProfile(selectedPin._user.handle)} > {selectedPin._user?.profileImageUrl ? (

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

selectedPin._user?.handle && openProfile(selectedPin._user.handle)} > {selectedPin.isDemo ? `Demo • ${selectedPin._user?.displayName}` : (selectedPin._user?.displayName || 'Anonymous')}

📍 {selectedPin.city}, {selectedPin.country}

Misses from home

"{selectedPin.missItem}"

{!selectedPin.isDemo && selectedPin._user?.handle && (

)}

)} {/* Members strip */} {(memberList || []).length > 1 && (

Community Members

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

m.handle && openProfile(m.handle)} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', cursor: m.handle ? 'pointer' : 'default', minWidth: 56, }} >

{m.avatarUrl ? (

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

{m.displayName || 'User'}

))}

)}

)} {view === 'list' && (

setSearchQuery(e.target.value)} placeholder="🔍 Search people, places, memories..." style={{ width: '100%', height: 44, fontSize: 16, padding: '0 16px', borderRadius: 12, border: glassBorder, background: 'rgba(20, 5, 40, 0.6)', color: '#F5F0E8', outline: 'none', boxSizing: 'border-box', ...glassEffect, }} />

{(filteredPins ?? []).length === 0 ? (

🌐

No pins found

) : ( (filteredPins ?? []).map((pin, idx) => { if (!pin) return null; const color = pinColor(pin.continent); return (

{ setSelectedPin(pin); setView('map'); }} style={{ background: cardBg, borderRadius: 14, padding: 14, marginBottom: 8, border: `1px solid ${color}22`, cursor: 'pointer', ...glassEffect, transition: 'transform 0.15s', }} >

{pin._user?.profileImageUrl ? (

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

{pin.isDemo ? `Demo • ${pin._user?.displayName}` : (pin._user?.displayName || 'Anonymous')}

📍 {pin.city}, {pin.country}

"{pin.missItem}"

›

); }) )}

)} {view === 'stats' && (

{(pins ?? []).filter(p => !p?.isDemo).length || (pins ?? []).length}

Total Pins Dropped

{Object.keys(countryCounts || {}).length}

Countries

{(memberList || []).length}

Members

{[...new Set((pins ?? []).map(p => p?.continent).filter(Boolean))].length}

Continents

Top Countries

{Object.entries(countryCounts || {}) .sort((a, b) => b[1] - a[1]) .slice(0, 10) .map(([country, count], i) => { const maxCount = Math.max(...Object.values(countryCounts || {})); const pct = maxCount > 0 ? (count / maxCount) * 100 : 0; return (

{ handleFilterCountry(country); setView('map'); }} style={{ background: cardBg, borderRadius: 12, padding: '12px 14px', marginBottom: 6, border: glassBorder, cursor: 'pointer', ...glassEffect, }} >

{i === 0 ? '👑 ' : ''}{country} {count} {count === 1 ? 'pin' : 'pins'}

); })} {/* Recent Activity */}

Recent Pins

{(pins ?? []).slice(-5).reverse().map((pin, i) => { if (!pin) return null; const timeAgo = pin._timestamp ? (() => { const diff = Date.now() - pin._timestamp; if (diff < 60000) return 'just now'; if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`; if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`; return `${Math.floor(diff / 86400000)}d ago`; })() : ''; return (

📍

{pin.isDemo ? 'Demo • ' : ''}{pin._user?.displayName || 'Someone'} pinned {pin.city}

{timeAgo}

); })}

)}

{/* FAB - Pin Your Roots */} {/* Add Pin Bottom Sheet */} {showAddModal && (

setShowAddModal(false)} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(4px)', WebkitBackdropFilter: 'blur(4px)', }} />

📍 Pin Your Roots

Drop a pin on a place close to your heart

City / Town { const val = e.target.value; setNewPin(prev => { const coords = CITY_COORDS[val.toLowerCase().trim()]; return { ...prev, city: val, country: coords?.country || prev.country, continent: coords?.continent || prev.continent, }; }); }} placeholder="e.g. Mumbai, Tokyo, Lagos..." style={{ width: '100%', height: 48, fontSize: 16, padding: '0 16px', borderRadius: 12, border: '1px solid rgba(255,113,206,0.3)', background: 'rgba(20, 5, 40, 0.6)', color: '#F5F0E8', outline: 'none', boxSizing: 'border-box', }} /> {newPin.city && CITY_COORDS[newPin.city.toLowerCase().trim()] && (

✅ Found: {CITY_COORDS[newPin.city.toLowerCase().trim()]?.country}

)}

Country setNewPin(prev => ({ ...prev, country: e.target.value }))} placeholder="Country" style={{ width: '100%', height: 48, fontSize: 16, padding: '0 16px', borderRadius: 12, border: '1px solid rgba(1,205,254,0.2)', background: 'rgba(20, 5, 40, 0.6)', color: '#F5F0E8', outline: 'none', boxSizing: 'border-box', }} />

Continent

{(CONTINENTS || []).filter(c => c !== 'all').map(c => ( ))}

One thing you miss from there ✨

setNewPin(prev => ({ ...prev, missItem: e.target.value }))}
                placeholder={PLACEHOLDER_MISSES[placeholderIdx]}
                rows={3}
                style={{
                  width: '100%',
                  fontSize: 16,
                  padding: 14,
                  borderRadius: 12,
                  border: '1px solid rgba(255,113,206,0.3)',
                  background: 'rgba(20, 5, 40, 0.6)',
                  color: '#F5F0E8',
                  outline: 'none',
                  boxSizing: 'border-box',
                  resize: 'none',
                  lineHeight: 1.5,
                  fontFamily: 'inherit',
                }}
              />
            </div>

<button
              onClick={handleAddPin}
              disabled={!newPin.city.trim() || !newPin.missItem.trim()}
              style={{
                width: '100%',
                minHeight: 54,
                borderRadius: 16,
                border: 'none',
                background: (!newPin.city.trim() || !newPin.missItem.trim())
                  ? 'rgba(255,255,255,0.1)'
                  : 'linear-gradient(135deg, #FF71CE, #B967FF, #01CDFE)',
                color: (!newPin.city.trim() || !newPin.missItem.trim()) ? 'rgba(255,255,255,0.3)' : '#fff',
                fontSize: 17,
                fontWeight: 700,
                cursor: (!newPin.city.trim() || !newPin.missItem.trim()) ? 'not-allowed' : 'pointer',
                boxShadow: (!newPin.city.trim() || !newPin.missItem.trim()) ? 'none' : '0 4px 20px rgba(255,113,206,0.3)',
                letterSpacing: '0.5px',
              }}
            >
              📍 Drop My Pin
            </button>
          </div>
        </div>
      )}

{/* Celebration Toast */}
      {showCelebration && (
        <div style={{
          position: 'fixed',
          top: 'max(env(safe-area-inset-top, 20px), 20px)',
          left: '50%',
          transform: 'translateX(-50%)',
          zIndex: 200,
          animation: 'celebrationPop 0.4s ease-out',
        }}>
          <div style={{
            background: 'linear-gradient(135deg, rgba(255,113,206,0.9), rgba(185,103,255,0.9))',
            borderRadius: 16,
            padding: '14px 24px',
            color: '#fff',
            fontWeight: 700,
            fontSize: 15,
            boxShadow: '0 8px 32px rgba(255,113,206,0.4)',
            textAlign: 'center',
            maxWidth: 320,
            ...glassEffect,
          }}>
            <div style={{ fontSize: 28, marginBottom: 4 }}>🎉</div>
            {celebrationMsg}
          </div>
        </div>
      )}
    </div>
  );
}</article></body></html>