{/* Confetti Overlay */} {showConfetti && (

{Array.from({ length: 40 }).map((_, i) => { const emojis = ['✨', '🎉', '💻', '🚀', '🔥', '🏆']; return (

{emojis[Math.floor(Math.random() * (emojis || []).length)]}

); })}

)} {/* Header */}

Hack-In

{isMultiplayer ? 'Live Registration' : 'Your Teams'}

{/* Member avatars overlapping */}

{(memberList || []).slice(0, 3).map((m, i) => (

m.handle ? openProfile(m.handle) : null} style={{ width: 32, height: 32, borderRadius: '50%', border: '2px solid #F9FAFB', marginLeft: -8, background: '#E5E7EB', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden', cursor: m.handle ? 'pointer' : 'default', zIndex: i }} > {m.avatarUrl ? ( {m.displayName}

) : ( 👤 )}

))}

{typeof share === 'function' && ( )}

{/* Main Content Area */}

{!isRegistering ? ( /* Live Team Lineup */

{(displayTeams || []).map((team, index) => { const isExpanded = expandedId === team.id; return (

setExpandedId(isExpanded ? null : team.id)} style={{ background: '#FFFFFF', borderRadius: 24, padding: 20, boxShadow: '0 4px 20px rgba(0,0,0,0.03)', border: team.isDemo ? '1px dashed #E5E7EB' : '1px solid transparent', cursor: 'pointer', transition: 'transform 0.2s, box-shadow 0.2s', transform: isExpanded ? 'scale(1.02)' : 'scale(1)' }} >

{team.isDemo && ( Demo )}

{team.name}

👥 {team.members?.length || 0} Members

{isExpanded && (

{team.project}

{team.members && (team.members || []).length > 0 && (

{(team.members || []).map((m, i) => ( {m} ))}

)} {team._user && (

{ e.stopPropagation(); if(team._user.handle) openProfile(team._user.handle); }} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: '#9CA3AF', cursor: team._user.handle ? 'pointer' : 'default' }} > {team._user.profileImageUrl ? (

) : (

👤

)} Added by {team._user.displayName}

)}

); })}

) : ( /* Registration Form */

Assemble Squad

Team Name * setFormData({...formData, name: e.target.value})} placeholder="e.g. Brainstormers 🧠" style={{ width: '100%', padding: '16px', borderRadius: 16, fontSize: 16, boxSizing: 'border-box' }} required />

Project Idea * {charCount}/140

setFormData({...formData, project: (e.target.value || []).slice(0, 140)})}
                placeholder="What are you building? Keep it snappy... ✨"
                style={{ width: '100%', padding: '16px', borderRadius: 16, fontSize: 16, minHeight: 100, resize: 'vertical', boxSizing: 'border-box', fontFamily: 'inherit' }}
                required
              />
            </div>

<div style={{ marginBottom: 24 }}>
              <label style={{ display: 'block', fontSize: 14, fontWeight: 700, marginBottom: 8, color: '#374151' }}>Squad Members</label>
              
              {(formData.members || []).length > 0 && (
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 12 }}>
                  {(formData.members || []).map((m, i) => (
                    <div key={i} className="animate-pop-in" style={{ background: '#EEF2FF', color: '#4F46E5', padding: '6px 12px 6px 16px', borderRadius: 20, fontSize: 14, fontWeight: 600, display: 'flex', alignItems: 'center', gap: 8 }}>
                      {m} 
                      <button 
                        type="button" 
                        onClick={() => removeMember(i)} 
                        style={{ background: 'transparent', border: 'none', color: '#4F46E5', fontSize: 12, cursor: 'pointer', padding: 4, display: 'flex', alignItems: 'center' }}
                      >
                        <span role="img" aria-label="remove">✕</span>
                      </button>
                    </div>
                  ))}
                </div>
              )}

