onSelect(p.id)} style={{ position: 'absolute', left: x, top: y, width: cardW, height: cardH, cursor: 'pointer', borderRadius: 20, overflow: 'hidden', background: '#e8e4de', boxShadow: '3px 3px 0px rgba(0,0,0,1)', border: '2px solid #000', contain: 'layout paint style', transition: 'transform 0.1s ease, box-shadow 0.1s ease' }} > {hasPhoto ? ( <>

{hasMultiple &&

} ) : (

{p.name ? p.name.charAt(0).toUpperCase() : '?'}

)}

{p.isDemo && (

DEMO

)}

{p.name}

INTERN @ {(p.company || '').toUpperCase()}

{p.hobbies && (p.hobbies || []).length > 0 && (

{(p.hobbies || []).slice(0, 3).map((h, i) => ( {h} ))}

)}

{locked && (

🔒

ADD YOURS

)}

); }); // --- DEMO DATA --- const DEMO_INTERNS = [ { id: 'demo-1', name: 'David Kim', bio: 'Quant intern exploring deep dish spots and lakefront trails.', company: 'Google', hobbies: ['Deep Dish', 'Lakefront Runs', 'Python'], socials: { ig: '@davidk.chi', tt: '@davidruns' }, photoUrl: '', photoUrls: [], isDemo: true, createdAt: Date.now() - 3600000 }, { id: 'demo-2', name: 'Aisha Okafor', bio: 'PM intern who runs along Lake Shore Drive before standup.', company: 'Citadel', hobbies: ['Running', 'Jazz Bars', 'Architecture'], socials: { ig: '@aisha.pm' }, photoUrl: '', photoUrls: [], isDemo: true, createdAt: Date.now() - 7200000 }, { id: 'demo-3', name: 'Ryan Novak', bio: 'Backend engineer obsessed with Chicago blues and architecture tours.', company: 'Grubhub', hobbies: ['Blues Guitar', 'River Walk', 'Go'], socials: { ig: '@ryannovak', tt: '@ryanblues', yt: '@ryannovak.yt' }, photoUrl: '', photoUrls: [], isDemo: true, createdAt: Date.now() - 10800000 }, { id: 'demo-4', name: 'Sofia Rivera', bio: 'Brand strategy intern documenting every mural in Pilsen.', company: 'McDonald\'s HQ', hobbies: ['Street Art', 'Pilsen', 'Marketing'], socials: { li: 'sofiarivera', tw: '@sofia_brand' }, photoUrl: '', photoUrls: [], isDemo: true, createdAt: Date.now() - 14400000 }, { id: 'demo-5', name: 'Ethan Walsh', bio: 'Data analyst who lives for improv comedy at Second City.', company: 'Morningstar', hobbies: ['Improv', 'Data Viz', 'Board Games'], socials: { ig: '@ethanwalsh.data', tw: '@ethanimprov' }, photoUrl: '', photoUrls: [], isDemo: true, createdAt: Date.now() - 18000000 }, { id: 'demo-6', name: 'Lily Zhang', bio: 'ML intern exploring Chinatown dumplings and the Art Institute.', company: 'Tempus AI', hobbies: ['Dumplings', 'Art Museums', 'NLP'], socials: { tt: '@lilyzhang.ml', li: 'lilyzhang' }, photoUrl: '', photoUrls: [], isDemo: true, createdAt: Date.now() - 21600000 }, ]; const TOTAL_BUILDER_STEPS = 3; function App({ user, data, setData, isMultiplayer, sharedData, setSharedData, patchSharedData, pushToSharedArray, myPersonalData, setMyPersonalData, members, share, openProfile, openAuth, pickAndUploadPhoto, uploadImage, getImageUrl }) { const appData = isMultiplayer ? sharedData : data; const hasNativePhotoPicker = typeof pickAndUploadPhoto === 'function'; const hasWebImageUpload = typeof uploadImage === 'function'; const canUploadImage = hasNativePhotoPicker || hasWebImageUpload; const hasWindow = typeof window !== 'undefined'; const internsList = useMemo(() => { const stored = appData?.interns; if (Array.isArray(stored) && (stored || []).length > 0) return stored; return DEMO_INTERNS; }, [appData?.interns]); const sortedInterns = useMemo(() => { return [...internsList].sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0)); }, [internsList]); const hasSubmitted = isMultiplayer ? Boolean(myPersonalData && myPersonalData.userHasSubmitted) : Boolean(data && data.userHasSubmitted); // View state const [view, setView] = useState('discover'); const [builderStep, setBuilderStep] = useState(1); const [toast, setToast] = useState(null); const [uploading, setUploading] = useState(false); const [activeInternId, setActiveInternId] = useState(null); const [searchQuery, setSearchQuery] = useState(''); const [activeCompanyFilter, setActiveCompanyFilter] = useState('All'); // Viewport const [viewportWidth, setViewportWidth] = useState(hasWindow ? window.innerWidth : 480); useEffect(() => { if (!hasWindow) return; const onResize = () => setViewportWidth(window.innerWidth); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, [hasWindow]); // Company filter tags const companyTags = useMemo(() => { const companies = [...new Set((internsList || []).map(i => i.company).filter(Boolean))]; return (companies || []).sort(); }, [internsList]); // Filtered interns const filteredInterns = useMemo(() => { const q = searchQuery.trim().toLowerCase(); return (sortedInterns || []).filter(i => { const matchesSearch = !q || i.name?.toLowerCase().includes(q) || i.company?.toLowerCase().includes(q) || i.bio?.toLowerCase().includes(q); const matchesCompany = activeCompanyFilter === 'All' || i.company === activeCompanyFilter; return matchesSearch && matchesCompany; }); }, [sortedInterns, searchQuery, activeCompanyFilter]); // Draft profile for builder const [draft, setDraft] = useState({ name: '', bio: '', company: '', hobbies: [], currentHobby: '', photoUrl: '', photoUrls: [], socials: { ig: '', tt: '', yt: '', tw: '', li: '' } }); // File input ref for web upload const fileInputRef = useRef(null); const photoSlotRef = useRef(0); // --- PAN MAP STATE --- const CARD_W = 160; const CARD_H = 220; const GAP = 8; const AUTO_PAN_SPEED = 0.018; const mapPanRef = useRef({ x: 20, y: 20 }); const mapViewportRef = useRef(null); const mapQuadRefs = useRef([null, null, null, null]); const mapFrameRef = useRef(null); const mapAutoPanFrameRef = useRef(null); const mapAutoPanLastTsRef = useRef(null); const mapAutoPanDirectionRef = useRef({ x: -1, y: -0.65 }); const hasInteractedWithMapRef = useRef(false); const isDraggingMap = useRef(false); const hasDraggedMap = useRef(false); const dragStartMap = useRef({ x: 0, y: 0 }); const panStartMap = useRef({ x: 0, y: 0 }); const canvasTileRef = useRef({ w: 1, h: 1, pad: 1 }); const mapShuffleSeed = useRef(Math.floor(Math.random() * 4294967296)); // Grid math for pan view const displayPanItems = useMemo(() => { const base = filteredInterns || []; if ((base || []).length === 0) return base; const ratio = CARD_H / CARD_W; const vpW = viewportWidth || 480; const vpH = hasWindow ? window.innerHeight : 800; const stepW = CARD_W + GAP; const stepH = CARD_H + GAP; const MIN_ZOOM = 0.5; const coverStepW = stepW * MIN_ZOOM; const coverStepH = stepH * MIN_ZOOM; const minCols = Math.max(3, Math.ceil(vpW / coverStepW)); if (minCols % 2 !== 0) { /* force even */ } const forcedCols = minCols % 2 !== 0 ? minCols + 1 : minCols; const minRows = Math.max(2, Math.ceil(vpH / coverStepH)); const maxTileCards = forcedCols * (minRows + 1); let count = Math.max(Math.min((base || []).length, maxTileCards), forcedCols * minRows); const gCols = forcedCols; const gRows = Math.ceil(count / gCols); count = gCols * gRows; // Shuffle let s = (mapShuffleSeed.current ^ ((base || []).length * 2654435761)) >>> 0; const rand = () => { s = (s + 0x6D2B79F5) | 0; let t = Math.imul(s ^ (s >>> 15), 1 | s); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; const shuffle = (arr) => { for (let j = (arr || []).length - 1; j > 0; j--) { const k = Math.floor(rand() * (j + 1)); [arr[j], arr[k]] = [arr[k], arr[j]]; } return arr; }; const sourcePool = shuffle([...base]); const result = [...sourcePool].slice(0, Math.min((sourcePool || []).length, count)); // Fill remaining with duplicates const numRounds = Math.ceil(count / (sourcePool || []).length); for (let round = 1; round < numRounds; round++) { const roundCards = shuffle([...sourcePool]); for (const item of roundCards) { if ((result || []).length >= count) break; result.push({ ...item, _virtualId: `dup-${result.length}` }); } } return result; }, [filteredInterns, viewportWidth, hasWindow]); const gridMath = useMemo(() => { const N = Math.max(1, (displayPanItems || []).length); const vpW = viewportWidth || 480; const vpH = hasWindow ? window.innerHeight : 800; const stepW = CARD_W + GAP; const stepH = CARD_H + GAP; const MIN_ZOOM = 0.5; const coverStepW = stepW * MIN_ZOOM; const coverStepH = stepH * MIN_ZOOM; let cols = Math.max(3, Math.ceil(vpW / coverStepW)); if (cols % 2 !== 0) cols += 1; const minRows = Math.max(2, Math.ceil(vpH / coverStepH)); const rows = Math.max(minRows, Math.ceil(N / cols)); const TILE_W = cols * stepW; const TILE_H = rows * stepH; return { N, cols, rows, TILE_W, TILE_H }; }, [displayPanItems?.length, viewportWidth, hasWindow]); const { cols, rows, TILE_W, TILE_H } = gridMath; canvasTileRef.current = { w: TILE_W, h: TILE_H, pad: CARD_H + GAP }; // --- Pan map transform --- const updateMapTransform = () => { const quads = mapQuadRefs.current; if (!quads[0]) return; const gridW = TILE_W; const gridH = TILE_H; const padY = CARD_H + GAP; let offX = ((mapPanRef.current.x % gridW) + gridW) % gridW; let offY = ((mapPanRef.current.y % gridH) + gridH) % gridH; if (offX > gridW * 0.5) offX -= gridW; if (offY > gridH * 0.5) offY -= gridH; const altX = offX >= 0 ? offX - gridW : offX + gridW; const altY = offY >= 0 ? offY - gridH : offY + gridH; const x0 = Math.round(offX), y0 = Math.round(offY - padY); const x1 = Math.round(altX), y1 = Math.round(altY - padY); quads[0].style.transform = `translate3d(${x0}px,${y0}px,0)`; quads[1].style.transform = `translate3d(${x1}px,${y0}px,0)`; quads[2].style.transform = `translate3d(${x0}px,${y1}px,0)`; quads[3].style.transform = `translate3d(${x1}px,${y1}px,0)`; }; const scheduleMapTransform = () => { if (mapFrameRef.current) return; mapFrameRef.current = requestAnimationFrame(() => { mapFrameRef.current = null; updateMapTransform(); }); }; const stopMapAutoPan = () => { if (mapAutoPanFrameRef.current) { cancelAnimationFrame(mapAutoPanFrameRef.current); mapAutoPanFrameRef.current = null; } mapAutoPanLastTsRef.current = null; }; const interruptMapAutoPan = () => { hasInteractedWithMapRef.current = true; stopMapAutoPan(); }; const handleMapDown = (e) => { if (typeof e.button === 'number' && e.button !== 0) return; interruptMapAutoPan(); isDraggingMap.current = true; hasDraggedMap.current = false; const clientX = e.touches ? e.touches[0].clientX : e.clientX; const clientY = e.touches ? e.touches[0].clientY : e.clientY; dragStartMap.current = { x: clientX, y: clientY }; panStartMap.current = { ...mapPanRef.current }; if (mapViewportRef.current) mapViewportRef.current.style.cursor = 'grabbing'; }; const handleMapMove = (e) => { if (!isDraggingMap.current) return; if (e.touches && (e.touches || []).length >= 2) return; if (e.cancelable) e.preventDefault(); const clientX = e.touches ? e.touches[0].clientX : e.clientX; const clientY = e.touches ? e.touches[0].clientY : e.clientY; const dx = clientX - dragStartMap.current.x; const dy = clientY - dragStartMap.current.y; if (Math.abs(dx) > 3 || Math.abs(dy) > 3) hasDraggedMap.current = true; mapPanRef.current = { x: panStartMap.current.x + dx, y: panStartMap.current.y + dy }; scheduleMapTransform(); }; const handleMapUp = () => { isDraggingMap.current = false; if (mapViewportRef.current) mapViewportRef.current.style.cursor = 'grab'; }; const handleMapClickCapture = (e) => { if (hasDraggedMap.current) { e.stopPropagation(); e.preventDefault(); } }; const handleCardSelect = (id) => { if (!hasSubmitted && (teaserIds || []).indexOf(id) === -1) { setDraft({ name: '', bio: '', company: '', hobbies: [], currentHobby: '', photoUrl: '', photoUrls: [], socials: { ig: '', tt: '', yt: '', tw: '', li: '' } }); setBuilderStep(1); setView('build'); return; } setActiveInternId(id); setView('detail'); }; // Auto-pan effect useEffect(() => { if (view !== 'discover' || hasInteractedWithMapRef.current) { stopMapAutoPan(); return; } if (!mapViewportRef.current || !mapQuadRefs.current[0]) return; const tick = (timestamp) => { mapAutoPanFrameRef.current = requestAnimationFrame(tick); if (isDraggingMap.current) { mapAutoPanLastTsRef.current = timestamp; return; } const lastTimestamp = mapAutoPanLastTsRef.current ?? timestamp; const deltaMs = Math.min(32, timestamp - lastTimestamp); mapAutoPanLastTsRef.current = timestamp; mapPanRef.current.x += mapAutoPanDirectionRef.current.x * AUTO_PAN_SPEED * deltaMs; mapPanRef.current.y += mapAutoPanDirectionRef.current.y * AUTO_PAN_SPEED * deltaMs; updateMapTransform(); }; mapAutoPanLastTsRef.current = null; updateMapTransform(); mapAutoPanFrameRef.current = requestAnimationFrame(tick); return () => stopMapAutoPan(); }, [view, TILE_W, TILE_H]); // Touch listeners for pan useEffect(() => { const el = mapViewportRef.current; if (!el) return; const opts = { passive: false }; el.addEventListener('touchstart', handleMapDown, opts); el.addEventListener('touchmove', handleMapMove, opts); el.addEventListener('touchend', handleMapUp, opts); el.addEventListener('touchcancel', handleMapUp, opts); return () => { el.removeEventListener('touchstart', handleMapDown, opts); el.removeEventListener('touchmove', handleMapMove, opts); el.removeEventListener('touchend', handleMapUp, opts); el.removeEventListener('touchcancel', handleMapUp, opts); }; }, [view]); // Update transform when tile changes useEffect(() => { if (view !== 'discover') return; scheduleMapTransform(); }, [view, TILE_W, TILE_H]); const showToast = (message) => { setToast(message); setTimeout(() => setToast(null), 3000); }; // --- Photo upload --- const handleUploadPhoto = async (file, slotIndex = 0) => { if (uploading) return; setUploading(true); const applyUrl = (url) => { setDraft(prev => { const urls = [...(prev.photoUrls || [])]; while ((urls || []).length <= slotIndex) urls.push(''); urls[slotIndex] = url; return { ...prev, photoUrls: (urls || []).filter(Boolean).length ? urls : [], photoUrl: (urls || []).filter(Boolean)[0] || '' }; }); }; try { if (hasNativePhotoPicker) { const result = await pickAndUploadPhoto({ target: 'shared', visibility: 'public' }); if (result?.cancelled) return; if (result?.publicUrl) applyUrl(result.publicUrl); } else if (hasWebImageUpload && file) { const result = await uploadImage(file, { target: 'shared', visibility: 'public' }); if (result?.publicUrl) applyUrl(result.publicUrl); } } catch (err) { console.error('Photo upload failed:', err?.message); } finally { setUploading(false); } }; const triggerPhotoUpload = (slotIndex = 0) => { photoSlotRef.current = slotIndex; if (hasNativePhotoPicker) { handleUploadPhoto(null, slotIndex); } else if (hasWebImageUpload && fileInputRef.current) { fileInputRef.current.click(); } }; const removePhoto = (slotIndex) => { setDraft(prev => { const urls = [...(prev.photoUrls || [])]; (urls || []).splice(slotIndex, 1); return { ...prev, photoUrls: urls, photoUrl: urls[0] || '' }; }); }; // --- Hobby management --- const handleAddHobby = (e) => { e?.preventDefault(); const trimmed = draft.currentHobby.trim(); if (trimmed && !(draft.hobbies || []).includes(trimmed)) { if ((draft.hobbies || []).length >= 5) { showToast('Maximum 5 hobbies'); return; } setDraft(prev => ({ ...prev, hobbies: [...prev.hobbies, trimmed], currentHobby: '' })); } }; const removeHobby = (idx) => { setDraft(prev => ({ ...prev, hobbies: (prev.hobbies || []).filter((_, i) => i !== idx) })); }; // --- Submit --- const handleSubmit = () => { if (!draft.name.trim() || !draft.company.trim()) { showToast('Name and company are required'); return; } let finalHobbies = [...draft.hobbies]; if (draft.currentHobby.trim() && !(finalHobbies || []).includes(draft.currentHobby.trim())) { finalHobbies.push(draft.currentHobby.trim()); } const draftPhotos = (draft.photoUrls || []).filter(Boolean); const newIntern = { id: `intern_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`, name: draft.name.trim(), bio: draft.bio.trim(), company: draft.company.trim(), hobbies: (finalHobbies || []).slice(0, 5), socials: { ig: (draft.socials?.ig || '').trim(), tt: (draft.socials?.tt || '').trim(), yt: (draft.socials?.yt || '').trim(), tw: (draft.socials?.tw || '').trim(), li: (draft.socials?.li || '').trim(), }, photoUrl: draftPhotos[0] || '', photoUrls: draftPhotos, createdAt: Date.now(), isDemo: false, _user: { id: user?.id || 'anon', displayName: user?.name || 'You', handle: user?.handle || 'anon', profileImageUrl: user?.avatarUrl } }; try { if (isMultiplayer && typeof pushToSharedArray === 'function') { pushToSharedArray('interns', newIntern); if (typeof setMyPersonalData === 'function') { setMyPersonalData({ ...(myPersonalData || {}), userHasSubmitted: true }); } } else { const existing = Array.isArray(appData?.interns) ? appData.interns : []; setData({ ...(data || {}), interns: [newIntern, ...existing], userHasSubmitted: true }); } setDraft({ name: '', bio: '', company: '', hobbies: [], currentHobby: '', photoUrl: '', photoUrls: [], socials: { ig: '', tt: '', yt: '', tw: '', li: '' } }); setBuilderStep(1); setView('discover'); showToast('Spotlight Added!'); } catch (err) { showToast('Something went wrong'); } }; // --- Theme --- const accent = '#0A192F'; const bgCream = '#F4F6F9'; const bgYellow = '#4A90D9'; const bgGreen = '#64FFDA'; const brutalBorder = '2px solid #000'; const brutalShadow = '4px 4px 0px #000'; const brutalInput = { width: '100%', background: '#fff', border: brutalBorder, padding: '14px 16px', fontSize: 16, fontFamily: 'Inter, sans-serif', color: '#000', outline: 'none', boxShadow: '2px 2px 0 #000', boxSizing: 'border-box' }; const contentPadX = 20; // Hidden file input for web const renderFileInput = () => ( hasWebImageUpload ? ( { const file = e.target.files?.[0]; if (file) handleUploadPhoto(file, photoSlotRef.current); e.target.value = ''; }} /> ) : null ); // --- DETAIL VIEW --- if (view === 'detail' && activeInternId) { const p = (sortedInterns || []).find(i => i.id === activeInternId); if (!p) { setView('discover'); return null; } const photos = p.photoUrls?.length ? (p.photoUrls || []).filter(Boolean) : (p.photoUrl ? [p.photoUrl] : []); const hasPhoto = (photos || []).length > 0 && photos[0]; return (

