{[1, 2, 3, 4, 5].map(star => ( { if (setFn) { e.stopPropagation(); setFn(star); } }} style={{ cursor: setFn ? 'pointer' : 'default', fontSize: size, opacity: star <= count ? 1 : 0.2, filter: star <= count ? 'drop-shadow(0 0 4px #FFD700)' : 'none', transition: 'all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)', transform: setFn && star <= count ? 'scale(1.1)' : 'scale(1)' }} > ⭐ ))}

); }; return (

{/* 🔮 HEADER */}

🍿

CineChrome

{/* Member Pile */} {(members || [user]).slice(0, 3).map((m, i) => (

0 ? -12 : 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}> {!m.avatarUrl && (m.displayName?.[0] || '👤')}

))}

{/* 🍱 BENTO FEED */}

{(reviews || []).map((review) => { const isExpanded = expandedId === review.id; return (

setExpandedId(isExpanded ? null : review.id)} style={{ background: theme.glass, backdropFilter: 'blur(12px)', border: theme.glassBorder, borderRadius: theme.radius, padding: 16, boxShadow: isExpanded ? '0 12px 48px rgba(0,0,0,0.12)' : theme.shadow, transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)', transform: isExpanded ? 'scale(1.02)' : 'scale(1)', cursor: 'pointer', position: 'relative', overflow: 'hidden' }} > {/* Chrome/Holo Shine Effect */}

{/* Poster Thumbnail */}

{review.movieTitle}

{review.isDemo && DEMO}

{renderStars(review.rating, null, 14)}

{review.reviewText}

{!review._user?.avatarUrl && (review._user?.displayName?.[0] || '?')}

{review._user?.displayName} • {new Date(review.createdAt).toLocaleDateString()}

{/* ✨ EXPANDED CONTENT: Reactions & Comments */} {isExpanded && (

e.stopPropagation()}> {/* Reactions Bar */}

{['🔥', '💖', '💀', '🎬'].map(emoji => { const count = (review.reactions?.[emoji] || []).length; const isActive = (review.reactions?.[emoji] || []).includes(user.id); return ( ); })}

{/* Comments List */}

{(review.comments || []).map(comment => (

{comment.user.displayName}: {comment.text}

))}

{/* Add Comment Input */}

setNewComment(e.target.value)} onClick={e => e.stopPropagation()} onKeyDown={e => { if (e.key === 'Enter') handleAddComment(review.id); }} style={{ flex: 1, background: 'rgba(255,255,255,0.5)', border: 'none', borderRadius: 16, padding: '8px 12px', fontSize: 14, outline: 'none' }} />

)}

); })}

{/* ➕ FAB (Floating Action Button) */} {/* 📝 CREATE MODAL (Bottom Sheet) */} {isModalOpen && (

setIsModalOpen(false)}>

e.stopPropagation()} style={{ background: 'rgba(255,255,255,0.95)', backdropFilter: 'blur(20px)', borderTopLeftRadius: 32, borderTopRightRadius: 32, padding: '24px 20px', paddingBottom: 'max(env(safe-area-inset-bottom, 20px), 24px)', boxShadow: '0 -10px 40px rgba(0,0,0,0.2)', animation: 'slideUp 0.3s cubic-bezier(0.19, 1, 0.22, 1)' }} >

New Hot Take 🔥

{/* Poster Upload */}

setNewTitle(e.target.value)} style={{ width: '100%', height: 44, padding: '0 12px', borderRadius: 12, border: '1px solid #eee', background: '#fff', fontSize: 16, outline: 'none' }} />

RATING {renderStars(newRating, setNewRating, 24)}

setNewReview(e.target.value)}
              style={{
                width: '100%', height: 100, padding: '12px', 
                borderRadius: 16, border: '1px solid #eee', background: '#fff',
                fontSize: 16, outline: 'none', resize: 'none', fontFamily: 'inherit',
                marginBottom: 20
              }}
            />

<button
              onClick={handleAddReview}
              disabled={!newTitle || !newReview}
              style={{
                width: '100%', height: 52, borderRadius: 16,
                background: (!newTitle || !newReview) ? '#eee' : `linear-gradient(90deg, ${theme.accent}, ${theme.secondary})`,
                color: (!newTitle || !newReview) ? '#999' : 'white',
                border: 'none', fontWeight: 700, fontSize: 18,
                boxShadow: (!newTitle || !newReview) ? 'none' : '0 8px 20px rgba(255, 0, 204, 0.3)',
                transition: 'transform 0.2s',
                cursor: 'pointer'
              }}
            >
              Post It ✨
            </button>
          </div>
        </div>
      )}

{/* Global Styles for Animations */}
      <style>{`
        @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
        @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
      `}</style>
    </div>
  );
}</article></body></html>