{currentTheme === 'vaporwave' ? 'ACADEMIA_ARCADE' : currentTheme === 'cottagecore' ? 'Study Nook' : 'Focus'}

{/* ⏱️ SYNTHWAVE FOCUS POD */}

{currentTheme === 'vaporwave' && timerActive && (

)}

{timerMode === 'focus' ? '⚡ FOCUS_MODE' : timerMode === 'break' ? '☕ BREAK_TIME' : '🔧 CUSTOM_TIMER'}

{formatTime(timeLeft)}

{/* Main Controls */}

{/* Custom Time Input (Only show when not active to keep it clean) */} {!timerActive && (

Custom Min: setCustomMinutes(e.target.value)} style={{ width: 50, background: 'transparent', color: theme.colors.text, border: theme.colors.border, textAlign: 'center', padding: 4, fontFamily: 'inherit' }} />

)}

{/* 📊 TABS */}

{['dashboard', 'planner', 'notes', 'stats'].map(tab => ( ))}

{/* 📺 CONTENT AREA */}

{/* 📋 DASHBOARD: TASKS */} {activeTab === 'dashboard' && ( <>

{(tasks || []).length === 0 ? (

🦗

No tasks detected. Systems idle.

) : ( (tasks || []).map(task => (

handleTaskToggle(task.id)} style={{ width: 24, height: 24, borderRadius: currentTheme === 'vaporwave' ? 0 : '50%', border: `2px solid ${task.completed ? theme.colors.accent : theme.colors.text}`, background: task.completed ? theme.colors.accent : 'transparent', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', fontSize: 14, color: currentTheme === 'vaporwave' ? '#000' : '#fff' }} > {task.completed && '✓'}

{task.title}

{task.deadline ? new Date(task.deadline).toLocaleDateString() : 'No deadline'} • {task._user?.displayName}

{task.deadline && task.deadline < Date.now() + 86400000 && !task.completed && ( 🔥 )}

)) )}

)} {/* 🔮 AI PLANNER */} {activeTab === 'planner' && (

Holographic Study Suggestor

setAiInput({ ...aiInput, subject: e.target.value })} placeholder="Subject (e.g. Bio 101)" style={{ flex: 1, padding: 12, borderRadius: theme.radius, border: '1px solid #ccc', fontSize: 16 }} />

{studyPlan && (

Suggested Protocol: {studyPlan.subject}

{(studyPlan.sessions || []).map((session, i) => (

{session.topic}

{session.type.toUpperCase()}

{session.duration}

))}

)}

)} {/* 📝 GLITCH NOTES */} {activeTab === 'notes' && (

Markdown Supported

{
                // Just simulated local update for effect
                const newNotes = [{ id: 1, content: e.target.value, date: Date.now() }];
                saveData({ ...appData, notes: newNotes });
              }}
              style={{
                flex: 1,
                width: '100%',
                background: currentTheme === 'vaporwave' ? '#000' : theme.colors.card,
                color: currentTheme === 'vaporwave' ? '#0f0' : theme.colors.text,
                border: theme.colors.border,
                borderRadius: theme.radius,
                padding: 16,
                fontFamily: 'monospace',
                fontSize: 16,
                lineHeight: 1.5,
                resize: 'none',
                boxSizing: 'border-box',
                minHeight: '400px'
              }}
              placeholder="Start typing..."
            />
          </div>
        )}

{/* 📊 ANALYTICS */}
        {activeTab === 'stats' && (
          <div style={{ padding: 4 }}>
            <div style={{ 
              display: 'grid', 
              gridTemplateColumns: '1fr 1fr', 
              gap: 16, 
              marginBottom: 24 
            }}>
              <div style={{
                background: theme.colors.card,
                padding: 16,
                borderRadius: theme.radius,
                border: theme.colors.border,
                textAlign: 'center'
              }}>
                <div style={{ fontSize: 32, fontWeight: 'bold', color: theme.colors.accent }}>{stats.focusedMinutes}</div>
                <div style={{ fontSize: 12, opacity: 0.7 }}>FOCUS MINUTES</div>
              </div>
              <div style={{
                background: theme.colors.card,
                padding: 16,
                borderRadius: theme.radius,
                border: theme.colors.border,
                textAlign: 'center'
              }}>
                <div style={{ fontSize: 32, fontWeight: 'bold', color: theme.colors.secondary }}>{stats.tasksCompleted}</div>
                <div style={{ fontSize: 12, opacity: 0.7 }}>TASKS CRUSHED</div>
              </div>
            </div>
            
            <div style={{ background: theme.colors.card, padding: 20, borderRadius: theme.radius, border: theme.colors.border }}>
              <h3 style={{ marginTop: 0 }}>Weekly Productivity</h3>
              <div style={{ display: 'flex', alignItems: 'flex-end', height: 150, gap: 8, paddingTop: 20 }}>
                {[45, 60, 30, 90, 20, 100, 75].map((h, i) => (
                  <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
                    <div style={{ 
                      width: '100%', 
                      height: `${h}%`, 
                      background: theme.colors.accent,
                      opacity: 0.8,
                      borderRadius: '4px 4px 0 0',
                      transition: 'height 1s ease'
                    }} />
                    <span style={{ fontSize: 10 }}>{['M','T','W','T','F','S','S'][i]}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}
      </div>

{/* 📱 USER BAR */}
      <div style={{
        marginTop: 16,
        paddingTop: 16,
        borderTop: `1px solid ${theme.colors.border}`,
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        fontSize: 12,
        opacity: 0.8
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{
            width: 32, height: 32, borderRadius: '50%',
            background: user.avatarUrl ? `url(${user.avatarUrl}) center/cover` : theme.colors.secondary,
            display: 'flex', alignItems: 'center', justifyContent: 'center'
          }}>
            {!user.avatarUrl && '👤'}
          </div>
          <div>
            <div style={{ fontWeight: 'bold' }}>{user.name || 'Guest User'}</div>
            <div>Level 5 Scholar</div>
          </div>
        </div>
        {isMultiplayer && (
          <div style={{ display: 'flex', gap: -8 }}>
            {(members || []).slice(0, 3).map(m => (
              <div key={m.id} 
                onClick={() => openProfile(m.handle)} 
                style={{
                  width: 28, height: 28, borderRadius: '50%',
                  marginLeft: -8,
                  border: `2px solid ${theme.colors.bg}`,
                  background: m.avatarUrl ? `url(${m.avatarUrl}) center/cover` : '#ccc',
                  cursor: 'pointer'
                }}
              />
            ))}
            {(members || []).length > 3 && <div style={{ marginLeft: 4 }}>+{(members || []).length - 3}</div>}
          </div>
        )}
      </div>

</div>
  );
}</article></body></html>