{renderCardWaves()} {renderSparkles()}

{children}

); const sectionHeading = (label, sub) => (

{label}

{sub &&

{sub}

}

); const pillBtn = (label, onClick, opts) => ( ); const pillTag = (text, variant) => ( {text} ); const playfulInput = (props, extraStyle) => ( ); const storyCircle = (emoji, label, count, active, onClick) => ( ); const emptyState = (text) => (

{text}

); const screenWrap = (children) => (

{children}

); const modalBackdrop = (onClose) => (

); const closeIconBtn = (onClick, style) => ( ); // Live-updating ref for safety in async updates const appDataRef = React.useRef(appData); React.useEffect(() => { appDataRef.current = appData; }, [appData]); // Fetch location on mount for directions precision React.useEffect(() => { if (typeof getCurrentLocation === 'function') { getCurrentLocation({ enableHighAccuracy: true }) .then(loc => setUserLocation(loc)) .catch(err => console.log('Location query skipped/declined:', err.message)); } }, [getCurrentLocation]); // Toast notification system helper const showToast = (message) => { setToast(message); setTimeout(() => setToast(null), 3000); }; // Real UNSW Kensington Campus Events Data Set const eventsList = React.useMemo(() => [ { id: 'event-1', title: 'Kensotech Hackathon 2026', hostName: 'DevSoc', hostLogo: '💻', locationText: 'Ainsworth Building (G20)', lat: -33.9175, lng: 151.2310, time: '10:00 AM - 6:00 PM', date: 'Today, 24 May', description: 'Build innovative cyber-infrastructure solutions for student campus hubs. Prizes, mentors, and midnight fuel provided.', type: 'Society', accent: '#F452BA' }, { id: 'event-2', title: 'Library Lawn Co-Working Session', hostName: 'MedSoc', hostLogo: '🩺', locationText: 'UNSW Library Lawn', lat: -33.9165, lng: 151.2305, time: '1:00 PM - 3:00 PM', date: 'Today, 24 May', description: 'Outdoor peer-study sprint to smash high-yield content. Free energy drinks and high-fidelity lo-fi beats.', type: 'Society', accent: '#D946A8' }, { id: 'event-3', title: 'Holographic Cinema: Roundhouse Cinema', hostName: 'FilmSoc', hostLogo: '🎬', locationText: 'The Roundhouse (E6)', lat: -33.9180, lng: 151.2325, time: '7:30 PM - 10:00 PM', date: 'Tonight, 24 May', description: 'Experience futuristic visual projection tech under the iconic dome. Complete with immersive room audio.', type: 'Society', accent: '#B794F6' }, { id: 'event-4', title: 'COMP3121 Algorithmic Study Group', hostName: 'z3456789 (Alex)', hostLogo: '👤', locationText: 'The Quadrangle Building', lat: -33.9170, lng: 151.2300, time: '11:00 AM - 1:00 PM', date: 'Today, 24 May', description: 'Cracking down on divide & conquer and flow networks. Anyone is welcome to hop in and share explanations.', type: 'Student', accent: '#E84393' }, { id: 'event-5', title: 'Post-Lecture Science Rd Chill-out', hostName: 'z5555555 (Zara)', hostLogo: '🍔', locationText: 'Science Road Canopy', lat: -33.9160, lng: 151.2315, time: '12:30 PM - 2:00 PM', date: 'Today, 24 May', description: 'Grabbing street eats and soaking up the afternoon sunshine. Come say hi and bring a classmate!', type: 'Student', accent: '#E84393' } ], []); // Unified members const memberList = React.useMemo(() => { if (isMultiplayer && members?.length > 0) return members; return [{ id: user.id, displayName: user.name || 'You', handle: user.handle || 'unsw_student', avatarUrl: user.avatarUrl, role: 'owner' }]; }, [isMultiplayer, members, user]); // RSVP state stored in shared or user data const rsvps = appData?.rsvps ?? {}; const societyProfiles = React.useMemo(() => [ { id: 'soc-dev', name: 'DevSoc', logo: '💻', cat: 'Technology', accent: '#F452BA' }, { id: 'soc-med', name: 'MedSoc', logo: '🩺', cat: 'Health', accent: '#D946A8' }, { id: 'soc-film', name: 'FilmSoc', logo: '🎬', cat: 'Creative', accent: '#B794F6' }, { id: 'soc-wom', name: 'WomSoc', logo: '✨', cat: 'Community', accent: '#E84393' } ], []); const societyPosts = React.useMemo(() => [ { id: 'socpost-dev-1', kind: 'society', societyId: 'soc-dev', hostName: 'DevSoc', hostLogo: '💻', title: 'Kensotech Hackathon 2026', description: 'Build cyber-infrastructure for student campus hubs. Prizes, mentors, and midnight fuel provided.', locationText: 'Ainsworth Building (G20)', date: 'Today, 24 May', time: '10:00 AM - 6:00 PM', lat: -33.9175, lng: 151.2310, postType: 'event', accent: '#F452BA' }, { id: 'socpost-dev-2', kind: 'society', societyId: 'soc-dev', hostName: 'DevSoc', hostLogo: '💻', title: 'Frontend Subcommittee Callout', description: 'Recruiting designers and React builders for semester projects. First-years welcome.', locationText: 'Online + K17', date: 'Fri, 30 May', time: '5:00 PM', lat: -33.9172, lng: 151.2314, postType: 'recruitment', accent: '#F452BA' }, { id: 'socpost-med-1', kind: 'society', societyId: 'soc-med', hostName: 'MedSoc', hostLogo: '🩺', title: 'Library Lawn Co-Working Session', description: 'Outdoor peer-study sprint with free energy drinks and high-fidelity lo-fi beats.', locationText: 'UNSW Library Lawn', date: 'Today, 24 May', time: '1:00 PM - 3:00 PM', lat: -33.9165, lng: 151.2305, postType: 'event', accent: '#D946A8' }, { id: 'socpost-med-2', kind: 'society', societyId: 'soc-med', hostName: 'MedSoc', hostLogo: '🩺', title: 'Clinical Skills AGM Notice', description: 'Annual general meeting plus open director roles for clinical teaching nights.', locationText: 'Wallace Wurth', date: 'Tue, 27 May', time: '6:00 PM', lat: -33.9178, lng: 151.2298, postType: 'recruitment', accent: '#D946A8' }, { id: 'socpost-film-1', kind: 'society', societyId: 'soc-film', hostName: 'FilmSoc', hostLogo: '🎬', title: 'Holographic Cinema: Roundhouse', description: 'Futuristic visual projection under the iconic dome with immersive room audio.', locationText: 'The Roundhouse (E6)', date: 'Tonight, 24 May', time: '7:30 PM - 10:00 PM', lat: -33.9180, lng: 151.2325, postType: 'event', accent: '#B794F6' }, { id: 'socpost-film-2', kind: 'society', societyId: 'soc-film', hostName: 'FilmSoc', hostLogo: '🎬', title: 'Short Film Crew Mixer', description: 'Find editors, actors, sound recordists, and DPs for your next campus short.', locationText: 'Webster Courtyard', date: 'Thu, 29 May', time: '4:30 PM', lat: -33.9169, lng: 151.2320, postType: 'event', accent: '#B794F6' }, { id: 'socpost-wom-1', kind: 'society', societyId: 'soc-wom', hostName: 'WomSoc', hostLogo: '✨', title: 'Women in Leadership Breakfast', description: 'Panel and breakfast for students interested in leadership, advocacy, and community.', locationText: 'Roundhouse Club Bar', date: 'Wed, 28 May', time: '8:30 AM', lat: -33.9180, lng: 151.2325, postType: 'event', accent: '#E84393' }, { id: 'socpost-wom-2', kind: 'society', societyId: 'soc-wom', hostName: 'WomSoc', hostLogo: '✨', title: 'Mentor Program Expressions of Interest', description: 'Register interest to join the semester mentor circle as a mentee or mentor.', locationText: '', date: 'Open this week', time: 'All day', lat: -33.9173, lng: 151.2313, postType: 'recruitment', accent: '#E84393' } ], []); const seedStudentPosts = React.useMemo(() => [ { id: 'student-priya-1', kind: 'student', authorId: 'student-priya', authorName: 'Priya S.', authorHandle: 'priya_s', title: 'Anyone want Stellini after COMP?', description: 'I have a 45 minute break and want a pasta run. Low pressure, just keen to meet people.', locationText: 'Stellini Pasta Bar', dateTime: 'Today, 12:15 PM', capacity: '3', requirements: [], createdAt: 1716530400000 }, { id: 'student-marcus-1', kind: 'student', authorId: 'student-marcus', authorName: 'Marcus L.', authorHandle: 'marcus_l', title: 'COMP1511 study group at Quad', description: 'Going over arrays, pointers, and practice exam questions tonight.', locationText: 'The Quadrangle', dateTime: 'Today, 6:00 PM', capacity: '6', requirements: ['Only Engineering students'], createdAt: 1716530500000 }, { id: 'student-aisha-1', kind: 'student', authorId: 'student-aisha', authorName: 'Aisha K.', authorHandle: 'aisha_k', title: 'Law library case note sprint', description: 'Silent sprint then 15 min recap. Bring your own coffee.', locationText: 'Law Library', dateTime: 'Tomorrow, 10:00 AM', capacity: '4', requirements: ['Only Girls', 'Only Law students'], createdAt: 1716530600000 }, { id: 'student-noah-1', kind: 'student', authorId: 'student-noah', authorName: 'Noah T.', authorHandle: 'noah_t', title: 'Roundhouse trivia team?', description: 'Need two more people for casual trivia. No expertise required.', locationText: 'Roundhouse', dateTime: 'Tonight, 7:00 PM', capacity: '2', requirements: [], createdAt: 1716530700000 }, { id: 'student-lee-1', kind: 'student', authorId: 'student-lee', authorName: 'Lee R.', authorHandle: 'lee_r', title: 'Design critique swap', description: 'Looking for non-binary creatives to swap portfolio feedback before submissions.', locationText: 'Paddington shuttle stop', dateTime: 'Fri, 2:00 PM', capacity: '5', requirements: ['Non-binary only', 'Only Arts students'], createdAt: 1716530800000 } ], []); const followedSocieties = Array.isArray(appData?.follows) ? appData.follows : ['soc-dev', 'soc-film']; const favoriteStudents = Array.isArray(appData?.favoriteStudents) ? appData.favoriteStudents : ['student-priya']; const userStudentPosts = Array.isArray(appData?.studentPosts) ? appData.studentPosts : []; const studentPosts = React.useMemo(() => [...userStudentPosts, ...seedStudentPosts], [userStudentPosts, seedStudentPosts]); const joinRequests = appData?.joinRequests ?? {}; const approvedJoins = Array.isArray(appData?.approvedJoins) ? appData.approvedJoins : []; const resolveCampusLocation = React.useCallback((item) => { if (Number.isFinite(item?.lat) && Number.isFinite(item?.lng)) return { lat: item.lat, lng: item.lng }; const label = String(item?.locationText || '').toLowerCase(); if (!label.trim()) return null; const knownLocations = [ { match: ['ainsworth', 'g20'], lat: -33.9175, lng: 151.2310 }, { match: ['library lawn'], lat: -33.9165, lng: 151.2305 }, { match: ['law library'], lat: -33.9175, lng: 151.2294 }, { match: ['roundhouse', 'club bar', 'e6'], lat: -33.9180, lng: 151.2325 }, { match: ['quadrangle', 'quad'], lat: -33.9170, lng: 151.2300 }, { match: ['science road', 'science rd'], lat: -33.9160, lng: 151.2315 }, { match: ['wallace wurth'], lat: -33.9178, lng: 151.2298 }, { match: ['webster'], lat: -33.9169, lng: 151.2320 }, { match: ['k17'], lat: -33.9172, lng: 151.2314 }, { match: ['stellini'], lat: -33.9174, lng: 151.2307 }, { match: ['paddington shuttle'], lat: -33.9173, lng: 151.2302 } ]; const known = (knownLocations || []).find(loc => (loc.match || []).some(term => (label || []).includes(term))); if (known) return { lat: known.lat, lng: known.lng }; let hash = 0; for (let i = 0; i < (label || []).length; i += 1) hash = (hash * 31 + label.charCodeAt(i)) % 100000; return { lat: -33.9187 + ((hash % 320) / 100000), lng: 151.2294 + (((hash >> 3) % 420) / 100000) }; }, []); const mapPins = React.useMemo(() => { const sourceItems = [...(eventsList || []), ...(societyPosts || []), ...(studentPosts || [])]; const seen = {}; return (sourceItems || []).reduce((pins, item) => { const coords = resolveCampusLocation(item); if (!coords) return pins; const title = item.title || 'Untitled event'; const locationText = item.locationText || 'UNSW Kensington'; const hostName = item.hostName || item.authorName || 'UNSW Student'; const key = [title, locationText, hostName].map(v => String(v).trim().toLowerCase()).join('|'); if (seen[key]) return pins; seen[key] = true; pins.push({ ...item, id: item.id || key, title, hostName, locationText, time: item.time || item.dateTime || 'Time TBC', date: item.date || '', lat: coords.lat, lng: coords.lng, accent: item.accent || (item.kind === 'society' || item.type === 'Society' ? '#F452BA' : '#E84393') }); return pins; }, []); }, [eventsList, societyPosts, studentPosts, resolveCampusLocation]); const getLocationCoords = React.useCallback((loc) => { if (!loc) return null; const lat = Number.isFinite(loc.latitude) ? loc.latitude : loc.lat; const lng = Number.isFinite(loc.longitude) ? loc.longitude : loc.lng; if (!Number.isFinite(lat) || !Number.isFinite(lng)) return null; return { lat, lng }; }, []); const getWalkingDistanceMeters = React.useCallback((origin, destination) => { if (!origin || !destination) return null; const toRadians = (value) => value * Math.PI / 180; const earthRadiusMeters = 6371000; const dLat = toRadians(destination.lat - origin.lat); const dLng = toRadians(destination.lng - origin.lng); const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(toRadians(origin.lat)) * Math.cos(toRadians(destination.lat)) * Math.sin(dLng / 2) * Math.sin(dLng / 2); const straightLineMeters = earthRadiusMeters * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); return Math.round(straightLineMeters * 1.25); }, []); const formatWalkingDistance = React.useCallback((meters) => { if (!Number.isFinite(meters)) return null; if (meters < 1000) return `${Math.max(20, Math.round(meters / 10) * 10)} m`; return `${(meters / 1000).toFixed(1)} km`; }, []); const describeCampusRoute = React.useCallback((locationText) => { const label = String(locationText || '').toLowerCase(); if ((label || '').includes('ainsworth') || (label || '').includes('g20')) { return ['Follow University Mall toward Engineering.', 'Turn in at Ainsworth Building G20.', 'Look for the event check-in near the main foyer.']; } if ((label || '').includes('library lawn')) { return ['Head toward the Library Lawn from University Mall.', 'Stay on the central pedestrian path.', 'Meet near the open grass edge closest to the Library.']; } if ((label || '').includes('roundhouse') || (label || '').includes('club bar') || (label || '').includes('e6')) { return ['Walk east along University Mall.', 'Continue toward the Roundhouse dome.', 'Enter through the main Roundhouse doors and follow event signage.']; } if ((label || '').includes('quadrangle') || (label || '').includes('quad')) { return ['Move west from University Mall.', 'Follow the path toward The Quadrangle.', 'Use the central courtyard as the meeting point.']; } if ((label || '').includes('science road') || (label || '').includes('science rd')) { return ['Head toward Science Road from the central walkway.', 'Stay under the canopy section.', 'Meet by the covered seating zone.']; } if ((label || '').includes('law library')) { return ['Walk toward the west side of Kensington campus.', 'Follow signs for Law and Library spaces.', 'Meet inside the Law Library entry area.']; } if ((label || '').includes('online')) { return ['Confirm the online room or call link with the host.', 'If you are joining from campus, K17 is near the central Kensington buildings.', 'Arrive five minutes early for check-in.']; } return ['Head to University Mall as the central route.', 'Follow campus signs toward the listed building or landmark.', 'Use the event title and host name to confirm the final meetup point.']; }, []); const curatedFeedItems = React.useMemo(() => { const societyItems = (societyPosts || []).filter(p => (followedSocieties || []).includes(p.societyId)); const studentItems = (studentPosts || []).filter(p => (favoriteStudents || []).includes(p.authorId)); return [...societyItems, ...studentItems]; }, [societyPosts, followedSocieties, studentPosts, favoriteStudents]); const toggleFollowSociety = (socId) => { const next = (followedSocieties || []).includes(socId) ? (followedSocieties || []).filter(id => id !== socId) : [...(followedSocieties || []), socId]; writePatch({ follows: next }); showToast((next || []).includes(socId) ? '✨ Society followed' : 'Society unfollowed'); }; const toggleFavoriteStudent = (studentId) => { const next = (favoriteStudents || []).includes(studentId) ? (favoriteStudents || []).filter(id => id !== studentId) : [...(favoriteStudents || []), studentId]; writePatch({ favoriteStudents: next }); showToast((next || []).includes(studentId) ? '❤️ Student favourited' : 'Removed favourite'); }; const submitStudentPost = () => { const title = postForm.title.trim(); const description = postForm.description.trim(); const locationText = postForm.locationText.trim(); const dateTime = postForm.dateTime.trim(); const capacity = postForm.capacity.trim(); if (!title || !description || !locationText || !dateTime || !capacity) { showToast('Complete every field before posting'); return; } const capacityNumber = Number(capacity); if (!Number.isFinite(capacityNumber) || capacityNumber <= 0) { showToast('Capacity must be a positive number'); return; } const latest = appDataRef.current ?? {}; const latestPosts = Array.isArray(latest?.studentPosts) ? latest.studentPosts : []; const newPost = { id: 'post-' + Date.now(), kind: 'student', authorId: user.id, authorName: user.name || 'You', authorHandle: user.handle || 'unsw_student', title, description, locationText, dateTime, capacity, requirements: requirementsList, createdAt: Date.now() }; writePatch({ studentPosts: [newPost, ...latestPosts] }); setPostForm({ title: '', description: '', locationText: '', dateTime: '', capacity: '', gender: 'All', faculty: 'All faculties' }); setRequirementsList([]); setReqInput(''); setPostSheetOpen(false); setActiveTab('Events'); showToast('📌 Event posted'); }; const askToJoin = (post) => { if (post.authorId === user.id) { showToast('This is your post'); return; } const latest = appDataRef.current ?? {}; const latestRequests = latest?.joinRequests ?? {}; const existing = latestRequests?.[post.id] ?? []; if ((existing || []).some(r => r.requesterId === user.id)) { showToast('Request already sent'); return; } const studentData = latest?.student ?? { name: user.name || 'UNSW Student', zID: 'z5559999', degree: 'Bachelor of Computer Science', year: '3rd Year' }; const request = { requesterId: user.id, requesterName: studentData.name, requesterHandle: user.handle || 'unsw_student', requesterzID: studentData.zID, requesterDegree: studentData.degree, requesterYear: studentData.year, status: 'pending', createdAt: Date.now() }; writePatch({ joinRequests: { ...latestRequests, [post.id]: [...existing, request] } }); showToast('🙋 Request sent to ' + post.authorName); }; const declineRequest = (post, request) => { const latest = appDataRef.current ?? {}; const latestRequests = latest?.joinRequests ?? {}; const list = latestRequests?.[post.id] ?? []; const nextList = (list || []).filter(r => r.requesterId !== request.requesterId); writePatch({ joinRequests: { ...latestRequests, [post.id]: nextList } }); showToast('❌ Request declined'); }; const getJoinedEventsLive = React.useCallback(() => { const studentApproved = (approvedJoins || []).filter(j => j.requesterId === user.id).map(j => ({ id: j.postId, title: j.title, dateTime: j.dateTime, locationText: j.locationText, hostName: j.hostName, type: 'Student Notice Board' })); const campusRsvps = (eventsList || []).filter(evt => (rsvps[evt.id] ?? []).some(m => m.id === user.id)).map(evt => ({ id: evt.id, title: evt.title, dateTime: `${evt.date} · ${evt.time}`, locationText: evt.locationText, hostName: evt.hostName, type: 'Society Event' })); const societyRsvps = (societyPosts || []).filter(post => (rsvps[post.id] ?? []).some(m => m.id === user.id)).map(post => ({ id: post.id, title: post.title, dateTime: `${post.date} · ${post.time}`, locationText: post.locationText, hostName: post.hostName, type: 'Society Event' })); const combined = [...studentApproved, ...campusRsvps, ...societyRsvps]; const seen = {}; return (combined || []).filter(item => { const key = item.id || item.title; if (seen[key]) return false; seen[key] = true; return true; }); }, [approvedJoins, rsvps, eventsList, societyPosts, user.id]); const decideRequest = (post, request, status) => { const latest = appDataRef.current ?? {}; const latestRequests = latest?.joinRequests ?? {}; const list = latestRequests?.[post.id] ?? []; const nextList = (list || []).map(r => r.requesterId === request.requesterId ? { ...r, status } : r); const latestApproved = Array.isArray(latest?.approvedJoins) ? latest.approvedJoins : []; const nextApproved = status === 'approved' ? [...latestApproved, { postId: post.id, requesterId: request.requesterId, title: post.title, locationText: post.locationText, dateTime: post.dateTime, hostName: post.authorName }] : latestApproved; writePatch({ joinRequests: { ...latestRequests, [post.id]: nextList }, approvedJoins: nextApproved }); showToast(status === 'approved' ? '✅ Request approved' : 'Request rejected'); }; const handleSocietyAction = (post) => { toggleRSVP(post.id); if (post.postType === 'event') { setSelectedPin(post); } }; const getPostRequirementTags = (post) => { if (Array.isArray(post.requirements) && (post.requirements || []).length > 0) { return (post.requirements || []).map(r => String(r).trim()).filter(Boolean); } const legacy = []; if (post.gender && post.gender !== 'All') legacy.push(post.gender); if (post.faculty && post.faculty !== 'All faculties') legacy.push(post.faculty); return legacy; }; const renderStudentPostCard = (post, compact) => { const isFav = (favoriteStudents || []).includes(post.authorId); const postRequests = joinRequests?.[post.id] ?? []; const mine = post.authorId === user.id; const myRequest = (postRequests || []).find(r => r.requesterId === user.id); const requestStatus = myRequest?.status ?? null; const requirementTags = getPostRequirementTags(post); return playfulCard( <>

