{showBack && ( )}

{title}

{!showBack && (

)}

); // 🏠 VIEW: LOBBY if (currentView === 'lobby') { return (

{renderHeader('Common Ground')}

🎓

UNSW Community

Connect with curious minds.

Active Rooms

{(rooms || []).filter(r => r.status === 'active').map(room => (

handleJoinRoom(room.id)} style={{ backgroundColor: '#2A2622', borderRadius: 12, padding: 20, border: '1px solid #3D352E', boxShadow: '0 4px 12px rgba(0,0,0,0.3)', cursor: 'pointer', transition: 'transform 0.1s', }} >

{room.icon} {room.participants} Scholars

{room.title}

{room.prompt}

))}

Archive

{(rooms || []).filter(r => r.status === 'archived').map(room => (

handleJoinRoom(room.id)} style={{ padding: 16, borderBottom: `1px solid ${COLORS.border}`, display: 'flex', alignItems: 'center', gap: 12, opacity: 0.7 }} > {room.icon}

{room.title}

Ended • {(room.contributions || []).length} contributions

))}

); } // 📝 VIEW: CREATE ROOM if (currentView === 'create') { return (

{renderHeader('Curator\'s Desk', true)}

ROOM TITLE setNewRoomForm({...newRoomForm, title: e.target.value})} /> TYPE

{['thought', 'game', 'project'].map(type => ( ))}

THE PROMPT

setNewRoomForm({...newRoomForm, prompt: e.target.value})}
          />

<button 
            onClick={handleCreateRoom}
            style={{ 
              width: '100%', 
              marginTop: 32, 
              padding: 16, 
              background: COLORS.gold, 
              color: '#000', 
              border: 'none', 
              borderRadius: 8, 
              fontSize: 16, 
              fontWeight: 'bold', 
              cursor: 'pointer' 
            }}
          >
            Open Room
          </button>
        </div>
      </div>
    );
  }

