{s.emoji}

)); const renderAgora = () => (

= 1 ? 1 : 0, transform: animStage >= 1 ? 'translateY(0)' : 'translateY(-20px)', transition: baseTransition }}>

🏛️

Agora

Where curious minds gather ✨

{isMultiplayer &&

🌐 {(memberList || []).length} thinker{(memberList || []).length !== 1 ? 's' : ''} connected

}

= 2 ? 1 : 0, transform: animStage >= 2 ? 'translateY(0)' : 'translateY(20px)', transition: baseTransition }}> {(tables || []).map((table, i) => (

{ handleTap(table.id, e); setSelectedTable(table.id); }} style={{ background: `linear-gradient(135deg, ${table.color}88, ${table.color}44)`, backdropFilter: 'blur(10px)', borderRadius: 20, padding: '18px 14px', border: `2px solid ${table.color}`, cursor: 'pointer', transform: tapPulse === table.id ? 'scale(0.94)' : 'scale(1)', transition: baseTransition, boxShadow: `0 4px 20px ${table.color}40`, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, animation: `fadeSlideUp 0.4s ease ${i * 0.08}s both`, }}> {table.emoji} {table.name} {(table.threads ?? []).length} thread{(table.threads ?? []).length !== 1 ? 's' : ''}

))}

); const renderTableView = () => (

{currentTable?.emoji ?? '💭'} {currentTable?.name ?? 'Table'}

{showNewThread && (

setNewThreadText(e.target.value)}
            placeholder="Share a thought worth thinking about..."
            style={{
              width: '100%', minHeight: 80, border: 'none', background: 'transparent',
              fontSize: 16, color: '#4A3F6B', resize: 'none', outline: 'none',
              fontFamily: 'Quicksand, sans-serif', boxSizing: 'border-box'
            }} />
          <button onClick={submitThread} disabled={!newThreadText.trim()} style={{
            background: newThreadText.trim() ? 'linear-gradient(135deg, #B5DEFF, #E0BBE4)' : '#ddd',
            border: 'none', borderRadius: 12, padding: '10px 20px', fontSize: 15, fontWeight: 600,
            color: '#4A3F6B', cursor: newThreadText.trim() ? 'pointer' : 'default',
            marginTop: 8, transition: baseTransition
          }}>Plant this seed 🌱</button>
        </div>
      )}

