handleSelectLocation(loc)} style={{ position: 'absolute', left: loc.x + '%', top: loc.y + '%', transform: 'translate(-50%, -50%)', cursor: 'pointer', zIndex: isConfetti ? 100 : 10, transition: 'transform 0.3s ease', }} >

{isConfetti && (

⭐ +10 Points!

)} {isConfetti && (

🎉✨🎊

)}

{isClaimed ? : {loc.icon}}

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

); }, [claims, user?.id, showConfetti, handleSelectLocation]); const renderDetailCard = useCallback(() => { if (!showDetail) return null; const loc = (CAMPUS_LOCATIONS || []).find(l => l.id === showDetail); const claim = claims[showDetail]; if (!loc || !claim) return null; return (

setShowDetail(null)}>

e.stopPropagation()} style={{ width: '100%', maxWidth: 480, background: '#fffbf0', borderTopLeftRadius: 24, borderTopRightRadius: 24, paddingTop: 12, paddingBottom: 'calc(env(safe-area-inset-bottom, 20px) + 20px)', paddingLeft: 20, paddingRight: 20, boxShadow: '0 -8px 30px rgba(38,70,83,0.25)', }}>

{loc.icon}

{loc.name}

{claim.isDemo && DEMO}

✨ AI Summary

{claim.summary || claim.content}

{claim.photoUrl && (

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

📸 Polaroid by {claim.claimedByName || 'Explorer'}

)} {claim.link && (

🔗 {claim.link}

)}

{claim.claimedByAvatar || claim._user?.profileImageUrl ? (

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

👤

)}

{ const h = claim.claimedByHandle || claim._user?.handle; if (h) openProfile(h); }} style={{ fontSize: 13, fontWeight: 700, color: '#264653', cursor: 'pointer' }} > {claim.claimedByName || claim._user?.displayName || 'Explorer'}

{claim.timestamp ? new Date(claim.timestamp).toLocaleDateString() : ''}

{!claim.isDemo && claim.claimedBy !== user?.id && claim.claimedByHandle && ( )}

); }, [showDetail, CAMPUS_LOCATIONS, claims, user?.id, openProfile, startChat]); const renderMap = () => (

🗺️ Campus Cartographers

Layer {(appData?.unlockedLayer ?? 0) + 1}: {LAYER_NAMES[appData?.unlockedLayer ?? 0]}

{(visibleLocations || []).map(loc => renderMapPin(loc))}

{(LAYER_NAMES || []).map((name, i) => (

{i <= (appData?.unlockedLayer ?? 0) ? '🔓' : '🔒'} {name}

))}

); const renderLeaderboard = () => (

🏆

Leaderboard

{totalClaims} spots claimed by explorers

{(leaderboard || []).length === 0 ? (

🗺️

No explorers yet!

Claim a spot on the map to appear here

) : ( (leaderboard || []).map((entry, i) => (

entry.handle && openProfile(entry.handle)} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: 14, marginBottom: 8, borderRadius: 16, background: i === 0 ? 'linear-gradient(135deg, rgba(233,196,106,0.2), rgba(42,157,143,0.1))' : '#fff', border: i === 0 ? '2px solid #e9c46a' : '1px solid #e8dcc4', cursor: entry.handle ? 'pointer' : 'default', }}>

{i === 0 ? '👑' : i + 1}

{entry.avatar ? (

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

👤

)}

{entry.name}{entry.id === user?.id ? ' (You)' : ''}

{entry.spots} spot{entry.spots !== 1 ? 's' : ''} claimed

{entry.points} ⭐

)) )}

👥 Explorers ({(memberList || []).length})

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

m.handle && openProfile(m.handle)} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: 10, cursor: m.handle ? 'pointer' : 'default', }}> {m.avatarUrl ? (

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

👤

)}

{m.displayName || 'Explorer'}

{memberActivity?.[m.id]?.lastActiveAt && (

● online

)}

))}

); return (

🗺️ Campus Cartographers

{myPoints} points • {totalClaims} spots mapped

{[{ key: 'map', label: '🗺️ Map' }, { key: 'leaderboard', label: '🏆 Board' }].map(tab => ( ))}

{activeTab === 'map' ? renderMap() : renderLeaderboard()} {activeTab === 'map' && (

Next Layer Unlock

{(() => { const current = appData?.unlockedLayer ?? 0; if (current >= (LAYER_THRESHOLDS || []).length - 1) return 'All layers unlocked! 🎉'; const next = LAYER_THRESHOLDS[current + 1]; const remaining = Math.max(0, next - totalClaims); return remaining + ' more claim' + (remaining !== 1 ? 's' : '') + ' to unlock ' + LAYER_NAMES[current + 1]; })()}

{ const current = appData?.unlockedLayer ?? 0; if (current >= (LAYER_THRESHOLDS || []).length - 1) return 100; const prev = LAYER_THRESHOLDS[current]; const next = LAYER_THRESHOLDS[current + 1]; return ((totalClaims - prev) / (next - prev)) * 100; })()) + '%', transition: 'width 0.5s ease', }} />

