{hub?.name ?? 'Explorer'}

{hub?.motto ?? ''}

{/* Energy Bar */}

⚡ Energy Level {energyVal}% {/* Members Online */}

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

0 ? -8 : 0, border: '2px solid #E0E5EC', animation: `fadeScale 0.4s ${i * 0.1}s both` }}> {m?.avatarUrl ? (

) : ( (m?.displayName ?? '?')[0] )}

))} {(memberList || []).length} {(memberList || []).length === 1 ? 'explorer' : 'explorers'}

{/* ZONE 2: Category Buttons */}

{(categories || []).map((cat, i) => { const c = cat ?? { id: 'unknown', emoji: '❓', label: 'Unknown', color: '#999' }; return (

handleCategoryTap(c.id)} style={{ ...neu(), padding: 24, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 10, cursor: 'pointer', transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', animation: `floatIn 0.5s ${0.2 + i * 0.1}s both`, minHeight: 120, position: 'relative', overflow: 'hidden' }} onPointerDown={(e) => { e.currentTarget.style.transform = 'scale(0.95)'; e.currentTarget.style.boxShadow = 'inset 3px 3px 6px #b8bec7, inset -3px -3px 6px #ffffff'; }} onPointerUp={(e) => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = '6px 6px 12px #b8bec7, -6px -6px 12px #ffffff'; }} onPointerLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = '6px 6px 12px #b8bec7, -6px -6px 12px #ffffff'; }} >

{c.emoji} {c.label} {getMemories(c.id).length} memories

); })}

)} {/* ZONE 3: Expanded Category View */} {activeCategory && activeCat && (

{/* Back Button + Header */}

{ setActiveCategory(null); setExpandedMemory(null); }} style={{ ...neuSmall(), width: 48, height: 48, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', fontSize: 20, transition: 'all 0.2s ease' }} onPointerDown={(e) => { e.currentTarget.style.boxShadow = 'inset 3px 3px 6px #b8bec7, inset -3px -3px 6px #ffffff'; }} onPointerUp={(e) => { e.currentTarget.style.boxShadow = '4px 4px 8px #b8bec7, -4px -4px 8px #ffffff'; }} > ←

{activeCat?.emoji ?? '❓'}

{activeCat?.label ?? 'Category'}

{/* Memory Cards */}

{(currentMemories || []).map((mem, i) => { const m = mem ?? { id: 'unknown', title: 'Memory', desc: '', kudos: 0 }; const isExpanded = expandedMemory === m.id; const isRippling = rippleId === m.id; const reacted = hasReacted(m.id); return (

{/* Ripple effect */} {isRippling && (

)} {/* Main tap area */}

handleMemoryTap(m.id)} style={{ padding: '20px 20px', display: 'flex', alignItems: 'center', gap: 14 }} onPointerDown={(e) => { e.currentTarget.parentElement.style.boxShadow = 'inset 4px 4px 8px #b8bec7, inset -4px -4px 8px #ffffff'; }} onPointerUp={(e) => { e.currentTarget.parentElement.style.boxShadow = '6px 6px 12px #b8bec7, -6px -6px 12px #ffffff'; }} >

{m.id?.startsWith('a') ? '🏅' : m.id?.startsWith('s') ? '🎊' : m.id?.startsWith('p') ? '💡' : '🌟'}

{m.title}

{isExpanded ? '' : (m.desc?.substring(0, 40) ?? '') + ((m.desc?.length ?? 0) > 40 ? '...' : '')}

▼

{/* Expanded content */} {isExpanded && (

{m.desc ?? 'A cherished memory...'}

{/* Progress/Timeline visual */}

{[...Array(5)].map((_, j) => (

))} Impact

{/* Kudos Button */}

{ e.stopPropagation(); if (!reacted) handleKudos(activeCategory, m.id); }} style={{ ...neuSmall(reacted), padding: '10px 20px', display: 'flex', alignItems: 'center', gap: 8, cursor: reacted ? 'default' : 'pointer', transition: 'all 0.3s ease', background: reacted ? `linear-gradient(135deg, ${activeCat?.color ?? '#FFD700'}15, #E0E5EC)` : '#E0E5EC' }} > {reacted ? '💛' : '🤍'} {m.kudos ?? 0} kudos

{/* Who's here indicator */}

{(memberList || []).slice(0, 3).map((mb, mi) => (

0 ? -6 : 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 700, color: '#7A8A9A' }}> {mb?.avatarUrl ? (

) : ( (mb?.displayName ?? '?')[0] )}

))}

)}

); })}

)}

); }