); for (let i = 1; i <= daysInMonth; i++) { const face = getMostCommonVibe(i) || '·'; days.push(

{i} {face}

); } const monthName = today.toLocaleString('default', { month: 'long' }); return (

{monthName} {year}

{['S','M','T','W','T','F','S'].map((d,i) =>

{d}

)}

{days}

); }; return (

Emotional Support Sprout 🌿

Your mildly unhinged wellness journal

{activeTab === 'brain' && (

{/* The Central Question Button */} {!showMoodForm ? (

🧠

Quick Log 🌿

{(EMOTIONS || []).map((emo, idx) => (

handleQuickLog(emo)} style={{ cursor: 'pointer', fontSize: 24, background: 'rgba(232, 220, 196, 0.4)', borderRadius: '50%', width: 44, height: 44, display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'transform 0.2s', boxShadow: '0 2px 8px rgba(139,115,85,0.08)' }} > {emo.emoji}

))}

) : ( /* Mood Logger Form */

Log your state 🌸

{(EMOTIONS || []).map((emo, idx) => (

setSelectedEmotion(emo)} style={{ cursor: 'pointer', opacity: selectedEmotion.emoji === emo.emoji ? 1 : 0.3, transform: selectedEmotion.emoji === emo.emoji ? 'scale(1.2) translateY(-4px)' : 'scale(1)', transition: 'all 0.2s', filter: selectedEmotion.emoji === emo.emoji ? 'drop-shadow(0 4px 8px rgba(139,115,85,0.15))' : 'none' }} > {emo.emoji}

))}

setNewReason(e.target.value)}
                  style={{ marginBottom: 16, resize: 'none' }}
                />

<select 
                  className="cottage-input"
                  value={newEvent}
                  onChange={e => setNewEvent(e.target.value)}
                  style={{ marginBottom: 24 }}
                >
                  <option value="">Context (optional)</option>
                  <option value="Studying">Studying</option>
                  <option value="Socializing">Socializing</option>
                  <option value="Resting">Resting</option>
                  <option value="Just Vibes">Just Vibes</option>
                </select>

<button className="cottage-btn" style={{ width: '100%' }} onClick={handleLogMood}>
                  Save to Journal 📝
                </button>
              </div>
            )}

{/* Feed / Calendar */}
            <div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderBottom: '1px solid rgba(139, 115, 85, 0.2)', paddingBottom: 8, marginBottom: 16 }}>
                <h3 style={{ fontSize: 15, color: '#8B7355', margin: 0, fontStyle: 'italic' }}>
                  {journalView === 'feed' ? 'Recent reflections' : 'Mood Calendar'}
                </h3>
                <div style={{ display: 'flex', gap: 4, background: 'rgba(139, 115, 85, 0.08)', padding: 4, borderRadius: 12 }}>
                  <button 
                    onClick={() => setJournalView('feed')}
                    style={{ background: journalView === 'feed' ? '#FFFDF9' : 'transparent', border: 'none', padding: '6px 12px', borderRadius: 8, fontSize: 12, cursor: 'pointer', color: journalView === 'feed' ? '#5C4A3D' : '#8B7355', fontWeight: journalView === 'feed' ? 600 : 400, boxShadow: journalView === 'feed' ? '0 2px 4px rgba(139, 115, 85, 0.1)' : 'none', fontFamily: 'Lora, Georgia, serif' }}
                  >Feed</button>
                  <button 
                    onClick={() => setJournalView('calendar')}
                    style={{ background: journalView === 'calendar' ? '#FFFDF9' : 'transparent', border: 'none', padding: '6px 12px', borderRadius: 8, fontSize: 12, cursor: 'pointer', color: journalView === 'calendar' ? '#5C4A3D' : '#8B7355', fontWeight: journalView === 'calendar' ? 600 : 400, boxShadow: journalView === 'calendar' ? '0 2px 4px rgba(139, 115, 85, 0.1)' : 'none', fontFamily: 'Lora, Georgia, serif' }}
                  >Calendar</button>
                </div>
              </div>

{journalView === 'calendar' ? renderCalendar() : (
                (moods || []).length === 0 ? (
                  <div style={{ textAlign: 'center', opacity: 0.6, padding: 40, fontSize: 15, fontStyle: 'italic', color: '#8B7355' }}>Your journal is empty 🍃</div>
                ) : (
                  (moods || []).map((m, i) => (
                    <div key={m.id || i} className="cottage-card">
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                        <div 
                          style={{ width: 36, height: 36, borderRadius: '50%', background: '#E8DCC4', border: '1px solid #D4A5A5', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, cursor: 'pointer', backgroundImage: m._user?.profileImageUrl ? `url(${m._user.profileImageUrl})` : 'none', backgroundSize: 'cover' }}
                          onClick={() => m._user?.handle && openProfile(m._user.handle)}
                        >
                          {!m._user?.profileImageUrl && <span style={{ color: '#8B7355' }}>🌿</span>}
                        </div>
                        <div>
                          <div style={{ fontWeight: 600, fontSize: 15, color: '#5C4A3D' }}>{m.isDemo ? `Demo · ${m._user?.displayName || 'Traveler'}` : (m._user?.displayName || 'Traveler')}</div>
                          <div style={{ fontSize: 12, color: '#A89B8C', marginTop: 2, fontStyle: 'italic' }}>{new Date(m.timestamp).toLocaleDateString()}</div>
                        </div>
                      </div>
                      <div style={{ fontSize: 24, filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.05))' }}>{m.emoji || getVibeEmoji(m.vibe)}</div>
                    </div>
                    <p style={{ margin: '0 0 10px 0', fontSize: 15, lineHeight: 1.6, color: '#5C4A3D', paddingLeft: 48 }}>{m.reason}</p>
                    {m.event && <div style={{ fontSize: 12, color: '#9CAF88', fontStyle: 'italic', paddingLeft: 48 }}>— {m.event}</div>}
                  </div>
                ))
              ))}
            </div>
          </div>
        )}

