onSelect(p.id)} style={{ position: 'absolute', left: x, top: y, width: cardW, height: cardH, cursor: 'pointer', borderRadius: 20, overflow: 'hidden', background: theme.surface, 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' }} >

{hasMultiple &&

}

{mutual &&

MUTUAL

} {p.followerCount && (

{_formatNumber(p.followerCount)}

)}

{p.name}

{hasHandles && (

{socials.ig && ( {socials.ig} )} {socials.tt && ( {socials.tt} )} {socials.yt && ( ▣ {socials.yt} )}

)}

); }); const GridCard = _memo(function GridCard({ p, mutual, onSelect, serifFont, tagMeta, highlightColor, surfaceColor, textScale = 1 }) { const _fs = (base) => Math.round(base * textScale); const socials = _getVisibleSocials(p.socials); const hasHandles = _hasVisibleSocials(p.socials); const photos = p.photoUrls?.length ? (p.photoUrls || []).filter(Boolean) : (p.photoUrl ? [p.photoUrl] : []); const { cur: imgCur, next: imgNext, sliding: imgSliding } = _useCarousel(photos, p.id); const curSrc = photos[imgCur] || photos[0] || 'https://via.placeholder.com/300'; const nextSrc = photos[imgNext] || curSrc; const hasMultiple = (photos || []).length > 1; return (

onSelect(p.id)} style={{ cursor: 'pointer', transition: 'transform 0.1s ease, box-shadow 0.1s ease' }}>

{hasMultiple &&

}

{mutual &&

MUTUAL

} {p.followerCount && (

{_formatNumber(p.followerCount)}

)}

{p.name}

{hasHandles && (

{socials.ig && ( {socials.ig} )} {socials.tt && ( {socials.tt} )} {socials.yt && ( ▣ {socials.yt} )}

)}

{(p.tags || []).slice(0, 2).map(t => { const meta = tagMeta?.[t] || { icon: '✦', color: '#fff' }; return ( {meta.icon}{t} ); })}

); }); const ListCard = _memo(function ListCard({ p, mutual, onSelect, serifFont, highlightColor, primaryColor, accentColor, secondaryColor, borderColor, isDesktop }) { const socials = _getVisibleSocials(p.socials); const hasHandles = _hasVisibleSocials(p.socials); const photos = p.photoUrls?.length ? (p.photoUrls || []).filter(Boolean) : (p.photoUrl ? [p.photoUrl] : []); const { cur: imgCur, next: imgNext, sliding: imgSliding } = _useCarousel(photos, p.id); const curSrc = photos[imgCur] || photos[0] || ''; const nextSrc = photos[imgNext] || curSrc; const hasMultiple = (photos || []).length > 1; const thumbSize = isDesktop ? 72 : 64; const thumbRadius = isDesktop ? 20 : 16; return (

onSelect(p.id)} onMouseEnter={e => isDesktop && (e.currentTarget.style.backgroundColor = 'rgba(0,0,0,0.04)')} onMouseLeave={e => isDesktop && (e.currentTarget.style.backgroundColor = 'transparent')} style={{ display: 'flex', alignItems: isDesktop ? 'center' : 'flex-start', gap: isDesktop ? 20 : 14, padding: isDesktop ? '16px 24px' : '14px 0', borderBottom: `1px solid ${borderColor}`, cursor: 'pointer', transition: 'background-color 0.2s ease', borderRadius: isDesktop ? 12 : 0, margin: isDesktop ? '0 0 4px 0' : 0, }} >

{curSrc ? ( <>

{hasMultiple &&

} ) : (

{(p.name || '?')[0]}

)}

{isDesktop ? (

{p.name} {mutual && MUTUAL}

{(_resolveProfileFaculty(p) || p.year) && (

{[_resolveProfileFaculty(p), _formatStudyYear(p.year)].filter(Boolean).join(' · ')}

)}

{hasHandles && (

{socials.ig && {socials.ig}} {socials.tt && {socials.tt}} {socials.yt && ▣ {socials.yt}}

)}

{p.followerCount && (

{_formatNumber(p.followerCount)}

)}

) : (

{p.name} {mutual && MUTUAL}

{(_resolveProfileFaculty(p) || p.year) && (

{[_resolveProfileFaculty(p), _formatStudyYear(p.year)].filter(Boolean).join(' · ')}

)} {hasHandles && (

{socials.ig && ( {socials.ig} )} {socials.tt && ( {socials.tt} )} {socials.yt && ( ▣ {socials.yt} )}

)} {p.followerCount && (

{_formatNumber(p.followerCount)}

)}

); }); const FunMapCard = _memo(function FunMapCard({ card, x, y, cardW, cardH, onSelect, theme, textScale = 1 }) { const _fs = (base) => Math.round(base * textScale); const isDaily = card?.variant === 'daily'; const photos = isDaily ? (card.photoUrls || []).filter(Boolean) : []; const { cur: imgCur, next: imgNext, sliding: imgSliding } = _useCarousel(photos, `daily-${card?.winnerId || card?.id || ''}`); const curSrc = photos[imgCur] || photos[0] || ''; const nextSrc = photos[imgNext] || curSrc; const hasMultiple = (photos || []).length > 1; return (

onSelect(card)} style={{ position: 'absolute', left: x, top: y, width: cardW, height: cardH, cursor: 'pointer', borderRadius: 20, overflow: 'hidden', background: isDaily ? theme.primary || '#111' : `linear-gradient(160deg, ${theme.highlight} 0%, ${theme.success} 100%)`, 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', color: isDaily ? '#fff' : '#111' }} > {isDaily && curSrc && ( <>

{hasMultiple &&

} )}

{isDaily ? 'Daily drop' : 'For fun'}

{isDaily ? (

{card.title}

18 ? 28 : 34), lineHeight: 0.9, fontWeight: 900, textTransform: 'uppercase', color: '#fff', textShadow: '2px 2px 0 #000', marginBottom: _fs(8), overflowWrap: 'break-word' }}> {card.winnerName}

{card.winnerHandle || 'UTS Creator'}

{card.subtitle}

Open card

) : (

{card.title}

{card.displayValue || _formatNumber(card.value)}

{card.statLabel}

Tap to open {card.winnerName}.

See leader

)}

); }); const FunGridCard = _memo(function FunGridCard({ card, onSelect, serifFont, surfaceColor, primaryColor, accentColor, highlightColor }) { const isDaily = card?.variant === 'daily'; const photos = isDaily ? (card.photoUrls || []).filter(Boolean) : []; const { cur: imgCur, next: imgNext, sliding: imgSliding } = _useCarousel(photos, `daily-grid-${card?.winnerId || card?.id || ''}`); const curSrc = photos[imgCur] || photos[0] || ''; const nextSrc = photos[imgNext] || curSrc; const hasMultiple = (photos || []).length > 1; return (

onSelect(card)} style={{ cursor: 'pointer', transition: 'transform 0.1s ease, box-shadow 0.1s ease' }}>

{isDaily && curSrc && ( <>

{hasMultiple &&

} )}

{isDaily ? (

Daily drop

{card.title}

18 ? 24 : 29, lineHeight: 0.9, fontWeight: 900, color: '#fff', textTransform: 'uppercase', marginBottom: 8, textShadow: '2px 2px 0 #000', overflowWrap: 'break-word' }}> {card.winnerName}

{card.winnerHandle || 'UTS Creator'}

{card.subtitle}

Open card

) : (

For fun

{card.title}

{card.displayValue || _formatNumber(card.value)}

{card.statLabel}

Tap to open {card.winnerName}. See leader

)}

); }); const FunListCard = _memo(function FunListCard({ card, onSelect, serifFont, highlightColor, primaryColor, accentColor, secondaryColor, borderColor, isDesktop }) { const isDaily = card?.variant === 'daily'; const photos = isDaily ? (card.photoUrls || []).filter(Boolean) : []; const { cur: imgCur, next: imgNext, sliding: imgSliding } = _useCarousel(photos, `daily-list-${card?.winnerId || card?.id || ''}`); const curSrc = photos[imgCur] || photos[0] || ''; const nextSrc = photos[imgNext] || curSrc; const hasMultiple = (photos || []).length > 1; return (

onSelect(card)} onMouseEnter={e => isDesktop && (e.currentTarget.style.backgroundColor = 'rgba(0,0,0,0.04)')} onMouseLeave={e => isDesktop && (e.currentTarget.style.backgroundColor = 'transparent')} style={{ display: 'flex', alignItems: isDesktop ? 'center' : 'flex-start', gap: isDesktop ? 20 : 14, padding: isDesktop ? '16px 24px' : '14px 0', borderBottom: `1px solid ${borderColor}`, cursor: 'pointer', transition: 'background-color 0.2s ease', borderRadius: isDesktop ? 12 : 0, margin: isDesktop ? '0 0 4px 0' : 0, }} >

{isDaily && curSrc ? ( <>

{hasMultiple &&

}

★

) : (

{isDaily ? 'Daily' : 'Fun'}

{isDaily ? '★' : (card.displayValue || _formatNumber(card.value))}

)}

{card.title} {isDaily ? 'Daily drop' : 'Tap to open'}

{isDaily ? (card.winnerHandle || card.statLabel) : `${_formatNumber(card.value)} ${card.statLabel.toLowerCase()}`}

{isDaily ? ( {card.winnerName} is today's campus main character. ) : ( Meet {card.winnerName}, currently leading this list. )}

); }); const ProfileHeroCarousel = _memo(function ProfileHeroCarousel({ photos, tag, name, fontSans, bgCream, brutalBorder, isDesktop }) { const [idx, setIdx] = useState(0); const [fade, setFade] = useState(1); const pauseRef = useRef(false); const timerRef = useRef(null); const hasMultiple = (photos || []).length > 1; useEffect(() => { if ((photos || []).length <= 1) return; const run = () => { timerRef.current = setInterval(() => { if (!pauseRef.current) { setFade(0); setTimeout(() => { setIdx(i => (i + 1) % (photos || []).length); setFade(1); }, 50); } }, 5000); }; const t = setTimeout(run, 1500); return () => { clearTimeout(t); if (timerRef.current) clearInterval(timerRef.current); }; }, [(photos || []).length]); const goTo = (i) => { setFade(0); setTimeout(() => { setIdx(i); setFade(1); }, 50); pauseRef.current = true; setTimeout(() => { pauseRef.current = false; }, 10000); }; const goPrev = () => goTo((idx - 1 + (photos || []).length) % (photos || []).length); const goNext = () => goTo((idx + 1) % (photos || []).length); const currentSrc = photos[idx] || photos[0] || 'https://via.placeholder.com/600'; return (

{tag || 'ARTIST'}

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

{hasMultiple && ( <>

{(photos || []).map((_, i) => (

)}

); }); function App({ user, data, setData, isMultiplayer, sharedData, setSharedData, patchSharedData, myPersonalData, setMyPersonalData, members, memberActivity, isOwner, instanceName, openProfile, openAuth, // Image upload — iOS pickAndUploadPhoto, getImageUrl, // Image upload — Web uploadImage, resolveImageUrl, // Audio upload pickAndUploadAudio, getAudioUrl, uploadAudio, // Video upload pickAndUploadVideo, getVideoUrl, uploadVideo }) { const appData = isMultiplayer ? sharedData : data; const saveData = isMultiplayer ? setSharedData : setData; const patchAppData = isMultiplayer ? (patch) => patchSharedData(patch) : (patch) => setData({ ...data, ...patch }); // --- STYLE SYSTEM --- const colors = { base: '#F5F7FE', surface: '#FFFFFF', primary: '#000000', accent: '#1742F5', border: '#000000', success: '#00A859', highlight: '#1742F5', secondary: '#1742F5', white: '#FFFFFF' }; const fonts = { serif: '"Anton", "Impact", "Arial Black", sans-serif', sans: '"Inter", "Avenir Next", sans-serif' }; // --- PLATFORM DETECTION --- const hasNativePhotoPicker = typeof pickAndUploadPhoto === 'function'; const hasWebImageUpload = typeof uploadImage === 'function'; const canUploadImage = hasNativePhotoPicker || hasWebImageUpload; const hasNativeAudioPicker = typeof pickAndUploadAudio === 'function'; const hasWebAudioUpload = typeof uploadAudio === 'function'; const canUploadAudio = isMultiplayer && (hasNativeAudioPicker || hasWebAudioUpload); const hasNativeVideoPicker = typeof pickAndUploadVideo === 'function'; const hasWebVideoUpload = typeof uploadVideo === 'function'; const canUploadVideo = isMultiplayer && (hasNativeVideoPicker || hasWebVideoUpload); const canUploadMedia = canUploadImage || canUploadAudio || canUploadVideo; const hasWindow = typeof window !== 'undefined'; const [viewportWidth, setViewportWidth] = useState(() => (hasWindow ? window.innerWidth : 480)); const [cardZoom, setCardZoom] = useState(1); const cardZoomRef = useRef(1); cardZoomRef.current = cardZoom; const pinchRef = useRef({ active: false, startDist: 0, startZoom: 1 }); const isTabletViewport = viewportWidth >= 768; const isDesktopViewport = viewportWidth >= 1180; const contentPaddingX = isDesktopViewport ? 32 : (isTabletViewport ? 24 : 20); const floatingBarMaxWidth = '100%'; const _baseGridColumns = isDesktopViewport ? 4 : (isTabletViewport ? 3 : 2); const discoverGridColumns = Math.max(1, Math.min(6, Math.round(_baseGridColumns / cardZoom))); const discoverGridGap = isDesktopViewport ? 20 : 16; const discoverGridCardW = Math.floor((viewportWidth - 2 * contentPaddingX - (discoverGridColumns - 1) * discoverGridGap) / discoverGridColumns); const discoverGridCardH = Math.round(discoverGridCardW * (4 / 3)); const discoverGridStagger = Math.round((discoverGridCardH + discoverGridGap) / 2); const listMaxWidth = null; const layoutSwitcherButtonHeight = isDesktopViewport ? 42 : (isTabletViewport ? 38 : 34); const layoutSwitcherIconSize = isDesktopViewport ? 17 : (isTabletViewport ? 15 : 13); const layoutSwitcherLabelSize = isDesktopViewport ? 13 : (isTabletViewport ? 11 : 10); const desktopShellStyle = { width: '100%', margin: '0 auto' }; // --- REFS & STATE --- const profilePicInputRef = useRef(null); const photoSlotRef = useRef(0); const folioImageInputRef = useRef(null); const folioAudioInputRef = useRef(null); const folioVideoInputRef = useRef(null); const [uploading, setUploading] = useState(false); const [uploadingType, setUploadingType] = useState(null); const MAX_FOLIO_ITEMS = 8; const MAX_PROFILE_PHOTOS = 3; const getProfilePhotos = (p) => { return _getProfilePhotoUrls(p); }; const AUDIO_ACCEPT = 'audio/webm,audio/mp4,audio/x-m4a,audio/m4a,audio/mpeg,audio/mp3,audio/wav'; const VIDEO_ACCEPT = 'video/mp4,video/quicktime,video/webm'; const IMAGE_ACCEPT = 'image/jpeg,image/jpg,image/png,image/webp,image/heic,image/heif'; const normalizeFolio = (folio) => { if (!folio || !Array.isArray(folio)) return []; return (folio || []).map(item => { if (typeof item === 'string') return { type: 'image', url: item, _timestamp: 0 }; return item; }); }; const ALL_TAGS = ['Art', 'Photography', 'Campus Life', 'Tech', 'Startup', 'Study Content', 'Day in my Life', 'Food', 'Fashion', 'Music', 'Fitness']; const ADMIN_HANDLES = ['danielg1234', 'pasha', 'pennie', 'louise', 'shakotha']; const isAdmin = (ADMIN_HANDLES || []).includes(user?.handle); const normaliseTextList = (value) => { if (Array.isArray(value)) return (value || []).map(item => `${item}`.trim()).filter(Boolean); if (!value) return []; return `${value}`.split(/\n|,/).map(item => item.trim()).filter(Boolean); }; const formatTextList = (value) => (normaliseTextList(value) || []).join('\n'); // --- STATE --- const [view, setView] = useState('discover'); const [activeProfileId, setActiveProfileId] = useState(null); const [builderStep, setBuilderStep] = useState(1); const [showConfetti, setShowConfetti] = useState(false); const [searchQuery, setSearchQuery] = useState(''); const [sydneyDayNumber, setSydneyDayNumber] = useState(() => _getSydneyDayNumber()); const [activeFilters, setActiveFilters] = useState({ category: 'All', year: null, faculty: null, followers: null, }); const [expandedFilter, setExpandedFilter] = useState(null); const [discoverLayout, setDiscoverLayout] = useState('pan'); const [lightboxItem, setLightboxItem] = useState(null); const [resolvedUrls, setResolvedUrls] = useState({}); const [showSubmitted, setShowSubmitted] = useState(false); const [editingTags, setEditingTags] = useState(false); const createProfileDraft = (profile = {}, mode = 'user') => { const handle = profile.handle ?? (mode === 'user' ? (user?.handle || '') : ''); const defaultSocial = mode === 'admin' ? '' : (handle ? `@${handle.replace(/^@/, '')}` : ''); const existingSocials = profile.socials || {}; const existingPhotos = getProfilePhotos(profile); return { name: profile.name ?? (mode === 'user' ? (user?.displayName || user?.name || '') : ''), photoUrl: existingPhotos[0] || '', photoUrls: (existingPhotos || []).length ? existingPhotos : [], faculty: _resolveProfileFaculty(profile), year: _formatStudyYear(profile.year) || 'First year', bio: profile.bio || '', tags: Array.isArray(profile.tags) ? profile.tags : [], socials: { ig: existingSocials.ig || defaultSocial, tt: existingSocials.tt || defaultSocial, yt: existingSocials.yt || defaultSocial }, openToCollabs: typeof profile.openToCollabs === 'boolean' ? profile.openToCollabs : true, bestTime: profile.bestTime || '', funFact: profile.funFact || '', creatorStory: profile.creatorStory || '', creatorTips: normaliseTextList(profile.creatorTips), storyFeatured: !!profile.storyFeatured, storyRank: profile.storyRank || '', openToPaidWork: typeof profile.openToPaidWork === 'boolean' ? profile.openToPaidWork : !!profile.openToCollabs, preferredCollabTypes: normaliseTextList(profile.preferredCollabTypes), rateRange: profile.rateRange || '', folio: normalizeFolio(profile.folio), followerCount: profile.followerCount || '', sixtySevenRating: _normalizeSixtySevenRating(profile.sixtySevenRating), handle, status: profile.status || (mode === 'admin' ? 'approved' : (isAdmin ? 'approved' : 'pending')), createdAt: profile.createdAt || null, archivedFromStatus: profile.archivedFromStatus || undefined, userId: profile.userId || '' }; }; const sanitizeImportedJson = (value = '') => value.replace(/,\s*([}\]])/g, '$1').trim(); const parseAdminImportPayload = (rawValue = '') => { const source = rawValue.trim(); if (!source) { throw new Error('Paste one or more creator objects first.'); } const candidates: string[] = []; const addCandidate = (value: string) => { const nextValue = value.trim(); if (!nextValue || (candidates || []).includes(nextValue)) return; candidates.push(nextValue); }; addCandidate(source); addCandidate(sanitizeImportedJson(source)); if (!source.startsWith('[')) { const wrapped = `[${source}]`; addCandidate(wrapped); addCandidate(sanitizeImportedJson(wrapped)); } let lastError: Error | null = null; for (const candidate of candidates) { try { const parsed = JSON.parse(candidate); return Array.isArray(parsed) ? parsed : [parsed]; } catch (error) { lastError = error; } } throw new Error(lastError?.message || 'Could not parse creator JSON.'); }; const mapImportedCreatorToDraft = (creator: any = null) => { if (!creator || typeof creator !== 'object' || Array.isArray(creator)) return null; const baseDraft = createProfileDraft({}, 'admin'); const handle = `${creator.username ?? creator.handle ?? ''}`.trim().replace(/^@/, ''); const name = `${creator.full_name ?? creator.fullName ?? creator.name ?? handle}`.trim(); const followerValue = creator.followers ?? creator.followerCount ?? creator.follower_count ?? ''; const followerCount = followerValue === null || followerValue === undefined ? '' : `${followerValue}`.replace(/[^0-9]/g, ''); const importedPhoto = typeof creator.profile_pic_url === 'string' ? creator.profile_pic_url : typeof creator.photoUrl === 'string' ? creator.photoUrl : ''; const importedPhotos = Array.isArray(creator.photoUrls) ? (creator.photoUrls || []).filter(u => typeof u === 'string' && u) : importedPhoto ? [importedPhoto] : []; const importedFaculty = _resolveProfileFaculty({ faculty: creator.faculty, degree: creator.degree ?? creator.program ?? creator.study ?? creator.studying ?? creator.course }); const importedRating = creator.sixtySevenRating ?? creator['67 rating'] ?? creator['67_rating']; const importedSocials = (creator.socials && typeof creator.socials === 'object' && !Array.isArray(creator.socials)) ? creator.socials : {}; const fallbackIg = handle ? `@${handle}` : ''; return { ...baseDraft, name, handle, bio: typeof creator.bio === 'string' ? creator.bio : '', creatorStory: typeof creator.creatorStory === 'string' ? creator.creatorStory : (typeof creator.story === 'string' ? creator.story : ''), creatorTips: normaliseTextList(creator.creatorTips ?? creator.tips), storyFeatured: !!creator.storyFeatured, storyRank: creator.storyRank || '', openToPaidWork: typeof creator.openToPaidWork === 'boolean' ? creator.openToPaidWork : !!creator.openToCollabs, preferredCollabTypes: normaliseTextList(creator.preferredCollabTypes ?? creator.collabTypes), rateRange: creator.rateRange || '', followerCount, sixtySevenRating: _normalizeSixtySevenRating(importedRating, baseDraft.sixtySevenRating), photoUrls: importedPhotos, photoUrl: importedPhotos[0] || '', faculty: importedFaculty || baseDraft.faculty, socials: { ig: `${importedSocials.ig ?? ''}`.trim() || fallbackIg, tt: `${importedSocials.tt ?? ''}`.trim(), yt: `${importedSocials.yt ?? ''}`.trim(), }, }; }; const [draftProfile, setDraftProfile] = useState(() => createProfileDraft({}, 'user')); const [adminEditorOpen, setAdminEditorOpen] = useState(false); const [adminEditorMode, setAdminEditorMode] = useState('create'); const [adminSelectedProfileId, setAdminSelectedProfileId] = useState(null); const [adminSearchQuery, setAdminSearchQuery] = useState(''); const [adminStatusFilter, setAdminStatusFilter] = useState('all'); const [adminDraft, setAdminDraft] = useState(() => createProfileDraft({}, 'admin')); const [adminCustomTagInput, setAdminCustomTagInput] = useState(''); const [adminImportText, setAdminImportText] = useState(''); const [adminImportError, setAdminImportError] = useState(''); const [adminImportMessage, setAdminImportMessage] = useState(''); const [adminReturnTarget, setAdminReturnTarget] = useState(null); const [authGate, setAuthGate] = useState(null); const [pendingAuthIntent, setPendingAuthIntent] = useState(null); const mapShuffleSeed = useRef(Math.floor(Math.random() * 0xFFFFFFFF)); const mapPanRef = useRef({ x: 20, y: 20 }); const discoverContainerRef = useRef(null); const gridScrollRef = useRef(null); 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 }); const growthSessionRef = useRef({ hasStarted: false, firstClickRecorded: false, openedProfiles: {}, currentProfile: null, seenExposureKeys: {}, playedMediaKeys: {}, builderMaxStep: 1 }); const growthAnalyticsRef = useRef(null); const updateMapTransform = () => { const quads = mapQuadRefs.current; if (!quads[0]) return; const zoom = cardZoomRef.current; const { w: baseW, h: baseH, pad: basePad } = canvasTileRef.current; const gridW = baseW * zoom; const gridH = baseH * zoom; const padY = basePad * zoom; 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); const s = `scale(${zoom})`; quads[0].style.transform = `translate3d(${x0}px,${y0}px,0) ${s}`; quads[1].style.transform = `translate3d(${x1}px,${y0}px,0) ${s}`; quads[2].style.transform = `translate3d(${x0}px,${y1}px,0) ${s}`; quads[3].style.transform = `translate3d(${x1}px,${y1}px,0) ${s}`; }; 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(); } }; // --- PINCH-TO-ZOOM (anchor-aware) --- const _getTouchDist = (t1, t2) => Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY); const _clampZoom = (z) => Math.min(2, Math.max(0.5, z)); const _adjustAnchorOnZoom = (midX, midY, oldZoom, newZoom) => { const layout = discoverLayout; if (layout === 'pan') { // Pan view: shift mapPanRef so the content under (midX, midY) stays put. // Content is laid out at base size inside each quad and scaled via CSS transform, // so mapPan is in screen-pixel coords relative to the quad origin. const el = mapViewportRef.current; if (!el) return; const rect = el.getBoundingClientRect(); const cx = midX - rect.left; const cy = midY - rect.top; const r = newZoom / oldZoom; mapPanRef.current.x = mapPanRef.current.x * r + cx * (1 - r); mapPanRef.current.y = mapPanRef.current.y * r + cy * (1 - r); scheduleMapTransform(); } else if (layout === 'grid' || layout === 'list') { // Grid/list view: adjust scroll so the content at pinch center stays in place const el = gridScrollRef.current; if (!el) return; const rect = el.getBoundingClientRect(); const relY = midY - rect.top; const scrollFraction = (el.scrollTop + relY) / Math.max(1, el.scrollHeight); requestAnimationFrame(() => { el.scrollTop = scrollFraction * el.scrollHeight - relY; }); } }; // Zoom the map view (or grid/list) anchored at the viewport center. // Used by the +/- buttons and reset button so zoom feels deliberate. const zoomAtCenter = (newZoomFn) => { const oldZoom = cardZoomRef.current; const newZoom = typeof newZoomFn === 'function' ? _clampZoom(newZoomFn(oldZoom)) : _clampZoom(newZoomFn); if (newZoom === oldZoom) return; const layout = discoverLayout; if (layout === 'pan') { const el = mapViewportRef.current; if (el) { const rect = el.getBoundingClientRect(); _adjustAnchorOnZoom(rect.left + rect.width / 2, rect.top + rect.height / 2, oldZoom, newZoom); } } else if (layout === 'grid' || layout === 'list') { const el = gridScrollRef.current; if (el) { const rect = el.getBoundingClientRect(); _adjustAnchorOnZoom(rect.left + rect.width / 2, rect.top + rect.height / 2, oldZoom, newZoom); } } setCardZoom(newZoom); }; const handlePinchStart = (e) => { if (e.touches && (e.touches || []).length === 2) { e.preventDefault(); pinchRef.current = { active: true, startDist: _getTouchDist(e.touches[0], e.touches[1]), startZoom: cardZoomRef.current }; } }; const handlePinchMove = (e) => { if (!pinchRef.current.active || !e.touches || (e.touches || []).length < 2) return; if (e.cancelable) e.preventDefault(); const dist = _getTouchDist(e.touches[0], e.touches[1]); const scale = dist / pinchRef.current.startDist; zoomAtCenter(pinchRef.current.startZoom * scale); }; const handlePinchEnd = () => { pinchRef.current.active = false; }; const handleWheelZoom = (e) => { if (!e.ctrlKey && !e.metaKey) return; e.preventDefault(); zoomAtCenter(prev => prev - e.deltaY * 0.002); }; const TOTAL_BUILDER_STEPS = 5; const TAG_META = { 'Art': { icon: '🎨', color: '#E8A87C' }, 'Photography': { icon: '📸', color: '#95A5A6' }, 'Campus Life': { icon: '🏫', color: '#85C1E9' }, 'Tech': { icon: '💻', color: '#82E0AA' }, 'Startup': { icon: '🚀', color: '#F0B27A' }, 'Study Content': { icon: '📚', color: '#C39BD3' }, 'Day in my Life': { icon: '☀️', color: '#F9E79F' }, 'Food': { icon: '🍜', color: '#F1948A' }, 'Fashion': { icon: '👗', color: '#D7BDE2' }, 'Music': { icon: '🎵', color: '#A3D9A5' }, 'Fitness': { icon: '💪', color: '#AED6F1' } }; const formatNumber = _formatNumber; const reachLabel = _reachLabel; const mapCardTheme = useMemo(() => ({ base: colors.base, surface: colors.surface, primary: colors.primary, highlight: colors.highlight, success: colors.success, serifFont: fonts.serif, tagMeta: TAG_META }), []); const persistedProfiles = appData?.profiles ?? []; const profiles = useMemo( () => (persistedProfiles || []).map(profile => _normaliseStoredProfile(profile)), [persistedProfiles] ); const follows = appData?.follows ?? []; const appUsers = appData?.appUsers ?? {}; const currentAppUser = user?.id ? appUsers?.[user.id] : null; const isSignedIn = !!user?.id; useEffect(() => { if (!(persistedProfiles || []).length) return; const needsNormalisation = (persistedProfiles || []).some((profile, index) => JSON.stringify(profile) !== JSON.stringify(profiles[index]) ); if (needsNormalisation) { patchAppData({ profiles }); } }, [persistedProfiles, profiles]); const myProfile = (profiles || []).find(p => p.userId === user?.id); const hasProfile = !!myProfile; const buildAppUserRecord = useCallback((kind = 'regular', existingUser = null, linkedProfile = null) => { if (!user?.id) return null; const now = Date.now(); const nextKind = kind === 'creator' || existingUser?.accountKind === 'creator' || linkedProfile ? 'creator' : 'regular'; return { userId: user.id, displayName: user.name || user.displayName || existingUser?.displayName || '', handle: user.handle || existingUser?.handle || '', avatarUrl: user.avatarUrl || existingUser?.avatarUrl || '', accountKind: nextKind, hasCreatorProfile: !!linkedProfile || !!existingUser?.hasCreatorProfile, creatorProfileId: linkedProfile?.id || existingUser?.creatorProfileId, savedCreatorIds: Array.isArray(existingUser?.savedCreatorIds) ? existingUser.savedCreatorIds : [], followedStoryProfileIds: Array.isArray(existingUser?.followedStoryProfileIds) ? existingUser.followedStoryProfileIds : [], savedTipKeys: Array.isArray(existingUser?.savedTipKeys) ? existingUser.savedTipKeys : [], joinedAt: existingUser?.joinedAt || now, lastSeenAt: now }; }, [user?.avatarUrl, user?.displayName, user?.handle, user?.id, user?.name]); const ensureAppUser = useCallback((kind = 'regular') => { if (!user?.id) return null; const existingUser = appUsers?.[user.id] || null; const linkedProfile = (profiles || []).find(profile => profile.userId === user.id) || null; const nextAppUser = buildAppUserRecord(kind, existingUser, linkedProfile); if (!nextAppUser) return null; patchAppData({ appUsers: { ...(appUsers || {}), [user.id]: nextAppUser } }); return nextAppUser; }, [appUsers, buildAppUserRecord, patchAppData, profiles, user?.id]); const updateAppUserPatch = useCallback((patch = {}) => { if (!user?.id) return null; const existingUser = appUsers?.[user.id] || null; const linkedProfile = (profiles || []).find(profile => profile.userId === user.id) || null; const baseUser = buildAppUserRecord(existingUser?.accountKind || 'regular', existingUser, linkedProfile); if (!baseUser) return null; const nextAppUser = { ...baseUser, ...(patch || {}), userId: user.id, lastSeenAt: Date.now() }; patchAppData({ appUsers: { ...(appUsers || {}), [user.id]: nextAppUser } }); return nextAppUser; }, [appUsers, buildAppUserRecord, patchAppData, profiles, user?.id]); const openSignupChoice = useCallback((reason = 'general', returnTarget = null) => { setAuthGate({ reason, returnTarget }); }, []); const requireRegularUser = useCallback((reason = 'general', returnTarget = null) => { if (user?.id) { ensureAppUser('regular'); return true; } openSignupChoice(reason, returnTarget); return false; }, [ensureAppUser, openSignupChoice, user?.id]); const requestHostAuth = useCallback((intent, reason = 'general', returnTarget = null) => { setPendingAuthIntent(intent); setAuthGate({ reason, returnTarget, waitingForAuth: true }); if (typeof openAuth === 'function') { openAuth({ reason }); } }, [openAuth]); const completeRegularUserChoice = useCallback(() => { const returnTarget = authGate?.returnTarget || null; if (!user?.id) { requestHostAuth('regular', authGate?.reason || 'general', returnTarget); return; } ensureAppUser('regular'); setAuthGate(null); if (returnTarget?.view) { if (returnTarget.profileId) setActiveProfileId(returnTarget.profileId); setView(returnTarget.view); } }, [authGate, ensureAppUser, requestHostAuth, user?.id]); useEffect(() => { if (isMultiplayer && !sharedData) return; if (!user?.id) return; const linkedProfile = (profiles || []).find(profile => profile.userId === user.id) || null; const existingUser = appUsers?.[user.id] || null; const nextKind = pendingAuthIntent === 'creator' || linkedProfile ? 'creator' : (existingUser?.accountKind || 'regular'); const nextAppUser = buildAppUserRecord(nextKind, existingUser, linkedProfile); const shouldPatch = nextAppUser && ( !existingUser || pendingAuthIntent || existingUser.displayName !== nextAppUser.displayName || existingUser.handle !== nextAppUser.handle || existingUser.avatarUrl !== nextAppUser.avatarUrl || existingUser.accountKind !== nextAppUser.accountKind || existingUser.hasCreatorProfile !== nextAppUser.hasCreatorProfile || existingUser.creatorProfileId !== nextAppUser.creatorProfileId ); if (shouldPatch) { patchAppData({ appUsers: { ...(appUsers || {}), [user.id]: nextAppUser } }); } }, [appUsers, buildAppUserRecord, isMultiplayer, patchAppData, pendingAuthIntent, profiles, sharedData, user?.id]); const memberList = isMultiplayer && (members || []).length > 0 ? members : (user?.id ? [{ id: user.id, displayName: user.displayName || user.name, handle: user.handle, avatarUrl: user.avatarUrl, role: 'owner' }] : []); const isAdminEditorActive = view === 'admin' && adminEditorOpen; const currentEditableFolio = normalizeFolio(isAdminEditorActive ? adminDraft.folio : draftProfile.folio); const getProfileStatus = (profile) => profile?.status || 'approved'; const isProfilePublic = (profile) => !!profile && (profile.isDemo || getProfileStatus(profile) === 'approved'); const getProfileHandle = (profile) => profile?.handle || profile?.socials?.ig?.replace(/^@/, '') || profile?.name?.replace(/\s+/g, '').toLowerCase() || ''; const formatAdminTimestamp = (ts) => ts ? new Date(ts).toLocaleString() : 'Not yet'; const growthDayKey = _growthDayKey(sydneyDayNumber); const growthAnalytics = useMemo( () => _normaliseGrowthAnalytics(appData?.analytics, growthDayKey), [appData?.analytics, growthDayKey] ); useEffect(() => { growthAnalyticsRef.current = growthAnalytics; }, [growthAnalytics]); const getNextGrowthAnalytics = useCallback((events: any[] = []) => { const dayKey = _growthDayKey(_getSydneyDayNumber()); const at = Date.now(); const nextAnalytics = (events || []).filter(Boolean).reduce( (nextAnalytics, event) => _applyGrowthAnalyticsEvent(nextAnalytics, { ...event, dayKey, at }), _normaliseGrowthAnalytics(growthAnalyticsRef.current || (isMultiplayer ? sharedData : data)?.analytics, dayKey) ); growthAnalyticsRef.current = nextAnalytics; return nextAnalytics; }, [data, isMultiplayer, sharedData]); const recordGrowthEvents = useCallback((events: any[] = []) => { const cleanEvents = (events || []).filter(Boolean); if (!(cleanEvents || []).length) return null; const analytics = getNextGrowthAnalytics(cleanEvents); patchAppData({ analytics }); return analytics; }, [getNextGrowthAnalytics, patchAppData]); const getProfileDwellEvent = useCallback(() => { const current = growthSessionRef.current.currentProfile; if (!current?.profileId || !current.enteredAt) return null; growthSessionRef.current.currentProfile = null; const durationMs = Date.now() - current.enteredAt; if (durationMs <= 0) return null; return { type: GROWTH_EVENTS.PROFILE_DWELL, profileId: current.profileId, durationMs, followed: !!current.followed, context: current.context }; }, []); const resetGrowthAnalytics = useCallback(() => { growthSessionRef.current = { hasStarted: false, firstClickRecorded: false, openedProfiles: {}, currentProfile: null, seenExposureKeys: {}, playedMediaKeys: {}, builderMaxStep: 1 }; const analytics = _normaliseGrowthAnalytics({}, _growthDayKey(_getSydneyDayNumber())); growthAnalyticsRef.current = analytics; patchAppData({ analytics }); }, [patchAppData]); useEffect(() => { if (isMultiplayer && !sharedData) return; if (growthSessionRef.current.hasStarted) return; growthSessionRef.current.hasStarted = true; recordGrowthEvents([{ type: GROWTH_EVENTS.SESSION_START }]); }, [isMultiplayer, recordGrowthEvents, sharedData]); useEffect(() => { if (view === 'profile_detail' || view === 'my_profile') return; const dwellEvent = getProfileDwellEvent(); if (dwellEvent) recordGrowthEvents([dwellEvent]); }, [getProfileDwellEvent, recordGrowthEvents, view]); const setEditableDraft = (updater) => { if (isAdminEditorActive) { setAdminDraft(prev => updater(prev)); } else { setDraftProfile(prev => updater(prev)); } }; const syncAdminDraftWithProfile = (profile) => { if (!profile || profile.id !== adminSelectedProfileId) return; setAdminDraft(createProfileDraft(profile, 'admin')); }; const upsertProfile = (profile, extraPatch = {}) => { const storedProfile = _normaliseStoredProfile(profile); const currentProfiles = persistedProfiles; const exists = (currentProfiles || []).some(p => p.id === storedProfile.id); const nextProfiles = exists ? (currentProfiles || []).map(p => (p.id === storedProfile.id ? storedProfile : _normaliseStoredProfile(p))) : [storedProfile, ...(currentProfiles || []).map(p => _normaliseStoredProfile(p))]; patchAppData({ profiles: nextProfiles, ...(extraPatch || {}) }); return storedProfile; }; const upsertProfiles = (incomingProfiles) => { const currentProfiles = (persistedProfiles || []).map(profile => _normaliseStoredProfile(profile)); const cleanedIncomingProfiles = (incomingProfiles || []).map(profile => _normaliseStoredProfile(profile)); const profileMap = new Map((currentProfiles || []).map(profile => [profile.id, profile])); (cleanedIncomingProfiles || []).forEach(profile => { if (!profile?.id) return; profileMap.set(profile.id, profile); }); const incomingIds = new Set((cleanedIncomingProfiles || []).map(profile => profile?.id).filter(Boolean)); const preservedProfiles = (currentProfiles || []).filter(profile => !incomingIds.has(profile.id)); const nextProfiles = [...(cleanedIncomingProfiles || []), ...preservedProfiles].filter(Boolean); patchAppData({ profiles: nextProfiles }); return cleanedIncomingProfiles; }; const getProfileSystemStats = (profile) => { const targetUserId = profile?.userId; const followerIds = targetUserId ? [...new Set((follows || []).filter(f => f.followingId === targetUserId).map(f => f.followerId).filter(Boolean))] : []; const followingIds = targetUserId ? [...new Set((follows || []).filter(f => f.followerId === targetUserId).map(f => f.followingId).filter(Boolean))] : []; const mutualCount = (followerIds || []).filter(id => (followingIds || []).includes(id)).length; return { status: getProfileStatus(profile), createdAt: profile?.createdAt || null, updatedAt: profile?._timestamp || null, folioCount: normalizeFolio(profile?.folio).length, inAppFollowers: (followerIds || []).length, followingCount: (followingIds || []).length, mutualCount }; }; useEffect(() => { const checkSydneyDay = () => { const nextDay = _getSydneyDayNumber(); setSydneyDayNumber(prev => prev === nextDay ? prev : nextDay); }; checkSydneyDay(); const timer = setInterval(checkSydneyDay, 60 * 1000); return () => clearInterval(timer); }, []); const creatorOfTheDayProfile = useMemo(() => { const publicProfiles = (profiles || []).filter(isProfilePublic); return _getCreatorOfTheDayProfile(publicProfiles, sydneyDayNumber); }, [profiles, sydneyDayNumber]); const creatorStoryOfTheDayProfile = useMemo(() => { const publicStoryProfiles = (profiles || []) .filter(profile => isProfilePublic(profile) && `${profile.creatorStory || ''}`.trim()); return _getCreatorOfTheDayProfile(publicStoryProfiles, sydneyDayNumber); }, [profiles, sydneyDayNumber]); const creatorOfTheDayCard = useMemo(() => { if (!creatorOfTheDayProfile) return null; const handle = getProfileHandle(creatorOfTheDayProfile); return { id: 'creator-of-the-day', variant: 'daily', title: 'Creator of the Day', subtitle: "Today's campus main character", statLabel: 'Daily spotlight', value: 1, displayValue: creatorOfTheDayProfile.name || 'UTS Creator', winnerId: creatorOfTheDayProfile.id, winnerName: creatorOfTheDayProfile.name || 'UTS Creator', winnerHandle: handle ? `@${handle.replace(/^@/, '')}` : '', photoUrls: _getProfilePhotoUrls(creatorOfTheDayProfile), tags: creatorOfTheDayProfile.tags || [] }; }, [creatorOfTheDayProfile]); const creatorStoryOfTheDayCard = useMemo(() => { if (!creatorStoryOfTheDayProfile) return null; const handle = getProfileHandle(creatorStoryOfTheDayProfile); return { id: 'campus-main-story-today', variant: 'daily', title: 'Campus Main Story', subtitle: "Today's creator story from UTS", statLabel: 'Daily story', value: 1, displayValue: creatorStoryOfTheDayProfile.name || 'UTS Creator', winnerId: creatorStoryOfTheDayProfile.id, winnerName: creatorStoryOfTheDayProfile.name || 'UTS Creator', winnerHandle: handle ? `@${handle.replace(/^@/, '')}` : '', photoUrls: _getProfilePhotoUrls(creatorStoryOfTheDayProfile), tags: creatorStoryOfTheDayProfile.tags || [] }; }, [creatorStoryOfTheDayProfile]); const openAdminEditorForCreate = () => { setAdminEditorMode('create'); setAdminSelectedProfileId(null); setAdminDraft(createProfileDraft({}, 'admin')); setAdminImportText(''); setAdminImportError(''); setAdminImportMessage(''); setAdminReturnTarget(null); setAdminEditorOpen(true); }; const openAdminEditorForProfile = (profile) => { if (!profile) return; setAdminEditorMode('edit'); setAdminSelectedProfileId(profile.id); setAdminDraft(createProfileDraft(profile, 'admin')); setAdminImportText(''); setAdminImportError(''); setAdminImportMessage(''); setAdminReturnTarget(null); setAdminEditorOpen(true); }; const closeAdminEditor = () => { const returnTarget = adminReturnTarget; setAdminEditorOpen(false); setAdminSelectedProfileId(null); setAdminEditorMode('create'); setAdminImportText(''); setAdminImportError(''); setAdminImportMessage(''); setAdminReturnTarget(null); if (returnTarget?.view) { if (returnTarget.profileId) setActiveProfileId(returnTarget.profileId); setView(returnTarget.view); } }; const openQuickEditForProfile = (profile) => { if (!profile || !isAdmin) return; openAdminEditorForProfile(profile); setAdminReturnTarget({ view, profileId: profile.id }); setView('admin'); }; // --- URL RESOLUTION FOR PRIVATE ASSETS --- const resolveMediaUrl = async (item) => { if (!item?.assetId) return item?.url || ''; if (resolvedUrls[item.assetId]) return resolvedUrls[item.assetId]; if (item.url) return item.url; try { let url = null; if (item.type === 'audio' && typeof getAudioUrl === 'function') { url = await getAudioUrl(item.assetId); } else if (item.type === 'video' && typeof getVideoUrl === 'function') { url = await getVideoUrl(item.assetId); } else if (item.type === 'image' && typeof getImageUrl === 'function') { url = await getImageUrl(item.assetId); } if (url) setResolvedUrls(prev => ({ ...prev, [item.assetId]: url })); return url || item.url || ''; } catch { return item.url || ''; } }; const getPlaybackUrl = (item) => { if (item?.url) return item.url; if (item?.assetId && resolvedUrls[item.assetId]) return resolvedUrls[item.assetId]; return ''; }; // --- CROSS-PLATFORM UPLOAD: PROFILE PHOTO (slot-based) --- const handleUploadProfilePhoto = async (file, slotIndex = 0) => { if (uploading) return; setUploading(true); setUploadingType('profilePhoto'); const applyUrl = (url) => { setEditableDraft(prev => { const urls = [...(prev.photoUrls || [])]; while ((urls || []).length <= slotIndex) urls.push(''); urls[slotIndex] = url; const filtered = (urls || []).filter(Boolean); return { ...prev, photoUrls: (filtered || []).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('Profile photo upload failed:', err?.message); } finally { setUploading(false); setUploadingType(null); } }; const triggerProfilePhotoUpload = (slotIndex = 0) => { photoSlotRef.current = slotIndex; if (hasNativePhotoPicker) { handleUploadProfilePhoto(null, slotIndex); } else if (hasWebImageUpload && profilePicInputRef.current) { profilePicInputRef.current.click(); } }; const removeProfilePhoto = (slotIndex) => { setEditableDraft(prev => { const urls = [...(prev.photoUrls || [])]; (urls || []).splice(slotIndex, 1); return { ...prev, photoUrls: urls, photoUrl: urls[0] || '' }; }); }; // --- CROSS-PLATFORM UPLOAD: FOLIO IMAGE --- const handleUploadFolioImage = async (file) => { if (uploading || (currentEditableFolio || []).length >= MAX_FOLIO_ITEMS) return; setUploading(true); setUploadingType('image'); try { let url = null; let assetId = null; if (hasNativePhotoPicker) { const result = await pickAndUploadPhoto({ target: 'shared', visibility: 'public' }); if (result?.cancelled) return; url = result?.publicUrl; assetId = result?.assetId; } else if (hasWebImageUpload && file) { const result = await uploadImage(file, { target: 'shared', visibility: 'public' }); url = result?.publicUrl; assetId = result?.assetRef?.assetId || null; } if (url) { setEditableDraft(prev => ({ ...prev, folio: [...normalizeFolio(prev.folio), { type: 'image', url, assetId, _timestamp: Date.now() }] })); } } catch (err) { console.error('Folio image upload failed:', err?.message); } finally { setUploading(false); setUploadingType(null); } }; // --- CROSS-PLATFORM UPLOAD: FOLIO AUDIO --- const handleUploadFolioAudio = async (file) => { if (uploading || (currentEditableFolio || []).length >= MAX_FOLIO_ITEMS) return; if (!isMultiplayer) return; setUploading(true); setUploadingType('audio'); try { let url = null; let assetId = null; if (hasNativeAudioPicker) { const result = await pickAndUploadAudio({ target: 'shared', visibility: 'public', source: 'files' }); if (result?.cancelled) return; url = result?.publicUrl; assetId = result?.assetId; } else if (hasWebAudioUpload && file) { const result = await uploadAudio(file, { target: 'shared', visibility: 'public' }); url = result?.publicUrl; assetId = result?.assetRef?.assetId || null; } if (assetId || url) { setEditableDraft(prev => ({ ...prev, folio: [...normalizeFolio(prev.folio), { type: 'audio', url: url || '', assetId, _timestamp: Date.now() }] })); } } catch (err) { console.error('Folio audio upload failed:', err?.message); } finally { setUploading(false); setUploadingType(null); } }; // --- CROSS-PLATFORM UPLOAD: FOLIO VIDEO --- const handleUploadFolioVideo = async (file) => { if (uploading || (currentEditableFolio || []).length >= MAX_FOLIO_ITEMS) return; if (!isMultiplayer) return; setUploading(true); setUploadingType('video'); try { let url = null; let assetId = null; if (hasNativeVideoPicker) { const result = await pickAndUploadVideo({ target: 'shared', visibility: 'public', source: 'files' }); if (result?.cancelled) return; url = result?.publicUrl; assetId = result?.assetId; } else if (hasWebVideoUpload && file) { const result = await uploadVideo(file, { target: 'shared', visibility: 'public' }); url = result?.publicUrl; assetId = result?.assetRef?.assetId || null; } if (assetId || url) { setEditableDraft(prev => ({ ...prev, folio: [...normalizeFolio(prev.folio), { type: 'video', url: url || '', assetId, _timestamp: Date.now() }] })); } } catch (err) { console.error('Folio video upload failed:', err?.message); } finally { setUploading(false); setUploadingType(null); } }; const triggerFolioUpload = (type) => { if (type === 'image') { if (hasNativePhotoPicker) handleUploadFolioImage(null); else if (hasWebImageUpload && folioImageInputRef.current) folioImageInputRef.current.click(); } else if (type === 'audio') { if (hasNativeAudioPicker) handleUploadFolioAudio(null); else if (hasWebAudioUpload && folioAudioInputRef.current) folioAudioInputRef.current.click(); } else if (type === 'video') { if (hasNativeVideoPicker) handleUploadFolioVideo(null); else if (hasWebVideoUpload && folioVideoInputRef.current) folioVideoInputRef.current.click(); } }; const removeFolioItem = (index) => { setEditableDraft(prev => ({ ...prev, folio: normalizeFolio(prev.folio).filter((_, i) => i !== index) })); }; // --- ACTIONS --- const handleSaveProfile = () => { if (!user?.id) return; const existingStatus = myProfile?.status || (myProfile ? 'approved' : undefined); const nextStatus = isAdmin ? 'approved' : (existingStatus === 'archived' ? 'pending' : (existingStatus || 'pending')); const draftPhotos = (draftProfile.photoUrls || []).filter(Boolean); const newProfile = { ...(myProfile || {}), id: myProfile ? myProfile.id : `prof-${Date.now()}`, userId: user.id, handle: user.handle || draftProfile.handle || '', ...draftProfile, photoUrls: draftPhotos, photoUrl: draftPhotos[0] || draftProfile.photoUrl || '', folio: normalizeFolio(draftProfile.folio), sixtySevenRating: _normalizeSixtySevenRating(draftProfile.sixtySevenRating, _normalizeSixtySevenRating(myProfile?.sixtySevenRating)), isDemo: false, status: nextStatus, archivedFromStatus: undefined, createdAt: myProfile ? myProfile.createdAt : Date.now(), _user: { id: user.id, displayName: user.displayName || user.name, handle: user.handle, profileImageUrl: user.avatarUrl }, _timestamp: Date.now() }; const analytics = getNextGrowthAnalytics([{ type: GROWTH_EVENTS.BUILDER_SUBMIT, step: builderStep, context: growthSessionRef.current.currentProfile?.context || null }]); const creatorAppUser = buildAppUserRecord('creator', appUsers?.[user.id] || null, newProfile); upsertProfile(newProfile, { analytics, ...(creatorAppUser ? { appUsers: { ...(appUsers || {}), [user.id]: creatorAppUser } } : {}) }); setActiveProfileId(newProfile.id); if (!myProfile) { if (isAdmin) { setShowConfetti(true); setTimeout(() => { setShowConfetti(false); setView('discover'); }, 3000); } else { setShowSubmitted(true); setTimeout(() => { setShowSubmitted(false); setView('discover'); }, 3000); } } else if (!isAdmin && existingStatus === 'archived') { setShowSubmitted(true); setTimeout(() => setShowSubmitted(false), 3000); setView('my_profile'); } else { setView('my_profile'); } }; const toggleFollow = (targetUserId) => { if (!user?.id) return; const existing = (follows || []).find(f => f.followerId === user.id && f.followingId === targetUserId); const targetProfile = (profiles || []).find(profile => profile.userId === targetUserId); const newFollows = existing ? (follows || []).filter(f => f !== existing) : [...(follows || []), { followerId: user.id, followingId: targetUserId, createdAt: Date.now(), _user: { id: user.id, displayName: user.displayName || user.name, handle: user.handle, profileImageUrl: user.avatarUrl }, _timestamp: Date.now() }]; if (!existing && growthSessionRef.current.currentProfile?.profileId === targetProfile?.id) { growthSessionRef.current.currentProfile.followed = true; } const analytics = !existing && targetProfile?.id ? getNextGrowthAnalytics([{ type: GROWTH_EVENTS.FOLLOW, profileId: targetProfile.id, context: growthSessionRef.current.currentProfile?.context || _growthDiscoverContext({ layout: discoverLayout, searchQuery, activeFilters, resultCount: (filteredProfiles || []).length }) }]) : null; patchAppData({ follows: newFollows, ...(analytics ? { analytics } : {}) }); }; const isFollowing = (followerId, followingId) => (follows || []).some(f => f.followerId === followerId && f.followingId === followingId); const isMutual = (u1, u2) => isFollowing(u1, u2) && isFollowing(u2, u1); const getAppUserForAction = () => { if (!user?.id) return null; return appUsers?.[user.id] || buildAppUserRecord('regular', null, myProfile); }; const updateAppUserArray = (field, itemId) => { if (!itemId) return null; const appUser = getAppUserForAction(); if (!appUser) return null; const currentItems = Array.isArray(appUser?.[field]) ? appUser[field] : []; const nextItems = (currentItems || []).includes(itemId) ? (currentItems || []).filter(id => id !== itemId) : [...(currentItems || []), itemId]; return updateAppUserPatch({ [field]: nextItems }); }; const toggleSavedCreator = (profileId, returnTarget = null) => { if (!requireRegularUser('save_creator', returnTarget)) return; updateAppUserArray('savedCreatorIds', profileId); }; const toggleStoryFollowRecord = (profileId) => updateAppUserArray('followedStoryProfileIds', profileId); const toggleTipSaveRecord = (tipKey) => updateAppUserArray('savedTipKeys', tipKey); const toggleProfileFollow = (profile, returnTarget = null) => { if (!profile?.userId || !requireRegularUser('follow_story', returnTarget)) return; toggleFollow(profile.userId); toggleStoryFollowRecord(profile.id); }; const toggleSavedTip = (tipKey, returnTarget = null) => { if (!requireRegularUser('tips', returnTarget)) return; toggleTipSaveRecord(tipKey); }; const isCreatorSaved = (profileId) => !!profileId && ((currentAppUser?.savedCreatorIds || []).includes(profileId)); const isStoryFollowed = (profileId) => !!profileId && ((currentAppUser?.followedStoryProfileIds || []).includes(profileId)); const isTipSaved = (tipKey) => !!tipKey && ((currentAppUser?.savedTipKeys || []).includes(tipKey)); const mutualUserIds = useMemo(() => { if (!user?.id || !follows?.length) return new Set(); const myFollowing = new Set((follows || []).filter(f => f.followerId === user.id).map(f => f.followingId)); const myFollowers = new Set((follows || []).filter(f => f.followingId === user.id).map(f => f.followerId)); return new Set([...myFollowing].filter(id => myFollowers.has(id))); }, [user?.id, follows]); const pendingProfiles = (profiles || []).filter(p => p.status === 'pending'); const archivedProfiles = (profiles || []).filter(p => p.status === 'archived'); const approveProfile = (profileId) => { const profile = (profiles || []).find(p => p.id === profileId); if (!profile) return; const updated = { ...profile, status: 'approved', archivedFromStatus: undefined, _timestamp: Date.now() }; upsertProfile(updated); syncAdminDraftWithProfile(updated); }; const archiveProfile = (profileId) => { const profile = (profiles || []).find(p => p.id === profileId); if (!profile) return; const currentStatus = getProfileStatus(profile); const updated = { ...profile, status: 'archived', archivedFromStatus: currentStatus === 'archived' ? (profile.archivedFromStatus || 'approved') : currentStatus, _timestamp: Date.now() }; upsertProfile(updated); syncAdminDraftWithProfile(updated); }; const restoreProfile = (profileId) => { const profile = (profiles || []).find(p => p.id === profileId); if (!profile) return; const updated = { ...profile, status: profile.archivedFromStatus || 'approved', archivedFromStatus: undefined, _timestamp: Date.now() }; upsertProfile(updated); syncAdminDraftWithProfile(updated); }; const buildAdminSavedProfile = (draft: any, existingProfile: any = null, forcedStatus?: string, now = Date.now()) => { const currentStatus = existingProfile ? getProfileStatus(existingProfile) : getProfileStatus(draft); const nextStatus = forcedStatus || (existingProfile ? currentStatus : 'approved'); const archivedFromStatus = nextStatus === 'archived' ? (currentStatus === 'archived' ? (existingProfile?.archivedFromStatus || draft.archivedFromStatus || 'approved') : currentStatus) : undefined; const adminPhotos = (draft.photoUrls || []).filter(Boolean); return { ...(existingProfile || {}), ...draft, id: existingProfile?.id || `prof-manual-${now}`, userId: existingProfile?.userId || draft.userId || `manual-${now}`, handle: draft.handle || existingProfile?.handle || '', photoUrls: adminPhotos, photoUrl: adminPhotos[0] || draft.photoUrl || '', folio: normalizeFolio(draft.folio), sixtySevenRating: _normalizeSixtySevenRating(draft.sixtySevenRating, _normalizeSixtySevenRating(existingProfile?.sixtySevenRating)), isDemo: false, status: nextStatus, archivedFromStatus, createdAt: existingProfile?.createdAt || draft.createdAt || now, _user: existingProfile?._user, _timestamp: now }; }; const handleAdminSaveProfile = (forcedStatus) => { if (!adminDraft.name.trim()) return; const existingProfile = adminEditorMode === 'edit' ? (profiles || []).find(p => p.id === adminSelectedProfileId) : null; const now = Date.now(); const savedProfile = buildAdminSavedProfile(adminDraft, existingProfile, forcedStatus, now); upsertProfile(savedProfile); setAdminImportError(''); setAdminImportMessage(''); setAdminEditorMode('edit'); setAdminSelectedProfileId(savedProfile.id); setAdminDraft(createProfileDraft(savedProfile, 'admin')); return savedProfile; }; const handleAdminImportProfiles = () => { try { const parsedItems = parseAdminImportPayload(adminImportText); const importedDrafts = parsedItems .map(mapImportedCreatorToDraft) .filter(profile => profile && profile.name.trim()); if ((importedDrafts || []).length === 0) { throw new Error('No valid creators found. Each entry needs at least a username or full name.'); } if ((importedDrafts || []).length === 1) { setAdminEditorMode('create'); setAdminSelectedProfileId(null); setAdminDraft(importedDrafts[0]); setAdminImportError(''); setAdminImportMessage('Imported 1 creator into the form. Review optional fields, then save.'); return; } const savedProfiles = (importedDrafts || []).map((draft, index) => buildAdminSavedProfile(draft, null, 'approved', Date.now() + index) ); upsertProfiles(savedProfiles); setAdminEditorMode('create'); setAdminSelectedProfileId(null); setAdminDraft(createProfileDraft({}, 'admin')); setAdminImportError(''); setAdminImportMessage(`Imported ${importedDrafts.length} creators as new profiles.`); } catch (error) { setAdminImportError(error?.message || 'Could not import creator JSON.'); setAdminImportMessage(''); } }; const filteredProfiles = useMemo(() => { const normalizedSearch = searchQuery.trim().toLowerCase(); const hasSearch = (normalizedSearch || []).length > 0; const { category, year, faculty, followers } = activeFilters; const selectedFaculty = _canonicalFaculty(faculty); const followerBucket = followers ? (FOLLOWER_BUCKETS || []).find(b => b.id === followers) : null; const matchesSearch = (p) => { if (!hasSearch) return true; return ( (p.name || '').toLowerCase().includes(normalizedSearch) || (p.handle || '').toLowerCase().includes(normalizedSearch) || (_resolveProfileFaculty(p) || '').toLowerCase().includes(normalizedSearch) || (p.bio || '').toLowerCase().includes(normalizedSearch) ); }; return (profiles || []).filter(p => { if (!isProfilePublic(p)) return false; if (!matchesSearch(p)) return false; if (category && category !== 'All' && !(p.tags || []).includes(category)) return false; if (year && _formatStudyYear(p.year) !== year) return false; if (selectedFaculty && _resolveProfileFaculty(p) !== selectedFaculty) return false; if (followerBucket) { const n = _metricCount(p.followerCount); if (!(n >= followerBucket.min && n < followerBucket.max)) return false; } return true; }).sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0)); }, [profiles, searchQuery, activeFilters]); const hasSearchQuery = searchQuery.trim().length > 0; const getCreatorStory = (profile = {}) => `${profile.creatorStory || ''}`.trim(); const getCreatorTips = (profile = {}) => normaliseTextList(profile.creatorTips); const getStoryTeaser = (profile = {}) => { const story = getCreatorStory(profile) || `${profile.bio || ''}`.trim(); if (!story) return ''; return (story || []).length > 145 ? `${story.slice(0, 145).trim()}...` : story; }; const getTipKey = (profileId, index) => `${profileId || 'profile'}:tip:${index}`; const storyProfiles = useMemo(() => (profiles || []) .filter(profile => isProfilePublic(profile) && getCreatorStory(profile)) .sort((a, b) => { if (!!b.storyFeatured !== !!a.storyFeatured) return b.storyFeatured ? 1 : -1; const rankA = parseInt(a.storyRank, 10); const rankB = parseInt(b.storyRank, 10); const safeRankA = Number.isFinite(rankA) ? rankA : 9999; const safeRankB = Number.isFinite(rankB) ? rankB : 9999; if (safeRankA !== safeRankB) return safeRankA - safeRankB; return (b.createdAt || 0) - (a.createdAt || 0); }), [profiles]); const tipsProfiles = useMemo(() => (profiles || []) .filter(profile => isProfilePublic(profile) && getCreatorTips(profile).length > 0) .sort((a, b) => (b.createdAt || 0) - (a.createdAt || 0)), [profiles]); const funMetricCards = useMemo(() => { const rankedProfiles = (filteredProfiles || []).map(profile => { const stats = getProfileSystemStats(profile); const handle = getProfileHandle(profile); return { profile, handleLength: (handle || []).length, yearRank: _yearRank(profile?.year), followerCount: _metricCount(profile?.followerCount), inAppFollowers: stats.inAppFollowers, mutualCount: stats.mutualCount, folioCount: stats.folioCount }; }); const metricDefs = [ { id: 'most-followers', title: 'Most Followers', statLabel: 'Followers', getValue: item => item.followerCount }, { id: 'most-in-app-followers', title: 'Most In-App Followers', statLabel: 'App Followers', getValue: item => item.inAppFollowers }, { id: 'most-mutuals', title: 'Most Mutuals', statLabel: 'Mutuals', getValue: item => item.mutualCount }, { id: 'longest-username', title: 'Longest Username', statLabel: 'Characters', getValue: item => item.handleLength, formatValue: value => `${value}` }, { id: 'biggest-folio', title: 'Biggest Folio', statLabel: 'Portfolio Pieces', getValue: item => item.folioCount }, { id: 'most-unc', title: 'Most UNC', statLabel: 'WOW!', getValue: item => item.yearRank, formatValue: (value, winner) => winner?.year ? `${winner.year}`.toUpperCase() : `${value}` }, ]; return (metricDefs || []).map(metric => { let winner = null; let value = 0; (rankedProfiles || []).forEach(item => { const nextValue = metric.getValue(item); if (nextValue > value) { winner = item.profile; value = nextValue; } }); if (!winner || value <= 0) return null; return { id: metric.id, title: metric.title, statLabel: metric.statLabel, value, displayValue: metric.formatValue ? metric.formatValue(value, winner) : null, winnerId: winner.id, winnerName: winner.name || 'Unknown creator' }; }).filter(Boolean); }, [filteredProfiles, follows]); const discoveryFunCards = useMemo(() => [ creatorOfTheDayCard, creatorStoryOfTheDayCard, ...(funMetricCards || []) ].filter(Boolean), [creatorOfTheDayCard, creatorStoryOfTheDayCard, funMetricCards]); const gridDiscoverItems = useMemo(() => _interleaveFunCards( (filteredProfiles || []).map(profile => ({ kind: 'profile', profile })), hasSearchQuery ? [] : (discoveryFunCards || []).map(card => ({ kind: 'fun', card })), isDesktopViewport ? 6 : 4 ), [filteredProfiles, discoveryFunCards, isDesktopViewport, hasSearchQuery]); const gridDiscoverColumns = useMemo(() => { const cols = Array.from({ length: discoverGridColumns }, () => []); (gridDiscoverItems || []).forEach((item, i) => { cols[i % discoverGridColumns].push(item); }); return cols; }, [gridDiscoverItems, discoverGridColumns]); const listDiscoverItems = useMemo(() => _interleaveFunCards( (filteredProfiles || []).map(profile => ({ kind: 'profile', profile })), hasSearchQuery ? [] : (discoveryFunCards || []).map(card => ({ kind: 'fun', card })), isDesktopViewport ? 5 : 4 ), [filteredProfiles, discoveryFunCards, isDesktopViewport, hasSearchQuery]); const panSeedItems = useMemo(() => _interleaveFunCards( (filteredProfiles || []).map(profile => ({ kind: 'profile', profile })), hasSearchQuery ? [] : (discoveryFunCards || []).map(card => ({ kind: 'fun', card })), 5 ), [filteredProfiles, discoveryFunCards, hasSearchQuery]); const _baseCardW = isDesktopViewport ? 220 : (isTabletViewport ? 196 : 180); const _baseCardH = isDesktopViewport ? 320 : (isTabletViewport ? 284 : 260); const CARD_W = _baseCardW; const CARD_H = _baseCardH; const GAP = isDesktopViewport ? 14 : 8; const MAP_EDGE_MARGIN = 20; const AUTO_PAN_SPEED = 0.018; const normalizeMapCols = (value, forceEven) => { const cols = Math.max(1, value); return forceEven && cols % 2 !== 0 ? cols + 1 : cols; }; const getMapTileSizing = (vpW, vpH) => { const stepW = CARD_W + GAP; const stepH = CARD_H + GAP; const isMobileMapViewport = !isTabletViewport; const forceEvenCols = true; // Size the tile so one tile is still wider/taller than the viewport at the // minimum zoom level (0.5 – see _clampZoom). Otherwise the 2×2 quad tiling // used by the pan view can't cover the viewport when zoomed out, leaving // empty bands on the side the user is panning toward. const MIN_ZOOM = 0.5; const coverStepW = stepW * MIN_ZOOM; const coverStepH = stepH * MIN_ZOOM; const minCols = normalizeMapCols(Math.max(3, Math.ceil(vpW / coverStepW) + (isMobileMapViewport ? 0 : 1)), forceEvenCols); const minRows = Math.max(2, Math.ceil(vpH / coverStepH) + (isMobileMapViewport ? 0 : 1)); const maxRows = Math.max(minRows, Math.floor((isMobileMapViewport ? 2 : 2.5) * vpH / stepH)); // Mobile only needs roughly one viewport of cards plus one extra row for smooth wraps. const maxTileCards = isMobileMapViewport ? (minCols * (minRows + 1)) : Infinity; return { stepW, stepH, minCols, minRows, maxRows, maxTileCards, isMobileMapViewport, forceEvenCols }; }; const displayPanItems = useMemo(() => { const base = panSeedItems || []; if ((base || []).length === 0) return base; const ratio = CARD_H / CARD_W; const vpW = viewportWidth || 480; const vpH = hasWindow ? window.innerHeight : 800; const { minCols, minRows, maxRows, maxTileCards, isMobileMapViewport, forceEvenCols } = getMapTileSizing(vpW, vpH); let count = isMobileMapViewport ? Math.max(Math.min((base || []).length, maxTileCards), minCols * minRows) : Math.max((base || []).length, minCols * minRows); let gCols = minCols; for (let iter = 0; iter < 5; iter++) { const c = normalizeMapCols(Math.max(minCols, Math.ceil(Math.sqrt(count * ratio))), forceEvenCols); const r = Math.min(maxRows, Math.max(minRows, Math.ceil(count / c))); gCols = c; const gridTotal = c * r; if (gridTotal === count) break; count = gridTotal; } 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 gRows = Math.ceil(count / gCols); const cloneForDuplicate = (item, index) => { const virtualId = `dup-${index}`; if (item.kind === 'fun') return { ...item, _virtualId: virtualId }; return { ...item, profile: { ...item.profile, _virtualId: virtualId }, _virtualId: virtualId }; }; const slotOrder = Array.from({ length: count }, (_, i) => { const c = i % gCols; const r = Math.floor(i / gCols); const slotX = mapPanRef.current.x + c * (CARD_W + GAP) + CARD_W / 2; const slotY = mapPanRef.current.y + r * (CARD_H + GAP) + (c % 2 === 1 ? (CARD_H + GAP) / 2 : 0) + CARD_H / 2; const dx = slotX - vpW / 2; const dy = slotY - vpH / 2; return { index: i, distance: dx * dx + dy * dy }; }).sort((a, b) => a.distance - b.distance); const takeWeightedItem = (pool, desiredRating) => { let totalWeight = 0; const weights = (pool || []).map(item => { const gap = Math.abs(_getDiscoverItemRating(item) - desiredRating); const weight = Math.pow(Math.max(1, 6 - gap), 2); totalWeight += weight; return weight; }); let ticket = rand() * totalWeight; for (let i = 0; i < (pool || []).length; i++) { ticket -= weights[i]; if (ticket <= 0) { const picked = pool[i]; (pool || []).splice(i, 1); return picked; } } return pool.pop(); }; const result = new Array(count); let weightedPool = shuffle([...base]); let duplicateIndex = 0; for (let rank = 0; rank < (slotOrder || []).length; rank++) { if ((weightedPool || []).length === 0) { weightedPool = shuffle((base || []).map(item => cloneForDuplicate(item, duplicateIndex++))); } const progress = (slotOrder || []).length <= 1 ? 0 : rank / ((slotOrder || []).length - 1); const desiredRating = 5 - progress * 4; result[slotOrder[rank].index] = takeWeightedItem(weightedPool, desiredRating); } const wrap = (v, m) => ((v % m) + m) % m; const nbrs = (i) => { const r = Math.floor(i / gCols), c = i % gCols; const ns = [ wrap(r, gRows) * gCols + wrap(c - 1, gCols), wrap(r, gRows) * gCols + wrap(c + 1, gCols), wrap(r - 1, gRows) * gCols + c, wrap(r + 1, gRows) * gCols + c, ]; if (c % 2 === 0) { ns.push(wrap(r - 1, gRows) * gCols + wrap(c - 1, gCols)); ns.push(wrap(r - 1, gRows) * gCols + wrap(c + 1, gCols)); } else { ns.push(wrap(r + 1, gRows) * gCols + wrap(c - 1, gCols)); ns.push(wrap(r + 1, gRows) * gCols + wrap(c + 1, gCols)); } return (ns || []).filter(n => n < count && n !== i); }; const clash = (i) => nbrs(i).some(n => _getDiscoverItemBaseId(result[n]) === _getDiscoverItemBaseId(result[i])); for (let pass = 0; pass < 6; pass++) { let any = false; for (let i = 0; i < count; i++) { if (!clash(i)) continue; for (let a = 0; a < 50; a++) { const j = Math.floor(rand() * count); if (j === i) continue; [result[i], result[j]] = [result[j], result[i]]; if (!clash(i) && !clash(j)) { any = true; break; } [result[i], result[j]] = [result[j], result[i]]; } } if (!any) break; } return result; }, [panSeedItems, CARD_H, CARD_W, GAP, viewportWidth, hasWindow]); const gridMath = useMemo(() => { const N = Math.max(1, (displayPanItems || []).length); const vpW = viewportWidth || 480; const vpH = hasWindow ? window.innerHeight : 800; const { stepW, stepH, minCols, minRows, maxRows, forceEvenCols } = getMapTileSizing(vpW, vpH); const cols = normalizeMapCols(Math.max(minCols, Math.ceil(Math.sqrt(N * (CARD_H / CARD_W)))), forceEvenCols); const rows = Math.min(maxRows, 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, CARD_W, CARD_H, GAP, viewportWidth, hasWindow]); const { cols, rows, TILE_W, TILE_H } = gridMath; canvasTileRef.current = { w: TILE_W, h: TILE_H, pad: CARD_H + GAP }; const getCurrentDiscoverItems = useCallback(() => { if (discoverLayout === 'grid') return gridDiscoverItems || []; if (discoverLayout === 'list') return listDiscoverItems || []; return displayPanItems || []; }, [discoverLayout, displayPanItems, gridDiscoverItems, listDiscoverItems]); const getDiscoverProfileRank = useCallback((profileId) => { if (!profileId) return null; const seen = {}; let rank = 0; for (const item of getCurrentDiscoverItems() || []) { if (item?.kind !== 'profile') continue; const id = item.profile?.id; if (!id || seen[id]) continue; seen[id] = true; rank += 1; if (id === profileId) return rank; } return null; }, [getCurrentDiscoverItems]); const getCurrentGrowthContext = useCallback((overrides: any = {}) => _growthDiscoverContext({ layout: overrides.layout || discoverLayout, searchQuery, activeFilters, resultCount: (filteredProfiles || []).length, rank: overrides.rank ?? null, source: overrides.source || 'profile_card', funCardId: overrides.funCardId || null }), [activeFilters, discoverLayout, (filteredProfiles || []).length, searchQuery]); const getVisibleExposureProfileIds = useCallback(() => { const seen = {}; const ids = []; for (const item of getCurrentDiscoverItems() || []) { if (item?.kind !== 'profile') continue; const id = item.profile?.id; if (!id || seen[id]) continue; seen[id] = true; ids.push(id); if ((ids || []).length >= 12) break; } return ids; }, [getCurrentDiscoverItems]); useEffect(() => { if (view !== 'discover') return; if (searchQuery.trim().length > 0) return; const profileIds = getVisibleExposureProfileIds(); if (!(profileIds || []).length) return; const context = getCurrentGrowthContext(); const exposureKey = [ context.layout, context.searchBucket, context.filterKey, context.resultBucket, (profileIds || []).join(',') ].join('|'); if (growthSessionRef.current.seenExposureKeys[exposureKey]) return; growthSessionRef.current.seenExposureKeys[exposureKey] = true; recordGrowthEvents([{ type: GROWTH_EVENTS.EXPOSURE_BATCH, profileIds, context }]); }, [getCurrentGrowthContext, getVisibleExposureProfileIds, recordGrowthEvents, searchQuery, view]); const handleMapCardSelect = useCallback((profileId, source: any = {}) => { if (!profileId) return; const openedProfiles = growthSessionRef.current.openedProfiles || {}; const isRepeat = !!openedProfiles[profileId]; openedProfiles[profileId] = true; growthSessionRef.current.openedProfiles = openedProfiles; const context = getCurrentGrowthContext({ rank: getDiscoverProfileRank(profileId), source: source.source || 'profile_card', funCardId: source.funCardId || null }); const isFirstClick = !growthSessionRef.current.firstClickRecorded; growthSessionRef.current.firstClickRecorded = true; const dwellEvent = getProfileDwellEvent(); recordGrowthEvents([ dwellEvent, { type: GROWTH_EVENTS.PROFILE_OPEN, profileId, context, isFirstClick, isRepeat } ]); growthSessionRef.current.currentProfile = { profileId, enteredAt: Date.now(), context, followed: false }; setActiveProfileId(profileId); setView('profile_detail'); }, [getCurrentGrowthContext, getDiscoverProfileRank, getProfileDwellEvent, recordGrowthEvents]); const handleFunCardSelect = useCallback((card) => { if (!card?.winnerId) return; handleMapCardSelect(card.winnerId, { source: 'fun_card', funCardId: card.id }); }, [handleMapCardSelect]); const handleDiscoverLayoutChange = useCallback((layoutId) => { if (!layoutId || layoutId === discoverLayout) return; recordGrowthEvents([{ type: GROWTH_EVENTS.LAYOUT_SWITCH, fromLayout: discoverLayout, toLayout: layoutId, context: getCurrentGrowthContext({ layout: discoverLayout, source: 'layout_switch' }) }]); setDiscoverLayout(layoutId); }, [discoverLayout, getCurrentGrowthContext, recordGrowthEvents]); const openProfileBuilder = useCallback((profile = null, mode = 'create') => { const dwellEvent = getProfileDwellEvent(); growthSessionRef.current.builderMaxStep = 1; recordGrowthEvents([ dwellEvent, { type: GROWTH_EVENTS.BUILDER_START, mode, context: getCurrentGrowthContext({ source: mode === 'edit' ? 'profile_edit' : 'builder_cta' }) }, { type: GROWTH_EVENTS.BUILDER_STEP, step: 1 } ]); setDraftProfile(createProfileDraft(profile || {}, 'user')); setBuilderStep(1); setView('build'); }, [getCurrentGrowthContext, getProfileDwellEvent, recordGrowthEvents]); const startCreatorIntent = useCallback((intent = 'creator') => { if (!user?.id) { requestHostAuth(intent, intent === 'claim' ? 'claim_creator_profile' : 'join_creator', authGate?.returnTarget || null); return; } ensureAppUser('creator'); setAuthGate(null); openProfileBuilder(null, intent); }, [authGate, ensureAppUser, openProfileBuilder, requestHostAuth, user?.id]); useEffect(() => { if (!user?.id || !pendingAuthIntent) return; const intent = pendingAuthIntent; const returnTarget = authGate?.returnTarget || null; setPendingAuthIntent(null); setAuthGate(null); if (intent === 'creator' || intent === 'claim') { openProfileBuilder(null, intent); return; } if (returnTarget?.view) { if (returnTarget.profileId) setActiveProfileId(returnTarget.profileId); setView(returnTarget.view); } }, [authGate, openProfileBuilder, pendingAuthIntent, user?.id]); const handleBuilderContinue = useCallback(() => { const nextStep = Math.min(TOTAL_BUILDER_STEPS, builderStep + 1); if (nextStep > growthSessionRef.current.builderMaxStep) { growthSessionRef.current.builderMaxStep = nextStep; recordGrowthEvents([{ type: GROWTH_EVENTS.BUILDER_STEP, step: nextStep }]); } setBuilderStep(nextStep); }, [builderStep, recordGrowthEvents]); const recordFolioMediaOpen = useCallback((item: any = {}) => { const profileId = growthSessionRef.current.currentProfile?.profileId || activeProfileId; if (!profileId) return; const mediaKey = `${profileId}:${item.assetId || item.url || item._timestamp || item.type || 'media'}`; if (growthSessionRef.current.playedMediaKeys[mediaKey]) return; growthSessionRef.current.playedMediaKeys[mediaKey] = true; recordGrowthEvents([{ type: GROWTH_EVENTS.MEDIA_OPEN, profileId, mediaType: item.type || 'image', context: growthSessionRef.current.currentProfile?.context || getCurrentGrowthContext({ source: 'media' }) }]); }, [activeProfileId, getCurrentGrowthContext, recordGrowthEvents]); const openFolioLightbox = useCallback((item) => { recordFolioMediaOpen(item); setLightboxItem(item); }, [recordFolioMediaOpen]); // --- HIDDEN FILE INPUTS (web) --- const renderFileInputs = () => ( <> {hasWebImageUpload && ( { const f = e.target.files?.[0]; if (f) handleUploadProfilePhoto(f, photoSlotRef.current); e.target.value = ''; }} style={{ display: 'none' }} /> )} {hasWebImageUpload && ( { const f = e.target.files?.[0]; if (f) handleUploadFolioImage(f); e.target.value = ''; }} style={{ display: 'none' }} /> )} {hasWebAudioUpload && ( { const f = e.target.files?.[0]; if (f) handleUploadFolioAudio(f); e.target.value = ''; }} style={{ display: 'none' }} /> )} {hasWebVideoUpload && ( { const f = e.target.files?.[0]; if (f) handleUploadFolioVideo(f); e.target.value = ''; }} style={{ display: 'none' }} /> )} ); // --- MEDIA TYPE HELPERS --- const mediaTypeIcon = (type) => { if (type === 'audio') return '♫'; if (type === 'video') return '▶'; return ''; }; const mediaTypeLabel = (type) => { if (type === 'audio') return 'Audio'; if (type === 'video') return 'Video'; return 'Photo'; }; const folioSummary = (folio) => { const items = normalizeFolio(folio); if ((items || []).length === 0) return ''; const images = (items || []).filter(i => i.type === 'image').length; const audio = (items || []).filter(i => i.type === 'audio').length; const video = (items || []).filter(i => i.type === 'video').length; const parts = []; if (images) parts.push(`${images} photo${images !== 1 ? 's' : ''}`); if (audio) parts.push(`${audio} audio`); if (video) parts.push(`${video} video`); return (parts || []).join(', '); }; // --- RENDER HELPERS --- const getAuthGateCopy = (reason = 'general') => { const copy = { story: { eyebrow: 'Creator Stories', title: 'Sign up as a regular user to read creator stories', body: 'You do not need to be a creator. A regular A1Zap account unlocks full creator stories, saved creators, and story updates.' }, tips: { eyebrow: 'Tips & Tricks', title: 'Sign up as a regular user to view tips from UTS creators', body: 'Get full advice, bookmark useful tips, and save creator pages without making a public creator profile.' }, save_creator: { eyebrow: 'Save Creators', title: 'Sign up as a regular user to save creators', body: 'Keep a private shortlist of creators to revisit. Your regular account stays separate from creator profiles.' }, follow_story: { eyebrow: 'Follow Story Updates', title: 'Sign up as a regular user to follow story updates', body: 'Follow creator stories and come back to new updates without joining as a creator.' }, saved_content: { eyebrow: 'Your Saves', title: 'Sign up as a regular user to see saved creators and tips', body: 'Unlock saved creators, followed stories, and bookmarked tips with a regular A1Zap account.' }, join_creator: { eyebrow: 'Join As Creator', title: 'Sign in to create your public creator profile', body: 'This path is for UTS creators who want to be discovered in the index.' }, claim_creator_profile: { eyebrow: 'Claim Creator Profile', title: 'Sign in to claim your creator profile', body: 'Use this if a creator page already represents you and you want to manage it.' }, general: { eyebrow: 'Regular Account', title: 'Sign up as a regular user to unlock creator stories and tips', body: 'Read full creator stories, save creators, follow story updates, and view tips from UTS creators.' } }; return copy[reason] || copy.general; }; const renderAuthChoice = () => { if (!authGate) return null; const copy = getAuthGateCopy(authGate.reason); const waiting = !!authGate.waitingForAuth; const choiceButton = (label, onClick, primary = false) => ( ); return ( ); }; const renderHeader = () => (

UTS CREATOR INDEX

Discover the people creating at UTS

{isAdmin && (

setView('admin')} style={{ position: 'relative', width: 36, height: 36, borderRadius: '50%', background: colors.secondary, color: colors.primary, border: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', fontSize: 16, boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)' }}> ⚙ {(pendingProfiles || []).length > 0 && (

{(pendingProfiles || []).length}

)}

)} {hasProfile ? ( <> {myProfile?.status === 'archived' && (

{ setActiveProfileId(myProfile.id); setView('my_profile'); }} style={{ background: '#F3F4F6', border: '1px solid #9CA3AF', padding: '6px 12px', borderRadius: 100, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, fontWeight: 700, color: '#374151' }}> 📦 Archived

)} {myProfile?.status === 'pending' && (

{ setActiveProfileId(myProfile.id); setView('my_profile'); }} style={{ background: '#FFF8E1', border: '1px solid #FFE082', padding: '6px 12px', borderRadius: 100, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, fontWeight: 700, color: '#92400E' }}> ⏳ Pending

)}

{ setView('my_profile'); setActiveProfileId(myProfile.id); }} style={{ width: 36, height: 36, borderRadius: '50%', overflow: 'hidden', border: `2px solid ${colors.surface}`, cursor: 'pointer', background: colors.white, boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)' }}>

) : user?.id ? ( ) : ( )}

); const renderConfetti = () => ( showConfetti && (

🌿

Welcome to the
Community

) ); const renderSubmitted = () => ( showSubmitted && (

📋

Profile Submitted

An admin will review your profile shortly. You'll appear in the index once approved.

) ); // --- FOLIO GALLERY (mixed media) --- const renderFolioGallery = (rawFolio, editable) => { const items = normalizeFolio(rawFolio); if ((items || []).length === 0 && !editable) return null; const imageItems = (items || []).filter(i => i.type === 'image'); const audioItems = (items || []).filter(i => i.type === 'audio'); const videoItems = (items || []).filter(i => i.type === 'video'); const bBorder = '2px solid #000'; const bShadow = '4px 4px 0px #000'; return (

FOLIO {(items || []).length > 0 && (

{folioSummary(rawFolio).toUpperCase()}

)}

{((imageItems || []).length > 0 || editable) && (

0 || (videoItems || []).length > 0) ? 16 : 0 }}> {(imageItems || []).map((item, i) => { const globalIdx = (items || []).indexOf(item); return (

!editable && openFolioLightbox(item)} style={{ aspectRatio: (imageItems || []).length === 1 && !editable ? '16/9' : '1', gridColumn: (i === 0 && (imageItems || []).length === 3 && !editable) ? '1 / -1' : undefined, border: bBorder, boxShadow: bShadow, overflow: 'hidden', position: 'relative', background: '#fff', cursor: editable ? 'default' : 'pointer' }}>

{editable && ( )}

); })}

)} {(videoItems || []).map((item, i) => { const globalIdx = (items || []).indexOf(item); const src = getPlaybackUrl(item); return (

{src ? (

); })} {(audioItems || []).map((item, i) => { const globalIdx = (items || []).indexOf(item); const src = getPlaybackUrl(item); return (

♫

AUDIO CLIP

{src ? (

{editable && ( )}

); })} {editable && (items || []).length < MAX_FOLIO_ITEMS && (

{canUploadImage && ( )} {canUploadAudio && ( )} {canUploadVideo && ( )}

)}

); }; // --- LIGHTBOX (image + video) --- const renderLightbox = () => { if (!lightboxItem) return null; return (

setLightboxItem(null)} style={{ position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(0,0,0,0.9)', backdropFilter: 'blur(20px)', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', padding: 20 }}> {lightboxItem.type === 'video' ? (

); }; useEffect(() => { if (!hasWindow) return undefined; let rafId = null; const handleResize = () => { if (rafId) return; rafId = requestAnimationFrame(() => { rafId = null; setViewportWidth(window.innerWidth); }); }; handleResize(); window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); if (rafId) cancelAnimationFrame(rafId); }; }, [hasWindow]); useEffect(() => { if (view !== 'discover' || discoverLayout !== 'pan' || 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, discoverLayout, AUTO_PAN_SPEED]); 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, discoverLayout]); useEffect(() => { if (view !== 'discover' || discoverLayout !== 'pan') return; scheduleMapTransform(); }, [cardZoom, view, discoverLayout, TILE_W, TILE_H, CARD_H]); // --- PINCH/WHEEL ZOOM LISTENERS --- useEffect(() => { const el = discoverContainerRef.current; if (!el || view !== 'discover') return; const opts = { passive: false }; el.addEventListener('touchstart', handlePinchStart, opts); el.addEventListener('touchmove', handlePinchMove, opts); el.addEventListener('touchend', handlePinchEnd); el.addEventListener('touchcancel', handlePinchEnd); el.addEventListener('wheel', handleWheelZoom, opts); return () => { el.removeEventListener('touchstart', handlePinchStart, opts); el.removeEventListener('touchmove', handlePinchMove, opts); el.removeEventListener('touchend', handlePinchEnd); el.removeEventListener('touchcancel', handlePinchEnd); el.removeEventListener('wheel', handleWheelZoom, opts); }; }, [view]); // --- ADMIN PANEL VIEW --- if (view === 'admin') { if (!isAdmin) { setView('discover'); return null; } const adminEditorWidth = '100%'; const allRealProfiles = (profiles || []).filter(p => !p.isDemo); const approvedProfiles = (allRealProfiles || []).filter(p => getProfileStatus(p) === 'approved'); const adminStatusMeta = { approved: { label: 'Approved', bg: '#E9FBEA', border: '#22C55E', color: '#166534' }, pending: { label: 'Pending', bg: '#FFF4D6', border: '#F59E0B', color: '#92400E' }, archived: { label: 'Archived', bg: '#F3F4F6', border: '#6B7280', color: '#374151' } }; const adminListProfiles = (allRealProfiles || []).filter((profile) => { const status = getProfileStatus(profile); if (adminStatusFilter !== 'all' && status !== adminStatusFilter) return false; const haystack = [ profile.name, profile.handle, _resolveProfileFaculty(profile), profile.year, profile.bio, profile.socials?.ig, profile.socials?.tt, profile.socials?.yt, (profile.tags || []).join(' ') ].filter(Boolean).join(' ').toLowerCase(); return !adminSearchQuery || (haystack || []).includes(adminSearchQuery.toLowerCase()); }).sort((a, b) => (b._timestamp || b.createdAt || 0) - (a._timestamp || a.createdAt || 0)); const adminDraftPreview = { ...(adminEditorMode === 'edit' ? ((profiles || []).find(p => p.id === adminSelectedProfileId) || {}) : {}), ...adminDraft }; const adminMetrics = getProfileSystemStats(adminDraftPreview); const currentEditorStatus = adminStatusMeta[adminMetrics.status] || adminStatusMeta.approved; const adminSummaryCards = [ { id: 'total', label: 'Total profiles', value: (allRealProfiles || []).length, tone: colors.primary }, { id: 'pending', label: 'Pending', value: (pendingProfiles || []).length, tone: adminStatusMeta.pending.border }, { id: 'approved', label: 'Approved', value: (approvedProfiles || []).length, tone: adminStatusMeta.approved.border }, { id: 'archived', label: 'Archived', value: (archivedProfiles || []).length, tone: adminStatusMeta.archived.border } ]; const growthSummary = _buildGrowthAnalyticsSummary(growthAnalytics, profiles); const growthTotals = growthSummary.totals || {}; const growthBuilderSteps = Object.entries(growthTotals.builderStepMax || {}); const growthSearchBuckets = Object.entries(growthSummary.searchBuckets || {}); const growthSummaryCards = [ { id: 'sessions', label: 'Sessions', value: _growthNumber(growthTotals.sessions), helper: 'App opens tracked locally' }, { id: 'firstClicks', label: 'First clicks', value: _growthNumber(growthTotals.firstClicks), helper: `${_growthRate(growthTotals.firstClicks, growthTotals.sessions)} of sessions` }, { id: 'opens', label: 'Profile opens', value: _growthNumber(growthTotals.profileOpens), helper: `${_growthNumber(growthTotals.repeatProfileOpens)} repeat opens` }, { id: 'follows', label: 'Follows', value: _growthNumber(growthTotals.follows), helper: `${_growthRate(growthTotals.follows, growthTotals.profileOpens)} open → follow` }, { id: 'builder', label: 'Builder starts', value: _growthNumber(growthTotals.builderStarts), helper: `${_growthNumber(growthTotals.builderSubmits)} submits` }, { id: 'media', label: 'Media opens', value: _growthNumber(growthTotals.mediaOpens), helper: 'Folio image/audio/video engagement' } ]; const renderGrowthList = (items, emptyLabel, valueLabel) => ( (items || []).length ? (

