); const navItems = [ { key: 'arena', label: 'ARENA', emoji: '⚡' }, { key: 'spark', label: 'SPARK', emoji: '💡' }, { key: 'squad', label: 'SQUAD', emoji: '👥' } ]; const shouts = s.shouts ?? defaultData.shouts; return (

{/* HEADER */}

SYNCSPHERE

UNSW

✦ {s.syncPoints?.toLocaleString?.() ?? '0'}

{(user?.name?.[0] ?? 'Y').toUpperCase()}

{/* STREAK BAR */}

🔥 {s.streak ?? 0} DAY STREAK

✅ {s.completedChallenges ?? 0} SOLVED

👥 {(memberList || []).length} {(memberList || []).length === 1 ? 'SOLO' : 'SYNCED'}

{/* MAIN CONTENT */}

{/* ARENA VIEW */} {s.activeView === 'arena' && (

{/* Hero Challenge Card */}

!timerActive && startChallenge()} style={{ background: `linear-gradient(145deg, ${colors.card}, #1a1a2e)`, borderRadius: 24, padding: 28, marginBottom: 20, border: `1px solid ${timerActive ? colors.accent : colors.border}`, cursor: 'pointer', position: 'relative', overflow: 'hidden', transform: pulseHero ? 'scale(0.97)' : 'scale(1)', transition: baseTransition, boxShadow: timerActive ? `0 0 40px ${colors.accent}22` : 'none' }} >

{currentChallenge.icon}

{currentChallenge.category}

{currentChallenge.difficulty}

{currentChallenge.title}

{currentChallenge.desc}

{/* Progress Section */}

YOUR PROGRESS GHOST: {s.personalBest ?? 38}s

{/* Timer / CTA */}

{timerActive ? (

{s.timerValue ?? 0}s

) : (

TAP TO BEGIN ⚡

)}

{ e.stopPropagation(); nextChallenge(); }} style={{ padding: '12px 20px', borderRadius: 14, background: colors.border, fontSize: 12, letterSpacing: 3, fontWeight: 800, color: colors.text, cursor: 'pointer', transition: baseTransition }} >NEXT →

{/* Squad Shouts - Bento */}

LIVE FEED

{(shouts || []).map((sh, i) => { const isRevealed = s.tappedCards?.[sh?.id]; return (

toggleCard(sh?.id ?? `s${i}`)} style={{ background: isRevealed ? `linear-gradient(135deg, ${colors.card}, #1c1c35)` : colors.card, borderRadius: 16, padding: '16px 18px', border: `1px solid ${isRevealed ? colors.accent + '44' : colors.border}`, cursor: 'pointer', transition: baseTransition, transform: isRevealed ? 'scale(1.02)' : 'scale(1)', opacity: mounted ? 1 : 0, transitionDelay: `${0.2 + i * 0.08}s` }} >

{sh?.emoji ?? '💬'}

{sh?.name ?? 'User'}

{isRevealed &&

{sh?.text ?? ''}

}

+{sh?.points ?? 0}

); })}

)} {/* SPARK VIEW */} {s.activeView === 'spark' && (

💡

{currentSpark.tag}

{currentSpark.prompt}

update({ sparkResponse: e.target.value })}
                placeholder="Drop your take..."
                style={{
                  width: '100%', minHeight: 100, background: '#0A0A0F88', border: `1px solid ${colors.border}`,
                  borderRadius: 14, padding: 16, color: colors.text, fontSize: 15, fontFamily: font,
                  resize: 'none', outline: 'none', boxSizing: 'border-box', transition: baseTransition
                }}
              />
              <div style={{ display: 'flex', gap: 12, marginTop: 16 }}>
                <div
                  onClick={() => {
                    if ((s.sparkResponse ?? '').trim().length > 0) {
                      handleSave({ syncPoints: (s.syncPoints ?? 0) + 15, sparkResponse: '' });
                    }
                  }}
                  style={{
                    flex: 1, padding: '14px 0', borderRadius: 14,
                    background: (s.sparkResponse ?? '').trim().length > 0 ? 'linear-gradient(135deg, #7C4DFF, #FF3366)' : colors.border,
                    textAlign: 'center', fontSize: 13, letterSpacing: 4, fontWeight: 800,
                    cursor: 'pointer', transition: baseTransition,
                    color: (s.sparkResponse ?? '').trim().length > 0 ? '#fff' : colors.muted
                  }}
                >SUBMIT +15✦</div>
                <div
                  onClick={nextSpark}
                  style={{
                    padding: '14px 20px', borderRadius: 14, background: colors.border,
                    fontSize: 13, letterSpacing: 3, fontWeight: 800, cursor: 'pointer', transition: baseTransition, color: colors.text
                  }}
                >NEXT</div>
              </div>
            </div>

{/* Insight Core */}
            <div style={{ fontSize: 11, letterSpacing: 5, color: colors.muted, fontWeight: 800, marginBottom: 12 }}>INSIGHT CORE</div>
            {[
              { icon: '🧠', label: 'PATTERN STRENGTH', value: 'Analytical — 94th percentile', color: colors.green },
              { icon: '📊', label: 'GROWTH VECTOR', value: 'Economics +18% this week', color: colors.accent },
              { icon: '🎯', label: 'FOCUS AREA', value: 'Data Structures — 3 challenges left', color: colors.accent2 }
            ].map((insight, i) => (
              <div key={i} style={{
                background: colors.card, borderRadius: 16, padding: '16px 18px', marginBottom: 10,
                border: `1px solid ${colors.border}`, display: 'flex', alignItems: 'center', gap: 14,
                opacity: mounted ? 1 : 0, transition: baseTransition, transitionDelay: `${0.3 + i * 0.1}s`
              }}>
                <span style={{ fontSize: 26 }}>{insight.icon}</span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 10, letterSpacing: 4, color: insight.color, fontWeight: 800 }}>{insight.label}</div>
                  <div style={{ fontSize: 14, fontWeight: 700, marginTop: 4 }}>{insight.value}</div>
                </div>
              </div>
            ))}
          </div>
        )}