🔮

)} {showClaimModal && selectedLoc && (

{ if (!isSubmitting) { setShowClaimModal(false); setSelectedLoc(null); } }}>

{selectedLoc.icon}

Claim {selectedLoc.name}!

Share your insider knowledge and earn ⭐ 10 points!

setClaimText(e.target.value)}
              placeholder="Share your tip! e.g., 'Best spot for group study after 6pm...'"
              style={{
                width: '100%', minHeight: 80, fontSize: 16, padding: 14,
                borderRadius: 14, border: '2px solid #e8dcc4',
                background: '#f8f3e6', resize: 'vertical',
                fontFamily: "'Georgia', serif", color: '#264653',
                boxSizing: 'border-box',
              }}
            />

<input
              value={claimLink}
              onChange={e => setClaimLink(e.target.value)}
              placeholder="🔗 Add a helpful link (optional)"
              type="url"
              style={{
                width: '100%', height: 48, fontSize: 16, padding: '0 14px',
                borderRadius: 14, border: '2px solid #e8dcc4',
                background: '#f8f3e6', marginTop: 10,
                fontFamily: "'Georgia', serif", color: '#264653',
                boxSizing: 'border-box',
              }}
            />

<div style={{ display: 'flex', gap: 10, marginTop: 12 }}>
              <button
                onClick={handlePickPhoto}
                style={{
                  flex: 1, minHeight: 48, borderRadius: 14,
                  background: claimPhoto ? '#2a9d8f' : '#f8f3e6',
                  color: claimPhoto ? '#fff' : '#264653',
                  border: '2px solid #e8dcc4', fontSize: 14, fontWeight: 700,
                  cursor: 'pointer',
                }}
              >{claimPhoto ? '✅ Photo Added' : '📸 Add Photo'}</button>
            </div>

{claimPhoto && (
              <div style={{ marginTop: 10, borderRadius: 12, overflow: 'hidden', maxHeight: 120 }}>
                <img src={claimPhoto} alt="Preview" style={{ width: '100%', objectFit: 'cover', maxHeight: 120 }} onError={e => { e.currentTarget.style.display = 'none'; }} />
              </div>
            )}

<button
              onClick={handleClaimSpot}
              disabled={isSubmitting || !claimText.trim()}
              onPointerDown={() => setPressedBtn('claim')}
              onPointerUp={() => setPressedBtn(null)}
              onPointerLeave={() => setPressedBtn(null)}
              style={{
                width: '100%', minHeight: 56, borderRadius: 16,
                background: (!claimText.trim() || isSubmitting)
                  ? '#ccc'
                  : 'linear-gradient(135deg, #e9c46a, #f4a261)',
                color: '#264653', border: 'none',
                fontSize: 17, fontWeight: 900, cursor: 'pointer',
                marginTop: 16,
                transform: pressedBtn === 'claim' ? 'scale(0.97)' : 'scale(1)',
                transition: 'transform 0.1s',
                boxShadow: '0 4px 12px rgba(233,196,106,0.4)',
              }}
            >
              {isSubmitting ? (aiProcessing ? '✨ AI Magic in Progress...' : '⏳ Mapping...') : '🚩 Map It!'}
            </button>
          </div>
        </div>
      )}

{renderDetailCard()}

{showUnlock && (
        <div style={{
          position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
          background: 'rgba(38,70,83,0.8)', zIndex: 2000,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }} onClick={() => setShowUnlock(false)}>
          <div style={{
            position: 'absolute', top: '50%', left: '50%',
            transform: 'translate(-50%, -50%)',
            animation: 'unlockPulse 0.6s ease forwards',
            textAlign: 'center',
          }}>
            <div style={{ fontSize: 72, marginBottom: 12 }}>🔓✨🗺️</div>
            <div style={{
              fontSize: 28, fontWeight: 900, color: '#e9c46a',
              fontFamily: "'Georgia', serif",
              textShadow: '0 2px 12px rgba(233,196,106,0.5)',
            }}>Map Unlocked!</div>
            <div style={{
              fontSize: 18, color: '#fff', marginTop: 8,
              fontFamily: "'Georgia', serif",
            }}>{unlockLayerName}</div>
            <div style={{ fontSize: 14, color: 'rgba(255,255,255,0.6)', marginTop: 12 }}>Tap to explore new secrets</div>
          </div>
        </div>
      )}
    </div>
  );
}</article></body></html>