{(items || []).map(item => (

{item.name || item.label}

{item.opens !== undefined && (

{item.opens} opens · {item.follows} follows · {item.impressions} impressions

)}

{item.value}

))}

) : (

{emptyLabel}

) ); const editorInput = { width: '100%', border: `1px solid ${colors.border}`, borderRadius: 14, padding: '14px 16px', background: colors.surface, fontSize: 14, color: colors.primary, outline: 'none', fontFamily: fonts.sans }; const adminFieldLabel = { display: 'block', fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase', color: colors.accent, fontWeight: 700, marginBottom: 8 }; const runAdminEditorAction = (forcedStatus) => { const saved = handleAdminSaveProfile(forcedStatus); if (!saved) return; closeAdminEditor(); }; return (

Admin Control

Full access to creator cards, moderation, and stored profile stats.

{(adminSummaryCards || []).map(card => (

{card.value}

{card.label}

))}

Developer analytics

Growth Signals

Aggregate-only counters for discovery, follows, builder conversion, and profile engagement. This panel is only rendered inside the admin menu.

{(growthSummaryCards || []).map(card => (

{card.value}

{card.label}

{card.helper}

))}

{(growthSummary.layouts || []).map(layout => (

{layout.id}

{_growthRate(layout.follows, layout.opens)} follow rate

{_growthNumber(layout.impressions)} seen {_growthNumber(layout.firstClicks)} first {_growthNumber(layout.opens)} opens {_growthNumber(layout.follows)} follows

))}

Builder funnel steps

{(growthBuilderSteps || []).map(([step, count]) => (

Step {step}

{_growthNumber(count)}

))}

Search intent on profile opens

{(growthSearchBuckets || []).map(([bucket, count]) => (

{bucket}

{_growthNumber(count)}

))}

First-click leaders

{renderGrowthList(growthSummary.topFirstClicks, 'No first clicks recorded yet.', 'first')}

Open → follow conversion

{renderGrowthList(growthSummary.topFollowConversion, 'No follow conversions recorded yet.', 'follow-rate')}

Longest average dwell

{renderGrowthList(growthSummary.topDwell, 'No profile dwell recorded yet.', 'dwell')}

Filter combos that opened profiles

{renderGrowthList(growthSummary.filterCombos, 'No filter-led opens recorded yet.', 'filters')}

🔍 setAdminSearchQuery(e.target.value)} placeholder="Search profiles, socials, tags..." style={{ border: 'none', background: 'transparent', width: '100%', fontSize: 14, outline: 'none', color: colors.primary }} />