{!mine && ( )}

{post.title}

{post.description}

{(requirementTags || []).length > 0 && (

{(requirementTags || []).map((req, rIdx) => {pillTag(req)})}

)}

📍 {post.locationText || 'Location TBC'} 🕐 {post.dateTime}

{mine ? (

My Requests

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

No join requests yet.

) : (postRequests || []).map(req => (

{req.requesterName} · {req.status} {req.status === 'pending' && ( {pillBtn('Approve', () => decideRequest(post, req, 'approved'), { sm: true })} {pillBtn('Reject', () => decideRequest(post, req, 'rejected'), { sm: true, ghost: true })} )}

))}

) : ( pillBtn( requestStatus === 'approved' ? 'Approved ✓' : requestStatus === 'rejected' ? 'Rejected' : requestStatus === 'pending' ? 'Requested' : 'Ask to join', () => askToJoin(post), { full: true, disabled: requestStatus === 'pending' || requestStatus === 'approved', style: requestStatus === 'approved' ? { background: '#12d69b' } : {} } ) )} , { padding: compact ? 22 : ui.padCard }, null, post.id ); }; const renderSocietyFeedCard = (evt) => { const rsvpCount = rsvps[evt.id]?.length ?? 0; const isUserAttending = rsvps[evt.id]?.some(m => m.id === user.id) ?? false; return playfulCard( <>

{evt.hostLogo} {evt.hostName}

{evt.time}

{evt.title}

📍 {evt.locationText}

{evt.description}

{(rsvps[evt.id] ?? []).slice(0, 4).map((att, attIdx) => (

0 ? -8 : 0, fontSize: 10, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 'bold', cursor: 'pointer', }} onClick={() => { if (att.handle) openProfile(att.handle); }}> {!att.avatarUrl && att.displayName.charAt(0)}

))}

