New Walk Log

setNewLog({...newLog, text: e.target.value})}
          style={{
            width: '100%', minHeight: 150, border: 'none', background: 'transparent',
            fontSize: 24, fontFamily: 'serif', color: theme.text, resize: 'none',
            outline: 'none', lineHeight: 1.4
          }}
          autoFocus
        />

<div style={{ marginTop: 32 }}>
          <div style={{ fontSize: 14, fontWeight: 600, color: '#999', marginBottom: 16, letterSpacing: 1 }}>MOOD</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
            {['🌿 Calm', '🌞 Sunny', '🌧️ Melancholy', '🐢 Slow', '🦋 Wandering', '💭 Thinking'].map(m => (
              <MoodTag 
                key={m} 
                mood={m} 
                selected={newLog.mood === m} 
                onClick={() => setNewLog({...newLog, mood: m})} 
              />
            ))}
          </div>
        </div>

<button 
          onClick={handlePostLog}
          style={{
            width: '100%', marginTop: 'auto', background: theme.primary, color: 'white',
            border: 'none', padding: 16, borderRadius: 16, fontSize: 18, fontWeight: 600,
            boxShadow: `0 8px 24px ${theme.primary}66`,
            transform: newLog.text ? 'translateY(0)' : 'translateY(20px)',
            opacity: newLog.text ? 1 : 0,
            transition: 'all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)'
          }}
        >
          Plant Footprint 🦶
        </button>
      </div>
    </div>
  );

