DEAL DROP

CHAOS + CAFFEINE

YOUR VIBE

{(scores[user.id]?.vibe ?? 0) + (scores[user.id]?.boldness ?? 0) + (scores[user.id]?.insight ?? 0)} LP

{/* 📱 MAIN CONTENT */}

{/* TAB: DEAL DROP */} {activeTab === 'deal' && ( <> {/* THE DEAL CARD */}

LIVE {new Date().toLocaleDateString()}

{currentDeal.headline}

{currentDeal.subtext}

{/* POLL */}

{(pollCounts || []).map(opt => (

handleVote(opt.id)} style={{ position: 'relative', height: 40, border: '1px solid #000', borderRadius: 4, display: 'flex', alignItems: 'center', padding: '0 12px', cursor: 'pointer', overflow: 'hidden' }} >

{opt.text} {opt.percent}%

))}

{/* HOT TAKES FEED */}

HOT TAKES 🔥

setHotTakeInput(e.target.value)} placeholder="Spit facts..." style={{ ...styles.bubbleInput, flex: 1, padding: '0 12px' }} />

{(currentDeal.hotTakes ?? []).map(take => (

👤

@{take.author} • {take.role}

{take.text}

))}

)} {/* TAB: IDEAS */} {activeTab === 'ideas' && ( <>

DAILY PROMPT

"Disrupt the funeral industry using AI"

{(ideas ?? []).map(idea => (

{idea.text}

@{idea.author}

))} {/* ADD NEW IDEA CARD */}

setIdeaInput(e.target.value)}
                  style={{ 
                    background: 'transparent', 
                    border: 'none', 
                    color: '#fff', 
                    width: '100%', 
                    height: '100%',
                    resize: 'none',
                    fontSize: 14,
                    fontFamily: 'Courier New'
                  }}
                />
                <button 
                  onClick={submitIdea}
                  style={{ marginTop: 8, background: '#00FFFF', border: 'none', borderRadius: 4, padding: 4, fontWeight: 'bold' }}
                >
                  POST IT
                </button>
              </div>
            </div>
          </>
        )}

{/* TAB: CONNECT */}
        {activeTab === 'connect' && (
          <div style={{ 
            flex: 1, 
            display: 'flex', 
            flexDirection: 'column', 
            justifyContent: 'center', 
            alignItems: 'center',
            textAlign: 'center'
          }}>
            {connectStatus === 'idle' && (
              <>
                 <div style={{ fontSize: 64, marginBottom: 20 }}>☕️</div>
                 <h2 style={{ ...styles.gradientText, fontSize: 28, marginBottom: 16 }}>COFFEE ROULETTE</h2>
                 <p style={{ color: '#aaa', maxWidth: 300, marginBottom: 32 }}>
                   {isMultiplayer && (members || []).length > 1 
                     ? "Pair up with a random crew member for 5 minutes. No small talk allowed."
                     : "The cosmos is quiet. Spin the wheel for a solo creative challenge."}
                 </p>
                 <button 
                   onClick={startRoulette}
                   style={{ 
                     ...styles.neonButton, 
                     fontSize: 20, 
                     padding: '16px 32px', 
                     borderRadius: 99 
                   }}
                 >
                   SPIN THE WHEEL
                 </button>
              </>
            )}

{connectStatus === 'scanning' && (
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
                <div style={{ 
                  width: 80, height: 80, 
                  border: '4px solid #FF00FF', 
                  borderTopColor: 'transparent', 
                  borderRadius: '50%',
                  animation: 'spin 1s linear infinite'
                }} />
                <div style={{ fontFamily: 'Courier New', color: '#00FFFF' }}>SCANNING FREQUENCIES...</div>
                <style>{`@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }`}</style>
              </div>
            )}

{connectStatus === 'connected' && (
              <div style={{ ...styles.chromeCard, color: '#000', padding: 24, width: '100%' }}>
                <div style={{ fontSize: 12, fontWeight: 'bold', color: '#666', marginBottom: 8 }}>CONNECTION ESTABLISHED</div>
                <div style={{ fontSize: 48, fontWeight: 'bold', fontFamily: 'monospace', marginBottom: 16 }}>
                   {Math.floor(connectTimer / 60)}:{(connectTimer % 60).toString().padStart(2, '0')}
                </div>
                <div style={{ background: '#000', color: '#00FFFF', padding: 16, borderRadius: 8, fontFamily: 'Courier New', marginBottom: 24 }}>
                  PROMPT: Explain a blockchain fork using only kitchen analogies.
                </div>
                <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
                  <div style={{ textAlign: 'center' }}>
                    <img src={user.avatarUrl} style={{ width: 48, height: 48, borderRadius: '50%', border: '2px solid #000' }} alt="You" />
                    <div style={{ fontSize: 12, fontWeight: 'bold' }}>YOU</div>
                  </div>
                  <div style={{ fontSize: 32 }}>⚡️</div>
                  <div style={{ textAlign: 'center' }}>
                     <div style={{ 
                       width: 48, height: 48, borderRadius: '50%', border: '2px dashed #000', 
                       display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 24, background: '#eee'
                     }}>
                       {isMultiplayer && (members || []).length > 1 ? '👤' : '🤖'}
                     </div>
                     <div style={{ fontSize: 12, fontWeight: 'bold' }}>
                       {isMultiplayer && (members || []).length > 1 ? 'PARTNER' : 'AI BOT'}
                     </div>
                  </div>
                </div>
                <button 
                  onClick={() => setConnectStatus('idle')} 
                  style={{ marginTop: 24, background: 'none', border: '1px solid #000', padding: '8px 16px', borderRadius: 4, fontWeight: 'bold' }}
                >
                  END CALL
                </button>
              </div>
            )}
          </div>
        )}