{rsvpCount > 0 ? rsvpCount + ' attending' : 'Be the first'}

{pillBtn(isUserAttending ? '✓ RSVPd' : 'Join', () => toggleRSVP(evt.id), { sm: true, style: isUserAttending ? { background: 'rgba(255,255,255,0.3)' } : {} })}

, { borderLeft: '5px solid rgba(255,255,255,0.45)' }, null, evt.id ); }; const toggleRSVP = (eventId) => { const currentRSVPs = rsvps[eventId] ?? []; const isAttending = (currentRSVPs || []).some(m => m.id === user.id); let updatedList; if (isAttending) { updatedList = (currentRSVPs || []).filter(m => m.id !== user.id); showToast('❌ Removed RSVP'); } else { const newAttendee = { id: user.id, displayName: user.name || 'You', handle: user.handle || 'unsw_student', avatarUrl: user.avatarUrl || '' }; updatedList = [...currentRSVPs, newAttendee]; showToast('🎉 Registered RSVP! See you there!'); // Visual confetti trigger setConfettiActive(true); setTimeout(() => setConfettiActive(false), 2000); } const updatedRSVPs = { ...rsvps, [eventId]: updatedList }; writePatch({ rsvps: updatedRSVPs }); }; // Get directions function const launchDirections = async (lat, lng, eventTitle, locationText) => { const resolvedCoords = Number.isFinite(lat) && Number.isFinite(lng) ? { lat, lng } : resolveCampusLocation({ locationText }); if (!resolvedCoords) { showToast('No coordinates available for ' + eventTitle); return; } let originLocation = userLocation; if (!originLocation && typeof getCurrentLocation === 'function') { try { originLocation = await getCurrentLocation({ enableHighAccuracy: true }); setUserLocation(originLocation); } catch (err) { console.log('Location unavailable for directions:', err.message); } } const originCoords = getLocationCoords(originLocation); const distanceMeters = originCoords ? getWalkingDistanceMeters(originCoords, resolvedCoords) : null; const distanceLabel = formatWalkingDistance(distanceMeters); const walkMinutes = Number.isFinite(distanceMeters) ? Math.max(1, Math.round(distanceMeters / 80)) : null; setDirectionsSheet({ eventTitle, locationText: locationText || 'UNSW Kensington', lat: resolvedCoords.lat, lng: resolvedCoords.lng, distanceLabel, walkTimeLabel: walkMinutes ? `${walkMinutes} min walk` : 'Campus route', routeSteps: describeCampusRoute(locationText), hasOrigin: Boolean(originCoords), }); showToast('🗺️ Route ready for ' + eventTitle); }; const renderSelectedPinPopup = (isFull) => { if (!selectedPin) return null; const timeLabel = selectedPin.date ? `${selectedPin.date} · ${selectedPin.time}` : selectedPin.time; return (

e.stopPropagation()} >

{selectedPin.hostName} {timeLabel}

{selectedPin.title}

📍 {selectedPin.locationText}

); }; const renderDirectionsSheet = () => { if (!directionsSheet) return null; return ( <>

setDirectionsSheet(null)} />

Walking route

{directionsSheet.eventTitle}

{closeIconBtn(() => setDirectionsSheet(null), { flex: '0 0 auto' })}

📍 {directionsSheet.locationText}

{directionsSheet.walkTimeLabel} {directionsSheet.distanceLabel && {directionsSheet.distanceLabel}} {directionsSheet.lat.toFixed(4)}, {directionsSheet.lng.toFixed(4)}

{!directionsSheet.hasOrigin && (

Enable location to estimate distance from where you are now.

)}

{(directionsSheet.routeSteps || []).map((step, index) => (

{index + 1} {step}

))}

); }; // SVG Projection map converter // Kensington campus box roughly bounding our pins: -33.9150 (Top) to -33.9190 (Bottom) // 151.2290 (Left) to 151.2340 (Right) const mapProjection = (lat, lng, width = 360, height = 200) => { const latMin = -33.9190; const latMax = -33.9150; const lngMin = 151.2290; const lngMax = 151.2340; const x = ((lng - lngMin) / (lngMax - lngMin)) * width; const y = ((latMax - lat) / (latMax - latMin)) * height; return { x, y }; }; // Interactive map elements const renderMapSVG = (width, height, isFull) => { // Projection grid lines and landmarks of UNSW Kensington const walkwayY = mapProjection(-33.9173, 151.2315, width, height).y; const libraryX = mapProjection(-33.9165, 151.2305, width, height).x; const libraryY = mapProjection(-33.9165, 151.2305, width, height).y; const ainsworthX = mapProjection(-33.9175, 151.2310, width, height).x; const ainsworthY = mapProjection(-33.9175, 151.2310, width, height).y; const roundhouseX = mapProjection(-33.9180, 151.2325, width, height).x; const roundhouseY = mapProjection(-33.9180, 151.2325, width, height).y; const quadX = mapProjection(-33.9170, 151.2300, width, height).x; const quadY = mapProjection(-33.9170, 151.2300, width, height).y; const scienceX = mapProjection(-33.9160, 151.2315, width, height).x; const scienceY = mapProjection(-33.9160, 151.2315, width, height).y; return ( ); }; // Render Profile Tab Content const renderProfileTab = () => { const studentData = appData?.student ?? { name: user.name || 'UNSW Student', zID: 'z5559999', age: '21', degree: 'Bachelor of Computer Science', year: '3rd Year', email: user.email || 'student@unsw.edu.au' }; const updateProfile = (field, value) => { const updated = { ...studentData, [field]: value }; writePatch({ student: updated }); showToast('👤 Profile updated locally'); }; return (