{[ { id: 'all', label: 'All', count: (allRealProfiles || []).length }, { id: 'pending', label: 'Pending', count: (pendingProfiles || []).length }, { id: 'approved', label: 'Approved', count: (approvedProfiles || []).length }, { id: 'archived', label: 'Archived', count: (archivedProfiles || []).length } ].map(filter => { const active = adminStatusFilter === filter.id; return ( ); })}

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

⌁

No matching creator pages

Adjust the filters or create a new profile.

) : ( (adminListProfiles || []).map(profile => { const status = getProfileStatus(profile); const statusStyle = adminStatusMeta[status] || adminStatusMeta.approved; const metrics = getProfileSystemStats(profile); return (

{(getProfilePhotos(profile)[0] || profile.photoUrl) ? (

) : (

{(profile.name || '?')[0]}

)}

{profile.name}

@{getProfileHandle(profile) || 'manual-profile'}{_resolveProfileFaculty(profile) ? ` · ${_resolveProfileFaculty(profile)}` : ''}{profile.year ? ` · ${_formatStudyYear(profile.year)}` : ''}

67 · {_normalizeSixtySevenRating(profile.sixtySevenRating)} {statusStyle.label}

{profile.bio && (

{(profile.bio || '').length > 120 ? `${profile.bio.slice(0, 120)}...` : profile.bio}

)}

{(profile.tags || []).map(tag => ( {tag} ))}

{metrics.inAppFollowers} app followers {metrics.followingCount} following {metrics.mutualCount} mutuals

{status === 'pending' && ( )} {status !== 'archived' && ( )} {status === 'archived' && ( )}

); }) )}