// 🕯️ VIEW: INSIDE ROOM
  if (currentView === 'room') {
    const room = getActiveRoom();
    if (!room) return null;

const isArchived = room.status === 'archived';

return (
      <div style={{ backgroundColor: COLORS.bg, minHeight: '100dvh', color: COLORS.paper, fontFamily: FONTS.sans, display: 'flex', flexDirection: 'column' }}>
        {renderHeader(room.type.toUpperCase(), true)}
        
        {/* Room Header Info */}
        <div style={{ padding: '24px 20px', borderBottom: `1px solid ${COLORS.border}`, backgroundColor: '#231F1C' }}>
          <h2 style={{ fontFamily: FONTS.serif, fontSize: 28, margin: '0 0 12px 0', color: COLORS.gold }}>{room.title}</h2>
          <p style={{ fontSize: 18, lineHeight: 1.6, margin: 0, opacity: 0.9 }}>{room.prompt}</p>
        </div>

{/* Contributions Scroll - The "Parchment" Area */}
        <div style={{ 
          flex: 1, 
          padding: 20, 
          overflowY: 'auto',
          backgroundImage: 'radial-gradient(circle at 50% 50%, #25221F 0%, #1A1816 100%)',
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {(room.contributions || []).length === 0 ? (
              <div style={{ textAlign: 'center', padding: 40, opacity: 0.5, fontStyle: 'italic', fontFamily: FONTS.serif }}>
                The ink is fresh. Be the first to write.
              </div>
            ) : (
              (room.contributions || []).map(c => (
                <div key={c.id} style={{ 
                  backgroundColor: COLORS.paper, 
                  color: COLORS.ink, 
                  padding: '16px 20px', 
                  borderRadius: '2px 12px 12px 12px',
                  position: 'relative',
                  boxShadow: '0 2px 8px rgba(0,0,0,0.2)',
                  maxWidth: '90%'
                }}>
                  <div style={{ fontSize: 16, lineHeight: 1.5, fontFamily: FONTS.serif, marginBottom: 8 }}>{c.text}</div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12, opacity: 0.6, textTransform: 'uppercase', letterSpacing: 0.5 }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                      <span style={{ fontWeight: 'bold' }}>{c.userName}</span>
                    </div>
                    <span>{c.likes > 0 && `${c.likes} ⭐`}</span>
                  </div>
                </div>
              ))
            )}
          </div>
        </div>

{/* Input Area (Only if active) */}
        {!isArchived && (
          <div style={{ 
            padding: '16px 20px',
            paddingBottom: 'max(env(safe-area-inset-bottom, 20px), 20px)',
            backgroundColor: '#2A2622',
            borderTop: `1px solid ${COLORS.border}`,
            display: 'flex',
            gap: 12
          }}>
            <input 
              value={inputValue}
              onChange={e => setInputValue(e.target.value)}
              placeholder="Add your thought..."
              onKeyDown={e => e.key === 'Enter' && handleSubmitContribution()}
              style={{ 
                flex: 1, 
                background: '#1A1816', 
                border: `1px solid ${COLORS.border}`, 
                borderRadius: 24, 
                color: COLORS.paper, 
                padding: '0 16px', 
                fontSize: 16,
                height: 48,
                outline: 'none'
              }}
            />
            <button 
              onClick={handleSubmitContribution}
              style={{ 
                width: 48, 
                height: 48, 
                borderRadius: '50%', 
                background: COLORS.gold, 
                border: 'none', 
                display: 'flex', 
                alignItems: 'center', 
                justifyContent: 'center',
                fontSize: 20,
                color: COLORS.ink,
                cursor: 'pointer',
                transform: isAnimating ? 'scale(0.9)' : 'scale(1)',
                transition: 'transform 0.2s'
              }}
            >
              ✒️
            </button>
          </div>
        )}
        
        {/* Archived Summary Footer */}
        {isArchived && (
          <div style={{ 
            padding: '20px', 
            paddingBottom: 'max(env(safe-area-inset-bottom, 20px), 30px)',
            textAlign: 'center', 
            backgroundColor: '#2A2622',
            color: COLORS.gold,
            borderTop: `1px solid ${COLORS.border}`,
            fontFamily: FONTS.serif
          }}>
            This room is closed. The ink has dried.
          </div>
        )}
      </div>
    );
  }

// 👤 VIEW: PROFILE (Simple) 
  if (currentView === 'profile') {
    return (
      <div style={{ backgroundColor: COLORS.bg, minHeight: '100dvh', color: COLORS.paper, fontFamily: FONTS.sans }}>
        {renderHeader('My Profile', true)}
        <div style={{ padding: 24, textAlign: 'center' }}>
          <div style={{ 
            width: 80, height: 80, borderRadius: '50%', 
            background: user.avatarUrl ? `url(${user.avatarUrl}) center/cover` : COLORS.gold,
            margin: '0 auto 16px',
            border: `2px solid ${COLORS.gold}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 32
          }}>
            {!user.avatarUrl && '👤'}
          </div>
          <h2 style={{ fontFamily: FONTS.serif, margin: '0 0 8px', color: COLORS.gold }}>{user.name || 'Scholar'}</h2>
          <p style={{ opacity: 0.6, margin: 0 }}>@{user.handle || 'guest'}</p>
          
          <div style={{ marginTop: 40, textAlign: 'left' }}>
            <h3 style={{ fontFamily: FONTS.serif, borderBottom: `1px solid ${COLORS.border}`, paddingBottom: 8, color: COLORS.textMuted }}>Stats</h3>
            <div style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 0' }}>
              <span>Rooms Joined</span>
              <span style={{ color: COLORS.gold }}>12</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 0' }}>
              <span>Contributions</span>
              <span style={{ color: COLORS.gold }}>48</span>
            </div>
          </div>
          
          <button onClick={share} style={{ 
            marginTop: 40, 
            width: '100%', 
            padding: 16, 
            background: 'transparent', 
            border: `1px solid ${COLORS.gold}`, 
            color: COLORS.gold, 
            borderRadius: 8,
            fontWeight: 'bold',
            cursor: 'pointer'
          }}>
            Share Profile Card
          </button>
        </div>
      </div>
    );
  }

return null;
}</article></body></html>