{renderFileInput()}

INTERN_CARD

{hasPhoto && (

{p.name}

)}

{!hasPhoto &&

{p.name}

}

INTERN @ {(p.company || '').toUpperCase()}

{p.bio && (

BIO

{p.bio}

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

THINGS I DO FOR FUN

{(p.hobbies || []).map((h, i) => (

{h.toUpperCase()}

))}

)} {(photos || []).length > 1 && (

MORE PHOTOS

{(photos || []).slice(1).map((url, i) => (

))}

)}

); } // --- BUILDER VIEW --- if (view === 'build') { const stepTitle = { 1: 'YOUR_PHOTO', 2: 'THE_DETAILS', 3: 'FOR_FUN' }; const stepSubtitle = { 1: 'Your hero shot and name — this is the first thing people see.', 2: 'Where you intern and a quick bio.', 3: 'What you do outside of work.' }; const draftPhotos = (draft.photoUrls || []).filter(Boolean); return (

{renderFileInput()}

BUILD_SPOTLIGHT

{builderStep}/{TOTAL_BUILDER_STEPS}

{Array.from({ length: TOTAL_BUILDER_STEPS }, (_, i) => (

))}

{stepTitle[builderStep]}

{stepTitle[builderStep].replace(/_/g, ' ')}

{stepSubtitle[builderStep]}

