{(particles || []).map(p => ( {p.emoji} ))}

); }; const EventCard = ({ event, isCompact }) => { const soc = getSociety(event?.society); const isExp = expandedEvent === event?.id; const isFav = isInterested(event?.id); const friends = getInterestedFriends(event?.id); const showConfetti = confettiEvent === event?.id; return (

{showConfetti && }

setExpandedEvent(isExp ? null : event?.id)} style={{ padding: isCompact ? '12px 14px' : '16px 18px', cursor: 'pointer' }} >

{soc.emoji} {soc.name} {event?.isDemo && ( DEMO )} {isToday(event?.date) && ( 🔴 LIVE )}

{event?.title}

📅 {getDateLabel(event?.date)} 🕐 {formatTime(event?.date)}

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

{(friends || []).slice(0, 3).map((f, i) => (

0 ? -6 : 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, color: '#fff', fontWeight: 700, zIndex: 3 - i, }}> {!f.avatarUrl && (f.displayName?.[0] ?? '?')}

))}

{(friends || []).length === 1 ? `${friends[0]?.displayName} is interested` : `${friends.length} friends interested`}

)}

{isExp && (

{event?.desc}

📍 {event?.location}

⏰ {formatTime(event?.date)} – {formatTime(event?.endDate)}

)}

); }; const cssKeyframes = ` @keyframes confettiFall { 0% { transform: translateY(0) rotate(0deg) scale(0); opacity: 1; } 50% { opacity: 1; transform: translateY(80px) rotate(180deg) scale(1.2); } 100% { transform: translateY(200px) rotate(360deg) scale(0.5); opacity: 0; } } @keyframes fadeSlideIn { 0% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes bubblePop { 0% { transform: scale(1); } 40% { transform: scale(1.2); } 100% { transform: scale(1); } } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 8px rgba(255,0,110,0.3); } 50% { box-shadow: 0 0 20px rgba(255,0,110,0.6); } } @keyframes slideUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } `; return (

{/* Header */}

UniVibe

Campus events & society buzz ✨

{(memberList || []).length > 1 && (

{(memberList || []).slice(0, 3).map((m, i) => (

openProfile(m.handle)} style={{ width: 36, height: 36, borderRadius: '50%', border: '2px solid #0D0D1A', background: m.avatarUrl ? `url(${m.avatarUrl}) center/cover` : 'linear-gradient(135deg, #FF006E, #8338EC)', marginLeft: i > 0 ? -10 : 0, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, color: '#fff', fontWeight: 700, zIndex: 5 - i, }} > {!m.avatarUrl && (m.displayName?.[0] ?? '?')}

))} {(memberList || []).length > 3 && (

+{(memberList || []).length - 3}

)}

{/* Tab Bar */}

{[{ id: 'feed', label: 'Discover', emoji: '🔥' }, { id: 'mine', label: 'My Events', emoji: '⭐' }].map(tab => ( ))}

{/* Scrollable Content */}

{view === 'feed' && ( <> {/* Society Filter Bubbles */}

{(SOCIETIES || []).map(soc => { const isActive = activeFilter === soc.id; const isAnimating = bubbleAnim === soc.id; return ( ); })}

{/* Today's Highlights */} {activeFilter === 'all' && (highlights || []).length > 0 && (

Today's Highlights

{(highlights || []).map((evt, i) => { const soc = getSociety(evt?.society); const isFav = isInterested(evt?.id); return (

setExpandedEvent(expandedEvent === evt?.id ? null : evt?.id)} style={{ flexShrink: 0, width: 200, background: `linear-gradient(135deg, ${soc.color}22, rgba(255,255,255,0.03))`, border: `1px solid ${soc.color}33`, borderRadius: 16, padding: 16, cursor: 'pointer', position: 'relative', overflow: 'hidden', animation: `slideUp 0.4s ease-out ${i * 0.08}s both`, }} >

{soc.emoji}

{evt?.title}

{getDateLabel(evt?.date)} • {formatTime(evt?.date)}

📍 {evt?.location}

{isFav && (

✨

)}

); })}

)} {/* Upcoming Events */}

🗓️ {activeFilter === 'all' ? 'Upcoming Campus Buzz' : `${getSociety(activeFilter).emoji} ${getSociety(activeFilter).name} Events`}

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

🔍

No events found for this society yet.

) : ( (filteredEvents || []).map((evt, i) => (

)) )}

)} {view === 'mine' && ( <>

⭐ My Interested Events

Tap the ✨ sparkle on any event to add it here

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

🌟

You haven't marked any events yet!
Go to Discover and tap ☆ on events you love.

) : ( (myEvents || []).map((evt, i) => (

)) )}

)}

); }