{/* SQUAD VIEW */}
        {s.activeView === 'squad' && (
          <div style={{ opacity: mounted ? 1 : 0, transform: mounted ? 'translateY(0)' : 'translateY(30px)', transition: baseTransition, transitionDelay: '0.15s' }}>
            <div style={{ fontSize: 11, letterSpacing: 5, color: colors.muted, fontWeight: 800, marginBottom: 16 }}>YOUR SQUAD — {(memberList || []).length} MEMBER{(memberList || []).length !== 1 ? 'S' : ''}</div>
            {(memberList || []).map((m, i) => (
              <div key={m?.id ?? i} style={{
                background: colors.card, borderRadius: 16, padding: '18px 20px', marginBottom: 10,
                border: `1px solid ${colors.border}`, display: 'flex', alignItems: 'center', gap: 14,
                opacity: mounted ? 1 : 0, transition: baseTransition, transitionDelay: `${0.2 + i * 0.08}s`
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: '50%',
                  background: `linear-gradient(135deg, ${['#FFD700','#FF3366','#7C4DFF','#00E676'][i % 4]}, ${['#FF8C00','#FF71CE','#01CDFE','#FFD700'][i % 4]})`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18, fontWeight: 900, color: '#000', flexShrink: 0
                }}>
                  {m?.avatarUrl ? <img src={m.avatarUrl} style={{ width: 44, height: 44, borderRadius: '50%', objectFit: 'cover' }} /> : (m?.displayName?.[0] ?? '?').toUpperCase()}
                </div>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 15, fontWeight: 800, letterSpacing: 0.5 }}>{m?.displayName ?? 'User'}</div>
                  <div style={{ fontSize: 11, color: colors.muted, letterSpacing: 2, marginTop: 2 }}>{m?.role === 'owner' ? '👑 LEADER' : '⚡ MEMBER'}</div>
                </div>
              </div>
            ))}

{/* Goals */}
            <div style={{ fontSize: 11, letterSpacing: 5, color: colors.muted, fontWeight: 800, margin: '24px 0 12px' }}>SQUAD GOALS</div>
            {[
              { icon: '🏃', title: 'MORNING RUN STREAK', progress: 0.7, target: '5km × 7 days' },
              { icon: '📚', title: 'STUDY SPRINT', progress: 0.45, target: '20hrs this week' },
              { icon: '🎮', title: 'GAMING LEADERBOARD', progress: 0.9, target: 'Top 100 rank' }
            ].map((goal, i) => (
              <div
                key={i}
                onClick={() => toggleCard(`goal${i}`)}
                style={{
                  background: colors.card, borderRadius: 16, padding: '18px 20px', marginBottom: 10,
                  border: `1px solid ${s.tappedCards?.[`goal${i}`] ? colors.accent + '44' : colors.border}`,
                  cursor: 'pointer', transition: baseTransition,
                  transform: s.tappedCards?.[`goal${i}`] ? 'scale(1.02)' : 'scale(1)',
                  opacity: mounted ? 1 : 0, transitionDelay: `${0.35 + i * 0.08}s`
                }}
              >
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
                  <span style={{ fontSize: 24 }}>{goal.icon}</span>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 800, letterSpacing: 2 }}>{goal.title}</div>
                    <div style={{ fontSize: 11, color: colors.muted, marginTop: 2 }}>{goal.target}</div>
                  </div>
                  <div style={{ marginLeft: 'auto', fontSize: 18, fontWeight: 900, color: colors.accent }}>{Math.round(goal.progress * 100)}%</div>
                </div>
                <ProgressBar progress={goal.progress} color={i === 2 ? colors.green : colors.accent} />
              </div>
            ))}
          </div>
        )}
      </div>

{/* BOTTOM NAV */}
      <div style={{
        position: 'fixed', bottom: 0, left: 0, right: 0,
        paddingBottom: 'env(safe-area-inset-bottom, 8px)',
        background: `${colors.bg}EE`, backdropFilter: 'blur(20px)',
        borderTop: `1px solid ${colors.border}`,
        display: 'flex', justifyContent: 'space-around', padding: '10px 20px'
      }}>
        {(navItems || []).map((nav) => (
          <div
            key={nav.key}
            onClick={() => handleSave({ activeView: nav.key })}
            style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
              cursor: 'pointer', padding: '8px 16px', borderRadius: 14,
              background: s.activeView === nav.key ? `${colors.accent}15` : 'transparent',
              transition: baseTransition, transform: s.activeView === nav.key ? 'scale(1.05)' : 'scale(1)'
            }}
          >
            <span style={{ fontSize: 22 }}>{nav.emoji}</span>
            <span style={{
              fontSize: 10, letterSpacing: 3, fontWeight: 800,
              color: s.activeView === nav.key ? colors.accent : colors.muted
            }}>{nav.label}</span>
          </div>
        ))}
      </div>