{user.avatarUrl ? ( Avatar

) : studentData.name.charAt(0).toUpperCase()}

{studentData.name}

{studentData.zID}

Academic Credentials

Full Name updateProfile('name', e.target.value)} style={{ height: 48, borderRadius: 20, background: ui.bg, border: '1px solid rgba(93, 38, 193, 0.22)', color: '#2D1B4E', padding: '0 12px', fontSize: 16 }} /> zID updateProfile('zID', e.target.value)} style={{ height: 48, borderRadius: 20, background: ui.bg, border: '1px solid rgba(93, 38, 193, 0.22)', color: '#2D1B4E', padding: '0 12px', fontSize: 16 }} /> Degree updateProfile('degree', e.target.value)} style={{ height: 48, borderRadius: 20, background: ui.bg, border: '1px solid rgba(93, 38, 193, 0.22)', color: '#2D1B4E', padding: '0 12px', fontSize: 16 }} /> Degree Stage

); }; // Render Societies placeholder list const renderSocietiesTab = () => { const activeFollows = appData?.follows ?? []; const societies = [ { id: 'soc-dev', name: 'DevSoc (Development Society)', cat: 'Technology', bio: 'UNSW largest tech community focusing on real software projects.', members: '4,200+' }, { id: 'soc-med', name: 'MedSoc (Medical Society)', cat: 'Health & Professional', bio: 'Your home away from home while traversing medicine.', members: '1,800+' }, { id: 'soc-film', name: 'FilmSoc (Film Association)', cat: 'Creative Arts', bio: 'Curating campus aesthetics through screenings, workshops and reviews.', members: '950+' } ]; const toggleFollow = (socId) => { let nextFollows; if ((activeFollows || []).includes(socId)) { nextFollows = (activeFollows || []).filter(id => id !== socId); showToast('💔 Unfollowed Society'); } else { nextFollows = [...activeFollows, socId]; showToast('💖 Following Society for Feed priority!'); } writePatch({ follows: nextFollows }); }; return (

