); const VoterBubbles = ({ voters }) => { if (!voters || (voters || []).length === 0) return null; return (

{(voters || []).slice(0, 5).map((v, i) => (

{ e.stopPropagation(); if (v.handle) openProfile(v.handle); }} style={{ width: 26, height: 26, borderRadius: '50%', border: `2px solid ${colors.pearl}`, background: v.avatarUrl ? `url(${v.avatarUrl}) center/cover` : `linear-gradient(135deg, ${colors.primaryLight}, ${colors.accent})`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, color: colors.text, fontWeight: 600, marginLeft: i > 0 ? -6 : 0, cursor: 'pointer', zIndex: 5 - i, boxShadow: `0 1px 4px ${colors.shadow}`, animation: 'fadeInUp 0.4s ease-out', animationDelay: `${i * 0.1}s`, animationFillMode: 'both', }} title={v.displayName} > {!v.avatarUrl && (v.displayName?.[0] || '?')}

))} {(voters || []).length > 5 && ( +{(voters || []).length - 5} )}

); }; const activeAnim = slideDir === 'left' ? 'slideInLeft' : slideDir === 'right' ? 'slideInRight' : null; return (

{/* Header */}

Would You Rather

✧ a parlor game of delightful dilemmas ✧

{/* Members Row */}

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

m.handle && openProfile(m.handle)} style={{ width: 34, height: 34, borderRadius: '50%', border: `2px solid ${colors.accent}`, background: m.avatarUrl ? `url(${m.avatarUrl}) center/cover` : `linear-gradient(135deg, ${colors.primaryLight}, ${colors.gold})`, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 600, color: colors.primaryDark, cursor: 'pointer', boxShadow: `0 2px 8px ${colors.shadow}`, }} title={m.displayName} > {!m.avatarUrl && (m.displayName?.[0] || '?')}

))} {(memberList || []).length > 6 && ( +{(memberList || []).length - 6} )}

{/* Scrollable Content */}

{/* Main Active Question Card */} {activeQuestion && (

{/* Sparkles */} {(sparkles || []).map(s => ( ))} {/* Lace top border */}

{/* Card content */}

{/* Question label */}

Would you rather

{/* Option A */} {/* OR divider */}

— or —

{/* Option B */} {/* Vote count */} {myVote && (

{voteCounts.total} {voteCounts.total === 1 ? 'soul has' : 'souls have'} pondered this dilemma

)} {/* Question author */}

posed by {activeQuestion.createdBy?.displayName || 'Anonymous'}

{/* Lace bottom */}

)} {/* Question Navigation Dots */}

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

{/* Question List */}

All Dilemmas

{(questions || []).map((q, i) => ( ))}

{/* Sticky Bottom: Add Question Button */}

{/* Modal Overlay */} {showModal && (

setShowModal(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(90, 61, 74, 0.35)', backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)', zIndex: 100, display: 'flex', alignItems: 'flex-end', justifyContent: 'center', animation: 'modalFadeIn 0.25s ease-out', }} >

e.stopPropagation()} style={{ background: colors.bg, borderTopLeftRadius: 24, borderTopRightRadius: 24, width: '100%', maxWidth: 480, paddingTop: 12, paddingBottom: 'calc(env(safe-area-inset-bottom, 20px) + 16px)', paddingLeft: 20, paddingRight: 20, boxShadow: `0 -8px 40px rgba(90,61,74,0.2)`, animation: 'modalSlideUp 0.35s ease-out', }} > {/* Drag Handle */}

Compose a New Dilemma

Pose a delightful question for the salon

Would you rather... setNewA(e.target.value)} placeholder="e.g., Dance in a ballroom of roses" style={{ width: '100%', height: 52, borderRadius: 14, border: `1.5px solid ${colors.border}`, background: colors.card, padding: '0 16px', fontSize: 16, fontFamily: fonts.heading, fontStyle: 'italic', color: colors.text, outline: 'none', boxSizing: 'border-box', boxShadow: `inset 0 1px 3px ${colors.shadow}`, }} onFocus={(e) => e.target.style.borderColor = colors.primary} onBlur={(e) => e.target.style.borderColor = colors.border} />

— or —

setNewB(e.target.value)} placeholder="e.g., Wander through a moonlit garden" style={{ width: '100%', height: 52, borderRadius: 14, border: `1.5px solid ${colors.border}`, background: colors.card, padding: '0 16px', fontSize: 16, fontFamily: fonts.heading, fontStyle: 'italic', color: colors.text, outline: 'none', boxSizing: 'border-box', boxShadow: `inset 0 1px 3px ${colors.shadow}`, }} onFocus={(e) => e.target.style.borderColor = colors.primary} onBlur={(e) => e.target.style.borderColor = colors.border} />

)}

); }