{activeTab === 'spots' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 8 }}>
              <h2 style={{ fontSize: 26, margin: 0, fontFamily: 'Playfair Display, Georgia, serif', fontWeight: 300, letterSpacing: '-0.01em' }}>Places</h2>
              <button 
                onClick={() => setShowSpotForm(true)}
                style={{ background: 'transparent', color: '#A89B8C', border: 'none', fontSize: 11, cursor: 'pointer', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 400, padding: '8px 0', fontFamily: 'Helvetica Neue, Helvetica, sans-serif' }}
              >
                Add +
              </button>
            </div>

{(spots || []).length === 0 ? (
              <div style={{ textAlign: 'center', opacity: 0.35, padding: 60, fontSize: 13, fontWeight: 300, letterSpacing: '0.05em' }}>No places shared yet</div>
            ) : (
              (spots || []).map((s, i) => (
                <div key={s.id || i} style={{ borderBottom: '1px solid rgba(168,155,140,0.12)', padding: '24px 0' }}>
                  {s.photoUrl && (
                    <img src={s.photoUrl} alt={s.title} style={{ width: '100%', height: 200, objectFit: 'cover', marginBottom: 16 }} onError={(e) => e.currentTarget.style.display = 'none'} />
                  )}
                  <div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
                      <h3 style={{ margin: 0, fontSize: 18, fontWeight: 600, color: '#5C4A3D' }}>{s.isDemo ? `Demo · ${s.title}` : s.title}</h3>
                      <span style={{ fontSize: 11, fontWeight: 600, padding: '4px 10px', borderRadius: '12px', background: getTagColor(s.type), color: '#FFFDF9' }}>
                        {s.type}
                      </span>
                    </div>
                    <p style={{ margin: '0 0 12px 0', fontSize: 14, color: '#A89B8C', lineHeight: 1.6, fontWeight: 300 }}>{s.description}</p>
                    <div style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#A89B8C' }}>
                      <span 
                        onClick={() => s._user?.handle && openProfile(s._user.handle)}
                        style={{ cursor: s._user?.handle ? 'pointer' : 'default' }}
                      >
                        {s._user?.displayName || 'Anonymous'}
                      </span>
                    </div>
                  </div>
                </div>
              ))
            )}
          </div>
        )}

{activeTab === 'ideas' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 8 }}>
              <h2 style={{ fontSize: 26, margin: 0, fontFamily: 'Playfair Display, Georgia, serif', fontWeight: 300, letterSpacing: '-0.01em' }}>Activity Ideas</h2>
              <button 
                onClick={() => setShowIdeaForm(true)}
                style={{ background: 'transparent', color: '#A89B8C', border: 'none', fontSize: 11, cursor: 'pointer', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 400, padding: '8px 0', fontFamily: 'Helvetica Neue, Helvetica, sans-serif' }}
              >
                Add +
              </button>
            </div>

{(ideas || []).length === 0 ? (
              <div style={{ textAlign: 'center', opacity: 0.35, padding: 60, fontSize: 13, fontWeight: 300, letterSpacing: '0.05em' }}>No ideas shared yet</div>
            ) : (
              (ideas || []).map((idea, i) => (
                <div key={idea.id || i} style={{ borderBottom: '1px solid rgba(168,155,140,0.12)', padding: '24px 0' }}>
                  <div>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 8 }}>
                      <h3 style={{ margin: 0, fontSize: 18, fontWeight: 600, color: '#5C4A3D' }}>{idea.isDemo ? `Demo · ${idea.title}` : idea.title}</h3>
                      <span style={{ fontSize: 11, fontWeight: 600, padding: '4px 10px', borderRadius: '12px', background: getTagColor(idea.type), color: '#FFFDF9' }}>
                        {idea.type}
                      </span>
                    </div>
                    <p style={{ margin: '0 0 12px 0', fontSize: 14, color: '#A89B8C', lineHeight: 1.6, fontWeight: 300 }}>{idea.description}</p>
                    <div style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#A89B8C' }}>
                      <span 
                        onClick={() => idea._user?.handle && openProfile(idea._user.handle)}
                        style={{ cursor: idea._user?.handle ? 'pointer' : 'default' }}
                      >
                        {idea._user?.displayName || 'Anonymous'}
                      </span>
                    </div>
                  </div>
                </div>
              ))
            )}
          </div>
        )}

