{!p?._user?.profileImageUrl && initials}

; }, []); const internCard = useCallback((p, compact) => { const hood = (NEIGHBORHOODS ?? []).find((n) => n?.id === p?.neighborhoodId); const canOpen = !p?.isDemo && p?._user?.handle; return

{p?.name || 'Intern'} {p?.isDemo && Demo} {p?.userId === userId && You}

{p?.company || 'Company TBD'} · {p?.school || 'School TBD'}

📍 {hood?.short || 'SF'} · {formatStay(p)}

{(p?.interests ?? []).slice(0, compact ? 3 : 6).map((i) => #{i})}

{!p?.isDemo && p?._user?.handle && p?.userId !== userId &&

{typeof startChat === 'function' && }

}

; }, [NEIGHBORHOODS, ds, renderAvatar, openProfile, startChat, userId, formatStay]); return

🗺️

Where in SF?

{hasRealProfiles ? `${profiles.length} intern ${profiles.length === 1 ? 'pin' : 'pins'} live` : 'Starter demo interns show how it works'}

Crew

{(memberList ?? []).slice(0, 7).map((m, i) => )} {(memberList || []).length === 1 ? 'You, solo-ready' : `${memberList.length} members`}

Bay

Pacific Ocean

🔒 Neighborhood-only, never exact address

{(NEIGHBORHOODS ?? []).map((n) => { const count = (filteredProfiles ?? []).filter((p) => p?.neighborhoodId === n?.id).length; const allCount = (visibleProfiles ?? []).filter((p) => p?.neighborhoodId === n?.id).length; const selected = selectedNeighborhoodId === n?.id; return ; })} {(visibleProfiles ?? []).map((p) => { const hood = (NEIGHBORHOODS ?? []).find((n) => n?.id === p?.neighborhoodId) || selectedNeighborhood; const same = (visibleProfiles ?? []).filter((q) => q?.neighborhoodId === p?.neighborhoodId); const idx = Math.max(0, (same || []).findIndex((q) => q?.id === p?.id)); const offset = (idx - (((same || []).length - 1) / 2)) * 17; const match = matchesFilter(p); const left = hood.x + hood.w / 2; const top = hood.y + hood.h / 2; return ; })} {youAreHere && (() => { const n = (NEIGHBORHOODS ?? []).find((h) => h?.id === youAreHere); if (!n) return null; return

📍 You are here!

; })()}

{showProfileSheet &&

setShowProfileSheet(false)}>

e.stopPropagation()} style={{ width: '100%', maxWidth: 480, maxHeight: '88dvh', overflowY: 'auto', WebkitOverflowScrolling: 'touch', background: '#FFFDF8', borderRadius: '30px 30px 0 0', padding: '12px 18px calc(env(safe-area-inset-bottom, 20px) + 18px)', boxShadow: '0 -18px 50px rgba(23,50,77,0.25)' }}>

{selectedNeighborhood?.emoji}

Build your intern pin

Only your general neighborhood is shared. No exact addresses.

Live pin preview

{internCard({ id: 'preview', name: form?.name || 'Your Name', company: form?.company || 'Company', school: form?.school || 'School', arrive: form?.arrive, depart: form?.depart, interests: normalizeInterests(form?.interests || 'coffee, hikes'), neighborhoodId: form?.neighborhoodId, userId, _user: { profileImageUrl: user?.avatarUrl, displayName: form?.name || 'You' } }, true)}

Neighborhood {[['name', 'Name', 'Avery Chen'], ['company', 'Company', 'Airbnb'], ['school', 'School', 'UT Austin']].map((row) =>

{row[1]} setForm({ ...form, [row[0]]: e.target.value })} placeholder={row[2]} style={{ width: '100%', minHeight: 50, borderRadius: 16, border: `1px solid ${ds.border}`, padding: '0 14px', fontSize: 16, margin: '7px 0 12px', background: '#fff', color: ds.ink, boxSizing: 'border-box' }} />

)}

Arrive setForm({ ...form, arrive: e.target.value })} style={{ width: '100%', minHeight: 50, borderRadius: 16, border: `1px solid ${ds.border}`, padding: '0 10px', fontSize: 16, margin: '7px 0 12px', background: '#fff', boxSizing: 'border-box' }} />

Depart setForm({ ...form, depart: e.target.value })} style={{ width: '100%', minHeight: 50, borderRadius: 16, border: `1px solid ${ds.border}`, padding: '0 10px', fontSize: 16, margin: '7px 0 12px', background: '#fff', boxSizing: 'border-box' }} />