UNSW Official Societies

Follow societies to filter their upcoming events straight to your custom feed.

{(societies || []).map((soc) => { const isFollowing = (activeFollows || []).includes(soc.id); return (

{soc.cat}

{soc.name}

{soc.bio}

👥 {soc.members} Active Members

); })}

); }; // Render My Events / RSVPs tab const renderEventsTab = () => { // Filter active student's RSVP const myRsvpEvents = (eventsList || []).filter(evt => { const list = rsvps[evt.id] ?? []; return (list || []).some(m => m.id === user.id); }); return (

My Scheduled RSVPs

Keep track of hackathons, study clusters, and socials you are attending.

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

📅

No upcoming registrations yet. Secure your spot in the Feed!

) : (

{(myRsvpEvents || []).map((evt) => (

{evt.hostName} {evt.date}

{evt.title}

📍 {evt.locationText}

))}

)}

); }; const getMyPostedEvents = React.useCallback(() => { return (studentPosts || []).filter(p => p.authorId === user.id); }, [studentPosts, user.id]); const getStudentJoinedEvents = React.useCallback(() => { return (approvedJoins || []).filter(j => j.requesterId === user.id); }, [approvedJoins, user.id]); const getSocietyRSVPs = React.useCallback(() => { const societyGoing = (societyPosts || []).filter(post => (rsvps?.[post.id] ?? []).some(m => m.id === user.id)).map(post => ({ ...post, source: 'Society RSVP', dateTime: (post.date || 'Date TBC') + (post.time ? ' · ' + post.time : '') })); const campusGoing = (eventsList || []).filter(evt => evt.type === 'Society' && (rsvps?.[evt.id] ?? []).some(m => m.id === user.id)).map(evt => ({ ...evt, source: 'Campus RSVP', dateTime: (evt.date || 'Date TBC') + (evt.time ? ' · ' + evt.time : '') })); const seen = {}; return [...societyGoing, ...campusGoing].filter(item => { const key = item.id || item.postId || item.title; if (seen[key]) return false; seen[key] = true; return true; }); }, [societyPosts, eventsList, rsvps, user.id]); const renderStorySheet = (title, activeList, emptyText) => ( <> {modalBackdrop(() => setStorySheetOpen(null))}

{playfulCard( <>

{title}

{closeIconBtn(() => setStorySheetOpen(null), { position: 'absolute', top: 20, right: 20 })}

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

{emptyText}

) : (activeList || []).map(item => (

{item.title}

{item.dateTime || item.date || 'Time TBC'}

{item.locationText || item.source || 'Location TBC'}

))}

, { padding: 24, background: ui.bg, border: ui.border } )}

); const renderStoryBar = (type) => { if (type === 'student') { const myEvents = getMyPostedEvents(); const joinedEvents = getStudentJoinedEvents(); const isOpenMine = storySheetOpen === 'student_mine'; const isOpenJoined = storySheetOpen === 'student_joined'; const activeList = isOpenMine ? myEvents : isOpenJoined ? joinedEvents : []; const sheetTitle = isOpenMine ? 'My Posted Hangouts' : 'Approved Joins'; return (

{storyCircle('📌', 'My Posts', (myEvents || []).length, isOpenMine, () => setStorySheetOpen('student_mine'))} {storyCircle('✅', 'Approved', (joinedEvents || []).length, isOpenJoined, () => setStorySheetOpen('student_joined'))}

{storySheetOpen && (storySheetOpen === 'student_mine' || storySheetOpen === 'student_joined') && renderStorySheet( sheetTitle, activeList, storySheetOpen === 'student_mine' ? 'Your posted events will appear here.' : 'Your approved joins will appear here.' )}

); } const rsvpsList = getSocietyRSVPs(); const isOpenRsvp = storySheetOpen === 'society_rsvp'; return (

{storyCircle('🤝', 'My RSVPs', (rsvpsList || []).length, isOpenRsvp, () => setStorySheetOpen('society_rsvp'))}

{storySheetOpen === 'society_rsvp' && renderStorySheet('My Society RSVPs', isOpenRsvp ? rsvpsList : [], 'Your society RSVPs will appear here.')}

); }; const renderEventsTabV2 = () => ( screenWrap( <> {renderStoryBar('student')} {pillBtn('➕ Post an event', () => setPostSheetOpen(true), { full: true })} {sectionHeading('Student Notice Board', 'Casual hangouts, study sessions, food runs, and meetups from students.')}

{(studentPosts || []).map(post => renderStudentPostCard(post, false))}

{postSheetOpen && (

Post an event

{closeIconBtn(() => setPostSheetOpen(false), { position: 'absolute', top: -4, right: 0 })}

{playfulInput({ value: postForm.title, onChange: e => setPostForm({ ...postForm, title: e.target.value }), placeholder: 'Title' })}

setPostForm({ ...postForm, description: e.target.value })} placeholder='Description' style={{ minHeight: 88, borderRadius: ui.radiusMd, background: ui.bg, border: ui.border, color: ui.text, padding: 16, fontSize: 15, resize: 'vertical', boxShadow: ui.shadowSoft }} />
              {playfulInput({ value: postForm.locationText, onChange: e => setPostForm({ ...postForm, locationText: e.target.value }), placeholder: 'Location' })}
              <div style={{ position: 'relative' }}>
                {playfulInput({ value: postForm.dateTime, readOnly: true, onClick: () => setShowCalendar(true), placeholder: 'Select date' }, { cursor: 'pointer' })}
                <span style={{ position: 'absolute', right: 18, top: 14, fontSize: 18, pointerEvents: 'none' }}>📅</span>
              </div>
              {playfulInput({ value: postForm.capacity, onChange: e => setPostForm({ ...postForm, capacity: e.target.value }), placeholder: 'Capacity', type: 'number' })}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                <span style={{ fontSize: 11, color: ui.text, fontWeight: 900, textTransform: 'uppercase', letterSpacing: 1 }}>Requirements</span>
                <div style={{ display: 'flex', gap: 10 }}>
                  {pillBtn('➕', () => {
                    if (reqInput.trim() && (requirementsList || []).length < 5) {
                      setRequirementsList([...requirementsList, reqInput.trim()]);
                      setReqInput('');
                    }
                  }, { disabled: (requirementsList || []).length >= 5 || !reqInput.trim(), style: { minWidth: 52, padding: 0 } })}
                  <div style={{ flex: 1 }}>
                    {playfulInput({ value: reqInput, onChange: e => setReqInput(e.target.value), placeholder: 'Add a requirement', onKeyDown: e => {
                      if (e.key === 'Enter') {
                        e.preventDefault();
                        if (reqInput.trim() && (requirementsList || []).length < 5) {
                          setRequirementsList([...requirementsList, reqInput.trim()]);
                          setReqInput('');
                        }
                      }
                    }})}
                  </div>
                </div>
                {(requirementsList || []).length >= 5 && <div style={{ fontSize: 12, color: ui.textMuted }}>Maximum 5 requirements reached</div>}
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {(requirementsList || []).map((req, index) => (
                    <span key={index} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, ...{ fontSize: 12, color: ui.text, background: 'rgba(74,37,169,0.12)', borderRadius: ui.radiusPill, padding: '6px 14px' } }}>
                      {req}
                      <button type="button" onClick={() => setRequirementsList((requirementsList || []).filter((_, i) => i !== index))} style={{ background: 'transparent', border: 'none', color: ui.text, cursor: 'pointer', padding: 0 }}>✕</button>
                    </span>
                  ))}
                </div>
              </div>
              {pillBtn('Post Event', submitStudentPost, { full: true })}
            </div>
          </div>
        )}
      </>
    )
  );