{activeTab === 'games' && (
          <div style={{ padding: '0 0 32px 0' }}>
            {/* Game Selector */}
            <div style={{ display: 'flex', gap: 8, marginBottom: 24, overflowX: 'auto', WebkitOverflowScrolling: 'touch', paddingBottom: 4 }}>
              {[
                { id: 'garden', label: '🌱 Garden', desc: 'Tend' },
                { id: 'wishes', label: '✨ Wishing Well', desc: 'Wish' },
                { id: 'voodoo', label: '🪡 Stress Doll', desc: 'Poke' }
              ].map(game => (
                <button
                  key={game.id}
                  onClick={() => setActiveGame(game.id)}
                  style={{
                    flex: '0 0 auto',
                    padding: '12px 20px',
                    borderRadius: 20,
                    border: activeGame === game.id ? '2px solid #9CAF88' : '1px dashed rgba(139,115,85,0.25)',
                    background: activeGame === game.id ? 'rgba(156,175,136,0.15)' : 'rgba(255,253,249,0.6)',
                    color: activeGame === game.id ? '#5C4A3D' : '#8B7355',
                    fontWeight: activeGame === game.id ? 600 : 400,
                    fontSize: 14,
                    cursor: 'pointer',
                    fontFamily: 'Lora, Georgia, serif',
                    transition: 'all 0.2s',
                    whiteSpace: 'nowrap'
                  }}
                >
                  {game.label}
                </button>
              ))}
            </div>

{/* GARDEN GAME */}
            {activeGame === 'garden' && (
              <div style={{ textAlign: 'center' }}>
                <h2 style={{ fontSize: 26, margin: '0 0 12px 0', fontFamily: 'Lora, Georgia, serif', fontWeight: 600, color: '#5C4A3D' }}>Tend Your Garden</h2>
                <p style={{ fontSize: 14, color: '#8B7355', marginBottom: 40, fontStyle: 'italic' }}>Tap the soil to plant a seed. Watch it bloom.</p>
                
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, maxWidth: 280, margin: '0 auto' }}>
                  {(garden || []).map((flower, i) => {
                    const emojis = ['🌱', '🌸', '🌼', '🌷', '🌻', '🍄'];
                    return (
                      <div 
                        key={i}
                        onClick={() => growFlower(i)}
                        className={flower > 0 ? "flower-cell" : ""}
                        style={{
                          aspectRatio: '1/1',
                          borderRadius: '16px',
                          background: flower === 0 ? '#E8DCC4' : 'transparent',
                          border: flower === 0 ? '1px dashed #C4A77D' : 'none',
                          transform: flower > 0 ? 'scale(1.2)' : 'scale(1)',
                          transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
                          cursor: 'pointer',
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                          fontSize: 32
                        }}
                      >
                        {emojis[flower]}
                      </div>
                    );
                  })}
                </div>
                
                <button 
                  className="cottage-btn secondary" 
                  style={{ width: '200px', margin: '48px auto 0' }}
                  onClick={bloomAll}
                >
                  Bloom All ✨
                </button>
              </div>
            )}

{/* WISHING WELL GAME */}
            {activeGame === 'wishes' && (
              <div style={{ textAlign: 'center' }}>
                <h2 style={{ fontSize: 26, margin: '0 0 8px 0', fontFamily: 'Lora, Georgia, serif', fontWeight: 600, color: '#5C4A3D' }}>The Wishing Well</h2>
                <p style={{ fontSize: 14, color: '#8B7355', marginBottom: 32, fontStyle: 'italic' }}>Write a wish, toss a coin, watch the magic ✨</p>
                
                {/* Well Illustration */}
                <div style={{ position: 'relative', width: 200, height: 200, margin: '0 auto 32px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <div style={{
                    width: 160, height: 160, borderRadius: '50%',
                    background: 'radial-gradient(circle at 40% 35%, #5C6B8A, #2D3A3A 60%, #1C2541)',
                    border: '4px solid #C4A77D',
                    boxShadow: '0 8px 32px rgba(44,58,65,0.3), inset 0 -20px 40px rgba(0,0,0,0.3)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    position: 'relative', overflow: 'hidden'
                  }}>
                    {/* Water shimmer */}
                    <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: '60%', background: 'linear-gradient(to bottom, transparent, rgba(156,175,136,0.15))', borderRadius: '0 0 50% 50%' }} />
                    {/* Stars in the well */}
                    {(starBurst || []).map((star, si) => (
                      <div key={si} style={{
                        position: 'absolute',
                        left: star.x + '%', top: star.y + '%',
                        fontSize: star.size,
                        opacity: star.opacity,
                        transition: 'all 1.5s ease-out',
                        pointerEvents: 'none'
                      }}>{star.emoji}</div>
                    ))}
                    <span style={{ fontSize: wishAnimation ? 48 : 40, transition: 'all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)', transform: wishAnimation ? 'scale(1.3) rotate(15deg)' : 'scale(1)', filter: wishAnimation ? 'drop-shadow(0 0 12px rgba(255,215,0,0.6))' : 'none' }}>🪙</span>
                  </div>
                  {/* Stone rim */}
                  <div style={{ position: 'absolute', bottom: 10, left: '50%', transform: 'translateX(-50%)', width: 180, height: 20, background: '#C4A77D', borderRadius: '50%', opacity: 0.4 }} />
                </div>

