{/* 🎊 CONFETTI LAYER */}

{(confetti || []).map(c => (

))}

{/* 🎩 HEADER & COUNTDOWN */}

{event.title}

{timeLeft || 'Loading...'}

📅 {formatDate(event.date)} 📍 {event.location}

{isHost && ( )}

{/* 🎫 RSVP ACTION */}

{/* Guest List Bubbles */}

{(rsvps || []).filter(r => r.status === 'going').map((r, i) => (

{!r.avatarUrl && (r.name?.[0] || 'U')}

))} {/* Count bubble if many guests */} {(rsvps || []).filter(r => r.status === 'going').length === 0 && ( Be the first to join! )}

{/* 🎤 SONG QUEUE */}

💿 Setlist

{/* Add Song Input */} {/* Songs List */}

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

No requests yet. Drop a beat! 🥁

) : ( [...songs].reverse().map(song => (

{song.title}

Requested by {song.addedByName}

{isHost && ( )}

)) )}

{/* 📝 EDIT MODAL (Bottom Sheet) */} {isEditing && (

setIsEditing(false)} style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.8)', backdropFilter: 'blur(5px)' }} />

Edit Event

Event Name setEditForm({...editForm, title: e.target.value})} style={{ width: '100%', height: 48, borderRadius: 12, background: '#111', border: '1px solid #333', color: 'white', padding: '0 12px', marginBottom: 16, fontSize: 16 }} /> Date & Time setEditForm({...editForm, date: new Date(e.target.value).toISOString()})} style={{ width: '100%', height: 48, borderRadius: 12, background: '#111', border: '1px solid #333', color: 'white', padding: '0 12px', marginBottom: 16, fontSize: 16 }} /> Location setEditForm({...editForm, location: e.target.value})} style={{ width: '100%', height: 48, borderRadius: 12, background: '#111', border: '1px solid #333', color: 'white', padding: '0 12px', marginBottom: 24, fontSize: 16 }} />

)} {/* 🚀 FLOATY SHARE BUTTON (If multiplayer) */} {isMultiplayer && ( )}

); }