{adminEditorOpen && (

{renderFileInputs()}

{adminEditorMode === 'create' ? 'Create Profile' : 'Edit Profile'}

{adminDraft.name || 'Creator Draft'}

{currentEditorStatus.label}

{[ { label: 'Created', value: formatAdminTimestamp(adminMetrics.createdAt) }, { label: 'Updated', value: formatAdminTimestamp(adminMetrics.updatedAt) }, { label: 'App followers', value: adminMetrics.inAppFollowers }, { label: 'Following', value: adminMetrics.followingCount }, { label: 'Mutuals', value: adminMetrics.mutualCount } ].map(item => (

{item.label}

{item.value}

))}

Quick JSON Import

Paste one creator object or multiple objects. We will map `username`, `full_name`, `followers`, `bio`, and `67 rating`.

{
                        setAdminImportText(e.target.value);
                        if (adminImportError) setAdminImportError('');
                        if (adminImportMessage) setAdminImportMessage('');
                      }}
                      style={{ ...editorInput, minHeight: 130, resize: 'vertical', marginBottom: 12, fontFamily: '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace' }}
                      placeholder={`{\n  "username": "b.ellatran",\n  "full_name": "bella",\n  "followers": 1459,\n  "67 rating": 4,\n  "bio": "uts\\nfashion, food and all"\n}`}
                    />
                    <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
                      <button
                        onClick={handleAdminImportProfiles}
                        style={{ border: 'none', background: colors.primary, color: colors.base, borderRadius: 999, padding: '10px 16px', fontSize: 11, fontWeight: 800, letterSpacing: '0.06em', textTransform: 'uppercase', cursor: 'pointer' }}
                      >
                        Import JSON
                      </button>
                      <button
                        onClick={() => {
                          setAdminImportText('');
                          setAdminImportError('');
                          setAdminImportMessage('');
                        }}
                        style={{ border: `1px solid ${colors.border}`, background: colors.surface, color: colors.primary, borderRadius: 999, padding: '10px 16px', fontSize: 11, fontWeight: 800, letterSpacing: '0.06em', textTransform: 'uppercase', cursor: 'pointer' }}
                      >
                        Clear
                      </button>
                      {adminImportMessage && (
                        <span style={{ fontSize: 12, color: colors.success, fontWeight: 700 }}>
                          {adminImportMessage}
                        </span>
                      )}
                      {adminImportError && (
                        <span style={{ fontSize: 12, color: colors.highlight, fontWeight: 700 }}>
                          {adminImportError}
                        </span>
                      )}
                    </div>
                  </div>
                </div>

<div style={{ marginBottom: 22 }}>
                  <label style={adminFieldLabel}>Creator Photos (up to 3)</label>
                  {(() => {
                    const adminPhotos = (adminDraft.photoUrls || []).filter(Boolean);
                    return (
                      <>
                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10, marginBottom: 12 }}>
                          {[0, 1, 2].map(idx => {
                            const url = adminPhotos[idx];
                            return (
                              <div key={idx} onClick={() => { if (!url) triggerProfilePhotoUpload(idx); }} style={{
                                height: 180, borderRadius: 16, border: `1px dashed ${colors.border}`,
                                background: url ? colors.secondary : colors.base,
                                display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden',
                                cursor: canUploadImage ? 'pointer' : 'default', position: 'relative'
                              }}>
                                {url ? (
                                  <>
                                    <img src={url} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                                    <div style={{ position: 'absolute', bottom: 8, right: 8, display: 'flex', gap: 4 }}>
                                      <button onClick={(e) => { e.stopPropagation(); triggerProfilePhotoUpload(idx); }} style={{ background: colors.surface, borderRadius: 999, padding: '5px 10px', fontSize: 9, fontWeight: 800, border: `1px solid ${colors.border}`, cursor: 'pointer', letterSpacing: '0.04em' }}>REPLACE</button>
                                      <button onClick={(e) => { e.stopPropagation(); removeProfilePhoto(idx); }} style={{ background: colors.highlight, color: '#fff', borderRadius: 999, padding: '5px 10px', fontSize: 9, fontWeight: 800, border: 'none', cursor: 'pointer' }}>×</button>
                                    </div>
                                  </>
                                ) : (
                                  <div style={{ textAlign: 'center', padding: 12 }}>
                                    <div style={{ fontSize: 24, marginBottom: 4 }}>{uploading && uploadingType === 'profilePhoto' ? '...' : '+'}</div>
                                    <div style={{ fontSize: 10, fontWeight: 700, color: colors.accent }}>
                                      {idx === 0 ? 'Main' : 'Optional'}
                                    </div>
                                  </div>
                                )}
                              </div>
                            );
                          })}
                        </div>
                        <div style={{ fontSize: 11, color: colors.accent, marginBottom: 6 }}>{(adminPhotos || []).length}/3 photos — cards will rotate through them</div>
                        {[0, 1, 2].map(idx => (
                          <div key={idx} style={{ marginBottom: 6 }}>
                            <label style={{ ...adminFieldLabel, fontSize: 9, marginBottom: 4 }}>Photo URL {idx + 1}</label>
                            <input
                              value={(adminDraft.photoUrls || [])[idx] || ''}
                              onChange={e => {
                                const urls = [...(adminDraft.photoUrls || [])];
                                while ((urls || []).length <= idx) urls.push('');
                                urls[idx] = e.target.value;
                                setAdminDraft({ ...adminDraft, photoUrls: urls, photoUrl: (urls || []).filter(Boolean)[0] || '' });
                              }}
                              style={editorInput} placeholder="https://..."
                            />
                          </div>
                        ))}
                      </>
                    );
                  })()}
                </div>