return screenWrap(
      <>
        {playfulCard(
          <>
            <div style={{ width: 72, height: 72, borderRadius: '50%', background: 'rgba(255,255,255,0.22)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 32, fontWeight: 900, color: ui.textLight, marginBottom: 4 }}>
              {(studentData.name || 'U').charAt(0).toUpperCase()}
            </div>
            <h3 style={{ margin: 0, fontSize: 24, color: ui.textLight, fontWeight: 900, textTransform: 'uppercase', letterSpacing: 0.5 }}>{studentData.name}</h3>
            <div style={{ color: ui.textLightMuted, fontWeight: 800, fontSize: 13, letterSpacing: 0.5 }}>{studentData.zID}</div>
            <div style={{ color: ui.textLightMuted, fontSize: 14, lineHeight: 1.5 }}>{studentData.degree} · {studentData.year}</div>
          </>,
          { padding: 28, textAlign: 'left' }
        )}

<section>
          {sectionHeading('My Posts')}
          {(myPosts || []).length === 0 ? emptyState('You have not posted an event yet.') : (myPosts || []).map(p => {
              const postRequests = joinRequests?.[p.id] ?? [];
              const pendingRequests = (postRequests || []).filter(r => r.status === 'pending');
              const approvedRequests = (postRequests || []).filter(r => r.status === 'approved');

return playfulCard(
                <>
                  <strong style={{ fontSize: 16, color: ui.textLight, textTransform: 'uppercase', letterSpacing: 0.3 }}>{p.title}</strong>
                  <div style={{ color: ui.textLightMuted, fontSize: 13 }}>{p.dateTime} · {p.locationText}</div>
                  <div style={{ borderTop: '1px solid rgba(255,255,255,0.15)', paddingTop: 12 }}>
                    <div style={{ fontSize: 11, color: ui.textLight, fontWeight: 900, marginBottom: 8, textTransform: 'uppercase', letterSpacing: 1 }}>Requests to Join</div>
                    {(pendingRequests || []).map(req => {
                      const details = { name: req.requesterName || 'UNSW Student', zID: req.requesterzID || 'z5551234', degree: req.requesterDegree || 'Bachelor of Computer Science', year: req.requesterYear || '2nd Year' };
                      return (
                        <div key={req.requesterId} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, marginBottom: 8, background: 'rgba(255,255,255,0.08)', padding: '8px 12px', borderRadius: ui.radiusMd }}>
                          <button type="button" onClick={() => setSelectedRequester(details)} style={{ background: 'transparent', border: 'none', color: ui.textLight, fontWeight: 700, fontSize: 13, cursor: 'pointer', padding: 0 }}>👤 {req.requesterName}</button>
                          <div style={{ display: 'flex', gap: 6 }}>
                            {pillBtn('Approve', () => decideRequest(p, req, 'approved'), { sm: true })}
                            {pillBtn('Decline', () => declineRequest(p, req), { sm: true, ghost: true })}
                          </div>
                        </div>
                      );
                    })}
                    {(approvedRequests || []).length > 0 && (
                      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 8 }}>
                        {(approvedRequests || []).map(req => <span key={req.requesterId}>{pillTag('✓ ' + req.requesterName)}</span>)}
                      </div>
                    )}
                    {(pendingRequests || []).length === 0 && (approvedRequests || []).length === 0 && (
                      <div style={{ fontSize: 12, color: ui.textLightMuted }}>No requests yet.</div>
                    )}
                  </div>
                </>,
                { padding: 22, marginBottom: 12 },
                null,
                p.id
              );
            })}
        </section>