Interests setForm({ ...form, interests: e.target.value })} placeholder='coffee, hikes, startups, boba' style={{ width: '100%', minHeight: 50, borderRadius: 16, border: `1px solid ${ds.border}`, padding: '0 14px', fontSize: 16, margin: '7px 0 14px', background: '#fff', color: ds.ink, boxSizing: 'border-box' }} />

} {showNeighborhoodSheet && selectedNeighborhood &&

setShowNeighborhoodSheet(false)}>

e.stopPropagation()} style={{ width: '100%', maxWidth: 480, maxHeight: '82dvh', overflowY: 'auto', WebkitOverflowScrolling: 'touch', background: '#FFFDF8', borderRadius: '30px 30px 0 0', padding: '12px 18px calc(env(safe-area-inset-bottom, 20px) + 18px)', boxShadow: '0 -18px 50px rgba(23,50,77,0.25)' }}>

{selectedNeighborhood.emoji}

{selectedNeighborhood.name}

{selectedNeighborhood.desc}

Privacy promise: this page groups interns by neighborhood only. Nobody adds or sees exact addresses.

Nearby interns {(neighborhoodProfiles || []).length ? `(${neighborhoodProfiles.length})` : ''}

{(neighborhoodProfiles || []).length ? (neighborhoodProfiles || []).map((p) => internCard(p, false)) :

No matching interns here yet. Your pin can proudly hold the neighborhood down.

}

Nearby neighborhoods

{(selectedNeighborhood?.nearby ?? []).map((id) => { const n = (NEIGHBORHOODS ?? []).find((x) => x.id === id); if (!n) return null; const c = (filteredProfiles ?? []).filter((p) => p.neighborhoodId === id).length; return ; })}

} {showFilters &&

setShowFilters(false)}>

e.stopPropagation()} style={{ width: '100%', maxWidth: 480, background: '#FFFDF8', borderRadius: '30px 30px 0 0', padding: '12px 18px calc(env(safe-area-inset-bottom, 20px) + 18px)', boxShadow: '0 -18px 50px rgba(23,50,77,0.25)' }}>

Magical reveal filters

Matching pins pulse. Non-matches softly fade.

{[['company', 'Company', 'Figma, Stripe, Google...'], ['school', 'School', 'Berkeley, MIT, UCLA...'], ['interest', 'Interest', 'coffee, hikes, ai...']].map((row) =>

{row[1]} setFilters({ ...filters, [row[0]]: e.target.value })} placeholder={row[2]} style={{ width: '100%', minHeight: 50, borderRadius: 16, border: `1px solid ${ds.border}`, padding: '0 14px', fontSize: 16, margin: '7px 0 12px', background: '#fff', boxSizing: 'border-box' }} />

)}In SF on date setFilters({ ...filters, date: e.target.value })} style={{ width: '100%', minHeight: 50, borderRadius: 16, border: `1px solid ${ds.border}`, padding: '0 14px', fontSize: 16, margin: '7px 0 12px', background: '#fff', boxSizing: 'border-box' }} />

{(optionSummary.interests ?? []).slice(0, 7).map((i) => )}

} {showList &&

setShowList(false)}>

e.stopPropagation()} style={{ width: '100%', maxWidth: 480, maxHeight: '84dvh', overflowY: 'auto', WebkitOverflowScrolling: 'touch', background: '#FFFDF8', borderRadius: '30px 30px 0 0', padding: '12px 18px calc(env(safe-area-inset-bottom, 20px) + 18px)', boxShadow: '0 -18px 50px rgba(23,50,77,0.25)' }}>

Interns by neighborhood

{!hasRealProfiles &&

Demo interns are starter examples. Add your first real pin and they disappear.

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

Recent activity

{(activity ?? []).slice(-3).reverse().map((a, i) =>

{!a?._user?.profileImageUrl && (a?._user?.displayName?.[0] || 'I')}

{a?._user?.displayName || 'Someone'} {a?.type === 'moved' ? 'updated their pin in' : 'joined'} {a?.neighborhoodName || 'SF'}

)}

}{(groupedProfiles || []).length === 0 ?

No interns match those filters yet. Try clearing one filter.

: (groupedProfiles ?? []).map((g) =>

{(g.people ?? []).map((p) => internCard(p, true))}

)}

} {toast &&

{toast}

}

; }