<div style={{ flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 10, paddingBottom: 20 }}>
        {(currentThreads || []).length === 0 && <p style={{ textAlign: 'center', color: '#9B8EC4', fontSize: 16, marginTop: 40 }}>No threads yet. Be the first to plant a seed! 🌱</p>}
        {(currentThreads || []).map((thread, i) => (
          <div key={thread.id}
            onClick={(e) => { handleTap(thread.id, e); setSelectedThread(thread); }}
            style={{
              background: '#ffffffcc', borderRadius: 18, padding: 16,
              border: `2px solid ${currentTable?.color ?? '#E0BBE4'}40`,
              cursor: 'pointer',
              transform: tapPulse === thread.id ? 'scale(0.97)' : 'scale(1)',
              transition: baseTransition,
              boxShadow: '0 2px 12px rgba(160,140,200,0.15)',
              animation: `fadeSlideUp 0.3s ease ${i * 0.05}s both`,
            }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
              <span style={{ fontSize: 13, fontWeight: 600, color: '#8B7FB8' }}>{thread.author ?? 'Anonymous'}</span>
              <div style={{ display: 'flex', gap: 6 }}>
                <span style={{ fontSize: 11, background: '#B5DEFF55', borderRadius: 8, padding: '2px 7px', color: '#5B8DB8' }}>💎 {thread.clarity ?? 0}</span>
                <span style={{ fontSize: 11, background: '#BAFFC955', borderRadius: 8, padding: '2px 7px', color: '#5B9B6B' }}>📚 {thread.evidence ?? 0}</span>
              </div>
            </div>
            <p style={{ fontSize: 15, color: '#4A3F6B', margin: 0, lineHeight: 1.5 }}>{thread.text}</p>
            <div style={{ marginTop: 8, display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ fontSize: 12, color: '#9B8EC4' }}>💬 {(thread.replies ?? []).length} repl{(thread.replies ?? []).length !== 1 ? 'ies' : 'y'}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );

<div style={{
          background: 'linear-gradient(135deg, #ffffffee, #ffffffcc)', borderRadius: 22, padding: 20,
          border: `2px solid ${currentTable?.color ?? '#E0BBE4'}`,
          boxShadow: `0 8px 32px ${currentTable?.color ?? '#E0BBE4'}30`,
          animation: 'fadeSlideUp 0.3s ease'
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
            <span style={{ fontSize: 15, fontWeight: 700, color: '#6B5B8D' }}>{thread.author ?? 'Anonymous'}</span>
            <span style={{ fontSize: 22 }}>{currentTable?.emoji ?? '💭'}</span>
          </div>
          <p style={{ fontSize: 17, color: '#4A3F6B', margin: 0, lineHeight: 1.6, fontWeight: 500 }}>{thread.text}</p>
          <div style={{ display: 'flex', gap: 10, marginTop: 14 }}>
            <button onClick={(e) => { upvoteClarity(thread.id); spawnSparkles(e.clientX, e.clientY); }} style={{
              background: '#B5DEFF55', border: '1.5px solid #B5DEFF', borderRadius: 12, padding: '8px 14px',
              fontSize: 14, cursor: 'pointer', color: '#5B8DB8', fontWeight: 600, transition: baseTransition,
            }}>💎 Clarity {thread.clarity ?? 0}</button>
            <span style={{ background: '#BAFFC955', border: '1.5px solid #BAFFC9', borderRadius: 12, padding: '8px 14px',
              fontSize: 14, color: '#5B9B6B', fontWeight: 600 }}>📚 Evidence {thread.evidence ?? 0}</span>
          </div>
        </div>

<div style={{ flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column', gap: 8 }}>
          {(replies || []).length === 0 && <p style={{ textAlign: 'center', color: '#9B8EC4', fontSize: 14, marginTop: 20 }}>No replies yet. Add your perspective! ✨</p>}
          {(replies || []).map((reply, i) => (
            <div key={reply.id ?? i} style={{
              background: '#ffffff99', borderRadius: 16, padding: 14,
              marginLeft: 16, borderLeft: `3px solid ${currentTable?.color ?? '#E0BBE4'}`,
              animation: `fadeSlideUp 0.3s ease ${i * 0.05}s both`,
            }}>
              <span style={{ fontSize: 13, fontWeight: 600, color: '#8B7FB8' }}>{reply.author ?? 'Anonymous'}</span>
              <p style={{ fontSize: 14, color: '#4A3F6B', margin: '6px 0 0', lineHeight: 1.5 }}>{reply.text}</p>
            </div>
          ))}
        </div>

<div style={{ display: 'flex', gap: 8, paddingTop: 8 }}>
          <textarea value={replyText} onChange={e => setReplyText(e.target.value)}
            placeholder="Add your perspective..."
            style={{
              flex: 1, minHeight: 48, border: '2px solid #E0BBE4', background: '#fff9',
              borderRadius: 16, padding: '12px 14px', fontSize: 15, color: '#4A3F6B',
              resize: 'none', outline: 'none', fontFamily: 'Quicksand, sans-serif',
              boxSizing: 'border-box'
            }} />
          <button onClick={(e) => { submitReply(); if (replyText.trim()) spawnSparkles(e.clientX, e.clientY); }}
            disabled={!replyText.trim()}
            style={{
              background: replyText.trim() ? 'linear-gradient(135deg, #FFB5E8, #B5DEFF)' : '#eee',
              border: 'none', borderRadius: 16, padding: '12px 16px', fontSize: 20,
              cursor: replyText.trim() ? 'pointer' : 'default', transition: baseTransition,
              alignSelf: 'flex-end'
            }}>🌟</button>
        </div>
      </div>
    );
  };

const renderProfile = () => (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'center' }}>
      <div style={{
        width: 100, height: 100, borderRadius: '50%', overflow: 'hidden',
        background: 'linear-gradient(135deg, #E0BBE4, #B5DEFF, #FFB5E8)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: '0 8px 30px rgba(180,160,220,0.4)',
        animation: 'pulseGlow 3s ease-in-out infinite',
        marginTop: 20
      }}>
        {user?.avatarUrl ? <img src={user.avatarUrl} style={{ width: '100%', height: '100%', objectFit: 'cover' }} /> : <span style={{ fontSize: 44 }}>🧠</span>}
      </div>
      <h2 style={{ fontSize: 24, fontWeight: 700, color: '#4A3F6B', margin: 0 }}>{user?.name ?? 'Curious Thinker'}</h2>
      <p style={{ fontSize: 14, color: '#9B8EC4', margin: 0, fontStyle: 'italic' }}>UNSW Agora Member ✨</p>

<div style={{
        width: '100%', background: 'linear-gradient(135deg, #ffffffdd, #ffffffaa)',
        borderRadius: 24, padding: 24, border: '2px solid #E0BBE488',
        boxShadow: '0 8px 32px rgba(180,160,220,0.15)',
      }}>
        <h3 style={{ fontSize: 16, color: '#6B5B8D', margin: '0 0 16px', textAlign: 'center' }}>🏛️ Credibility Score</h3>
        <div style={{
          fontSize: 48, fontWeight: 800, textAlign: 'center',
          background: 'linear-gradient(135deg, #8B7FB8, #FFB5E8, #B5DEFF)',
          WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
          margin: '0 0 20px'
        }}>{totalCredibility}</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          {[
            { label: 'Clarity', value: userStats?.clarity ?? 0, emoji: '💎', color: '#B5DEFF' },
            { label: 'Evidence', value: userStats?.evidence ?? 0, emoji: '📚', color: '#BAFFC9' },
            { label: 'Respect', value: userStats?.respect ?? 0, emoji: '🤝', color: '#FFD5A5' },
            { label: 'Contributions', value: userStats?.contributions ?? 0, emoji: '🌱', color: '#FFB5E8' },
          ].map((stat, i) => (
            <div key={i} style={{
              background: `${stat.color}44`, borderRadius: 16, padding: '14px 12px',
              textAlign: 'center', border: `1.5px solid ${stat.color}`,
              animation: `fadeSlideUp 0.3s ease ${i * 0.1}s both`,
            }}>
              <div style={{ fontSize: 24 }}>{stat.emoji}</div>
              <div style={{ fontSize: 22, fontWeight: 700, color: '#4A3F6B' }}>{stat.value}</div>
              <div style={{ fontSize: 12, color: '#8B7FB8', fontWeight: 600 }}>{stat.label}</div>
            </div>
          ))}
        </div>
      </div>

<div style={{
        width: '100%', background: '#ffffff99', borderRadius: 18, padding: 16,
        border: '2px solid #FFFFBA88', textAlign: 'center'
      }}>
        <span style={{ fontSize: 28 }}>🔥</span>
        <span style={{ fontSize: 18, fontWeight: 700, color: '#4A3F6B', marginLeft: 8 }}>{userStats?.streak ?? 0}-day streak</span>
        <p style={{ fontSize: 13, color: '#9B8EC4', margin: '4px 0 0' }}>Keep thinking, keep growing</p>
      </div>

{isMultiplayer && (memberList || []).length > 1 && (
        <div style={{ width: '100%', background: '#ffffff99', borderRadius: 18, padding: 16, border: '2px solid #B5DEFF88' }}>
          <h3 style={{ fontSize: 14, color: '#6B5B8D', margin: '0 0 10px' }}>🌐 Connected Thinkers</h3>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {(memberList || []).map((m, i) => (
              <div key={m?.id ?? i} style={{
                background: '#E0BBE444', borderRadius: 12, padding: '6px 12px',
                fontSize: 13, color: '#6B5B8D', fontWeight: 500
              }}>{m?.displayName ?? 'Thinker'}</div>
            ))}
          </div>
        </div>
      )}
    </div>
  );

const navItems = [
    { id: 'agora', emoji: '🏛️', label: 'Agora' },
    { id: 'profile', emoji: '🧠', label: 'Growth' },
  ];

return (
    <div style={{
      minHeight: '100dvh', width: '100%', display: 'flex', flexDirection: 'column',
      paddingTop: 'env(safe-area-inset-top, 20px)',
      paddingBottom: 'env(safe-area-inset-bottom, 20px)',
      background: 'linear-gradient(160deg, #F0E6FF 0%, #E8F4FF 30%, #FFF0F5 60%, #F5FFE8 100%)',
      fontFamily: 'Quicksand, sans-serif', boxSizing: 'border-box',
      position: 'relative', overflow: 'hidden'
    }}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700;800&display=swap');
        @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes pulseGlow { 0%, 100% { box-shadow: 0 8px 30px rgba(180,160,220,0.4); } 50% { box-shadow: 0 8px 40px rgba(180,160,220,0.7); } }
        @keyframes sparkleFloat { 0% { opacity: 1; transform: scale(1) translateY(0); } 100% { opacity: 0; transform: scale(0.3) translateY(-40px); } }
        @keyframes floatBubble { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-8px) scale(1.05); } }
        * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        textarea::placeholder { color: #B8A8D8; }
      `}</style>

{renderSparkles()}

<div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '0 20px', overflow: 'hidden' }}>
        {activeView === 'agora' && !selectedTable && !selectedThread && renderAgora()}
        {activeView === 'agora' && selectedTable && !selectedThread && renderTableView()}
        {activeView === 'agora' && selectedThread && renderThreadView()}
        {activeView === 'profile' && renderProfile()}
      </div>

<div style={{
        display: 'flex', justifyContent: 'center', gap: 8, padding: '12px 20px 4px',
        background: 'linear-gradient(transparent, #F0E6FFcc)',
      }}>
        {(navItems || []).map(item => (
          <button key={item.id}
            onClick={(e) => {
              handleTap(item.id, e);
              setActiveView(item.id);
              if (item.id === 'agora') { setSelectedTable(null); setSelectedThread(null); }
            }}
            style={{
              flex: 1, maxWidth: 160, background: activeView === item.id
                ? 'linear-gradient(135deg, #E0BBE4, #B5DEFF)' : '#ffffff88',
              border: activeView === item.id ? '2px solid #C89BDB' : '2px solid #E0BBE444',
              borderRadius: 18, padding: '12px 0', cursor: 'pointer',
              transform: tapPulse === item.id ? 'scale(0.93)' : 'scale(1)',
              transition: baseTransition,
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
            }}>
            <span style={{ fontSize: 22 }}>{item.emoji}</span>
            <span style={{ fontSize: 12, fontWeight: 700, color: activeView === item.id ? '#4A3F6B' : '#9B8EC4' }}>{item.label}</span>
          </button>
        ))}
      </div>
    </div>
  );
}</article></body></html>