<div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                  <div style={{ display: 'none' }}>
                    <label style={adminFieldLabel}>Photo URL (legacy)</label>
                    <input value={adminDraft.photoUrl} onChange={e => setAdminDraft({ ...adminDraft, photoUrl: e.target.value })} style={editorInput} placeholder="https://..." />
                  </div>

<div>
                    <label style={adminFieldLabel}>Name</label>
                    <input value={adminDraft.name} onChange={e => setAdminDraft({ ...adminDraft, name: e.target.value })} style={editorInput} placeholder="Full name" />
                  </div>

<div>
                    <label style={adminFieldLabel}>Handle</label>
                    <input value={adminDraft.handle} onChange={e => {
                      const newHandle = e.target.value.replace(/^@/, '');
                      setAdminDraft(prev => ({
                        ...prev,
                        handle: newHandle
                      }));
                    }} style={editorInput} placeholder="creatorhandle" />
                  </div>

<div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 12 }}>
                    <div>
                      <label style={adminFieldLabel}>Faculty</label>
                      <select value={adminDraft.faculty || ''} onChange={e => setAdminDraft({ ...adminDraft, faculty: e.target.value })} style={editorInput}>
                        <option value="">Not specified</option>
                        {(UTS_FACULTIES || []).map(f => (
                          <option key={f} value={f}>{f}</option>
                        ))}
                      </select>
                    </div>
                    <div>
                      <label style={adminFieldLabel}>Year</label>
                      <select value={adminDraft.year} onChange={e => setAdminDraft({ ...adminDraft, year: e.target.value })} style={editorInput}>
                        {(STUDY_YEAR_OPTIONS || []).map(y => (
                          <option key={y} value={y}>{y}</option>
                        ))}
                      </select>
                    </div>
                  </div>

<div>
                    <label style={adminFieldLabel}>Bio</label>
                    <textarea value={adminDraft.bio} onChange={e => setAdminDraft({ ...adminDraft, bio: e.target.value })} style={{ ...editorInput, minHeight: 110, resize: 'vertical', lineHeight: 1.5 }} placeholder="Short overview for the creator card..." />
                  </div>

<div>
                    <label style={adminFieldLabel}>Creator Story</label>
                    <textarea value={adminDraft.creatorStory || ''} onChange={e => setAdminDraft({ ...adminDraft, creatorStory: e.target.value })} style={{ ...editorInput, minHeight: 130, resize: 'vertical', lineHeight: 1.5 }} placeholder="A manually authored story about their creator journey..." />
                  </div>

<div>
                    <label style={adminFieldLabel}>Tips & Tricks</label>
                    <textarea value={formatTextList(adminDraft.creatorTips)} onChange={e => setAdminDraft({ ...adminDraft, creatorTips: normaliseTextList(e.target.value) })} style={{ ...editorInput, minHeight: 110, resize: 'vertical', lineHeight: 1.5 }} placeholder={'One tip per line\nPost consistently around class breaks\nBatch content on Sundays'} />
                  </div>

<div style={{ display: 'grid', gridTemplateColumns: isTabletViewport ? '1fr 1fr' : '1fr', gap: 12 }}>
                    <div>
                      <label style={adminFieldLabel}>Story Featured</label>
                      <button
                        onClick={() => setAdminDraft({ ...adminDraft, storyFeatured: !adminDraft.storyFeatured })}
                        style={{ ...editorInput, display: 'flex', alignItems: 'center', justifyContent: 'space-between', cursor: 'pointer' }}
                      >
                        <span>{adminDraft.storyFeatured ? 'Featured in stories' : 'Standard story'}</span>
                        <span style={{ fontWeight: 800 }}>{adminDraft.storyFeatured ? 'ON' : 'OFF'}</span>
                      </button>
                    </div>
                    <div>
                      <label style={adminFieldLabel}>Story Rank</label>
                      <input value={adminDraft.storyRank} onChange={e => setAdminDraft({ ...adminDraft, storyRank: e.target.value.replace(/[^0-9]/g, '') })} inputMode="numeric" style={editorInput} placeholder="Optional ranking" />
                    </div>
                  </div>

<div>
                    <label style={adminFieldLabel}>Tags</label>
                    {(adminDraft.tags || []).length > 0 && (
                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 10 }}>
                        {(adminDraft.tags || []).map(tag => (
                          <span key={tag} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, background: colors.primary, color: colors.base, borderRadius: 999, padding: '7px 10px 7px 12px', fontSize: 11, fontWeight: 800 }}>
                            {tag}
                            <button onClick={() => setAdminDraft({ ...adminDraft, tags: (adminDraft.tags || []).filter(t => t !== tag) })} style={{ background: 'none', border: 'none', color: colors.base, cursor: 'pointer', fontSize: 14, lineHeight: 1, padding: 0, opacity: 0.7 }}>×</button>
                          </span>
                        ))}
                      </div>
                    )}
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 10 }}>
                      {(ALL_TAGS || []).filter(tag => !(adminDraft.tags || []).includes(tag)).map(tag => (
                        <button
                          key={tag}
                          onClick={() => setAdminDraft({ ...adminDraft, tags: [...(adminDraft.tags || []), tag] })}
                          style={{
                            border: `1px solid ${colors.border}`,
                            background: colors.surface,
                            color: colors.primary,
                            borderRadius: 999,
                            padding: '7px 12px',
                            fontSize: 11,
                            fontWeight: 700,
                            cursor: 'pointer'
                          }}
                        >
                          + {tag}
                        </button>
                      ))}
                    </div>
                    <div style={{ display: 'flex', gap: 8 }}>
                      <input
                        value={adminCustomTagInput}
                        onChange={e => setAdminCustomTagInput(e.target.value)}
                        onKeyDown={e => {
                          if (e.key === 'Enter' && adminCustomTagInput.trim()) {
                            const newTag = adminCustomTagInput.trim();
                            if (!(adminDraft.tags || []).includes(newTag)) {
                              setAdminDraft({ ...adminDraft, tags: [...(adminDraft.tags || []), newTag] });
                            }
                            setAdminCustomTagInput('');
                          }
                        }}
                        style={{ ...editorInput, flex: 1 }}
                        placeholder="Add custom tag..."
                      />
                      <button
                        onClick={() => {
                          if (adminCustomTagInput.trim()) {
                            const newTag = adminCustomTagInput.trim();
                            if (!(adminDraft.tags || []).includes(newTag)) {
                              setAdminDraft({ ...adminDraft, tags: [...(adminDraft.tags || []), newTag] });
                            }
                            setAdminCustomTagInput('');
                          }
                        }}
                        style={{ border: `1px solid ${colors.border}`, background: colors.primary, color: colors.base, borderRadius: 14, padding: '10px 16px', fontSize: 11, fontWeight: 800, cursor: 'pointer', whiteSpace: 'nowrap' }}
                      >
                        Add
                      </button>
                    </div>
                  </div>

<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                    <div>
                      <label style={adminFieldLabel}>Instagram</label>
                      <input value={adminDraft.socials.ig} onChange={e => setAdminDraft({ ...adminDraft, socials: { ...adminDraft.socials, ig: e.target.value } })} style={editorInput} placeholder="@instagram" />
                    </div>
                    <div>
                      <label style={adminFieldLabel}>TikTok</label>
                      <input value={adminDraft.socials.tt} onChange={e => setAdminDraft({ ...adminDraft, socials: { ...adminDraft.socials, tt: e.target.value } })} style={editorInput} placeholder="@tiktok" />
                    </div>
                  </div>

<div>
                    <label style={adminFieldLabel}>YouTube</label>
                    <input value={adminDraft.socials.yt} onChange={e => setAdminDraft({ ...adminDraft, socials: { ...adminDraft.socials, yt: e.target.value } })} style={editorInput} placeholder="Channel or handle" />
                  </div>

<div>
                    <label style={adminFieldLabel}>Followers</label>
                    <input value={adminDraft.followerCount} onChange={e => setAdminDraft({ ...adminDraft, followerCount: e.target.value.replace(/[^0-9]/g, '') })} inputMode="numeric" style={editorInput} placeholder="0" />
                  </div>

<div>
                    <label style={adminFieldLabel}>67 rating</label>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, minmax(0, 1fr))', gap: 8 }}>
                      {(SIXTY_SEVEN_RATING_OPTIONS || []).map(rating => {
                        const active = _normalizeSixtySevenRating(adminDraft.sixtySevenRating) === rating;
                        return (
                          <button
                            key={rating}
                            type="button"
                            onClick={() => setAdminDraft({ ...adminDraft, sixtySevenRating: rating })}
                            aria-pressed={active}
                            style={{
                              border: active ? `2px solid ${colors.primary}` : `1px solid ${colors.border}`,
                              background: active ? colors.primary : colors.surface,
                              color: active ? colors.base : colors.primary,
                              borderRadius: 14,
                              padding: '12px 8px',
                              fontSize: 14,
                              fontWeight: 900,
                              cursor: 'pointer',
                              fontFamily: fonts.sans,
                              boxShadow: active ? '0 5px 0 rgba(0,0,0,0.12)' : 'none'
                            }}
                          >
                            {rating}
                          </button>
                        );
                      })}
                    </div>
                  </div>

<div>
                    <label style={adminFieldLabel}>Open To Collabs</label>
                    <button
                      onClick={() => setAdminDraft({ ...adminDraft, openToCollabs: !adminDraft.openToCollabs })}
                      style={{
                        ...editorInput,
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                        cursor: 'pointer'
                      }}
                    >
                      <span>{adminDraft.openToCollabs ? 'Available' : 'Not available'}</span>
                      <span style={{ fontWeight: 800 }}>{adminDraft.openToCollabs ? 'ON' : 'OFF'}</span>
                    </button>
                  </div>

<div>
                    <label style={adminFieldLabel}>Open To Paid Work</label>
                    <button
                      onClick={() => setAdminDraft({ ...adminDraft, openToPaidWork: !adminDraft.openToPaidWork })}
                      style={{ ...editorInput, display: 'flex', alignItems: 'center', justifyContent: 'space-between', cursor: 'pointer' }}
                    >
                      <span>{adminDraft.openToPaidWork ? 'Available for paid work' : 'Not listing paid work'}</span>
                      <span style={{ fontWeight: 800 }}>{adminDraft.openToPaidWork ? 'ON' : 'OFF'}</span>
                    </button>
                  </div>

<div>
                    <label style={adminFieldLabel}>Preferred Collab Types</label>
                    <textarea value={formatTextList(adminDraft.preferredCollabTypes)} onChange={e => setAdminDraft({ ...adminDraft, preferredCollabTypes: normaliseTextList(e.target.value) })} style={{ ...editorInput, minHeight: 90, resize: 'vertical', lineHeight: 1.5 }} placeholder={'One per line\nPaid brand shoots\nCampus events\nStudy content swaps'} />
                  </div>

<div>
                    <label style={adminFieldLabel}>Rate Range</label>
                    <input value={adminDraft.rateRange || ''} onChange={e => setAdminDraft({ ...adminDraft, rateRange: e.target.value })} style={editorInput} placeholder="$100-$250 per post, negotiable..." />
                  </div>

</div>
              </div>