{builderStep === 1 && (

PHOTO TIPS

Upload photos that feature YOU — show your face! Photos of you in action work best.

{[0, 1, 2].map(idx => { const url = draftPhotos[idx]; const isFirst = idx === 0; return (

{ if (!url && canUploadImage) triggerPhotoUpload(idx); }} style={{ width: '100%', aspectRatio: '3/4', border: brutalBorder, boxShadow: isFirst ? brutalShadow : '2px 2px 0 #ccc', background: '#fff', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6, cursor: canUploadImage ? 'pointer' : 'default', overflow: 'hidden', position: 'relative', opacity: uploading ? 0.7 : 1 }}> {url ? ( <>

) : ( <>

{uploading ? '...' : '+'}

{isFirst ? (uploading ? 'UPLOADING...' : 'MAIN PHOTO') : (uploading ? '...' : 'OPTIONAL')} )} {isFirst && !url && Required}

); })}

FULL NAME setDraft({ ...draft, name: e.target.value })} style={{ ...brutalInput, fontSize: 22, fontWeight: 900, textTransform: 'uppercase' }} placeholder="JANE DOE" /> {draft.name && (

PREVIEW

{draft.name.split(' ').map((n, i) =>

{n}

)}

)} {builderStep === 2 && (

INTERN @ COMPANY setDraft({ ...draft, company: e.target.value })} style={{ ...brutalInput, fontWeight: 900, textTransform: 'uppercase' }} placeholder="e.g. STRIPE" />

SHORT BIO

setDraft({ ...draft, bio: e.target.value })} style={{ ...brutalInput, minHeight: 100, resize: 'none', lineHeight: 1.6, fontSize: 15 }} placeholder="A quick one-liner about you..." />
              </div>
              {draft.company && (
                <div style={{ background: '#fff', border: brutalBorder, padding: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
                  <div style={{ background: accent, color: '#fff', padding: '4px 8px', fontSize: 9, fontWeight: 800, letterSpacing: '0.05em' }}>PREVIEW</div>
                  <span style={{ fontSize: 14, fontWeight: 800 }}>INTERN @ {draft.company.toUpperCase()}</span>
                </div>
              )}
            </div>
          )}

