Drop a Vibe ✨

CATEGORY

YOUR VIBE (ANONYMOUS)

setNewVibeText(e.target.value)}
              placeholder={PLACEHOLDERS[placeholderIdx]}
              style={{ 
                width: '100%', flex: 1, minHeight: 150, padding: 16, borderRadius: 12, 
                border: 'none', background: '#fff', fontSize: 18, color: '#00274C', 
                resize: 'none', fontFamily: 'inherit'
              }}
            />
          </div>
        </div>

{showConfetti && (
          <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 100, background: 'rgba(0,39,76,0.9)' }}>
            <div style={{ textAlign: 'center', animation: 'popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards' }}>
              <div style={{ fontSize: 80, marginBottom: 16 }}>🎉💙💛🎉</div>
              <h2 style={{ color: '#FFCB05', margin: 0 }}>Vibe Dropped!</h2>
              <p style={{ color: '#fff', opacity: 0.9, marginTop: 8 }}>Your vibe is in review, bestie!</p>
            </div>
          </div>
        )}
        <style>{`
          @keyframes popIn { 0% { transform: scale(0.5); opacity: 0; } 80% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
        `}</style>
      </div>
    );
  }

if (view === 'mod') {
    return (
      <div style={{ minHeight: '100dvh', background: '#F4F7F9', padding: 'max(env(safe-area-inset-top, 20px), 20px) 16px env(safe-area-inset-bottom, 20px)', maxWidth: 480, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
          <button onClick={() => setView('feed')} style={{ background: 'transparent', border: 'none', fontSize: 24 }}>←</button>
          <h1 style={{ fontSize: 20, fontWeight: 800, color: '#00274C', margin: 0 }}>Mod Queue 🛡️</h1>
          <div style={{ width: 32 }}></div>
        </div>
        
        {(pendingPosts || []).length === 0 ? (
          <div style={{ textAlign: 'center', padding: 40, color: '#666' }}>
            <div style={{ fontSize: 48, marginBottom: 16 }}>✨</div>
            <p>No pending vibes! The Diag is clear.</p>
          </div>
        ) : (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {(pendingPosts || []).map(post => (
              <div key={post.id} style={{ background: '#fff', borderRadius: 16, padding: 16, boxShadow: '0 4px 12px rgba(0,0,0,0.05)' }}>
                <div style={{ display: 'inline-block', background: '#E8F0F8', color: '#00274C', padding: '4px 8px', borderRadius: 8, fontSize: 12, fontWeight: 700, marginBottom: 8 }}>
                  {post.category}
                </div>
                <p style={{ fontSize: 16, color: '#333', margin: '0 0 16px 0', lineHeight: 1.5 }}>{post.text}</p>
                <div style={{ display: 'flex', gap: 8 }}>
                  <button onClick={() => handleApprove(post.id)} style={{ flex: 1, padding: 12, background: '#10b981', color: '#fff', border: 'none', borderRadius: 12, fontWeight: 600 }}>✅ Approve</button>
                  <button onClick={() => handleReject(post.id)} style={{ flex: 1, padding: 12, background: '#ef4444', color: '#fff', border: 'none', borderRadius: 12, fontWeight: 600 }}>🗑️ Reject</button>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    );
  }

return (
    <div style={{ 
      minHeight: '100dvh', 
      background: '#F4F7F9', 
      paddingTop: 'max(env(safe-area-inset-top, 20px), 20px)',
      paddingBottom: 'env(safe-area-inset-bottom, 20px)',
      display: 'flex', 
      flexDirection: 'column',
      maxWidth: 480,
      margin: '0 auto',
      position: 'relative'
    }}>
      <style>{`
        @keyframes floatHeart { 
          0% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
          100% { transform: translateY(-60px) scale(1.5) rotate(15deg); opacity: 0; }
        }
        .heart-burst { position: absolute; animation: floatHeart 0.8s ease-out forwards; pointer-events: none; }
      `}</style>

<header style={{ padding: '0 16px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '2px solid rgba(0,39,76,0.1)' }}>
        <div>
          <h1 style={{ fontSize: 24, fontWeight: 900, color: '#00274C', margin: 0, letterSpacing: '-0.5px' }}>UMich Affirmations ✨</h1>
          <p style={{ margin: '4px 0 0 0', fontSize: 14, color: '#666', fontWeight: 500 }}>Chaotic bestie energy only.</p>
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          {isOwner && (pendingPosts || []).length > 0 && (
            <button onClick={() => setView('mod')} style={{ background: '#ef4444', color: '#fff', border: 'none', borderRadius: 20, padding: '6px 12px', fontSize: 12, fontWeight: 700 }}>
              {(pendingPosts || []).length} Mod
            </button>
          )}
          <button onClick={() => setShowCommunity(v => !v)} style={{ background: showCommunity ? '#00274C' : '#E8F0F8', border: 'none', width: 40, height: 40, borderRadius: 20, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, color: showCommunity ? '#FFCB05' : '#00274C', transition: 'all 0.2s' }}>
            👥
          </button>
          <button onClick={() => share()} style={{ background: '#E8F0F8', border: 'none', width: 40, height: 40, borderRadius: 20, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18 }}>
            🔗
          </button>
        </div>
      </header>

<div style={{ flex: 1, overflowY: 'auto', padding: 16, WebkitOverflowScrolling: 'touch' }}>
        {showCommunity && (
          <div style={{ marginBottom: 24, background: '#fff', borderRadius: 20, padding: 20, boxShadow: '0 4px 12px rgba(0,0,0,0.05)', border: '1px solid rgba(0,39,76,0.08)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
              <h2 style={{ fontSize: 16, fontWeight: 800, color: '#00274C', margin: 0, textTransform: 'uppercase', letterSpacing: '1px' }}>🏆 Vibe Leaderboard</h2>
              <span style={{ fontSize: 12, color: '#666' }}>{(memberList || []).length} member{(memberList || []).length !== 1 ? 's' : ''}</span>
            </div>
            {(leaderboard || []).length > 0 ? (leaderboard || []).map((lb, idx) => (
              <div key={lb.id || idx}
                onClick={() => lb.handle ? openProfile(lb.handle) : null}
                style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 0', borderBottom: idx < (leaderboard || []).length - 1 ? '1px solid #f0f0f0' : 'none', cursor: lb.handle ? 'pointer' : 'default' }}>
                <span style={{ fontSize: 18, fontWeight: 800, color: idx === 0 ? '#FFCB05' : idx === 1 ? '#C0C0C0' : idx === 2 ? '#CD7F32' : '#999', minWidth: 28, textAlign: 'center' }}>
                  {idx === 0 ? '🥇' : idx === 1 ? '🥈' : idx === 2 ? '🥉' : `#${idx + 1}`}
                </span>
                <div style={{ width: 36, height: 36, borderRadius: 18, background: '#E8F0F8', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', flexShrink: 0 }}>
                  {lb.profileImageUrl ? <img src={lb.profileImageUrl} style={{ width: 36, height: 36, borderRadius: 18, objectFit: 'cover' }} /> : <span style={{ fontSize: 16 }}>🐺</span>}
                </div>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 700, fontSize: 14, color: '#00274C', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{lb.displayName || 'Anonymous Wolverine'}</div>
                  <div style={{ fontSize: 12, color: '#888' }}>{lb.vibes} vibe{lb.vibes !== 1 ? 's' : ''}</div>
                </div>
                <div style={{ textAlign: 'right' }}>
                  <div style={{ fontWeight: 800, fontSize: 16, color: '#00274C' }}>{lb.totalFelt}</div>
                  <div style={{ fontSize: 11, color: '#888' }}>felt this</div>
                </div>
              </div>
            )) : (
              <div style={{ textAlign: 'center', padding: 16, color: '#888', fontSize: 14 }}>No approved vibes yet — be the first! 🎉</div>
            )}

{(memberList || []).length > 0 && (
              <div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid #f0f0f0' }}>
                <h3 style={{ fontSize: 13, fontWeight: 700, color: '#666', margin: '0 0 12px 0', textTransform: 'uppercase', letterSpacing: '0.5px' }}>Community Members</h3>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {(memberList || []).map((m, i) => (
                    <div key={m.id || i}
                      onClick={() => m.handle ? openProfile(m.handle) : null}
                      style={{ display: 'flex', alignItems: 'center', gap: 6, background: '#F4F7F9', borderRadius: 20, padding: '6px 12px 6px 6px', cursor: m.handle ? 'pointer' : 'default' }}>
                      <div style={{ width: 24, height: 24, borderRadius: 12, background: '#E8F0F8', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', flexShrink: 0 }}>
                        {m.avatarUrl ? <img src={m.avatarUrl} style={{ width: 24, height: 24, borderRadius: 12, objectFit: 'cover' }} /> : <span style={{ fontSize: 12 }}>🐺</span>}
                      </div>
                      <span style={{ fontSize: 13, fontWeight: 600, color: '#00274C' }}>{m.displayName || m.name || 'Wolverine'}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>
        )}

{dailyFeatured && (
          <div style={{ marginBottom: 24 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
              <span style={{ fontSize: 20 }}>🌟</span>
              <h2 style={{ fontSize: 16, fontWeight: 800, color: '#00274C', margin: 0, textTransform: 'uppercase', letterSpacing: '1px' }}>Daily Affirmation</h2>
            </div>
            <div style={{ 
              background: 'linear-gradient(135deg, #00274C 0%, #001830 100%)', 
              borderRadius: 20, 
              padding: 24, 
              color: '#fff', 
              boxShadow: '0 8px 24px rgba(0,39,76,0.2)',
              position: 'relative',
              overflow: 'hidden'
            }}>
              <div style={{ position: 'absolute', top: -20, right: -20, fontSize: 100, opacity: 0.1, transform: 'rotate(15deg)' }}>〽️</div>
              <p style={{ fontSize: 22, fontWeight: 700, lineHeight: 1.4, margin: '0 0 20px 0', position: 'relative', zIndex: 1 }}>
                "{dailyFeatured.text}"
              </p>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', position: 'relative', zIndex: 1 }}>
                <span style={{ background: 'rgba(255,203,5,0.2)', color: '#FFCB05', padding: '6px 12px', borderRadius: 12, fontSize: 13, fontWeight: 700 }}>
                  {dailyFeatured.category}
                </span>
                <button 
                  onClick={() => handleLike(dailyFeatured.id)}
                  style={{ background: 'transparent', border: 'none', color: '#FFCB05', fontSize: 16, fontWeight: 700, display: 'flex', alignItems: 'center', gap: 6, position: 'relative' }}
                >
                  <span style={{ fontSize: 20 }}>{animatingPostId === dailyFeatured.id ? '💖' : '🤍'}</span> 
                  {dailyFeatured.feltItCount}
                  {animatingPostId === dailyFeatured.id && (
                    <div className="heart-burst" style={{ top: -20, left: 0, fontSize: 24 }}>💙💛</div>
                  )}
                </button>
              </div>
            </div>
          </div>
        )}

<div style={{ display: 'flex', flexDirection: 'column', gap: 16, paddingBottom: 80 }}>
          {(approvedPosts || []).filter(p => p.id !== dailyFeatured?.id).map(post => (
            <div key={post.id} style={{ 
              background: '#fff', 
              borderRadius: 20, 
              padding: 20, 
              boxShadow: '0 4px 12px rgba(0,0,0,0.03)',
              border: '1px solid rgba(0,39,76,0.05)'
            }}>
              {post.isDemo && (
                <div style={{ display: 'inline-block', background: '#FFCB05', color: '#00274C', padding: '4px 8px', borderRadius: 8, fontSize: 11, fontWeight: 800, textTransform: 'uppercase', marginBottom: 12, letterSpacing: '0.5px' }}>
                  ✨ Demo Vibe ✨
                </div>
              )}
              <p style={{ fontSize: 18, color: '#111', margin: '0 0 16px 0', lineHeight: 1.5, fontWeight: 500 }}>
                {post.text}
              </p>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ color: '#666', fontSize: 13, fontWeight: 600 }}>
                  #{post.category.replace(/\s+/g, '')}
                </span>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <button
                    onClick={() => share({ text: post.text, category: post.category })}
                    style={{ background: '#F4F7F9', border: 'none', width: 34, height: 34, borderRadius: 17, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, cursor: 'pointer' }}
                    title="Share this vibe"
                  >↗️</button>
                  <button 
                    onClick={() => handleLike(post.id)}
                    style={{ 
                      background: '#F4F7F9', 
                      border: 'none', 
                      padding: '8px 16px', 
                      borderRadius: 20, 
                      color: '#00274C', 
                      fontSize: 14, 
                      fontWeight: 700, 
                      display: 'flex', 
                      alignItems: 'center', 
                      gap: 6,
                      position: 'relative'
                    }}
                  >
                    <span style={{ fontSize: 16 }}>{animatingPostId === post.id ? '💖' : '🤍'}</span> 
                    Felt This ({post.feltItCount})
                    {animatingPostId === post.id && (
                      <div className="heart-burst" style={{ top: -20, left: '50%', marginLeft: -12, fontSize: 24 }}>💙💛</div>
                    )}
                  </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

<div style={{ 
        position: 'absolute', 
        bottom: 'calc(env(safe-area-inset-bottom, 20px) + 20px)', 
        left: 0, right: 0, 
        display: 'flex', 
        justifyContent: 'center', 
        pointerEvents: 'none' 
      }}>
        <button 
          onClick={() => setView('submit')}
          style={{ 
            background: '#FFCB05', 
            color: '#00274C', 
            border: 'none', 
            padding: '16px 32px', 
            borderRadius: 30, 
            fontSize: 18, 
            fontWeight: 800, 
            boxShadow: '0 8px 24px rgba(255,203,5,0.4)',
            pointerEvents: 'auto',
            display: 'flex',
            alignItems: 'center',
            gap: 8,
            transform: 'translateY(0)',
            transition: 'transform 0.2s'
          }}
        >
          <span style={{ fontSize: 22 }}>➕</span> Drop a Vibe
        </button>
      </div>
    </div>
  );
}</article></body></html>