{/* HEADER */}

Honors Society

Excellence in every endeavor

openProfile(user.handle)} style={{ width: 40, height: 40, borderRadius: '50%', border: `2px solid ${THEME.accent}`, backgroundImage: `url(${user.avatarUrl})`, backgroundSize: 'cover', backgroundColor: '#ddd', cursor: 'pointer' }} />

{/* EVENT FEED */}

{(events || []).map(event => { const isExpanded = expandedId === event.id; const isAttending = (event.attendees || []).includes(user.id); const { avatars, restCount } = getAttendeeAvatars(event.attendees || []); const dateObj = new Date(event.date); return (

setExpandedId(isExpanded ? null : event.id)} style={{ backgroundColor: THEME.cardBg, borderRadius: 16, boxShadow: '0 4px 20px rgba(0,0,0,0.06)', border: `1px solid ${isAttending ? THEME.accent : 'rgba(0,0,0,0.05)'}`, overflow: 'hidden', transition: 'all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)', transform: isExpanded ? 'scale(1.02)' : 'scale(1)', position: 'relative' }} > {/* Top Banner Stripe */}

{/* Header Row */}

{event.emoji}

{event.title}

🗓️ {dateObj.toLocaleDateString([], { month: 'short', day: 'numeric' })} 🕒 {event.time}

{/* Expanded Content */}

📍 Location: {event.location}

{event.description}

{/* Attendee Avatars */}

{(avatars || []).map((m, i) => (

))} {restCount > 0 && (

+{restCount}

)}

{(avatars || []).length + restCount} attending

{/* Action Row */}

{/* Sparkle Animation Container */} {sparkleActive === event.id && (

✨

)}

); })}

{/* FLOATING ACTION BUTTON */} {/* CREATE EVENT MODAL (Bottom Sheet) */} {isCreating && (

setIsCreating(false)} style={{ flex: 1 }} />

New Event

{/* LIVE PREVIEW */}

Preview

{newEvent.emoji}

{newEvent.title || 'Event Title'}

{newEvent.location || 'Location'} • {newEvent.time}

{/* FORM */}

Title setNewEvent({...newEvent, title: e.target.value})} placeholder="e.g. Annual Gala" style={{ width: '100%', height: 48, borderRadius: 12, border: '1px solid #ddd', padding: '0 12px', fontSize: 16, boxSizing: 'border-box' }} />

Time setNewEvent({...newEvent, time: e.target.value})} style={{ width: '100%', height: 48, borderRadius: 12, border: '1px solid #ddd', padding: '0 12px', fontSize: 16, boxSizing: 'border-box' }} />

Icon

Location setNewEvent({...newEvent, location: e.target.value})} placeholder="e.g. Grand Hall" style={{ width: '100%', height: 48, borderRadius: 12, border: '1px solid #ddd', padding: '0 12px', fontSize: 16, boxSizing: 'border-box' }} />

Description

setNewEvent({...newEvent, description: e.target.value})}
                  placeholder="What's happening?"
                  style={{ width: '100%', height: 80, borderRadius: 12, border: '1px solid #ddd', padding: '12px', fontSize: 16, boxSizing: 'border-box', resize: 'none', fontFamily: THEME.fontSans }}
                />
              </div>

<button 
                onClick={createEvent}
                style={{ 
                  width: '100%', 
                  height: 52, 
                  borderRadius: 14, 
                  background: THEME.primary, 
                  color: 'white', 
                  fontWeight: 600, 
                  fontSize: 17, 
                  border: 'none', 
                  marginTop: 8,
                  opacity: newEvent.title ? 1 : 0.6
                }}
              >
                Publish Event
              </button>
            </div>
          </div>
        </div>
      )}