{/* Wish Input */}
                <div style={{ maxWidth: 320, margin: '0 auto' }}>
                  <textarea
                    className="cottage-input"
                    placeholder="Close your eyes... what do you wish for?"
                    rows={2}
                    value={currentWish}
                    onChange={e => setCurrentWish(e.target.value)}
                    style={{ marginBottom: 16, resize: 'none', textAlign: 'center', fontStyle: 'italic' }}
                  />
                  <button
                    className="cottage-btn"
                    style={{ width: '100%', background: currentWish.trim() ? '#9CAF88' : '#D4CCC3' }}
                    onClick={() => {
                      if (!currentWish.trim()) return;
                      setWishAnimation(true);
                      const newStars = Array.from({ length: 8 }, () => ({
                        x: Math.random() * 80 + 10,
                        y: Math.random() * 80 + 10,
                        size: Math.floor(Math.random() * 16) + 12,
                        opacity: Math.random() * 0.8 + 0.2,
                        emoji: ['✨', '⭐', '🌟', '💫', '🪄'][Math.floor(Math.random() * 5)]
                      }));
                      setStarBurst(newStars);
                      const responses = [
                        'The universe heard you 🌙',
                        'Your wish echoes through the stars ✨',
                        'The well glows warmly... it approves 💛',
                        'A gentle breeze carries your wish away 🍃',
                        'The cosmos is conspiring in your favor 🪐',
                        'Somewhere, a fairy just got their wings 🧚',
                        'The moon winked at you just now 🌝',
                        'Your wish has been filed under "definitely happening" 📜'
                      ];
                      const newWish = {
                        id: Date.now(),
                        text: currentWish,
                        response: responses[Math.floor(Math.random() * (responses || []).length)],
                        timestamp: Date.now()
                      };
                      setWishes(prev => [newWish, ...prev].slice(0, 20));
                      setCurrentWish('');
                      setTimeout(() => { setWishAnimation(false); setStarBurst([]); }, 2000);
                    }}
                  >
                    Toss a Coin 🪙
                  </button>
                </div>