<div style={{ position: 'fixed', bottom: 0, left: 0, right: 0, display: 'flex', justifyContent: 'center', pointerEvents: 'none' }}>
                <div style={{ width: '100%', maxWidth: adminEditorWidth, background: colors.surface, borderTop: `1px solid ${colors.border}`, padding: '14px 20px', display: 'flex', gap: 8, flexWrap: 'wrap', pointerEvents: 'auto', borderRadius: 0, margin: '0' }}>
                  <button onClick={closeAdminEditor} style={{ flex: 1, minWidth: 90, border: `1px solid ${colors.border}`, background: colors.surface, color: colors.primary, borderRadius: 999, padding: '12px 14px', fontSize: 11, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.06em', cursor: 'pointer' }}>
                    Cancel
                  </button>
                  {adminEditorMode === 'edit' && adminMetrics.status === 'pending' && (
                    <button onClick={() => runAdminEditorAction('approved')} style={{ flex: 1, minWidth: 90, border: 'none', background: adminStatusMeta.approved.border, color: colors.white, borderRadius: 999, padding: '12px 14px', fontSize: 11, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.06em', cursor: 'pointer' }}>
                      Approve
                    </button>
                  )}
                  {adminEditorMode === 'edit' && adminMetrics.status !== 'archived' && (
                    <button onClick={() => runAdminEditorAction('archived')} style={{ flex: 1, minWidth: 90, border: 'none', background: colors.primary, color: colors.base, borderRadius: 999, padding: '12px 14px', fontSize: 11, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.06em', cursor: 'pointer' }}>
                      Archive
                    </button>
                  )}
                  {adminEditorMode === 'edit' && adminMetrics.status === 'archived' && (
                    <button onClick={() => runAdminEditorAction(adminDraft.archivedFromStatus || 'approved')} style={{ flex: 1, minWidth: 90, border: 'none', background: adminStatusMeta.approved.bg, color: adminStatusMeta.approved.color, borderRadius: 999, padding: '12px 14px', fontSize: 11, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.06em', cursor: 'pointer' }}>
                      Restore
                    </button>
                  )}
                  <button onClick={() => runAdminEditorAction()} style={{ flex: 1.2, minWidth: 120, border: 'none', background: colors.highlight, color: colors.white, borderRadius: 999, padding: '12px 16px', fontSize: 11, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.06em', cursor: 'pointer' }}>
                    {adminEditorMode === 'create' ? 'Create Profile' : 'Save Changes'}
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}
        </div>
      </div>
    );
  }

// --- BUILDER VIEW ---
  if (view === 'build') {
    const brutalShadow = '4px 4px 0px #000';
    const brutalBorder = '2px solid #000';
    const bgCream = '#FFFFFF';
    const bgYellow = '#E8EDFE';
    const bgGreen = '#000000';

const stepTitle = { 1: 'CREATOR_CARD', 2: 'THE_HANDLE', 3: 'THE_STATS', 4: 'THE_VIBE', 5: 'THE_DETAILS' };
    const stepSubtitle = {
      1: 'Your hero shot and name — this is the first thing people see.',
      2: 'Where people find you. Drop your socials.',
      3: 'Your numbers. Rough counts are fine.',
      4: 'Bio, tags, and the energy you bring.',
      5: 'Your uni life details.'
    };

const brutalInput = { width: '100%', background: '#fff', border: brutalBorder, padding: '14px 16px', fontSize: 16, fontFamily: fonts.sans, color: '#000', outline: 'none', boxShadow: '2px 2px 0 #000' };

return (
      <div style={{ minHeight: '100dvh', background: bgCream, color: '#000', fontFamily: 'Inter, sans-serif', padding: isTabletViewport ? '28px 0 40px' : '0' }}>
        <div style={{ ...desktopShellStyle, background: bgCream, position: 'relative', overflowX: 'hidden', paddingBottom: 120 }}>
        {renderFileInputs()}

{/* Header */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `16px ${contentPaddingX}px`, borderBottom: brutalBorder, background: bgCream, zIndex: 10, position: 'relative' }}>
          <button onClick={() => setView('discover')} style={{ background: 'none', border: 'none', fontSize: 24, cursor: 'pointer', color: '#000', fontWeight: 900 }}>←</button>
          <div style={{ fontWeight: 900, fontSize: 16, letterSpacing: '0.05em' }}>BUILD_PROFILE</div>
          <span style={{ fontSize: 12, fontWeight: 800 }}>{builderStep}/{TOTAL_BUILDER_STEPS}</span>
        </div>

{/* Progress Bar */}
        <div style={{ display: 'flex', gap: 4, padding: `0 ${contentPaddingX}px`, marginTop: 12, marginBottom: 24 }}>
          {Array.from({ length: TOTAL_BUILDER_STEPS }, (_, i) => (
            <div key={i} style={{ flex: 1, height: 6, background: i < builderStep ? '#000' : '#ddd', border: '1px solid #000', transition: 'background 0.3s' }} />
          ))}
        </div>

<div style={{ padding: `0 ${contentPaddingX}px` }}>
          {/* Step Header */}
          <div style={{ marginBottom: 28 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
              <div style={{ width: 8, height: 8, background: '#000', borderRadius: '50%' }} />
              <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.05em' }}>{stepTitle[builderStep]}</span>
            </div>
            <h2 style={{ fontFamily: fonts.sans, fontSize: 32, fontWeight: 900, margin: 0, textTransform: 'uppercase', lineHeight: 0.95, marginBottom: 8 }}>
              {stepTitle[builderStep].replace('_', ' ')}
            </h2>
            <p style={{ fontSize: 13, color: '#555', fontWeight: 600, margin: 0, lineHeight: 1.5 }}>
              {stepSubtitle[builderStep]}
            </p>
          </div>

{/* STEP 1 — Photos + Name */}
          {builderStep === 1 && (() => {
            const draftPhotos = (draftProfile.photoUrls || []).filter(Boolean);
            return (
            <div style={{ display: 'grid', gridTemplateColumns: isDesktopViewport ? 'minmax(0, 1.1fr) minmax(320px, 0.9fr)' : '1fr', gap: 24, alignItems: 'start' }}>
              <div>
                <div style={{ background: bgGreen, border: brutalBorder, padding: '10px 14px', marginBottom: 16, boxShadow: '2px 2px 0 #000' }}>
                  <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.05em', marginBottom: 4 }}>PHOTO TIPS</div>
                  <div style={{ fontSize: 12, fontWeight: 600, lineHeight: 1.5, color: '#222' }}>
                    Upload photos that feature YOU — ideally showing your face while doing what you love. Photos of you in action work best!
                  </div>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
                  {[0, 1, 2].map(idx => {
                    const url = draftPhotos[idx];
                    const isFirst = idx === 0;
                    return (
                      <div key={idx} onClick={() => { if (!url) triggerProfilePhotoUpload(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 ? (
                          <>
                            <img src={url} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                            <div style={{ position: 'absolute', inset: 0, display: 'flex', gap: 4, alignItems: 'flex-end', justifyContent: 'center', padding: 6, background: 'linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%)' }}>
                              <button onClick={(e) => { e.stopPropagation(); triggerProfilePhotoUpload(idx); }} style={{ background: bgGreen, border: brutalBorder, padding: '4px 8px', fontWeight: 800, fontSize: 9, cursor: 'pointer', boxShadow: '1px 1px 0 #000' }}>REPLACE</button>
                              <button onClick={(e) => { e.stopPropagation(); removeProfilePhoto(idx); }} style={{ background: '#ff4d4d', color: '#fff', border: brutalBorder, padding: '4px 8px', fontWeight: 800, fontSize: 9, cursor: 'pointer', boxShadow: '1px 1px 0 #000' }}>×</button>
                            </div>
                          </>
                        ) : (
                          <>
                            <div style={{ width: 32, height: 32, border: brutalBorder, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18 }}>
                              {uploading ? '...' : '+'}
                            </div>
                            <span style={{ fontSize: 9, fontWeight: 800, letterSpacing: '0.04em', textAlign: 'center', padding: '0 4px' }}>
                              {isFirst ? (uploading ? 'UPLOADING...' : 'MAIN PHOTO') : (uploading ? '...' : 'OPTIONAL')}
                            </span>
                          </>
                        )}
                        {isFirst && !url && <span style={{ fontSize: 8, color: '#888', position: 'absolute', bottom: 6, fontWeight: 600 }}>Required</span>}
                      </div>
                    );
                  })}
                </div>
                <div style={{ fontSize: 10, color: '#888', fontWeight: 600, marginTop: 8 }}>{(draftPhotos || []).length}/3 photos — your card will cycle through them</div>
              </div>

<div style={{ background: bgYellow, border: brutalBorder, boxShadow: brutalShadow, padding: 16 }}>
                <label style={{ display: 'block', fontSize: 10, fontWeight: 800, letterSpacing: '0.05em', marginBottom: 10 }}>FULL NAME</label>
                <input value={draftProfile.name} onChange={e => setDraftProfile({...draftProfile, name: e.target.value})} style={{ ...brutalInput, fontSize: 22, fontWeight: 900, textTransform: 'uppercase' }} placeholder="JANE DOE" />
                {draftProfile.name && (
                  <div style={{ marginTop: 16 }}>
                    <div style={{ fontSize: 10, fontWeight: 800, color: '#555', marginBottom: 6 }}>PREVIEW</div>
                    <div style={{ fontSize: 28, fontWeight: 900, textTransform: 'uppercase', lineHeight: 0.9, color: '#000' }}>
                      {draftProfile.name.split(' ').map((n, i) => <div key={i}>{n}</div>)}
                    </div>
                  </div>
                )}
              </div>
            </div>
            );
          })()}

{/* STEP 2 — Social Links */}
          {builderStep === 2 && (
            <div style={{ display: 'grid', gridTemplateColumns: isDesktopViewport ? '1fr 1fr' : '1fr', gap: 20 }}>
              <div style={{ background: bgYellow, border: brutalBorder, boxShadow: brutalShadow, padding: 16 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
                  <span style={{ fontSize: 16 }}>📷</span>
                  <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.05em' }}>INSTAGRAM</span>
                </div>
                <input value={draftProfile.socials.ig} onChange={e => setDraftProfile({...draftProfile, socials: {...draftProfile.socials, ig: e.target.value}})} style={brutalInput} placeholder="@username" />
                {draftProfile.socials.ig && (
                  <div style={{ marginTop: 12 }}>
                    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: '#fff', border: brutalBorder, boxShadow: '2px 2px 0 #000', padding: '10px 16px', fontWeight: 800, fontSize: 12 }}>
                      <span>📷</span> INSTA
                    </div>
                  </div>
                )}
              </div>

<div style={{ background: bgYellow, border: brutalBorder, boxShadow: brutalShadow, padding: 16 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
                  <span style={{ fontSize: 16 }}>▶</span>
                  <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.05em' }}>TIKTOK</span>
                </div>
                <input value={draftProfile.socials.tt} onChange={e => setDraftProfile({...draftProfile, socials: {...draftProfile.socials, tt: e.target.value}})} style={brutalInput} placeholder="@username" />
                {draftProfile.socials.tt && (
                  <div style={{ marginTop: 12 }}>
                    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: '#fff', border: brutalBorder, boxShadow: '2px 2px 0 #000', padding: '10px 16px', fontWeight: 800, fontSize: 12 }}>
                      <span>▶</span> TIKTOK
                    </div>
                  </div>
                )}
              </div>

<div style={{ background: bgGreen, border: brutalBorder, boxShadow: brutalShadow, padding: 16, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gridColumn: isDesktopViewport ? '1 / -1' : undefined }}>
                <div>
                  <div style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.05em', marginBottom: 4 }}>OPEN_TO_COLLABS</div>
                  <div style={{ fontSize: 13, fontWeight: 600, color: '#333' }}>Available for creative work?</div>
                </div>
                <div onClick={() => setDraftProfile({...draftProfile, openToCollabs: !draftProfile.openToCollabs})} style={{
                  width: 56, height: 32, border: brutalBorder, background: draftProfile.openToCollabs ? '#000' : '#fff',
                  position: 'relative', cursor: 'pointer', boxShadow: '2px 2px 0 #000'
                }}>
                  <div style={{ position: 'absolute', top: 4, left: draftProfile.openToCollabs ? 28 : 4, width: 22, height: 22, background: draftProfile.openToCollabs ? bgGreen : '#ccc', border: '1px solid #000', transition: 'left 0.2s' }} />
                </div>
              </div>

</div>
          )}

{/* STEP 3 — Stats */}
          {builderStep === 3 && (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
              <div style={{ fontSize: 12, fontWeight: 800, color: '#555', marginBottom: -8 }}>
                Rough numbers are fine — helps collaborators find the right fit.
              </div>

<div>
                <div style={{ background: bgYellow, border: brutalBorder, boxShadow: brutalShadow, padding: 16, display: 'flex', flexDirection: 'column' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
                    <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.05em' }}>FOLLOWERS</span>
                    <span style={{ fontSize: 16 }}>★</span>
                  </div>
                  <input value={draftProfile.followerCount} onChange={e => setDraftProfile({...draftProfile, followerCount: e.target.value.replace(/[^0-9]/g, '')})}
                    inputMode="numeric" style={{ width: '100%', background: 'transparent', border: 'none', fontSize: 32, fontWeight: 900, color: '#000', outline: 'none', padding: 0, fontFamily: fonts.sans }} placeholder="0" />
                  {draftProfile.followerCount && (
                    <div style={{ background: '#000', color: bgYellow, fontSize: 8, fontWeight: 800, padding: '4px 6px', display: 'inline-block', alignSelf: 'flex-start', marginTop: 12 }}>
                      {reachLabel(draftProfile.followerCount).toUpperCase() || 'FOLLOWERS'}
                    </div>
                  )}
                </div>
              </div>

{draftProfile.followerCount && (
                <div style={{ background: '#fff', border: brutalBorder, padding: 12, fontSize: 11, fontWeight: 600, color: '#555' }}>
                  {draftProfile.followerCount && <span>{formatNumber(draftProfile.followerCount)} followers</span>}
                </div>
              )}
            </div>
          )}

{/* STEP 4 — Bio + Tags */}
          {builderStep === 4 && (
            <div style={{ display: 'grid', gridTemplateColumns: isDesktopViewport ? 'minmax(280px, 0.8fr) minmax(0, 1.2fr)' : '1fr', gap: 20, alignItems: 'start' }}>
              <div style={{ background: bgYellow, border: brutalBorder, boxShadow: brutalShadow, padding: 16 }}>
                <label style={{ display: 'block', fontSize: 10, fontWeight: 800, letterSpacing: '0.05em', marginBottom: 10 }}>SHORT BIO</label>
                <textarea value={draftProfile.bio} onChange={e => setDraftProfile({...draftProfile, bio: e.target.value})} style={{ ...brutalInput, minHeight: 100, resize: 'none', lineHeight: 1.6, fontSize: 15 }} placeholder="Romanticizing my life at UTS..." />
              </div>

<div style={{ background: bgYellow, border: brutalBorder, boxShadow: brutalShadow, padding: 16 }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
                  <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.05em' }}>PICK YOUR TAGS</span>
                  <div style={{ background: (draftProfile.tags || []).length === 3 ? '#000' : '#fff', color: (draftProfile.tags || []).length === 3 ? bgYellow : '#000', border: brutalBorder, padding: '4px 8px', fontSize: 10, fontWeight: 800 }}>
                    {(draftProfile.tags || []).length}/3
                  </div>
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {(ALL_TAGS || []).map((tag) => {
                    const isSelected = (draftProfile.tags || []).includes(tag);
                    const meta = TAG_META[tag] || { icon: '✦', color: '#333' };
                    const atMax = (draftProfile.tags || []).length >= 3;
                    return (
                      <button key={tag} onClick={() => {
                        if (isSelected) setDraftProfile({...draftProfile, tags: (draftProfile.tags || []).filter(t => t !== tag)});
                        else if (!atMax) setDraftProfile({...draftProfile, tags: [...(draftProfile.tags || []), tag]});
                      }} style={{
                        padding: '10px 16px', border: brutalBorder,
                        background: isSelected ? '#000' : '#fff',
                        color: isSelected ? bgYellow : (atMax && !isSelected ? '#bbb' : '#000'),
                        fontSize: 12, fontWeight: 800, cursor: atMax && !isSelected ? 'default' : 'pointer',
                        display: 'flex', alignItems: 'center', gap: 6,
                        boxShadow: isSelected ? brutalShadow : '2px 2px 0 #ccc',
                        opacity: atMax && !isSelected ? 0.4 : 1,
                        transition: 'all 0.15s'
                      }}>
                        <span style={{ fontSize: 14, filter: isSelected ? 'none' : 'grayscale(0.4)' }}>{meta.icon}</span>
                        {tag.toUpperCase()}
                      </button>
                    );
                  })}
                </div>

{(draftProfile.tags || []).length > 0 && (
                  <div style={{ marginTop: 16, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                    {(draftProfile.tags || []).map(tag => (
                      <div key={tag} style={{ background: '#ff4d4d', color: '#fff', padding: '4px 12px', border: brutalBorder, fontWeight: 900, fontSize: 11, letterSpacing: '0.05em', transform: `rotate(${Math.random() > 0.5 ? 2 : -2}deg)`, boxShadow: '2px 2px 0 #000' }}>
                        {tag.toUpperCase()}
                      </div>
                    ))}
                  </div>
                )}
              </div>

</div>
          )}

{/* STEP 5 — Faculty, Year */}
          {builderStep === 5 && (
            <div style={{ display: 'grid', gridTemplateColumns: isDesktopViewport ? 'minmax(280px, 0.9fr) minmax(0, 1.1fr)' : '1fr', gap: 20, alignItems: 'start' }}>
              <div style={{ background: bgYellow, border: brutalBorder, boxShadow: brutalShadow, padding: 16 }}>
                <label style={{ display: 'block', fontSize: 10, fontWeight: 800, letterSpacing: '0.05em', marginBottom: 12 }}>FACULTY</label>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {(UTS_FACULTIES || []).map(f => {
                    const active = draftProfile.faculty === f;
                    return (
                      <button key={f} onClick={() => setDraftProfile({ ...draftProfile, faculty: active ? '' : f })} style={{
                        padding: '10px 14px', fontSize: 11, cursor: 'pointer', fontWeight: 800,
                        border: brutalBorder,
                        background: active ? '#000' : '#fff',
                        color: active ? bgYellow : '#000',
                        boxShadow: active ? brutalShadow : '2px 2px 0 #ccc',
                        transition: 'all 0.15s'
                      }}>
                        {f.toUpperCase()}
                      </button>
                    );
                  })}
                </div>
              </div>

<div style={{ background: bgYellow, border: brutalBorder, boxShadow: brutalShadow, padding: 16 }}>
                <label style={{ display: 'block', fontSize: 10, fontWeight: 800, letterSpacing: '0.05em', marginBottom: 12 }}>YEAR</label>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {(STUDY_YEAR_OPTIONS || []).map(y => (
                    <button key={y} onClick={() => setDraftProfile({...draftProfile, year: y})} style={{
                      padding: '10px 18px', fontSize: 12, cursor: 'pointer', fontWeight: 800,
                      border: brutalBorder,
                      background: draftProfile.year === y ? '#000' : '#fff',
                      color: draftProfile.year === y ? bgYellow : '#000',
                      boxShadow: draftProfile.year === y ? brutalShadow : '2px 2px 0 #ccc',
                      transition: 'all 0.15s'
                    }}>
                      {y.toUpperCase()}
                    </button>
                  ))}
                </div>
              </div>

</div>
          )}
        </div>

{/* Bottom Navigation */}
        <div style={{ position: 'fixed', bottom: 0, left: 0, right: 0, background: bgCream, borderTop: brutalBorder, padding: '16px 20px', display: 'flex', gap: 12, maxWidth: floatingBarMaxWidth, margin: '0 auto', 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 ? handleBuilderContinue() : handleSaveProfile()} 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 →' : (isAdmin ? 'FINISH PROFILE' : 'SUBMIT FOR REVIEW')}
          </button>
        </div>
        </div>
      </div>
    );
  }

if (view === 'stories_index' || view === 'tips_index') {
    const isStoriesView = view === 'stories_index';
    const indexProfiles = isStoriesView ? storyProfiles : tipsProfiles;
    const title = isStoriesView ? 'Creator Stories' : 'Tips & Tricks';
    const subtitle = isStoriesView
      ? 'Read the journeys behind UTS creators.'
      : 'Advice from UTS creators on making, posting, pitching, and collaborating.';
    const emptyText = isStoriesView
      ? 'No creator stories have been published yet.'
      : 'No tips have been published yet.';
    const brutalShadow = '4px 4px 0px #000';
    const brutalBorder = '2px solid #000';
    const bgCream = '#FFFFFF';
    const bgYellow = '#E8EDFE';
    const bgGreen = '#000000';

<div style={{ padding: `28px ${contentPaddingX}px` }}>
            <div style={{ background: bgYellow, border: brutalBorder, boxShadow: brutalShadow, padding: isDesktopViewport ? 26 : 20, marginBottom: 22 }}>
              <div style={{ fontSize: 10, fontWeight: 900, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 8 }}>
                {isStoriesView ? 'Full stories require a regular account' : 'Full advice requires a regular account'}
              </div>
              <h2 style={{ fontFamily: fonts.serif, fontSize: isDesktopViewport ? 42 : 32, lineHeight: 0.9, margin: 0, textTransform: 'uppercase', fontWeight: 900 }}>
                {title}
              </h2>
              <p style={{ margin: '12px 0 0', fontSize: 14, fontWeight: 700, lineHeight: 1.55, maxWidth: 720 }}>
                {subtitle} {isSignedIn ? 'You are signed in as a regular user, so full content is unlocked.' : 'Preview the cards below, then sign up as a regular user to unlock the full content.'}
              </p>
            </div>

{(indexProfiles || []).length === 0 ? (
              <div style={{ background: '#fff', border: brutalBorder, boxShadow: brutalShadow, padding: 28, textAlign: 'center', fontSize: 14, fontWeight: 800 }}>
                {emptyText}
              </div>
            ) : (
              <div style={{ display: 'grid', gridTemplateColumns: isDesktopViewport ? 'repeat(3, minmax(0, 1fr))' : (isTabletViewport ? 'repeat(2, minmax(0, 1fr))' : '1fr'), gap: 18 }}>
                {(indexProfiles || []).map(profile => {
                  const tips = getCreatorTips(profile);
                  const teaser = getStoryTeaser(profile);
                  const profilePhoto = getProfilePhotos(profile)[0] || profile.photoUrl || 'https://via.placeholder.com/400';
                  return (
                    <div key={`${view}-${profile.id}`} style={{ background: '#fff', border: brutalBorder, boxShadow: brutalShadow, padding: 16, display: 'flex', flexDirection: 'column', gap: 14 }}>
                      <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                        <img src={profilePhoto} style={{ width: 58, height: 58, border: brutalBorder, objectFit: 'cover', borderRadius: 14 }} />
                        <div style={{ minWidth: 0 }}>
                          <div style={{ fontFamily: fonts.serif, fontSize: 20, lineHeight: 1, fontWeight: 900, textTransform: 'uppercase' }}>{profile.name}</div>
                          <div style={{ fontSize: 11, fontWeight: 800, color: '#555', marginTop: 4 }}>@{getProfileHandle(profile)}</div>
                        </div>
                      </div>

{isStoriesView ? (
                        <div>
                          <div style={{ fontSize: 10, fontWeight: 900, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 8 }}>Story</div>
                          <p style={{ margin: 0, fontSize: 13, lineHeight: 1.6, fontWeight: 700, whiteSpace: 'pre-line' }}>
                            {isSignedIn ? getCreatorStory(profile) : teaser}
                          </p>
                        </div>
                      ) : (
                        <div>
                          <div style={{ fontSize: 10, fontWeight: 900, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 8 }}>Tips</div>
                          <div style={{ display: 'grid', gap: 8 }}>
                            {(isSignedIn ? tips : (tips || []).slice(0, 1)).map((tip, index) => {
                              const tipKey = getTipKey(profile.id, index);
                              return (
                                <div key={tipKey} style={{ background: bgYellow, border: brutalBorder, padding: 10, fontSize: 12, lineHeight: 1.45, fontWeight: 800 }}>
                                  {tip}
                                </div>
                              );
                            })}
                            {!isSignedIn && (tips || []).length > 1 && (
                              <div style={{ fontSize: 11, fontWeight: 800, color: '#555' }}>
                                {(tips || []).length - 1} more tip{(tips || []).length - 1 === 1 ? '' : 's'} unlocked after signup.
                              </div>
                            )}
                          </div>
                        </div>
                      )}

<div style={{ display: 'grid', gap: 8, marginTop: 'auto' }}>
                        {isSignedIn ? (
                          isStoriesView ? (
                            <>
                              <button onClick={() => toggleProfileFollow(profile, { view: 'stories_index' })} style={{ background: isStoryFollowed(profile.id) ? bgCream : '#000', color: isStoryFollowed(profile.id) ? '#000' : bgCream, border: brutalBorder, boxShadow: isStoryFollowed(profile.id) ? 'none' : '2px 2px 0 #000', padding: '12px', fontSize: 11, fontWeight: 900, cursor: 'pointer', textTransform: 'uppercase' }}>
                                {isStoryFollowed(profile.id) ? 'Following story' : 'Follow story updates'}
                              </button>
                              <button onClick={() => toggleSavedCreator(profile.id, { view: 'stories_index' })} style={{ background: isCreatorSaved(profile.id) ? bgGreen : '#fff', color: '#000', border: brutalBorder, boxShadow: '2px 2px 0 #000', padding: '12px', fontSize: 11, fontWeight: 900, cursor: 'pointer', textTransform: 'uppercase' }}>
                                {isCreatorSaved(profile.id) ? 'Saved creator' : 'Save creator'}
                              </button>
                            </>
                          ) : (
                            <button onClick={() => toggleSavedTip(getTipKey(profile.id, 0), { view: 'tips_index' })} style={{ background: isTipSaved(getTipKey(profile.id, 0)) ? bgGreen : '#000', color: isTipSaved(getTipKey(profile.id, 0)) ? '#000' : bgCream, border: brutalBorder, boxShadow: '2px 2px 0 #000', padding: '12px', fontSize: 11, fontWeight: 900, cursor: 'pointer', textTransform: 'uppercase' }}>
                              {isTipSaved(getTipKey(profile.id, 0)) ? 'Tip saved' : 'Save first tip'}
                            </button>
                          )
                        ) : (
                          <button onClick={() => requireRegularUser(isStoriesView ? 'story' : 'tips', { view })} style={{ background: '#000', color: bgCream, border: brutalBorder, boxShadow: '2px 2px 0 #000', padding: '12px', fontSize: 11, fontWeight: 900, cursor: 'pointer', textTransform: 'uppercase' }}>
                            {isStoriesView ? 'Read full story' : 'View all tips'}
                          </button>
                        )}
                        <button onClick={() => handleMapCardSelect(profile.id, { source: view })} style={{ background: '#fff', color: '#000', border: brutalBorder, padding: '11px', fontSize: 11, fontWeight: 900, cursor: 'pointer', textTransform: 'uppercase' }}>
                          Open basic profile
                        </button>
                      </div>
                    </div>
                  );
                })}
              </div>
            )}
          </div>
        </div>
      </div>
    );
  }

if (view === 'saved_content') {
    const brutalShadow = '4px 4px 0px #000';
    const brutalBorder = '2px solid #000';
    const bgCream = '#FFFFFF';
    const bgYellow = '#E8EDFE';
    const bgGreen = '#000000';
    const savedCreatorProfiles = (currentAppUser?.savedCreatorIds || [])
      .map(profileId => (profiles || []).find(profile => profile.id === profileId && isProfilePublic(profile)))
      .filter(Boolean);
    const followedStoryProfiles = (currentAppUser?.followedStoryProfileIds || [])
      .map(profileId => (profiles || []).find(profile => profile.id === profileId && isProfilePublic(profile)))
      .filter(Boolean);
    const savedTipItems = (currentAppUser?.savedTipKeys || []).map(tipKey => {
      const [profileId, , rawIndex] = `${tipKey}`.split(':');
      const profile = (profiles || []).find(profile => profile.id === profileId && isProfilePublic(profile));
      const tipIndex = parseInt(rawIndex, 10);
      const tip = Number.isFinite(tipIndex) ? getCreatorTips(profile)[tipIndex] : '';
      return profile && tip ? { tipKey, profile, tip } : null;
    }).filter(Boolean);

return (
      <div style={{ minHeight: '100dvh', background: bgCream, color: '#000', fontFamily: 'Inter, sans-serif', padding: isTabletViewport ? '28px 0 40px' : '0' }}>
        <div style={{ ...desktopShellStyle, background: bgCream, minHeight: '100dvh', paddingBottom: 48 }}>
          {renderAuthChoice()}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `16px ${contentPaddingX}px`, borderBottom: brutalBorder, background: bgCream, position: 'sticky', top: 0, zIndex: 20 }}>
            <button onClick={() => setView('discover')} style={{ background: 'none', border: 'none', fontSize: 24, cursor: 'pointer', color: '#000', fontWeight: 900 }}>←</button>
            <div style={{ fontWeight: 900, fontSize: 16, letterSpacing: '0.05em', textTransform: 'uppercase' }}>SAVED</div>
            <div style={{ width: 32 }} />
          </div>
          {!isSignedIn ? (
            <div style={{ padding: `28px ${contentPaddingX}px` }}>
              <div style={{ background: bgYellow, border: brutalBorder, boxShadow: brutalShadow, padding: 22 }}>
                <h2 style={{ fontFamily: fonts.serif, fontSize: 32, lineHeight: 0.9, margin: '0 0 12px', textTransform: 'uppercase', fontWeight: 900 }}>
                  Sign up to see your saves
                </h2>
                <p style={{ margin: '0 0 16px', fontSize: 14, lineHeight: 1.55, fontWeight: 700 }}>
                  A regular A1Zap account unlocks saved creators, followed stories, and bookmarked tips.
                </p>
                <button onClick={() => requireRegularUser('saved_content', { view: 'saved_content' })} style={{ width: '100%', padding: '14px', background: '#000', color: bgCream, border: brutalBorder, boxShadow: '2px 2px 0 #000', fontSize: 12, fontWeight: 900, cursor: 'pointer', textTransform: 'uppercase' }}>
                  Continue as regular user
                </button>
              </div>
            </div>
          ) : (
            <div style={{ padding: `28px ${contentPaddingX}px`, display: 'grid', gap: 22 }}>
              {[
                { id: 'creators', title: 'Saved Creators', items: savedCreatorProfiles, empty: 'No saved creators yet.' },
                { id: 'stories', title: 'Followed Stories', items: followedStoryProfiles, empty: 'No followed stories yet.' }
              ].map(section => (
                <div key={section.id} style={{ background: bgYellow, border: brutalBorder, boxShadow: brutalShadow, padding: 16 }}>
                  <div style={{ fontSize: 10, fontWeight: 900, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 12 }}>{section.title}</div>
                  {(section.items || []).length === 0 ? (
                    <div style={{ background: '#fff', border: brutalBorder, padding: 14, fontSize: 12, fontWeight: 800 }}>{section.empty}</div>
                  ) : (
                    <div style={{ display: 'grid', gap: 10 }}>
                      {(section.items || []).map(profile => (
                        <button key={`${section.id}-${profile.id}`} onClick={() => handleMapCardSelect(profile.id, { source: 'saved_content' })} style={{ display: 'flex', alignItems: 'center', gap: 12, width: '100%', background: '#fff', border: brutalBorder, boxShadow: '2px 2px 0 #000', padding: 10, cursor: 'pointer', textAlign: 'left' }}>
                          <img src={getProfilePhotos(profile)[0] || profile.photoUrl || 'https://via.placeholder.com/100'} style={{ width: 44, height: 44, border: brutalBorder, objectFit: 'cover' }} />
                          <span style={{ fontSize: 13, fontWeight: 900, textTransform: 'uppercase' }}>{profile.name}</span>
                        </button>
                      ))}
                    </div>
                  )}
                </div>
              ))}

<div style={{ background: bgYellow, border: brutalBorder, boxShadow: brutalShadow, padding: 16 }}>
                <div style={{ fontSize: 10, fontWeight: 900, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 12 }}>Saved Tips</div>
                {(savedTipItems || []).length === 0 ? (
                  <div style={{ background: '#fff', border: brutalBorder, padding: 14, fontSize: 12, fontWeight: 800 }}>No saved tips yet.</div>
                ) : (
                  <div style={{ display: 'grid', gap: 10 }}>
                    {(savedTipItems || []).map(item => (
                      <div key={item.tipKey} style={{ background: '#fff', border: brutalBorder, boxShadow: '2px 2px 0 #000', padding: 12 }}>
                        <div style={{ fontSize: 12, lineHeight: 1.5, fontWeight: 800, marginBottom: 8 }}>{item.tip}</div>
                        <button onClick={() => handleMapCardSelect(item.profile.id, { source: 'saved_tip' })} style={{ background: bgGreen, color: '#000', border: brutalBorder, padding: '7px 10px', fontSize: 10, fontWeight: 900, cursor: 'pointer', textTransform: 'uppercase' }}>
                          Open {item.profile.name}
                        </button>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }

// --- PROFILE DETAIL VIEW ---
  if (view === 'profile_detail' || view === 'my_profile') {
    const p = (profiles || []).find(p => p.id === activeProfileId) || myProfile;
    if (!p) return null;
    const socials = _getVisibleSocials(p.socials);
    const hasVisibleSocials = _hasVisibleSocials(p.socials);
    const isMe = p.userId === user?.id;
    if (view === 'profile_detail' && !isMe && !isAdmin && !isProfilePublic(p)) {
      setView('discover');
      return null;
    }
    const following = isFollowing(user?.id, p.userId);
    const pFolio = normalizeFolio(p.folio);
    const storyText = getCreatorStory(p);
    const storyTeaser = getStoryTeaser(p);
    const profileTips = getCreatorTips(p);
    const profileStatus = getProfileStatus(p);
    const profileStatusMeta = {
      approved: { label: 'Live', bg: '#E9FBEA', border: '#22C55E', color: '#166534', body: 'This creator page is publicly listed.' },
      pending: { label: 'Pending review', bg: '#FFF4D6', border: '#F59E0B', color: '#92400E', body: 'Your latest changes are waiting for admin approval.' },
      archived: { label: 'Archived', bg: '#F3F4F6', border: '#6B7280', color: '#374151', body: 'This page is hidden from public browsing. Update it and resubmit to go live again.' }
    };
    const ownerBanner = profileStatusMeta[profileStatus];

const brutalShadow = '4px 4px 0px #000';
    const brutalBorder = '2px solid #000';
    const bgCream = '#FFFFFF';
    const bgYellow = '#E8EDFE';
    const bgGreen = '#000000';

return (
      <div style={{ minHeight: '100dvh', background: bgCream, color: '#000', fontFamily: 'Inter, sans-serif', padding: isTabletViewport ? '28px 0 40px' : '0' }}>
        <div style={{ ...desktopShellStyle, background: bgCream, position: 'relative', overflowX: 'hidden', paddingBottom: 80 }}>
        {renderFileInputs()}
        {renderLightbox()}
        {renderAuthChoice()}
        
        {/* Header */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: `16px ${contentPaddingX}px`, borderBottom: brutalBorder, background: bgCream, zIndex: 10, position: 'relative' }}>
          <button onClick={() => setView('discover')} style={{ background: 'none', border: 'none', fontSize: 24, cursor: 'pointer', color: '#000', fontWeight: 900 }}>←</button>
          <div style={{ fontWeight: 900, fontSize: 18, letterSpacing: '0.05em' }}>CREATOR_CARD</div>
          <div style={{ width: 24 }}></div> {/* Spacer to keep title centered */}
        </div>

<div style={{ display: isDesktopViewport ? 'grid' : 'block', gridTemplateColumns: isDesktopViewport ? 'minmax(0, 1.1fr) minmax(360px, 0.9fr)' : '1fr', alignItems: 'start' }}>
        {/* Hero Section */}
        <ProfileHeroCarousel
          photos={getProfilePhotos(p).length ? getProfilePhotos(p) : [p.photoUrl || 'https://via.placeholder.com/600']}
          tag={p.tags?.[0]} name={p.name} fontSans={fonts.sans} bgCream={bgCream}
          brutalBorder={brutalBorder} isDesktop={isDesktopViewport}
        />

{/* Content Container */}
        <div style={{ padding: isDesktopViewport ? `32px ${contentPaddingX}px` : `0 ${contentPaddingX}px`, position: 'relative', marginTop: isDesktopViewport ? 0 : -20, zIndex: 2 }}>
          {isMe && profileStatus !== 'approved' && (
            <div style={{ background: ownerBanner.bg, border: `1px solid ${ownerBanner.border}`, borderRadius: 18, padding: '14px 16px', marginBottom: 20 }}>
              <div style={{ fontSize: 10, fontWeight: 800, textTransform: 'uppercase', letterSpacing: '0.08em', color: ownerBanner.color, marginBottom: 6 }}>
                {ownerBanner.label}
              </div>
              <div style={{ fontSize: 13, lineHeight: 1.5, color: ownerBanner.color }}>
                {ownerBanner.body}
              </div>
            </div>
          )}
          
          {/* Main Info Card */}
          <div style={{ background: bgYellow, border: brutalBorder, boxShadow: brutalShadow, padding: '16px', marginBottom: 24 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12, marginBottom: 16 }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, flex: 1, minWidth: 0 }}>
                <div style={{ background: bgGreen, border: brutalBorder, padding: '6px 12px', fontWeight: 800, fontSize: 12, alignSelf: 'flex-start' }}>
                  @{getProfileHandle(p)}
                </div>
              </div>
              {isAdmin && (
                <button
                  onClick={() => openQuickEditForProfile(p)}
                  style={{ flexShrink: 0, background: '#fff', border: brutalBorder, boxShadow: '2px 2px 0 #000', padding: '8px 12px', fontSize: 10, fontWeight: 900, textTransform: 'uppercase', cursor: 'pointer', color: '#000', letterSpacing: '0.04em' }}
                >
                  Dev: Edit Profile
                </button>
              )}
            </div>
            
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16, flexWrap: 'wrap' }}>
              <span style={{ fontWeight: 900, fontSize: 12, textTransform: 'uppercase' }}>
                {_resolveProfileFaculty(p) || 'UTS CREATOR'} • {_formatStudyYear(p.year) || 'THIRD YEAR'}
              </span>
              <span style={{ fontSize: 12, color: '#555', fontWeight: 600 }}>@{p.handle || p.name?.replace(/\s+/g, '').toLowerCase()}</span>
            </div>

{hasVisibleSocials && (
              <div style={{ display: 'grid', gridTemplateColumns: isTabletViewport ? 'repeat(auto-fit, minmax(140px, 1fr))' : '1fr', gap: 12 }}>
                {socials.ig && (
                  <a href={`https://instagram.com/${socials.ig.replace('@','')}`} target="_blank" rel="noreferrer" style={{ flex: 1, textDecoration: 'none', background: '#fff', border: brutalBorder, boxShadow: '2px 2px 0 #000', padding: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, color: '#000', fontWeight: 800, fontSize: 12 }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="5"/><circle cx="17.5" cy="6.5" r="1.5"/></svg> INSTA
                  </a>
                )}
                {socials.tt && (
                  <a href={`https://tiktok.com/${socials.tt}`} target="_blank" rel="noreferrer" style={{ flex: 1, textDecoration: 'none', background: '#fff', border: brutalBorder, boxShadow: '2px 2px 0 #000', padding: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, color: '#000', fontWeight: 800, fontSize: 12 }}>
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-2.88 2.5 2.89 2.89 0 01-2.89-2.89 2.89 2.89 0 012.89-2.89c.28 0 .54.04.79.1v-3.5a6.37 6.37 0 00-.79-.05A6.34 6.34 0 003.15 15.2a6.34 6.34 0 006.34 6.34 6.34 6.34 0 006.34-6.34V8.87a8.16 8.16 0 004.77 1.52V6.84a4.86 4.86 0 01-1.01-.15z"/></svg> TIKTOK
                  </a>
                )}
                {socials.yt && (
                  <a href={`https://youtube.com/${String(socials.yt).replace(/^@/, '@')}`} target="_blank" rel="noreferrer" style={{ flex: 1, textDecoration: 'none', background: '#fff', border: brutalBorder, boxShadow: '2px 2px 0 #000', padding: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, color: '#000', fontWeight: 800, fontSize: 12 }}>
                    <span>▣</span> YOUTUBE
                  </a>
                )}
              </div>
            )}
          </div>

{p.bio && (
            <div style={{ background: bgYellow, border: brutalBorder, boxShadow: brutalShadow, padding: '16px', marginBottom: 24 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
                <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.05em' }}>BIO</span>
                <span style={{ fontSize: 16 }}>✦</span>
              </div>
              <div style={{ fontSize: 13, lineHeight: 1.65, fontWeight: 700, whiteSpace: 'pre-line', color: '#000' }}>
                {p.bio}
              </div>
            </div>
          )}

{(storyText || (profileTips || []).length > 0) && (
            <div style={{ display: 'grid', gap: 18, marginBottom: 24 }}>
              {storyText && (
                <div style={{ background: bgYellow, border: brutalBorder, boxShadow: brutalShadow, padding: '16px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12, marginBottom: 12 }}>
                    <div>
                      <div style={{ fontSize: 10, fontWeight: 900, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>Creator Story</div>
                      <div style={{ fontSize: 12, fontWeight: 700, color: '#333' }}>
                        {isSignedIn ? 'Full story unlocked' : 'Public teaser'}
                      </div>
                    </div>
                    {p.storyFeatured && (
                      <span style={{ background: '#000', color: bgYellow, border: brutalBorder, boxShadow: '2px 2px 0 #000', padding: '5px 8px', fontSize: 9, fontWeight: 900, textTransform: 'uppercase' }}>
                        Featured
                      </span>
                    )}
                  </div>
                  <div style={{ fontSize: 13, lineHeight: 1.65, fontWeight: 700, whiteSpace: 'pre-line', color: '#000', marginBottom: 14 }}>
                    {isSignedIn ? storyText : storyTeaser}
                  </div>
                  {isSignedIn ? (
                    !isMe && (
                      <button onClick={() => toggleProfileFollow(p, { view: 'profile_detail', profileId: p.id })} style={{ width: '100%', padding: '12px', background: isStoryFollowed(p.id) ? bgCream : '#000', color: isStoryFollowed(p.id) ? '#000' : bgCream, border: brutalBorder, boxShadow: isStoryFollowed(p.id) ? 'none' : '2px 2px 0 #000', fontSize: 11, fontWeight: 900, cursor: 'pointer', textTransform: 'uppercase' }}>
                        {isStoryFollowed(p.id) ? 'Following story updates' : 'Follow story updates'}
                      </button>
                    )
                  ) : (
                    <button onClick={() => requireRegularUser('story', { view: 'profile_detail', profileId: p.id })} style={{ width: '100%', padding: '12px', background: '#000', color: bgCream, border: brutalBorder, boxShadow: '2px 2px 0 #000', fontSize: 11, fontWeight: 900, cursor: 'pointer', textTransform: 'uppercase' }}>
                      Read full creator story
                    </button>
                  )}
                </div>
              )}

{(profileTips || []).length > 0 && (
                <div style={{ background: bgYellow, border: brutalBorder, boxShadow: brutalShadow, padding: '16px' }}>
                  <div style={{ fontSize: 10, fontWeight: 900, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 12 }}>Tips & Tricks</div>
                  <div style={{ display: 'grid', gap: 10, marginBottom: 14 }}>
                    {(isSignedIn ? profileTips : (profileTips || []).slice(0, 1)).map((tip, index) => {
                      const tipKey = getTipKey(p.id, index);
                      return (
                        <div key={tipKey} style={{ background: '#fff', border: brutalBorder, boxShadow: '2px 2px 0 #000', padding: 12 }}>
                          <div style={{ fontSize: 13, lineHeight: 1.55, fontWeight: 800, marginBottom: isSignedIn ? 10 : 0 }}>{tip}</div>
                          {isSignedIn && (
                            <button onClick={() => toggleSavedTip(tipKey, { view: 'profile_detail', profileId: p.id })} style={{ background: isTipSaved(tipKey) ? bgGreen : '#000', color: isTipSaved(tipKey) ? '#000' : bgCream, border: brutalBorder, padding: '8px 10px', fontSize: 10, fontWeight: 900, cursor: 'pointer', textTransform: 'uppercase' }}>
                              {isTipSaved(tipKey) ? 'Saved tip' : 'Save tip'}
                            </button>
                          )}
                        </div>
                      );
                    })}
                  </div>
                  {!isSignedIn && (
                    <button onClick={() => requireRegularUser('tips', { view: 'profile_detail', profileId: p.id })} style={{ width: '100%', padding: '12px', background: '#000', color: bgCream, border: brutalBorder, boxShadow: '2px 2px 0 #000', fontSize: 11, fontWeight: 900, cursor: 'pointer', textTransform: 'uppercase' }}>
                      View tips from UTS creators
                    </button>
                  )}
                </div>
              )}
            </div>
          )}

{/* Tags */}
          <div style={{ background: bgYellow, border: brutalBorder, boxShadow: brutalShadow, padding: '16px', marginBottom: 24 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
              <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.05em' }}>TAGS</span>
              {isMe && (
                <button onClick={() => setEditingTags(prev => !prev)} style={{ background: editingTags ? '#000' : '#fff', color: editingTags ? bgYellow : '#000', border: brutalBorder, padding: '4px 10px', fontSize: 10, fontWeight: 800, cursor: 'pointer', boxShadow: '2px 2px 0 #000' }}>
                  {editingTags ? 'DONE' : 'EDIT'}
                </button>
              )}
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {editingTags && isMe ? (
                (ALL_TAGS || []).map(tag => {
                  const selected = (p.tags || []).includes(tag);
                  const atMax = (p.tags || []).length >= 3 && !selected;
                  const meta = TAG_META[tag] || { icon: '✦', color: '#333' };
                  return (
                    <button key={tag} onClick={() => {
                      if (atMax) return;
                      const newTags = selected ? (p.tags || []).filter(t => t !== tag) : [...(p.tags || []), tag];
                      upsertProfile({ ...p, tags: newTags, _timestamp: Date.now() });
                    }} style={{
                      padding: '8px 14px', border: brutalBorder, fontWeight: 800, fontSize: 11, cursor: atMax ? 'not-allowed' : 'pointer',
                      background: selected ? '#000' : '#fff', color: selected ? bgYellow : '#000',
                      boxShadow: selected ? '3px 3px 0 #000' : '2px 2px 0 #ccc',
                      opacity: atMax ? 0.4 : 1, display: 'flex', alignItems: 'center', gap: 6, transition: 'all 0.15s'
                    }}>
                      <span>{meta.icon}</span> {tag.toUpperCase()}
                    </button>
                  );
                })
              ) : (
                (p.tags || []).length > 0 ? (p.tags || []).map(tag => {
                  const meta = TAG_META[tag] || { icon: '✦', color: '#333' };
                  return (
                    <span key={tag} style={{ padding: '8px 14px', border: brutalBorder, fontWeight: 800, fontSize: 11, background: '#000', color: bgYellow, boxShadow: '3px 3px 0 #000', display: 'flex', alignItems: 'center', gap: 6 }}>
                      <span>{meta.icon}</span> {tag.toUpperCase()}
                    </span>
                  );
                }) : <span style={{ fontSize: 11, fontWeight: 600, color: '#888' }}>No tags yet{isMe ? ' — tap EDIT to add some' : ''}</span>
              )}
            </div>
            {editingTags && isMe && (
              <div style={{ marginTop: 8, fontSize: 10, fontWeight: 600, color: '#555' }}>
                {(p.tags || []).length}/3 selected
              </div>
            )}
          </div>

{/* Stats Grid */}
          <div style={{ marginBottom: 24 }}>
            <div style={{ background: bgYellow, border: brutalBorder, boxShadow: brutalShadow, padding: '16px', position: 'relative', display: 'flex', flexDirection: 'column' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
                <span style={{ fontSize: 10, fontWeight: 800, letterSpacing: '0.05em' }}>FOLLOWERS</span>
                <span style={{ fontSize: 16 }}>★</span>
              </div>
              <div style={{ fontSize: 36, fontWeight: 900, marginBottom: 'auto' }}>{p.followerCount ? formatNumber(p.followerCount) : '24.3K'}</div>
              <div style={{ background: '#000', color: bgYellow, fontSize: 8, fontWeight: 800, padding: '4px 6px', display: 'inline-block', alignSelf: 'flex-start', marginTop: 12 }}>
                ESTABLISHED 2024
              </div>
            </div>
          </div>

{!isMe && (
            <div style={{ display: 'grid', gridTemplateColumns: isTabletViewport ? '1fr 1fr' : '1fr', gap: 12, marginBottom: 24 }}>
              <button onClick={() => toggleSavedCreator(p.id, { view: 'profile_detail', profileId: p.id })} style={{ width: '100%', padding: '16px', background: isCreatorSaved(p.id) ? bgGreen : '#fff', color: '#000', border: brutalBorder, boxShadow: brutalShadow, fontSize: 14, fontWeight: 900, cursor: 'pointer', textTransform: 'uppercase' }}>
                {isCreatorSaved(p.id) ? 'SAVED CREATOR' : 'SAVE CREATOR'}
              </button>
              <button onClick={() => toggleProfileFollow(p, { view: 'profile_detail', profileId: p.id })} style={{ width: '100%', padding: '16px', background: following || isStoryFollowed(p.id) ? bgCream : '#000', color: following || isStoryFollowed(p.id) ? '#000' : bgCream, border: brutalBorder, boxShadow: following || isStoryFollowed(p.id) ? 'none' : brutalShadow, fontSize: 14, fontWeight: 900, cursor: 'pointer', textTransform: 'uppercase' }}>
                {following || isStoryFollowed(p.id) ? 'FOLLOWING STORIES' : 'FOLLOW STORY UPDATES'}
              </button>
            </div>
          )}

{isMe && (
             <button onClick={() => openProfileBuilder(myProfile || p, 'edit')} style={{ width: '100%', padding: '16px', background: bgCream, color: '#000', border: brutalBorder, boxShadow: brutalShadow, fontSize: 16, fontWeight: 900, cursor: 'pointer', marginBottom: 24, textTransform: 'uppercase' }}>
               {profileStatus === 'archived' ? 'EDIT & RESUBMIT' : 'EDIT PROFILE'}
             </button>
          )}

</div>

</div>
        </div>
      </div>
    );
  }

// --- DISCOVER VIEW ---
  return (
    <div
      ref={discoverContainerRef}
      style={{ display: 'flex', flexDirection: 'column', height: '100dvh', background: colors.base, color: colors.primary, fontFamily: fonts.sans, overflow: 'hidden', ...desktopShellStyle }}
      onMouseDownCapture={() => { if (discoverLayout === 'pan') interruptMapAutoPan(); }}
      onTouchStartCapture={() => { if (discoverLayout === 'pan') interruptMapAutoPan(); }}
    >
      {renderHeader()}
      {renderConfetti()}
      {renderSubmitted()}
      {renderAuthChoice()}

{(() => {
        const followerBucketLabel = activeFilters.followers
          ? ((FOLLOWER_BUCKETS || []).find(b => b.id === activeFilters.followers)?.label || null)
          : null;
        const categoryActive = activeFilters.category && activeFilters.category !== 'All';
        const activeFilterCount =
          (categoryActive ? 1 : 0) +
          (activeFilters.year ? 1 : 0) +
          (activeFilters.faculty ? 1 : 0) +
          (activeFilters.followers ? 1 : 0);
        const hasAnyActive = activeFilterCount > 0 || searchQuery.trim().length > 0;

const expandedDim = (filterDims || []).find(d => d.id === expandedFilter);

const dimChipStyle = (isExpanded, hasValue) => ({
          display: 'inline-flex',
          alignItems: 'center',
          gap: 6,
          padding: '7px 12px',
          borderRadius: 100,
          fontSize: 12,
          fontWeight: 700,
          fontFamily: fonts.sans,
          textTransform: 'uppercase',
          letterSpacing: '0.04em',
          whiteSpace: 'nowrap',
          cursor: 'pointer',
          background: isExpanded ? colors.primary : (hasValue ? colors.primary : colors.surface),
          color: (isExpanded || hasValue) ? colors.white : colors.accent,
          border: (isExpanded || hasValue) ? 'none' : `1px solid rgba(0,0,0,0.1)`,
          boxShadow: (isExpanded || hasValue) ? '0 4px 12px rgba(0, 0, 0, 0.15)' : '0 2px 4px rgba(0,0,0,0.02)',
          transition: 'all 0.2s',
        });

const optionChipStyle = (isSelected) => ({
          padding: '6px 14px',
          borderRadius: 100,
          fontSize: 12,
          fontWeight: 700,
          fontFamily: fonts.sans,
          textTransform: 'uppercase',
          letterSpacing: '0.05em',
          whiteSpace: 'nowrap',
          cursor: 'pointer',
          background: isSelected ? colors.primary : colors.surface,
          color: isSelected ? colors.white : colors.accent,
          border: isSelected ? 'none' : `1px solid rgba(0,0,0,0.1)`,
          transition: 'all 0.2s',
          display: 'inline-flex',
          alignItems: 'center',
          gap: 5,
          boxShadow: isSelected ? '0 4px 12px rgba(0, 0, 0, 0.15)' : '0 2px 4px rgba(0,0,0,0.02)',
        });

return (
          <div style={{ padding: `12px ${contentPaddingX}px`, background: colors.base, zIndex: 10, boxShadow: `0 4px 20px ${colors.base}` }}>
            <div style={{ marginBottom: 10, display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ flex: 1, display: 'flex', alignItems: 'center', background: colors.surface, borderRadius: 100, padding: '10px 16px', border: `1px solid ${colors.border}`, minWidth: 0 }}>
                <span style={{ marginRight: 10, opacity: 0.4, fontSize: 14 }}>🔍</span>
                <input
                  value={searchQuery}
                  onChange={e => setSearchQuery(e.target.value)}
                  placeholder="Search creators, handles, bios…"
                  style={{ border: 'none', background: 'transparent', flex: 1, fontSize: 14, outline: 'none', color: colors.primary, minWidth: 0 }}
                />
                {creatorOfTheDayProfile && (
                  <button
                    type="button"
                    onClick={() => handleMapCardSelect(creatorOfTheDayProfile.id, { source: 'daily_badge', funCardId: 'creator-of-the-day' })}
                    aria-label={`Open today's featured creator, ${dailyCreatorName}`}
                    title={`Today's featured creator: ${dailyCreatorName}`}
                    style={{
                      border: '2px solid #000',
                      background: colors.base,
                      color: colors.primary,
                      borderRadius: 100,
                      boxShadow: '2px 2px 0 #000',
                      cursor: 'pointer',
                      display: 'inline-flex',
                      alignItems: 'center',
                      gap: 6,
                      minWidth: 0,
                      maxWidth: isTabletViewport ? 260 : 126,
                      padding: isTabletViewport ? '6px 10px' : '5px 8px',
                      marginLeft: 8,
                      fontSize: isTabletViewport ? 11 : 10,
                      fontWeight: 900,
                      fontFamily: fonts.sans,
                      textTransform: 'uppercase',
                      letterSpacing: '0.04em',
                      lineHeight: 1,
                      transform: 'rotate(-1.5deg)',
                      flexShrink: 0
                    }}
                  >
                    <span aria-hidden style={{ color: colors.highlight, fontSize: isTabletViewport ? 12 : 11, lineHeight: 1 }}>★</span>
                    <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{dailyBadgeLabel}</span>
                  </button>
                )}
                {searchQuery && (
                  <button
                    onClick={() => setSearchQuery('')}
                    aria-label="Clear search"
                    style={{ border: 'none', background: 'transparent', color: colors.accent, cursor: 'pointer', fontSize: 16, lineHeight: 1, padding: 0, marginLeft: 6, opacity: 0.6 }}
                  >×</button>
                )}
              </div>
              {hasAnyActive && (
                <button
                  onClick={clearAll}
                  style={{
                    padding: '9px 14px',
                    borderRadius: 100,
                    fontSize: 11,
                    fontWeight: 800,
                    fontFamily: fonts.sans,
                    textTransform: 'uppercase',
                    letterSpacing: '0.06em',
                    whiteSpace: 'nowrap',
                    cursor: 'pointer',
                    background: colors.surface,
                    color: colors.primary,
                    border: `1px solid ${colors.border}`,
                  }}
                >
                  Clear{activeFilterCount ? ` (${activeFilterCount})` : ''}
                </button>
              )}
            </div>

<div style={{ display: 'flex', flexWrap: isTabletViewport ? 'wrap' : 'nowrap', overflowX: isTabletViewport ? 'visible' : 'auto', gap: 8, paddingBottom: 4, scrollbarWidth: 'none' }}>
              {(filterDims || []).map(dim => {
                const isExpanded = expandedFilter === dim.id;
                const hasValue = !!dim.value;
                return (
                  <button
                    key={dim.id}
                    onClick={() => setExpandedFilter(isExpanded ? null : dim.id)}
                    style={dimChipStyle(isExpanded, hasValue)}
                  >
                    <span style={{ opacity: (isExpanded || hasValue) ? 0.7 : 0.55, fontWeight: 800 }}>{dim.label}</span>
                    {hasValue && (
                      <span style={{ fontWeight: 900, letterSpacing: '0.02em' }}>· {dim.value}</span>
                    )}
                    <span style={{ fontSize: 9, marginLeft: 2, opacity: 0.7, transition: 'transform 0.2s', display: 'inline-block', transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }}>▾</span>
                  </button>
                );
              })}
            </div>

{expandedDim && (
              <div
                style={{
                  marginTop: 10,
                  padding: '10px 12px',
                  background: colors.surface,
                  border: `1px solid ${colors.border}`,
                  borderRadius: 18,
                  display: 'flex',
                  flexWrap: 'wrap',
                  gap: 8,
                  animation: 'none',
                }}
              >
                {(expandedDim.options || []).map(opt => {
                  const selected = expandedDim.isSelected(opt);
                  return (
                    <button
                      key={`${expandedDim.id}-${opt.value ?? 'any'}`}
                      onClick={() => { expandedDim.onSelect(opt.value); }}
                      style={optionChipStyle(selected)}
                    >
                      {opt.icon && (
                        <span style={{ fontSize: 12, filter: selected ? 'none' : 'grayscale(0.3)' }}>{opt.icon}</span>
                      )}
                      {opt.label}
                    </button>
                  );
                })}
              </div>
            )}
          </div>
        );
      })()}

<div style={{ display: 'flex', gap: 10, padding: `0 ${contentPaddingX}px 12px`, overflowX: 'auto', background: colors.base, zIndex: 9 }}>
        {isSignedIn ? (
          <button
            type="button"
            onClick={() => setView('saved_content')}
            style={{ flex: '0 0 auto', background: colors.primary, color: colors.base, border: `2px solid ${colors.border}`, borderRadius: 18, boxShadow: '3px 3px 0 #000', padding: '12px 14px', fontSize: 12, fontWeight: 900, letterSpacing: '0.05em', textTransform: 'uppercase', cursor: 'pointer', fontFamily: fonts.sans }}
          >
            Saved & Followed
          </button>
        ) : (
          <button
            type="button"
            onClick={() => openSignupChoice('saved_content')}
            style={{ flex: '0 0 auto', background: colors.primary, color: colors.base, border: `2px solid ${colors.border}`, borderRadius: 18, boxShadow: '3px 3px 0 #000', padding: '12px 14px', fontSize: 12, fontWeight: 900, letterSpacing: '0.05em', textTransform: 'uppercase', cursor: 'pointer', fontFamily: fonts.sans }}
          >
            Save & Follow
          </button>
        )}
      </div>

<div style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', position: 'relative' }}>
        <div
          role="toolbar"
          aria-label="Browse layout"
          style={{
            position: 'absolute',
            top: isDesktopViewport ? 12 : 10,
            right: isDesktopViewport ? 18 : 12,
            zIndex: 30,
            display: 'flex',
            alignItems: 'center',
            pointerEvents: 'auto',
            padding: 4,
            borderRadius: 100,
            background: colors.surface,
            boxShadow: '0 6px 16px rgba(0,0,0,0.08)',
            border: `1px solid ${colors.border}`
          }}
        >
          <button
            type="button"
            aria-label="Zoom out"
            title="Zoom out"
            onClick={() => zoomAtCenter(prev => prev - 0.15)}
            disabled={cardZoom <= 0.5}
            style={{
              width: layoutSwitcherButtonHeight,
              height: layoutSwitcherButtonHeight,
              borderRadius: 100,
              border: 'none',
              outline: 'none',
              WebkitTapHighlightColor: 'transparent',
              background: 'transparent',
              color: colors.accent,
              cursor: cardZoom <= 0.5 ? 'not-allowed' : 'pointer',
              opacity: cardZoom <= 0.5 ? 0.4 : 1,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: 18,
              fontWeight: 700,
              lineHeight: 1,
              fontFamily: fonts.sans,
              transition: 'all 0.2s'
            }}
          >−</button>
          <button
            type="button"
            aria-label="Zoom in"
            title="Zoom in"
            onClick={() => zoomAtCenter(prev => prev + 0.15)}
            disabled={cardZoom >= 2}
            style={{
              width: layoutSwitcherButtonHeight,
              height: layoutSwitcherButtonHeight,
              borderRadius: 100,
              border: 'none',
              outline: 'none',
              WebkitTapHighlightColor: 'transparent',
              background: 'transparent',
              color: colors.accent,
              cursor: cardZoom >= 2 ? 'not-allowed' : 'pointer',
              opacity: cardZoom >= 2 ? 0.4 : 1,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: 18,
              fontWeight: 700,
              lineHeight: 1,
              fontFamily: fonts.sans,
              transition: 'all 0.2s'
            }}
          >+</button>
          <div aria-hidden style={{ width: 1, height: Math.max(16, layoutSwitcherButtonHeight - 14), margin: '0 4px', background: colors.border }} />
          {[
            { id: 'pan', label: 'Map', icon: '🗺', hint: 'Browse spatially' },
            { id: 'grid', label: 'Grid', icon: '▦', hint: 'Scan cards fast' },
            { id: 'list', label: 'List', icon: '☰', hint: 'See more details' }
          ].map(({ id, label, icon }) => {
            const active = discoverLayout === id;
            return (
              <button
                key={id}
                type="button"
                title={label}
                aria-label={label}
                aria-pressed={active}
                onClick={() => handleDiscoverLayoutChange(id)}
                style={{
                  height: layoutSwitcherButtonHeight,
                  borderRadius: 100,
                  border: 'none',
                  outline: 'none',
                  WebkitTapHighlightColor: 'transparent',
                  background: active ? colors.primary : 'transparent',
                  color: active ? colors.base : colors.accent,
                  cursor: 'pointer',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  gap: isDesktopViewport ? 6 : 4,
                  fontSize: layoutSwitcherLabelSize,
                  lineHeight: 1,
                  padding: isDesktopViewport ? '0 18px' : '0 14px',
                  fontWeight: active ? 800 : 700,
                  transition: 'all 0.2s',
                  fontFamily: fonts.sans
                }}
              >
                <span style={{ fontSize: layoutSwitcherIconSize, transform: id === 'pan' ? 'translateY(0.5px)' : undefined, opacity: active ? 1 : 0.7 }} aria-hidden>{icon}</span>
                <span>{label}</span>
              </button>
            );
          })}
        </div>

{cardZoom !== 1 && (
          <div style={{
            position: 'absolute',
            top: isDesktopViewport ? 12 : 10,
            left: isDesktopViewport ? 18 : 12,
            zIndex: 30,
            pointerEvents: 'auto'
          }}>
            <button
              type="button"
              aria-label="Reset zoom"
              onClick={() => zoomAtCenter(1)}
              style={{
                height: layoutSwitcherButtonHeight,
                borderRadius: 100,
                border: `1px solid ${colors.border}`,
                outline: 'none',
                WebkitTapHighlightColor: 'transparent',
                background: colors.surface,
                color: colors.accent,
                cursor: 'pointer',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: layoutSwitcherLabelSize,
                fontWeight: 700,
                fontFamily: fonts.sans,
                padding: isDesktopViewport ? '0 14px' : '0 10px',
                boxShadow: '0 6px 16px rgba(0,0,0,0.08)'
              }}
            >
              {Math.round(cardZoom * 100)}%
            </button>
          </div>
        )}

{discoverLayout === 'pan' && (
          <div
            ref={mapViewportRef}
            style={{
              flex: 1,
              position: 'relative',
              overflow: 'hidden',
              background: colors.base,
              cursor: 'grab',
              touchAction: 'none',
              overscrollBehavior: 'none',
              WebkitTouchCallout: 'none',
              WebkitUserSelect: 'none',
              userSelect: 'none'
            }}
            onMouseDown={handleMapDown}
            onMouseMove={handleMapMove}
            onMouseUp={handleMapUp}
            onMouseLeave={handleMapUp}
            onClickCapture={handleMapClickCapture}
          >
            {(filteredProfiles || []).length === 0 ? (
              <div style={{ width: '100%', textAlign: 'center', padding: '80px 0', color: colors.accent }}>
                <div style={{ fontSize: 40, marginBottom: 16 }}>🍃</div>
                <p>No creators found here yet.</p>
              </div>
            ) : (
              (() => {
                const _stepW = CARD_W + GAP;
                const _stepH = CARD_H + GAP;
                const _stagger = _stepH / 2;
                const _padY = _stepH;
                const dp = displayPanItems || [];
                const _zoom = cardZoom;
                const _tileWz = TILE_W * _zoom;
                const _tileHz = TILE_H * _zoom;
                const _padYz = _padY * _zoom;
                let _ox = ((mapPanRef.current.x % _tileWz) + _tileWz) % _tileWz;
                let _oy = ((mapPanRef.current.y % _tileHz) + _tileHz) % _tileHz;
                if (_ox > _tileWz * 0.5) _ox -= _tileWz;
                if (_oy > _tileHz * 0.5) _oy -= _tileHz;
                const _ax = _ox >= 0 ? _ox - _tileWz : _ox + _tileWz;
                const _ay = _oy >= 0 ? _oy - _tileHz : _oy + _tileHz;
                const _qx = [Math.round(_ox), Math.round(_ax), Math.round(_ox), Math.round(_ax)];
                const _qy = [Math.round(_oy - _padYz), Math.round(_oy - _padYz), Math.round(_ay - _padYz), Math.round(_ay - _padYz)];
                return [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',
                    transform: `translate3d(${_qx[q]}px,${_qy[q]}px,0) scale(${_zoom})`,
                  }}>
                    {(dp || []).map((item, i) => {
                      const col = i % cols;
                      const row = Math.floor(i / cols);
                      if (item.kind === 'fun') {
                        return (
                          <FunMapCard
                            key={_getDiscoverItemRenderKey(item)}
                            card={item.card}
                            x={col * _stepW}
                            y={_padY + row * _stepH + (col % 2 === 1 ? _stagger : 0)}
                            cardW={CARD_W}
                            cardH={CARD_H}
                            onSelect={handleFunCardSelect}
                            theme={mapCardTheme}
                          />
                        );
                      }
                      const p = item.profile;
                      return (
                        <MapCard
                          key={_getDiscoverItemRenderKey(item)}
                          p={p}
                          x={col * _stepW}
                          y={_padY + row * _stepH + (col % 2 === 1 ? _stagger : 0)}
                          cardW={CARD_W}
                          cardH={CARD_H}
                          mutual={mutualUserIds.has(p.userId)}
                          onSelect={handleMapCardSelect}
                          theme={mapCardTheme}
                        />
                      );
                    })}
                    {Array.from({ length: cols }, (_, c) => {
                      const gi = (rows - 1) * cols + c;
                      if (gi >= (dp || []).length) return null;
                      const item = dp[gi];
                      if (item.kind === 'fun') {
                        return (
                          <FunMapCard
                            key={`gt-${c}-${_getDiscoverItemRenderKey(item)}`}
                            card={item.card}
                            x={c * _stepW}
                            y={c % 2 === 1 ? _stagger : 0}
                            cardW={CARD_W}
                            cardH={CARD_H}
                            onSelect={handleFunCardSelect}
                            theme={mapCardTheme}
                          />
                        );
                      }
                      const p = item.profile;
                      return (
                        <MapCard
                          key={`gt-${c}-${_getDiscoverItemRenderKey(item)}`}
                          p={p}
                          x={c * _stepW}
                          y={c % 2 === 1 ? _stagger : 0}
                          cardW={CARD_W}
                          cardH={CARD_H}
                          mutual={mutualUserIds.has(p.userId)}
                          onSelect={handleMapCardSelect}
                          theme={mapCardTheme}
                        />
                      );
                    })}
                    {Array.from({ length: cols }, (_, c) => {
                      if (c >= (dp || []).length) return null;
                      const item = dp[c];
                      if (item.kind === 'fun') {
                        return (
                          <FunMapCard
                            key={`gb-${c}-${_getDiscoverItemRenderKey(item)}`}
                            card={item.card}
                            x={c * _stepW}
                            y={_padY + TILE_H + (c % 2 === 1 ? _stagger : 0)}
                            cardW={CARD_W}
                            cardH={CARD_H}
                            onSelect={handleFunCardSelect}
                            theme={mapCardTheme}
                          />
                        );
                      }
                      const p = item.profile;
                      return (
                        <MapCard
                          key={`gb-${c}-${_getDiscoverItemRenderKey(item)}`}
                          p={p}
                          x={c * _stepW}
                          y={_padY + TILE_H + (c % 2 === 1 ? _stagger : 0)}
                          cardW={CARD_W}
                          cardH={CARD_H}
                          mutual={mutualUserIds.has(p.userId)}
                          onSelect={handleMapCardSelect}
                          theme={mapCardTheme}
                        />
                      );
                    })}
                  </div>
                ));
              })()
            )}
          </div>
        )}

{discoverLayout === 'grid' && (
          <div ref={gridScrollRef} style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch', padding: `44px ${contentPaddingX}px 32px`, overscrollBehavior: 'contain' }}>
            {(filteredProfiles || []).length === 0 ? (
              <div style={{ textAlign: 'center', padding: '80px 0', color: colors.accent }}>
                <div style={{ fontSize: 40, marginBottom: 16 }}>🍃</div>
                <p>No creators found here yet.</p>
              </div>
            ) : (
              <div style={{ display: 'flex', gap: discoverGridGap, alignItems: 'flex-start' }}>
                {(gridDiscoverColumns || []).map((colItems, colIdx) => (
                  <div key={colIdx} style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: discoverGridGap, paddingTop: colIdx % 2 === 1 ? discoverGridStagger : 0 }}>
                    {(colItems || []).map((item) => item.kind === 'fun' ? (
                      <FunGridCard key={item.card.id} card={item.card} onSelect={handleFunCardSelect}
                        serifFont={fonts.serif} surfaceColor={colors.surface} primaryColor={colors.primary}
                        accentColor={colors.accent} highlightColor={colors.highlight} />
                    ) : (
                      <GridCard key={item.profile.id} p={item.profile} mutual={mutualUserIds.has(item.profile.userId)} onSelect={handleMapCardSelect}
                        serifFont={fonts.serif} tagMeta={TAG_META} highlightColor={colors.highlight} surfaceColor={colors.surface} textScale={Math.min(1, cardZoom)} />
                    ))}
                  </div>
                ))}
              </div>
            )}
          </div>
        )}

{discoverLayout === 'list' && (
          <div ref={gridScrollRef} style={{ flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch', padding: `44px ${contentPaddingX}px 32px`, overscrollBehavior: 'contain' }}>
            {(filteredProfiles || []).length === 0 ? (
              <div style={{ textAlign: 'center', padding: '80px 0', color: colors.accent }}>
                <div style={{ fontSize: 40, marginBottom: 16 }}>🍃</div>
                <p>No creators found here yet.</p>
              </div>
            ) : (
              <div style={{ display: 'flex', flexDirection: 'column', maxWidth: listMaxWidth || (isDesktopViewport ? 1000 : 'none'), width: '100%', margin: '0 auto' }}>
                {(listDiscoverItems || []).map((item) => item.kind === 'fun' ? (
                  <FunListCard key={item.card.id} card={item.card} onSelect={handleFunCardSelect}
                    serifFont={fonts.serif} highlightColor={colors.highlight} primaryColor={colors.primary}
                    accentColor={colors.accent} secondaryColor={colors.secondary} borderColor={colors.border}
                    isDesktop={isDesktopViewport} />
                ) : (
                  <ListCard key={item.profile.id} p={item.profile} mutual={mutualUserIds.has(item.profile.userId)} onSelect={handleMapCardSelect}
                    serifFont={fonts.serif} highlightColor={colors.highlight} primaryColor={colors.primary}
                    accentColor={colors.accent} secondaryColor={colors.secondary} borderColor={colors.border}
                    isDesktop={isDesktopViewport} />
                ))}
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

// App is rendered by the runtime</article></body></html>

{p.name}

{p.name}

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

UTS CREATOR INDEX

Welcome to theCommunity

Profile Submitted

Admin Control

Growth Signals

{adminDraft.name || 'Creator Draft'}

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

Welcome to the
Community