{/* BOTTOM SECTION: LEADERBOARD TEASER */}
        {activeTab !== 'connect' && (
          <div style={{ marginTop: 'auto', paddingTop: 20 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 8 }}>
              <h3 style={{ margin: 0, color: '#FF00FF', fontSize: 14 }}>VIBE CHECK (TOP 3)</h3>
              <span style={{ fontSize: 12, color: '#aaa' }}>Live Ranking</span>
            </div>
            <div style={{ background: '#1a1a1a', borderRadius: 8, overflow: 'hidden' }}>
              {(sortedLeaderboard || []).slice(0, 3).map((entry, i) => (
                <div key={i} style={{ 
                  display: 'flex', alignItems: 'center', padding: '10px 12px', 
                  borderBottom: i < 2 ? '1px solid #333' : 'none',
                  background: entry.id === user.id ? 'rgba(255, 0, 255, 0.1)' : 'transparent'
                }}>
                  <span style={{ width: 20, fontSize: 14, color: i === 0 ? '#FFD700' : '#888' }}>{i + 1}</span>
                  <div 
                    onClick={() => entry.handle && openProfile(entry.handle)} 
                    style={{ width: 24, height: 24, borderRadius: '50%', background: '#333', marginRight: 10, overflow: 'hidden' }}
                  >
                    {entry.avatarUrl ? <img src={entry.avatarUrl} style={{ width: '100%', height: '100%' }} /> : '👤'}
                  </div>
                  <span style={{ flex: 1, fontSize: 14, color: entry.id === user.id ? '#fff' : '#aaa' }}>
                    {entry.displayName || 'Anon'} {entry.id === user.id && '(You)'}
                  </span>
                  <span style={{ fontFamily: 'Courier New', fontWeight: 'bold', color: '#00FFFF' }}>{entry.total} LP</span>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>

{/* 🧭 NAV BAR */}
      <div style={{ 
        borderTop: '1px solid #333', 
        background: '#000', 
        padding: '12px 0',
        display: 'flex', 
        justifyContent: 'space-around'
      }}>
        <button onClick={() => setActiveTab('deal')} style={{ background: 'none', border: 'none', opacity: activeTab === 'deal' ? 1 : 0.5 }}>
          <div style={{ fontSize: 24 }}>💸</div>
          <div style={{ fontSize: 10, color: '#fff', marginTop: 4 }}>DROP</div>
        </button>
        <button onClick={() => setActiveTab('connect')} style={{ background: 'none', border: 'none', opacity: activeTab === 'connect' ? 1 : 0.5 }}>
          <div style={{ fontSize: 24 }}>☕️</div>
          <div style={{ fontSize: 10, color: '#fff', marginTop: 4 }}>CONNECT</div>
        </button>
        <button onClick={() => setActiveTab('ideas')} style={{ background: 'none', border: 'none', opacity: activeTab === 'ideas' ? 1 : 0.5 }}>
          <div style={{ fontSize: 24 }}>🧠</div>
          <div style={{ fontSize: 10, color: '#fff', marginTop: 4 }}>IDEAS</div>
        </button>
      </div>
    </div>
  );
}</article></body></html>