{(formData.members || []).length < 4 ? (
                <div style={{ display: 'flex', gap: 8 }}>
                  <input
                    className="glass-input"
                    value={formData.currentMember}
                    onChange={e => setFormData({...formData, currentMember: e.target.value})}
                    onKeyDown={e => e.key === 'Enter' && handleAddMember(e)}
                    placeholder="Type a name & hit enter..."
                    style={{ flex: 1, padding: '14px 16px', borderRadius: 16, fontSize: 16, boxSizing: 'border-box' }}
                  />
                  <button 
                    type="button" 
                    onClick={handleAddMember}
                    disabled={!formData.currentMember.trim()}
                    style={{ 
                      padding: '0 20px', borderRadius: 16, border: 'none', 
                      background: formData.currentMember.trim() ? '#111827' : '#E5E7EB', 
                      color: formData.currentMember.trim() ? '#FFFFFF' : '#9CA3AF',
                      fontSize: 15, fontWeight: 600, cursor: formData.currentMember.trim() ? 'pointer' : 'not-allowed',
                      transition: 'background 0.2s'
                    }}
                  >
                    Add
                  </button>
                </div>
              ) : (
                <div className="animate-pop-in" style={{ padding: '14px', background: '#FEF3C7', color: '#B45309', borderRadius: 16, textAlign: 'center', fontSize: 14, fontWeight: 700, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
                  <span role="img" aria-label="rocket">🚀</span> Squad Full!
                </div>
              )}
            </div>

<button 
              type="submit"
              style={{ 
                width: '100%', padding: '18px', borderRadius: 20, border: 'none',
                background: 'linear-gradient(135deg, #6366F1 0%, #A855F7 100%)',
                color: '#FFFFFF', fontSize: 18, fontWeight: 700, cursor: 'pointer',
                boxShadow: '0 8px 20px rgba(99, 102, 241, 0.3)',
                transform: 'translateY(0)', transition: 'transform 0.1s, box-shadow 0.1s',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10
              }}
              onPointerDown={e => { e.currentTarget.style.transform = 'scale(0.98)'; }}
              onPointerUp={e => { e.currentTarget.style.transform = 'scale(1)'; }}
              onPointerLeave={e => { e.currentTarget.style.transform = 'scale(1)'; }}
            >
              Launch Team <span role="img" aria-label="launch">🚀</span>
            </button>
          </form>
        )}
      </div>

{/* Sticky Bottom Action Bar */}
      {!isRegistering && (
        <div style={{
          position: 'fixed',
          bottom: 0, left: 0, right: 0,
          padding: '16px max(env(safe-area-inset-right, 16px), 16px) calc(env(safe-area-inset-bottom, 20px) + 16px) max(env(safe-area-inset-left, 16px), 16px)',
          background: 'linear-gradient(to top, rgba(249, 250, 251, 1) 50%, rgba(249, 250, 251, 0))',
          display: 'flex', justifyContent: 'center',
          pointerEvents: 'none' // Let clicks pass through the gradient
        }}>
          <div style={{ maxWidth: 448, width: '100%', pointerEvents: 'auto' }}>
            <button 
              onClick={() => setIsRegistering(true)}
              className="animate-slide-up"
              style={{ 
                width: '100%', minHeight: 60, borderRadius: 24, border: 'none',
                background: '#111827', color: '#FFFFFF',
                fontSize: 18, fontWeight: 700, cursor: 'pointer',
                boxShadow: '0 8px 30px rgba(0,0,0,0.15)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
                transform: 'translateY(0)', transition: 'transform 0.1s'
              }}
              onPointerDown={e => { e.currentTarget.style.transform = 'scale(0.98)'; }}
              onPointerUp={e => { e.currentTarget.style.transform = 'scale(1)'; }}
              onPointerLeave={e => { e.currentTarget.style.transform = 'scale(1)'; }}
            >
              <span role="img" aria-label="sparkles">✨</span> Register Your Team
            </button>
          </div>
        </div>
      )}
    </div>
  );
}</article></body></html>