<section>
          {sectionHeading('Joined Events')}
          {(joinedLive || []).length === 0 ? emptyState('Approved joins and RSVPs will appear here.') : (joinedLive || []).map(j => playfulCard(
            <>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8 }}>
                <strong style={{ fontSize: 15, color: ui.textLight }}>{j.title}</strong>
                {pillTag(j.type)}
              </div>
              <div style={{ color: ui.textLightMuted, fontSize: 13 }}>{j.dateTime} · {j.locationText}</div>
              {j.hostName && <div style={{ color: ui.textLightMuted, fontSize: 12 }}>hosted by {j.hostName}</div>}
            </>,
            { padding: 22, marginBottom: 12 },
            null,
            j.id || j.title
          ))}
        </section>

<section>
          {sectionHeading('Societies I Follow')}
          {(followedSocieties || []).length === 0 ? emptyState("You haven't followed any societies yet.") : (followedSocieties || []).map(socId => {
            const soc = (societyProfiles || []).find(s => s.id === socId);
            if (!soc) return null;
            return playfulCard(
              <>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <span style={{ width: 44, height: 44, borderRadius: '50%', background: 'rgba(255,255,255,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 22 }}>{soc.logo}</span>
                  <div style={{ flex: 1 }}>
                    <strong style={{ color: ui.textLight, fontSize: 15 }}>{soc.name}</strong>
                    <div style={{ color: ui.textLightMuted, fontSize: 11, fontWeight: 800, textTransform: 'uppercase', letterSpacing: 0.6 }}>{soc.cat}</div>
                  </div>
                  <span style={{ color: ui.textLight, fontSize: 18 }}>→</span>
                </div>
              </>,
              { padding: 20, marginBottom: 10, cursor: 'pointer' },
              () => { setActiveTab('Societies'); showToast('✨ Visiting ' + soc.name); },
              socId
            );
          })}
        </section>

<section>
          {sectionHeading('Favourited Students')}
          {(favoriteStudents || []).length === 0 ? emptyState("You haven't favourited any students yet.") : (favoriteStudents || []).map(studentId => {
            const student = studentDetailsMap[studentId] || { name: studentId.replace('student-', ''), zID: 'z5550000', degree: 'UNSW Student', year: 'General' };
            return playfulCard(
              <>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                  <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'rgba(255,255,255,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18 }}>👤</div>
                  <div style={{ flex: 1 }}>
                    <strong style={{ color: ui.textLight, fontSize: 15 }}>{student.name}</strong>
                    <div style={{ color: ui.textLightMuted, fontSize: 11, fontWeight: 700 }}>{student.zID}</div>
                  </div>
                  <span style={{ color: ui.textLightMuted, fontSize: 12 }}>View →</span>
                </div>
              </>,
              { padding: 20, marginBottom: 10, cursor: 'pointer' },
              () => setSelectedRequester(student),
              studentId
            );
          })}
        </section>
      </>
    );
  };

return (
      <div style={{ position: 'fixed', inset: 0, backgroundColor: ui.bg, backdropFilter: 'blur(6px)', zIndex: 11000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}>
        <div style={{ width: '100%', maxWidth: 340, boxSizing: 'border-box' }}>
        <div style={{
          background: ui.bg,
          borderRadius: ui.radiusCard,
          padding: 24,
          boxShadow: ui.shadowLg,
          boxSizing: 'border-box',
          position: 'relative',
          overflow: 'hidden',
        }}>
          {renderCardWaves()}
          <div style={{ position: 'relative', zIndex: 1 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
            <button onClick={handlePrevMonth} style={{ background: 'transparent', border: 'none', color: ui.text, fontSize: 20, padding: '4px 12px', cursor: 'pointer' }}>←</button>
            <span style={{ fontWeight: '900', color: ui.text, fontSize: 16 }}>{months[month]} {year}</span>
            <button onClick={handleNextMonth} style={{ background: 'transparent', border: 'none', color: ui.text, fontSize: 20, padding: '4px 12px', cursor: 'pointer' }}>→</button>
          </div>
          
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 6, textAlign: 'center', marginBottom: 16 }}>
            {(daysOfWeek || []).map((d, i) => (
              <span key={i} style={{ color: '#F452BA', fontSize: 12, fontWeight: '900' }}>{d}</span>
            ))}
            {(days || []).map((day, i) => {
              const isSelected = day && (postForm.dateTime || []).includes(`${day} ${months[month]} ${year}`);
              return (
                <button
                  key={i}
                  disabled={!day}
                  onClick={() => handleSelectDate(day)}
                  style={{
                    minHeight: 36,
                    background: isSelected ? '#F5E9F3' : day ? 'rgba(245,233,243,0.58)' : 'transparent',
                    border: 'none',
                    borderRadius: 16,
                    color: isSelected ? '#5D26C1' : day ? '#fff' : 'transparent',
                    fontWeight: '700',
                    fontSize: 14,
                    cursor: day ? 'pointer' : 'default'
                  }}
                >
                  {day}
                </button>
              );
            })}
          </div>
          
          {pillBtn('Cancel', () => setShowCalendar(false), { full: true, ghost: true })}
          </div>
        </div>
        </div>
      </div>
    );
  };