{builderStep === 3 && (
            <div>
              <div style={{ background: bgYellow, border: brutalBorder, boxShadow: brutalShadow, padding: 16, marginBottom: 20 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
                  <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.05em' }}>THINGS I DO FOR FUN</span>
                  <div style={{ background: (draft.hobbies || []).length >= 3 ? '#000' : '#fff', color: (draft.hobbies || []).length >= 3 ? bgYellow : '#000', border: brutalBorder, padding: '4px 8px', fontSize: 10, fontWeight: 800 }}>
                    {(draft.hobbies || []).length}/5
                  </div>
                </div>
                <div style={{ display: 'flex', gap: 8 }}>
                  <input value={draft.currentHobby} onChange={e => setDraft({ ...draft, currentHobby: e.target.value })} onKeyDown={e => e.key === 'Enter' && handleAddHobby(e)} style={{ ...brutalInput, flex: 1 }} placeholder="e.g. Exploring hidden staircases" />
                  <button onClick={handleAddHobby} style={{ width: 52, height: 52, border: brutalBorder, background: bgGreen, fontSize: 20, cursor: 'pointer', fontWeight: 900, boxShadow: '2px 2px 0 #000', flexShrink: 0 }}>+</button>
                </div>
                {(draft.hobbies || []).length > 0 && (
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 16 }}>
                    {(draft.hobbies || []).map((h, i) => (
                      <div key={i} onClick={() => removeHobby(i)} style={{ background: '#000', color: bgCream, padding: '8px 14px', border: brutalBorder, fontWeight: 800, fontSize: 12, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, boxShadow: '2px 2px 0 #000' }}>
                        {h.toUpperCase()} <span style={{ fontSize: 10, opacity: 0.6 }}>x</span>
                      </div>
                    ))}
                  </div>
                )}
              </div>
              {draft.name && (
                <div style={{ background: bgGreen, border: brutalBorder, boxShadow: brutalShadow, padding: 16 }}>
                  <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.05em', marginBottom: 12 }}>CARD PREVIEW</div>
                  <div style={{ fontSize: 22, fontWeight: 900, textTransform: 'uppercase', marginBottom: 4 }}>{draft.name}</div>
                  <div style={{ fontSize: 12, fontWeight: 700, color: accent, marginBottom: 8 }}>INTERN @ {(draft.company || '...').toUpperCase()}</div>
                  {draft.bio && <div style={{ fontSize: 13, color: '#333', marginBottom: 12, lineHeight: 1.5 }}>{draft.bio}</div>}
                  {(draft.hobbies || []).length > 0 && (
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                      {(draft.hobbies || []).map((h, i) => (
                        <span key={i} style={{ background: '#000', color: bgCream, padding: '4px 10px', fontSize: 10, fontWeight: 800 }}>{h.toUpperCase()}</span>
                      ))}
                    </div>
                  )}
                </div>
              )}
            </div>
          )}
        </div>