const QuestionCard = () => (
    <div style={{
      margin: '24px 16px', padding: 24, borderRadius: theme.radius,
      background: 'white', boxShadow: theme.shadow,
      border: `1px solid ${theme.primary}22`,
      position: 'relative', overflow: 'hidden'
    }}>
      <div style={{ 
        position: 'absolute', top: -20, right: -20, width: 100, height: 100, 
        background: theme.accent, borderRadius: '50%', opacity: 0.1 
      }} />
      
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12, opacity: 0.6 }}>
        <span style={{ fontSize: 16 }}>✨</span>
        <span style={{ fontSize: 12, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase' }}>Ordinary Question</span>
      </div>
      
      <h3 style={{ fontSize: 22, fontFamily: 'serif', margin: '0 0 16px 0', lineHeight: 1.3 }}>
        {SAMPLE_QUESTIONS[0].text}
      </h3>

{!questionOpen && !hasPostedAnswer ? (
        <button 
          onClick={() => setQuestionOpen(true)}
          style={{ 
            background: 'transparent', border: `2px solid ${theme.primary}`, 
            color: theme.primary, padding: '10px 20px', borderRadius: 20, fontWeight: 600
          }}
        >
          Reflect
        </button>
      ) : hasPostedAnswer ? (
        <div style={{ color: theme.primary, display: 'flex', alignItems: 'center', gap: 8, animation: 'fadeIn 0.5s' }}>
          <span>✓</span> Reflection captured
        </div>
      ) : (
        <div style={{ animation: 'slideDown 0.3s ease-out' }}>
          <textarea 
            value={answerText}
            onChange={e => setAnswerText(e.target.value)}
            placeholder="Write a quiet thought..."
            style={{ 
              width: '100%', minHeight: 80, border: '1px solid #eee', borderRadius: 12,
              padding: 12, fontSize: 16, fontFamily: 'serif', marginBottom: 12, outline: 'none'
            }}
          />
          <div style={{ display: 'flex', gap: 12 }}>
             <button 
              onClick={handleAnswerSubmit}
              style={{ 
                background: theme.primary, color: 'white', border: 'none',
                padding: '10px 24px', borderRadius: 16, fontWeight: 600
              }}
            >
              Save
            </button>
            <button 
              onClick={() => setQuestionOpen(false)}
              style={{ 
                background: 'transparent', color: '#999', border: 'none',
                padding: '10px 12px', fontWeight: 600
              }}
            >
              Cancel
            </button>
          </div>
        </div>
      )}
    </div>
  );

// ═══════════════════════════════════════════════════════════════
  // 📱 MAIN RENDER
  // ═══════════════════════════════════════════════════════════════
  return (
    <div style={{
      minHeight: '100dvh',
      background: theme.bg,
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
      color: theme.text,
      paddingBottom: 80, // Space for nav
      maxWidth: 480, margin: '0 auto', // Desktop constraint
      position: 'relative'
    }}>
      
      {/* HEADER */}
      <header style={{ 
        padding: 'max(env(safe-area-inset-top, 20px), 24px) 24px 12px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center'
      }}>
        <h1 style={{ margin: 0, fontSize: 24, fontFamily: 'serif', fontStyle: 'italic', color: theme.primary }}>Slow Walk</h1>
        <button onClick={share} style={{ background: 'none', border: 'none', fontSize: 24 }}>📤</button>
      </header>

{/* CONTENT AREA */}
      <div style={{ paddingBottom: 'env(safe-area-inset-bottom, 20px)' }}>
        
        {/* ORDINARY QUESTION - Weekly Highlight */}
        <QuestionCard />

{/* TABS / VIEWS */}
        <div style={{ padding: '0 16px' }}>
          <div style={{ display: 'flex', gap: 24, marginBottom: 20, padding: '0 8px' }}>
            <button 
              onClick={() => setActiveTab('feed')}
              style={{ 
                background: 'none', border: 'none', fontSize: 18, fontWeight: 700,
                color: activeTab === 'feed' ? theme.text : '#ccc',
                padding: 0,
                borderBottom: activeTab === 'feed' ? `2px solid ${theme.secondary}` : 'none',
                transition: 'all 0.3s'
              }}
            >
              Path Feed
            </button>
             <button 
              onClick={() => setActiveTab('map')}
              style={{ 
                background: 'none', border: 'none', fontSize: 18, fontWeight: 700,
                color: activeTab === 'map' ? theme.text : '#ccc',
                padding: 0,
                borderBottom: activeTab === 'map' ? `2px solid ${theme.secondary}` : 'none',
                transition: 'all 0.3s'
              }}
            >
              Map View
            </button>
          </div>

{activeTab === 'feed' ? (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              {(logs || []).map((log, i) => (
                <div 
                  key={log.id} 
                  onClick={() => setSelectedLogId(selectedLogId === log.id ? null : log.id)}
                  style={{
                    background: 'white', 
                    borderRadius: theme.radius,
                    padding: 20,
                    boxShadow: theme.shadow,
                    transform: selectedLogId === log.id ? 'scale(1.02)' : 'scale(1)',
                    transition: `transform 0.4s ${theme.bounce}`,
                    animation: `fadeIn 0.5s ease-out ${i * 0.1}s backwards`,
                    cursor: 'pointer'
                  }}
                >
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
                    <div style={{ 
                      width: 36, height: 36, borderRadius: '50%', background: '#eee', 
                      overflow: 'hidden', border: '1px solid #fff', boxShadow: '0 2px 5px rgba(0,0,0,0.1)'
                    }}>
                      {log._user?.profileImageUrl ? (
                        <img src={log._user.profileImageUrl} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                      ) : (
                        <div style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16 }}>👤</div>
                      )}
                    </div>
                    <div>
                      <div style={{ fontSize: 14, fontWeight: 600 }}>{log._user?.displayName || 'Unknown Walker'}</div>
                      <div style={{ fontSize: 11, color: '#999' }}>{new Date(log._timestamp).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}</div>
                    </div>
                    <div style={{ marginLeft: 'auto', fontSize: 12, background: theme.bg, padding: '4px 10px', borderRadius: 12, color: theme.text }}>
                      {log.mood}
                    </div>
                  </div>

{/* FOOTPRINTS / REACTIONS */}
                  <div style={{ 
                    display: 'flex', gap: 8, alignItems: 'center',
                    borderTop: '1px solid #f5f5f5', paddingTop: 12
                  }}>
                    <button 
                      onClick={(e) => { e.stopPropagation(); handleReaction(log.id, 'warmth'); }}
                      style={{ background: '#FFF5F0', border: 'none', borderRadius: 20, padding: '6px 12px', fontSize: 13, color: theme.secondary, fontWeight: 600 }}
                    >
                       👣 {(log.reactions?.find(r => r.type === 'warmth')?.count ?? 0) > 0 ? (log.reactions || []).find(r => r.type === 'warmth').count : ''} I felt this
                    </button>
                    <button 
                       onClick={(e) => { e.stopPropagation(); handleReaction(log.id, 'smile'); }}
                      style={{ background: '#F0F9FF', border: 'none', borderRadius: 20, padding: '6px 12px', fontSize: 13, color: theme.accent, fontWeight: 600 }}
                    >
                       🙂 {(log.reactions?.find(r => r.type === 'smile')?.count ?? 0) > 0 ? (log.reactions || []).find(r => r.type === 'smile').count : ''} Smile
                    </button>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            /* MAP VIEW SIMULATION */
            <div style={{ 
              height: '50vh', background: '#eef2ee', borderRadius: theme.radius, 
              position: 'relative', overflow: 'hidden', border: `4px solid white`,
              boxShadow: 'inset 0 0 20px rgba(0,0,0,0.05)'
            }}>
              {/* Abstract decorative paths */}
              <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.3 }} viewBox="0 0 100 100" preserveAspectRatio="none">
                <path d="M10,90 Q50,10 90,90" stroke={theme.secondary} strokeWidth="1" fill="none" strokeDasharray="5,5" />
                <path d="M20,20 Q60,80 80,10" stroke={theme.primary} strokeWidth="1" fill="none" />
                <path d="M0,50 Q50,50 100,50" stroke={theme.accent} strokeWidth="0.5" fill="none" />
              </svg>
              
              {/* Log Nodes */}
              {(logs || []).map((log, i) => (
                <div key={log.id} style={{ 
                  position: 'absolute', 
                  left: `${log.location.x}%`, top: `${log.location.y}%`,
                  width: 12, height: 12, borderRadius: '50%', 
                  background: theme.secondary,
                  boxShadow: `0 0 0 4px ${theme.secondary}33`,
                  transform: 'translate(-50%, -50%)',
                  animation: animatePath && i === 0 ? 'pulse 2s infinite' : 'none'
                }} />
              ))}
              
              <div style={{ 
                position: 'absolute', bottom: 16, left: 16, right: 16, 
                background: 'rgba(255,255,255,0.8)', backdropFilter: 'blur(4px)',
                padding: 12, borderRadius: 12, fontSize: 13, textAlign: 'center'
              }}>
                🌱 Paths overlapping across time
              </div>
            </div>
          )}
        </div>
      </div>

{/* FAB - ADD BUTTON */}
      <button 
        onClick={() => setIsCreating(true)}
        style={{
          position: 'fixed', 
          bottom: 'calc(env(safe-area-inset-bottom, 20px) + 24px)',
          right: 24,
          width: 64, height: 64,
          borderRadius: 32,
          background: theme.primary,
          color: 'white',
          border: 'none',
          fontSize: 32,
          boxShadow: `0 8px 24px ${theme.primary}66`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          zIndex: 50,
          transition: 'transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275)'
        }}
        onPointerDown={(e) => e.currentTarget.style.transform = 'scale(0.9)'}
        onPointerUp={(e) => e.currentTarget.style.transform = 'scale(1)'}
      >
        +
      </button>

{isCreating && <CreateModal />}

{/* CSS Animations */}
      <style>{`
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes slideDown { from { opacity: 0; height: 0; } to { opacity: 1; height: auto; } }
        @keyframes pulse { 0% { box-shadow: 0 0 0 0 ${theme.secondary}66; } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
      `}</style>
    </div>
  );
}</article></body></html>