{/* MAIN VIEWPORT */}
      <main style={{
        position: 'fixed',
        top: 'calc(max(env(safe-area-inset-top, 20px), 20px) + 57px)',
        left: 0,
        right: 0,
        bottom: 'calc(88px + max(env(safe-area-inset-bottom, 12px), 12px))',
        height: 'calc(100vh - (max(env(safe-area-inset-top, 20px), 20px) + 57px) - (88px + max(env(safe-area-inset-bottom, 12px), 12px)))',
        paddingLeft: 16,
        paddingRight: 16,
        paddingBottom: 16,
        display: 'flex',
        flexDirection: 'column',
        maxWidth: 480,
        width: '100%',
        margin: '0 auto',
        boxSizing: 'border-box',
        overflowY: 'auto',
        overflowX: 'hidden',
        WebkitOverflowScrolling: 'touch',
        zIndex: 1
      }}>
        
        {activeTab === 'Feed' && screenWrap(
          <>
            <section>
              {sectionHeading('Happening Now 📍', 'Tap map to enlarge')}
              <div onClick={() => { setSelectedPin(null); setFullscreenMap(true); }} style={{
                height: 210, borderRadius: ui.radiusCard, overflow: 'hidden',
                position: 'relative', boxShadow: ui.shadow, cursor: 'pointer',
                border: '3px solid rgba(255,255,255,0.6)',
              }}>
                {renderMapSVG(360, 210, false)}
                {renderSelectedPinPopup(false)}
                <div style={{
                  position: 'absolute', bottom: 12, left: 12,
                  background: 'rgba(61,43,139,0.88)', borderRadius: ui.radiusPill,
                  padding: '6px 14px', fontSize: 10, color: '#fff', fontWeight: 700,
                }}>📍 UNSW Kensington</div>
              </div>
            </section>
            <section>
              {sectionHeading('⚡ Your Pulse')}
              <div style={{ display: 'flex', flexDirection: 'column', gap: ui.gapCard }}>
                {(curatedFeedItems || []).length === 0 ? emptyState('Follow societies and favourite students to see their events here.') : (curatedFeedItems || []).map((item) => (
                  item.kind === 'student' ? renderStudentPostCard(item, true) : renderSocietyFeedCard(item)
                ))}
              </div>
            </section>
          </>
        )}

{activeTab === 'Events' && renderEventsTabV2()}
        {activeTab === 'Societies' && renderSocietiesTabV2()}
        {activeTab === 'Profile' && renderProfileTabV2()}

</main>

{/* FULLSCREEN MAP OVERLAY / MODAL */}
      {fullscreenMap && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          background: ui.bg,
          zIndex: 20000,
          display: 'flex',
          flexDirection: 'column',
          paddingTop: 'env(safe-area-inset-top, 20px)'
        }}>
          {/* Modal Header */}
          <div style={{
            padding: '16px 20px',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            borderBottom: '1px solid rgba(255, 255, 255, 0.15)',
            background: ui.bg
          }}>
            <div>
              <h3 style={{ fontSize: 18, fontWeight: 'bold', margin: 0, color: ui.text }}>Happening Now 📍</h3>
              <span style={{ fontSize: 11, color: ui.textMuted }}>Interactive campus pins</span>
            </div>
            <button 
              onClick={() => {
                setFullscreenMap(false);
                setSelectedPin(null);
              }} 
              style={{
                minHeight: 40,
                padding: '0 16px',
                borderRadius: 999,
                border: 'none',
                background: 'rgba(74,37,169,0.12)',
                color: ui.text,
                fontWeight: 'bold',
                fontSize: 14
              }}
            >
              ✕ Close
            </button>
          </div>

{/* Main Map Body (Interactive Area) */}
          <div style={{ flex: 1, position: 'relative', minHeight: 0, width: '100%', overflow: 'hidden' }} onClick={() => setSelectedPin(null)}>
            {renderMapSVG(390, 640, true)}

{/* Fullscreen Map helper tip */}
            <div style={{
              position: 'absolute',
              top: 16,
              left: 16,
              right: 16,
              background: 'rgba(245, 233, 243, 0.9)',
              border: '1.5px solid rgba(232, 67, 147, 0.3)',
              borderRadius: 20,
              padding: '8px 12px',
              fontSize: 12,
              color: ui.text,
              textAlign: 'center'
            }}>
              🛰️ Touch any pulsing pin to reveal exact navigation path & walker routes.
            </div>

{renderSelectedPinPopup(true)}
          </div>
        </div>
      )}

{renderDirectionsSheet()}

{/* TOAST SYSTEM ACCORD */}
      {toast && (
        <div style={{
          position: 'fixed', bottom: 100, left: '50%', transform: 'translateX(-50%)',
          background: ui.gradientBtn, borderRadius: ui.radiusPill,
          padding: '14px 28px', color: '#fff', fontWeight: 800, fontSize: 13,
          zIndex: 300, whiteSpace: 'nowrap', boxShadow: ui.shadowLg,
          display: 'flex', alignItems: 'center', gap: 8, letterSpacing: 0.3,
        }}><span>✦</span> {toast}</div>
      )}

<nav style={{
        position: 'fixed', left: 16, right: 16, bottom: 'max(env(safe-area-inset-bottom, 12px), 12px)',
        minHeight: 64, background: ui.bg, borderRadius: ui.radiusCard,
        border: ui.border, boxShadow: ui.shadowLg,
        padding: '8px 10px', zIndex: 9999,
        display: 'flex', justifyContent: 'space-around', alignItems: 'center',
        boxSizing: 'border-box',
      }}>
        {[
          { id: 'Feed', label: 'Feed', emoji: '⚡' },
          { id: 'Events', label: 'Events', emoji: '📅' },
          { id: 'Societies', label: 'Societies', emoji: '🤝' },
          { id: 'Profile', label: 'Profile', emoji: '👤' },
        ].map((tab) => {
          const isActive = activeTab === tab.id;
          return (
            <button key={tab.id} type="button" onClick={() => { setActiveTab(tab.id); setFullscreenMap(false); }} style={{
              background: isActive ? ui.gradientBtn : 'transparent',
              border: 'none', borderRadius: ui.radiusPill,
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
              padding: '8px 12px', minWidth: 64, cursor: 'pointer',
              boxShadow: isActive ? '0 4px 16px rgba(233,78,145,0.3)' : 'none',
            }}>
              <span style={{ fontSize: 17 }}>{tab.emoji}</span>
              <span style={{ fontSize: 9, fontWeight: 900, textTransform: 'uppercase', letterSpacing: 0.6, color: isActive ? '#fff' : ui.textMuted }}>{tab.label}</span>
            </button>
          );
        })}
      </nav>
      {renderCalendarPopup()}
      {renderRequesterPopup()}
    </div>
  );
}</article></body></html>