<div style={{ position: 'fixed', bottom: 0, left: 0, right: 0, background: bgCream, borderTop: brutalBorder, padding: '16px 20px max(env(safe-area-inset-bottom, 16px), 20px) 20px', display: 'flex', gap: 12, zIndex: 20 }}>
          {builderStep > 1 && (
            <button onClick={() => setBuilderStep(s => s - 1)} style={{ flex: 1, padding: '16px', background: '#fff', border: brutalBorder, boxShadow: brutalShadow, color: '#000', fontSize: 14, fontWeight: 900, cursor: 'pointer', textTransform: 'uppercase' }}>BACK</button>
          )}
          <button onClick={() => builderStep < TOTAL_BUILDER_STEPS ? setBuilderStep(s => s + 1) : handleSubmit()} style={{ flex: 2, padding: '16px', background: '#000', border: brutalBorder, boxShadow: `4px 4px 0px ${bgGreen}`, color: bgCream, fontSize: 14, fontWeight: 900, cursor: 'pointer', textTransform: 'uppercase' }}>
            {builderStep < TOTAL_BUILDER_STEPS ? 'CONTINUE' : 'POST SPOTLIGHT'}
          </button>
        </div>
      </div>
    );
  }

// --- DISCOVER VIEW (Pan Map) ---
  const stepW = CARD_W + GAP;
  const stepH = CARD_H + GAP;
  const stagger = stepH / 2;
  const padY = stepH;
  const dp = displayPanItems || [];