{/* Past Wishes */}
                {(wishes || []).length > 0 && (
                  <div style={{ marginTop: 32, textAlign: 'left' }}>
                    <h3 style={{ fontSize: 15, color: '#8B7355', fontStyle: 'italic', marginBottom: 16 }}>Wishes cast into the well...</h3>
                    {(wishes || []).map((w, wi) => (
                      <div key={w.id || wi} style={{
                        background: 'rgba(255,253,249,0.6)',
                        border: '1px dashed rgba(156,175,136,0.4)',
                        borderRadius: 16, padding: '16px 20px', marginBottom: 12,
                        position: 'relative', overflow: 'hidden'
                      }}>
                        <div style={{ position: 'absolute', top: 8, right: 12, fontSize: 18, opacity: 0.3 }}>✨</div>
                        <p style={{ margin: '0 0 8px 0', fontSize: 15, color: '#5C4A3D', fontStyle: 'italic' }}>"{w.text}"</p>
                        <p style={{ margin: 0, fontSize: 13, color: '#9CAF88' }}>{w.response}</p>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            )}

{/* VOODOO DOLL GAME */}
            {activeGame === 'voodoo' && (() => {
              const DOLL_EXPRESSIONS = ['😐', '😑', '😣', '😖', '😵', '🤪', '💀', '👻'];
              const DOLL_REACTIONS = [
                'ouch.', '...really?', 'I probably deserved that', 'harder.', 'is that all you got?',
                'okay RUDE', '*dramatic gasp*', 'my therapist will hear about this',
                'I\'m telling HR', 'that tickled actually', 'bold of you', 'not the face!',
                'joke\'s on you, I\'m into that', 'file a complaint? nah, I\'ll just cry',
                'this is my villain origin story', 'at least buy me dinner first'
              ];
              const PIN_SPOTS = [
                { x: 50, y: 15, label: 'head' },
                { x: 35, y: 30, label: 'left shoulder' },
                { x: 65, y: 30, label: 'right shoulder' },
                { x: 50, y: 40, label: 'chest' },
                { x: 50, y: 55, label: 'tummy' },
                { x: 35, y: 50, label: 'left arm' },
                { x: 65, y: 50, label: 'right arm' },
                { x: 42, y: 75, label: 'left leg' },
                { x: 58, y: 75, label: 'right leg' },
                { x: 50, y: 90, label: 'feet' }
              ];
              const ACCESSORIES = [
                { emoji: '🎀', name: 'Bow' },
                { emoji: '👑', name: 'Crown' },
                { emoji: '🎩', name: 'Top Hat' },
                { emoji: '🌸', name: 'Flower' },
                { emoji: '😈', name: 'Horns' },
                { emoji: '🤡', name: 'Clown' }
              ];
              const COLORS = ['#C4A77D', '#D4A5A5', '#9CAF88', '#8B7355', '#5C6B8A', '#A078B0'];

const resetDoll = () => {
                setDoll({ pins: [], expression: '😐', color: doll.color, accessory: doll.accessory });
                setPinCount(0);
                setDollReaction('oh thank god');
                setShakeIntensity(0);
                setTimeout(() => setDollReaction(''), 2000);
              };

return (
                <div style={{ textAlign: 'center' }}>
                  <h2 style={{ fontSize: 26, margin: '0 0 8px 0', fontFamily: 'Lora, Georgia, serif', fontWeight: 600, color: '#5C4A3D' }}>The Stress Doll</h2>
                  <p style={{ fontSize: 14, color: '#8B7355', marginBottom: 8, fontStyle: 'italic' }}>Name it after your problem. Poke it. Feel better.</p>
                  <p style={{ fontSize: 11, color: '#A89B8C', marginBottom: 24 }}>⚠️ No real humans were harmed in the making of this feature</p>

{/* Doll Display */}
                  <div style={{
                    position: 'relative', width: 220, height: 320, margin: '0 auto 16px',
                    transform: shakeIntensity > 0 ? `translateX(${Math.sin(Date.now()) * shakeIntensity}px)` : 'none',
                    transition: 'transform 0.1s'
                  }}>
                    {/* Doll Body SVG-like shape using divs */}
                    <div style={{ position: 'absolute', left: '50%', top: '5%', transform: 'translateX(-50%)', width: 70, height: 70, borderRadius: '50%', background: doll.color, border: '3px solid rgba(92,74,61,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 32, zIndex: 2 }}>
                      {doll.expression}
                    </div>
                    {/* Accessory */}
                    {doll.accessory && (
                      <div style={{ position: 'absolute', left: '50%', top: '-2%', transform: 'translateX(-50%)', fontSize: 28, zIndex: 3 }}>{doll.accessory}</div>
                    )}
                    {/* Torso */}
                    <div style={{ position: 'absolute', left: '50%', top: '25%', transform: 'translateX(-50%)', width: 80, height: 100, borderRadius: '40px 40px 20px 20px', background: doll.color, border: '3px solid rgba(92,74,61,0.3)', zIndex: 1 }} />
                    {/* Arms */}
                    <div style={{ position: 'absolute', left: '12%', top: '28%', width: 50, height: 20, borderRadius: 10, background: doll.color, border: '3px solid rgba(92,74,61,0.3)', transform: 'rotate(-15deg)', zIndex: 0 }} />
                    <div style={{ position: 'absolute', right: '12%', top: '28%', width: 50, height: 20, borderRadius: 10, background: doll.color, border: '3px solid rgba(92,74,61,0.3)', transform: 'rotate(15deg)', zIndex: 0 }} />
                    {/* Legs */}
                    <div style={{ position: 'absolute', left: '30%', top: '55%', width: 24, height: 90, borderRadius: 12, background: doll.color, border: '3px solid rgba(92,74,61,0.3)', transform: 'rotate(-5deg)', zIndex: 0 }} />
                    <div style={{ position: 'absolute', right: '30%', top: '55%', width: 24, height: 90, borderRadius: 12, background: doll.color, border: '3px solid rgba(92,74,61,0.3)', transform: 'rotate(5deg)', zIndex: 0 }} />

{/* Poke Targets */}
                    {(PIN_SPOTS || []).map((spot, si) => {
                      const hasPin = (doll.pins || []).some(p => p.label === spot.label);
                      return (
                        <div
                          key={si}
                          onClick={() => handlePoke(spot)}
                          style={{
                            position: 'absolute',
                            left: spot.x + '%', top: spot.y + '%',
                            transform: 'translate(-50%, -50%)',
                            width: 32, height: 32,
                            borderRadius: '50%',
                            background: hasPin ? 'rgba(212,165,165,0.6)' : 'rgba(139,115,85,0.08)',
                            border: hasPin ? '2px solid #D4A5A5' : '1px dashed rgba(139,115,85,0.2)',
                            cursor: 'pointer',
                            display: 'flex', alignItems: 'center', justifyContent: 'center',
                            fontSize: hasPin ? 16 : 10,
                            zIndex: 5,
                            transition: 'all 0.2s'
                          }}
                        >
                          {hasPin ? '📌' : '·'}
                        </div>
                      );
                    })}
                  </div>

{/* Reaction Bubble */}
                  <div style={{ minHeight: 48, display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>
                    {dollReaction ? (
                      <div style={{
                        background: '#FFFDF9', border: '1px dashed #D4A5A5', borderRadius: 20,
                        padding: '10px 20px', fontSize: 14, color: '#5C4A3D', fontStyle: 'italic',
                        boxShadow: '0 4px 12px rgba(212,165,165,0.15)',
                        animation: 'pulse 0.3s ease-out'
                      }}>
                        "{dollReaction}"
                      </div>
                    ) : (
                      <div style={{ fontSize: 13, color: '#A89B8C', fontStyle: 'italic' }}>Tap the doll to poke it 🪡</div>
                    )}
                  </div>

{/* Pin Counter */}
                  <div style={{ fontSize: 13, color: '#8B7355', marginBottom: 20 }}>
                    📌 Pokes: {pinCount} {pinCount >= 10 ? '(you okay bestie?)' : pinCount >= 5 ? '(feeling better?)' : ''}
                  </div>

{/* Customization Row */}
                  <div style={{ marginBottom: 16 }}>
                    <div style={{ fontSize: 12, color: '#A89B8C', marginBottom: 8, textTransform: 'uppercase', letterSpacing: '0.1em' }}>Doll Color</div>
                    <div style={{ display: 'flex', justifyContent: 'center', gap: 10 }}>
                      {(COLORS || []).map((c, ci) => (
                        <div
                          key={ci}
                          onClick={() => setDoll(prev => ({ ...prev, color: c }))}
                          style={{
                            width: 32, height: 32, borderRadius: '50%', background: c,
                            border: doll.color === c ? '3px solid #5C4A3D' : '2px solid rgba(139,115,85,0.2)',
                            cursor: 'pointer', transition: 'all 0.2s',
                            transform: doll.color === c ? 'scale(1.15)' : 'scale(1)'
                          }}
                        />
                      ))}
                    </div>
                  </div>

<div style={{ marginBottom: 24 }}>
                    <div style={{ fontSize: 12, color: '#A89B8C', marginBottom: 8, textTransform: 'uppercase', letterSpacing: '0.1em' }}>Accessory</div>
                    <div style={{ display: 'flex', justifyContent: 'center', gap: 8, flexWrap: 'wrap' }}>
                      <div
                        onClick={() => setDoll(prev => ({ ...prev, accessory: null }))}
                        style={{
                          padding: '6px 12px', borderRadius: 16, fontSize: 13,
                          border: !doll.accessory ? '2px solid #9CAF88' : '1px dashed rgba(139,115,85,0.2)',
                          background: !doll.accessory ? 'rgba(156,175,136,0.15)' : 'transparent',
                          cursor: 'pointer', fontFamily: 'Lora, Georgia, serif', color: '#5C4A3D'
                        }}
                      >None</div>
                      {(ACCESSORIES || []).map((acc, ai) => (
                        <div
                          key={ai}
                          onClick={() => setDoll(prev => ({ ...prev, accessory: acc.emoji }))}
                          style={{
                            padding: '6px 12px', borderRadius: 16, fontSize: 18,
                            border: doll.accessory === acc.emoji ? '2px solid #9CAF88' : '1px dashed rgba(139,115,85,0.2)',
                            background: doll.accessory === acc.emoji ? 'rgba(156,175,136,0.15)' : 'transparent',
                            cursor: 'pointer', transition: 'all 0.2s'
                          }}
                        >{acc.emoji}</div>
                      ))}
                    </div>
                  </div>

<button className="cottage-btn secondary" style={{ width: '200px' }} onClick={resetDoll}>
                    Reset Doll 🧸
                  </button>
                </div>
              );
            })()}
          </div>
        )}
        {activeTab === 'crew' && (() => {
          const memberList = isMultiplayer && members?.length > 0 ? members : [{ id: user?.id, displayName: user?.name || 'You', handle: user?.handle, avatarUrl: user?.avatarUrl, role: 'owner' }];
          const allMoods = moods || [];
          return (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, paddingBottom: 100 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 8 }}>
                <h2 style={{ fontSize: 26, margin: 0, fontFamily: 'Playfair Display, Georgia, serif', fontWeight: 300 }}>Your Circle</h2>
                <button
                  onClick={() => share()}
                  style={{ background: 'transparent', color: '#A89B8C', border: 'none', fontSize: 11, cursor: 'pointer', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 400, padding: '8px 0', fontFamily: 'Helvetica Neue, Helvetica, sans-serif' }}
                >Invite</button>
              </div>

{/* Members Horizontal Scroller */}
              <div style={{ display: 'flex', overflowX: 'auto', gap: 16, paddingBottom: 12, borderBottom: '1px solid rgba(168,155,140,0.08)', WebkitOverflowScrolling: 'touch' }}>
                {(memberList || []).map((m, i) => {
                  const memberMoods = (allMoods || []).filter(mood => mood._user?.id === m.id && !mood.isDemo);
                  const memberAvg = (memberMoods || []).length ? ((memberMoods || []).reduce((s, mood) => s + mood.vibe, 0) / (memberMoods || []).length) : null;
                  return (
                    <div key={m.id || i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, minWidth: 60 }}>
                      <div
                        onClick={() => (m.handle) && openProfile(m.handle)}
                        style={{
                          width: 50, height: 50, borderRadius: '50%', background: '#E8E2DA',
                          display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16,
                          cursor: m.handle ? 'pointer' : 'default', overflow: 'hidden',
                          backgroundImage: m.avatarUrl ? `url(${m.avatarUrl})` : 'none', backgroundSize: 'cover', backgroundPosition: 'center',
                          border: '2px solid #FFFDF9', boxShadow: '0 2px 8px rgba(139,115,85,0.1)'
                        }}
                      >
                        {!m.avatarUrl && <span style={{ color: '#A89B8C' }}>•</span>}
                      </div>
                      <div style={{ fontSize: 11, fontWeight: 400, color: '#5C4A3D', maxWidth: 60, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', textAlign: 'center' }}>
                        {m.displayName || 'Anon'}
                      </div>
                      <div style={{ fontSize: 14 }}>
                        {memberAvg !== null ? getVibeEmoji(Math.round(memberAvg)) : '·'}
                      </div>
                    </div>
                  );
                })}
              </div>

{/* Chat Messages */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginTop: 8 }}>
                {(circleMessages || []).length === 0 ? (
                  <div style={{ textAlign: 'center', color: '#A89B8C', fontStyle: 'italic', padding: '32px 0' }}>Start the conversation...</div>
                ) : (
                  (circleMessages || []).map((msg, i) => {
                    const isMe = msg._user?.id === user?.id;
                    return (
                      <div key={msg.id || i} style={{ display: 'flex', flexDirection: 'column', alignItems: isMe ? 'flex-end' : 'flex-start' }}>
                        {!isMe && (
                          <div style={{ fontSize: 11, color: '#A89B8C', marginBottom: 4, marginLeft: 12 }}>
                            {msg._user?.displayName || 'Someone'}
                          </div>
                        )}
                        <div style={{ 
                          background: isMe ? '#9CAF88' : '#FFFDF9', 
                          color: isMe ? '#FFFDF9' : '#5C4A3D',
                          padding: '12px 16px', 
                          borderRadius: 20, 
                          borderBottomRightRadius: isMe ? 4 : 20,
                          borderBottomLeftRadius: !isMe ? 4 : 20,
                          maxWidth: '85%',
                          boxShadow: '0 2px 8px rgba(139,115,85,0.05)',
                          border: isMe ? 'none' : '1px solid rgba(139,115,85,0.1)'
                        }}>
                          {msg.photoUrl && (
                            <img src={msg.photoUrl} alt="Shared" style={{ width: '100%', maxHeight: 200, objectFit: 'cover', borderRadius: 12, marginBottom: msg.text ? 8 : 0 }} onError={(e) => e.currentTarget.style.display = 'none'} />
                          )}
                          {msg.text && <div style={{ fontSize: 15, lineHeight: 1.4 }}>{msg.text}</div>}
                        </div>
                        <div style={{ fontSize: 9, color: '#A89B8C', marginTop: 4, opacity: 0.7 }}>
                          {new Date(msg.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                        </div>
                      </div>
                    );
                  })
                )}
              </div>

{/* Chat Input Fixed at Bottom */}
              <div style={{ 
                position: 'fixed', 
                bottom: 'max(env(safe-area-inset-bottom, 20px), 20px)', 
                left: 'max(env(safe-area-inset-left, 0px), 16px)', 
                right: 'max(env(safe-area-inset-right, 0px), 16px)', 
                maxWidth: 448, 
                margin: '0 auto', 
                background: '#FFFDF9', 
                padding: '12px 16px', 
                borderRadius: 28, 
                boxShadow: '0 8px 24px rgba(139,115,85,0.15)', 
                display: 'flex', 
                alignItems: 'flex-end', 
                gap: 12, 
                border: '1px solid rgba(139,115,85,0.15)',
                zIndex: 10
              }}>
                <button onClick={handleAttachMessagePhoto} disabled={isMessageUploading} style={{ background: 'transparent', border: 'none', fontSize: 24, cursor: 'pointer', padding: '0 4px', opacity: isMessageUploading ? 0.5 : 1, paddingBottom: 6 }}>📷</button>
                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 8 }}>
                  {messagePhoto && (
                    <div style={{ position: 'relative', width: 60, height: 60, marginTop: 4 }}>
                      <img src={messagePhoto} style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 8 }} />
                      <button onClick={() => setMessagePhoto(null)} style={{ position: 'absolute', top: -6, right: -6, background: '#D4A5A5', color: '#fff', border: 'none', borderRadius: '50%', width: 22, height: 22, fontSize: 10, cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 2px 4px rgba(0,0,0,0.2)' }}>✕</button>
                    </div>
                  )}
                  <input 
                    value={newMessage} 
                    onChange={e => setNewMessage(e.target.value)} 
                    onKeyPress={e => e.key === 'Enter' && handleSendMessage()}
                    placeholder="Share something..." 
                    style={{ width: '100%', border: 'none', background: 'transparent', outline: 'none', fontSize: 15, color: '#5C4A3D', fontFamily: 'Lora, Georgia, serif', padding: '8px 0' }} 
                  />
                </div>
                <button onClick={handleSendMessage} disabled={!newMessage.trim() && !messagePhoto} style={{ background: (!newMessage.trim() && !messagePhoto) ? '#E8DCC4' : '#9CAF88', border: 'none', color: '#fff', borderRadius: '50%', width: 40, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', transition: 'background 0.2s', marginBottom: 2 }}>➤</button>
              </div>
            </div>
          );
        })()}
      </div>

{/* Bottom Sheet for Adding Spot */}
      <div style={{
        position: 'fixed',
        bottom: 0, left: 0, right: 0,
        background: '#F5F0E6',
        borderTopLeftRadius: 24, borderTopRightRadius: 24,
        padding: '32px 16px max(env(safe-area-inset-bottom, 20px), 20px)',
        boxShadow: '0 -8px 32px rgba(139, 115, 85, 0.1)',
        transform: showSpotForm ? 'translateY(0)' : 'translateY(110%)',
        transition: 'transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
        zIndex: 100
      }}>
        <div style={{ width: 40, height: 4, background: '#D4CCC3', borderRadius: 2, margin: '-16px auto 24px' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 24 }}>
          <h2 style={{ margin: 0, fontSize: 24, fontFamily: 'Lora, Georgia, serif', fontWeight: 600, color: '#5C4A3D' }}>Share a cozy spot</h2>
          <button onClick={() => setShowSpotForm(false)} style={{ background: 'none', border: 'none', fontSize: 14, color: '#A89B8C', cursor: 'pointer', fontFamily: 'Lora, Georgia, serif' }}>Close</button>
        </div>
        
        <input className="cottage-input" placeholder="Name of the place" value={spotTitle} onChange={e => setSpotTitle(e.target.value)} style={{ marginBottom: 16 }} />
        
        <select className="cottage-input" value={spotType} onChange={e => setSpotType(e.target.value)} style={{ marginBottom: 16 }}>
          <option value="Quiet Escape">Quiet Escape 🍄</option>
          <option value="Nature Walk">Nature Walk 🌿</option>
          <option value="Tea Spot">Tea Spot 🫖</option>
          <option value="Cozy Nook">Cozy Nook 📚</option>
          <option value="Whimsical">Whimsical ✨</option>
          <option value="Unhinged">Unhinged 🤪</option>
        </select>
        
        <textarea className="cottage-input" placeholder="What makes it special?" rows={3} value={spotDesc} onChange={e => setSpotDesc(e.target.value)} style={{ marginBottom: 16, resize: 'none' }} />
        
        <div style={{ marginBottom: 24 }}>
          <button 
            onClick={handlePhotoUpload}
            disabled={isUploading}
            style={{ background: 'transparent', color: '#8B7355', border: '1px dashed #C4A77D', borderRadius: 12, fontSize: 14, cursor: 'pointer', padding: '12px 16px', fontFamily: 'Lora, Georgia, serif', width: '100%', textAlign: 'center' }}
          >
            {isUploading ? 'Uploading ⏳' : spotPhoto ? 'Photo attached 🌸' : 'Add a photo 📷'}
          </button>
        </div>

<button className="cottage-btn" style={{ width: '100%' }} onClick={handleAddSpot}>
          Share with the Circle 💌
        </button>
      </div>
      
      {/* Bottom Sheet for Adding Idea */}
      <div style={{
        position: 'fixed',
        bottom: 0, left: 0, right: 0,
        background: '#F5F0E6',
        borderTopLeftRadius: 24, borderTopRightRadius: 24,
        padding: '32px 16px max(env(safe-area-inset-bottom, 20px), 20px)',
        boxShadow: '0 -8px 32px rgba(139, 115, 85, 0.1)',
        transform: showIdeaForm ? 'translateY(0)' : 'translateY(110%)',
        transition: 'transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
        zIndex: 100
      }}>
        <div style={{ width: 40, height: 4, background: '#D4CCC3', borderRadius: 2, margin: '-16px auto 24px' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 24 }}>
          <h2 style={{ margin: 0, fontSize: 24, fontFamily: 'Lora, Georgia, serif', fontWeight: 600, color: '#5C4A3D' }}>Share an idea</h2>
          <button onClick={() => setShowIdeaForm(false)} style={{ background: 'none', border: 'none', fontSize: 14, color: '#A89B8C', cursor: 'pointer', fontFamily: 'Lora, Georgia, serif' }}>Close</button>
        </div>
        
        <input className="cottage-input" placeholder="What's the activity?" value={ideaTitle} onChange={e => setIdeaTitle(e.target.value)} style={{ marginBottom: 16 }} />
        
        <select className="cottage-input" value={ideaType} onChange={e => setIdeaType(e.target.value)} style={{ marginBottom: 16 }}>
          <option value="Cathartic">Cathartic 🌋</option>
          <option value="Cozy">Cozy ☕</option>
          <option value="Active">Active 🏃</option>
          <option value="Creative">Creative 🎨</option>
          <option value="Social">Social 💬</option>
          <option value="Unhinged">Unhinged 🤪</option>
        </select>
        
        <textarea className="cottage-input" placeholder="How does it help?" rows={3} value={ideaDesc} onChange={e => setIdeaDesc(e.target.value)} style={{ marginBottom: 24, resize: 'none' }} />

<button className="cottage-btn" style={{ width: '100%' }} onClick={handleAddIdea}>
          Share with the Circle 💌
        </button>
      </div>
      
      {/* Overlay for Idea Bottom Sheet */}
      {showIdeaForm && (
        <div 
          onClick={() => setShowIdeaForm(false)}
          style={{
            position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
            background: 'rgba(246, 241, 234, 0.8)',
            backdropFilter: 'blur(8px)',
            zIndex: 99
          }}
        />
      )}

{/* Overlay for Bottom Sheet */}
      {showSpotForm && (
        <div 
          onClick={() => setShowSpotForm(false)}
          style={{
            position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
            background: 'rgba(246, 241, 234, 0.8)',
            backdropFilter: 'blur(8px)',
            zIndex: 99
          }}
        />
      )}
    </div>
  );
}</article></body></html>