{/* === ZONE 1: VIBE CARD + MOOD DIAL === */}

{/* Ambient glow */}

{/* Mood Dial */}

setLocalState(s => ({ ...s, isDragging: true }))} onMouseUp={() => setLocalState(s => ({ ...s, isDragging: false }))} onMouseLeave={() => setLocalState(s => ({ ...s, isDragging: false }))} onMouseMove={handleMoodDrag} onTouchStart={() => setLocalState(s => ({ ...s, isDragging: true }))} onTouchEnd={() => setLocalState(s => ({ ...s, isDragging: false }))} onTouchMove={handleMoodDrag} > {/* Dial indicator */}

{moodEmojis[profileData?.moodIndex ?? 1]}

{/* Vibe Text */}

currently {currentMood}

{profileData?.vibe ?? ''}

↻ drag the dial to tune in

{/* Mood labels around bottom */}

{(moods || []).map((m, i) => (

{ setData({ ...profileData, moodIndex: i }); setLocalState(s => ({ ...s, dialGlow: true })); setTimeout(() => setLocalState(s => ({ ...s, dialGlow: false })), 600); }}> {moodEmojis[i]} {m}

))}

{/* === ZONE 2: CONVERSATION DOORS === */}

conversation doors

{(doors || []).map((door, idx) => { const isOpen = localState.openDoor === door?.id; return (

openDoor(door?.id)} style={{ ...(isOpen ? neu(4, true) : neu(6)), padding: isOpen ? 16 : 14, cursor: 'pointer', gridColumn: isOpen ? '1 / -1' : 'auto', transition: 'all 0.5s cubic-bezier(0.4, 0, 0.2, 1)', transform: isOpen ? 'scale(1)' : 'scale(1)', position: 'relative', overflow: 'hidden', minHeight: isOpen ? 120 : 80, display: 'flex', flexDirection: 'column', justifyContent: isOpen ? 'flex-start' : 'center', alignItems: 'center', textAlign: 'center' }}>

{accessIcons[door?.access ?? 'public']}

{door?.emoji ?? '🚪'} {door?.prompt ?? ''} {isOpen && (

= 1 ? 1 : 0, transform: localState.doorRevealPhase >= 1 ? 'translateY(0)' : 'translateY(10px)', transition: 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)', borderTop: '1px solid #c8d1dc', paddingTop: 10 }}> {door?.response ?? ''}

)}

); })}

{/* === ZONE 3: WHISPERS & WONDERS CAROUSEL === */}

whispers & wonders {localState.carouselIndex + 1} / {(allCards || []).length}

{currentCard && ( <> {/* Card type badge */}

{currentCard.cardType === 'quest' ? '⚡ Side Quest' : '🦋 Artifact'}

{currentCard?.emoji ?? '✨'}

{/* Title */}

{currentCard.cardType === 'quest' ? currentCard?.prompt : currentCard?.title}

{/* Content */} {currentCard.cardType === 'artifact' && (

{currentCard?.content ?? ''}

)} {currentCard.cardType === 'quest' && (

{localState.questRevealed === currentCard?.id ? (

💌 {currentCard?.reward ?? ''}

) : (

{ e.stopPropagation(); setLocalState(s => ({ ...s, questRevealed: currentCard?.id })); }} style={{ ...neu(4), padding: '14px 20px', textAlign: 'center', cursor: 'pointer', color: '#8896a8', fontSize: 14, fontWeight: 600, transition: 'all 0.3s ease' }} > ✨ tap to reveal their answer

)}

)} {/* Reaction buttons */}

{['💫 I felt this', '🪞 Changed my view', '📌 Saving this'].map((reaction, ri) => { const isSaved = (localState.savedArtifacts ?? []).includes(`${currentCard?.id}-${ri}`); const isFelt = (localState.feltThis ?? []).includes(`${currentCard?.id}-${ri}`); const isActive = isSaved || isFelt; return (

{ e.stopPropagation(); const key = `${currentCard?.id}-${ri}`; if (ri === 0) { setLocalState(s => ({ ...s, feltThis: (s.feltThis ?? []).includes(key) ? (s.feltThis ?? []).filter(x => x !== key) : [...(s.feltThis ?? []), key] })); } else { setLocalState(s => ({ ...s, savedArtifacts: (s.savedArtifacts ?? []).includes(key) ? (s.savedArtifacts ?? []).filter(x => x !== key) : [...(s.savedArtifacts ?? []), key] })); } }} style={{ ...(isActive ? neu(3, true) : neu(3)), padding: '8px 14px', borderRadius: 30, fontSize: 12, fontWeight: 600, color: isActive ? moodColor : '#8896a8', cursor: 'pointer', transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', transform: isActive ? 'scale(0.96)' : 'scale(1)' }} > {reaction}

); })}

)} {/* Swipe hints */}

{(allCards || []).map((_, i) => (

))}

{/* Swipe arrow hints */}

handleSwipe('right')} style={{ ...neu(3), width: 40, height: 40, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', fontSize: 18, opacity: localState.carouselIndex > 0 ? 1 : 0.3, transition: 'all 0.3s ease' }} >← swipe or tap arrows handleSwipe('left')} style={{ ...neu(3), width: 40, height: 40, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', fontSize: 18, opacity: localState.carouselIndex < (allCards || []).length - 1 ? 1 : 0.3, transition: 'all 0.3s ease' }} >→

); }