const teaserIds = (sortedInterns || []).slice(0, 3).map(function(x) { return x.id; });

return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100dvh', background: bgCream, color: '#000', fontFamily: 'Inter, sans-serif', overflow: 'hidden' }}>
      {renderFileInput()}
      <style>{`
        @keyframes slideInToast {
          from { opacity: 0; transform: translate(-50%, 100%); }
          to { opacity: 1; transform: translate(-50%, 0); }
        }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
      `}</style>

{/* Header */}
      <div style={{
        padding: `max(env(safe-area-inset-top, 12px), 16px) ${contentPadX}px 10px`,
        background: bgCream, zIndex: 100,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center'
      }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap', minWidth: 0 }}>
          <h1 style={{ fontSize: 24, fontWeight: 900, margin: 0, letterSpacing: '-0.02em', textTransform: 'uppercase', lineHeight: 0.92 }}>
            CHI <span style={{ opacity: 0.25 }}>INTERNS</span>
          </h1>
          <p style={{ margin: 0, fontSize: 11, color: '#000', opacity: 0.5, whiteSpace: 'nowrap' }}>Chicago intern directory</p>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          {typeof share === 'function' && (
            <button onClick={() => share()} style={{ background: 'transparent', border: 'none', cursor: 'pointer', padding: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', opacity: 0.5 }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
                <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
              </svg>
            </button>
          )}
        </div>
      </div>

{/* Search + Filters */}
      <div style={{ padding: `8px ${contentPadX}px 12px`, background: bgCream, zIndex: 100, boxShadow: `0 4px 20px ${bgCream}` }}>
        <div style={{ marginBottom: 10 }}>
          {hasSubmitted ? (
            <div style={{ display: 'flex', alignItems: 'center', background: '#fff', borderRadius: 100, padding: '10px 16px', border: '1px solid #e0ddd6' }}>
              <span style={{ marginRight: 10, opacity: 0.35, fontSize: 14 }}>🔍</span>
              <input value={searchQuery} onChange={e => setSearchQuery(e.target.value)} placeholder="Search by name, company..."
                style={{ border: 'none', background: 'transparent', width: '100%', fontSize: 14, outline: 'none', color: '#000', fontFamily: 'Inter, sans-serif' }} />
            </div>
          ) : (
            <div
              onClick={() => { setDraft({ name: '', bio: '', company: '', hobbies: [], currentHobby: '', photoUrl: '', photoUrls: [], socials: { ig: '', tt: '', yt: '', tw: '', li: '' } }); setBuilderStep(1); setView('build'); }}
              style={{ display: 'flex', alignItems: 'center', background: '#f5f5f5', borderRadius: 100, padding: '10px 16px', border: '1px solid #e0ddd6', cursor: 'pointer', gap: 10 }}
            >
              <span style={{ opacity: 0.35, fontSize: 14 }}>🔍</span>
              <span style={{ fontSize: 14, fontWeight: 500, fontStyle: 'italic', color: '#888' }}>Add your spotlight to unlock search...</span>
            </div>
          )}
        </div>
        <div className="no-scrollbar" style={{ display: 'flex', overflowX: 'auto', gap: 8, paddingBottom: 4 }}>
          {['All', ...companyTags].map(tag => (
            <button key={tag} onClick={() => hasSubmitted && setActiveCompanyFilter(tag)} style={{
              padding: '6px 14px', borderRadius: 100, fontSize: 11, fontWeight: 700,
              textTransform: 'uppercase', letterSpacing: '0.05em', whiteSpace: 'nowrap',
              background: activeCompanyFilter === tag ? '#000' : '#fff',
              color: activeCompanyFilter === tag ? bgCream : '#888',
              border: activeCompanyFilter === tag ? '1px solid #000' : '1px solid #e0ddd6',
              transition: 'all 0.2s',
              boxShadow: activeCompanyFilter === tag ? '0 4px 12px rgba(0,0,0,0.15)' : '0 2px 4px rgba(0,0,0,0.02)',
              cursor: hasSubmitted ? 'pointer' : 'default',
              opacity: hasSubmitted ? 1 : 0.4
            }}>
              {tag}
            </button>
          ))}
        </div>
      </div>

{/* Pan Map Canvas */}
      <div style={{ flex: 1, minHeight: 0, position: 'relative' }}>
        <div
          ref={mapViewportRef}
          style={{
            position: 'absolute', inset: 0,
            overflow: 'hidden', background: bgCream,
            cursor: 'grab', touchAction: 'none', overscrollBehavior: 'none',
            WebkitTouchCallout: 'none', WebkitUserSelect: 'none', userSelect: 'none'
          }}
          onMouseDown={handleMapDown}
          onMouseMove={handleMapMove}
          onMouseUp={handleMapUp}
          onMouseLeave={handleMapUp}
          onClickCapture={handleMapClickCapture}
        >
          {(filteredInterns || []).length === 0 ? (
            <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#888' }}>
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: 48, marginBottom: 16 }}>~</div>
                <p style={{ fontSize: 14, fontWeight: 700 }}>
                  {searchQuery || activeCompanyFilter !== 'All' ? 'No matches found.' : 'The wind is howling... no interns yet.'}
                </p>
              </div>
            </div>
          ) : (
            [0, 1, 2, 3].map(q => (
              <div key={q} ref={el => { mapQuadRefs.current[q] = el; }} style={{
                position: 'absolute', left: 0, top: 0,
                width: TILE_W, height: TILE_H + 2 * stepH + Math.ceil(stagger),
                willChange: 'transform', transformOrigin: '0 0'
              }}>
                {/* Main tile */}
                {(dp || []).map((intern, i) => {
                  const col = i % cols;
                  const row = Math.floor(i / cols);
                  const cardLocked = !hasSubmitted && (teaserIds || []).indexOf(intern.id) === -1;
                  return (
                    <MapCard
                      key={intern._virtualId ? `${intern.id}-${intern._virtualId}` : intern.id}
                      p={intern}
                      x={col * stepW}
                      y={padY + row * stepH + (col % 2 === 1 ? stagger : 0)}
                      cardW={CARD_W}
                      cardH={CARD_H}
                      onSelect={handleCardSelect}
                      locked={cardLocked}
                    />
                  );
                })}
                {/* Top ghost row (last row duplicated above) */}
                {Array.from({ length: cols }, (_, c) => {
                  const gi = (rows - 1) * cols + c;
                  if (gi >= (dp || []).length) return null;
                  const intern = dp[gi];
                  const cardLocked = !hasSubmitted && (teaserIds || []).indexOf(intern.id) === -1;
                  return (
                    <MapCard
                      key={`gt-${c}-${intern._virtualId ? `${intern.id}-${intern._virtualId}` : intern.id}`}
                      p={intern}
                      x={c * stepW}
                      y={c % 2 === 1 ? stagger : 0}
                      cardW={CARD_W}
                      cardH={CARD_H}
                      onSelect={handleCardSelect}
                      locked={cardLocked}
                    />
                  );
                })}
                {/* Bottom ghost row (first row duplicated below) */}
                {Array.from({ length: cols }, (_, c) => {
                  if (c >= (dp || []).length) return null;
                  const intern = dp[c];
                  const cardLocked = !hasSubmitted && (teaserIds || []).indexOf(intern.id) === -1;
                  return (
                    <MapCard
                      key={`gb-${c}-${intern._virtualId ? `${intern.id}-${intern._virtualId}` : intern.id}`}
                      p={intern}
                      x={c * stepW}
                      y={padY + TILE_H + (c % 2 === 1 ? stagger : 0)}
                      cardW={CARD_W}
                      cardH={CARD_H}
                      onSelect={handleCardSelect}
                      locked={cardLocked}
                    />
                  );
                })}
              </div>
            ))
          )}
        </div>

{/* Fixed Bottom CTA */}
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '16px 20px max(env(safe-area-inset-bottom, 16px), 20px) 20px', background: `linear-gradient(0deg, ${bgCream} 70%, rgba(244,246,249,0))`, zIndex: 10 }}>
          <button
            onClick={() => { setDraft({ name: '', bio: '', company: '', hobbies: [], currentHobby: '', photoUrl: '', photoUrls: [], socials: { ig: '', tt: '', yt: '', tw: '', li: '' } }); setBuilderStep(1); setView('build'); }}
            style={{
              width: '100%', padding: '16px', background: '#000', color: bgCream,
              border: brutalBorder, boxShadow: `4px 4px 0px ${accent}`,
              fontSize: 15, fontWeight: 900, cursor: 'pointer', textTransform: 'uppercase',
              letterSpacing: '0.06em'
            }}
          >
            {hasSubmitted ? 'ADD MY SPOTLIGHT' : 'ADD YOURS TO UNLOCK ALL'}
          </button>
        </div>
      </div>

{/* Toast */}
      {toast && (
        <div style={{
          position: 'fixed', bottom: 'calc(env(safe-area-inset-bottom, 20px) + 90px)',
          left: '50%', transform: 'translateX(-50%)',
          background: '#000', color: bgCream, padding: '10px 20px',
          border: brutalBorder, fontSize: 13, fontWeight: 800,
          boxShadow: brutalShadow, zIndex: 200,
          animation: 'slideInToast 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards',
          whiteSpace: 'nowrap', letterSpacing: '0.04em'
        }}>
          {toast}
        </div>
      )}
    </div>
  );
}</article></body></html>