import React, { useState, useEffect } from "react" import { useFireproof } from "use-fireproof" import { callAI } from "call-ai" import { ImgGen } from "use-vibes" export default function AquiEstoyApp() { const { database, useLiveQuery, useDocument } = useFireproof("aqui-estoy-wellness") const [currentScreen, setCurrentScreen] = useState('welcome') const [isDarkMode, setIsDarkMode] = useState(false) const [language, setLanguage] = useState('en') const [isVoiceoverMode, setVoiceoverMode] = useState(false) const [isRecording, setIsRecording] = useState(false) // Get user settings const { doc: settings, merge: updateSettings } = useDocument({ _id: 'user-settings', type: 'settings', isDarkMode: false, language: 'en', voiceoverMode: false }) // Various data queries const { docs: moodCheckins } = useLiveQuery('type', { key: 'mood-checkin', descending: true, limit: 30 }) const { docs: journalEntries } = useLiveQuery('type', { key: 'journal', descending: true, limit: 20 }) const { docs: encouragements } = useLiveQuery('type', { key: 'encouragement', descending: true, limit: 10 }) const { docs: peerMessages } = useLiveQuery('type', { key: 'peer-message', descending: true, limit: 20 }) const { docs: dailyWins } = useLiveQuery('type', { key: 'daily-win', descending: true, limit: 10 }) const { docs: prayerRequests } = useLiveQuery('type', { key: 'prayer-request', descending: true, limit: 15 }) const { docs: jobPostings } = useLiveQuery('type', { key: 'job-posting', descending: true, limit: 20 }) const { docs: affirmations } = useLiveQuery('type', { key: 'affirmation', descending: true, limit: 15 }) const { docs: voiceReminders } = useLiveQuery('type', { key: 'voice-reminder', descending: true, limit: 10 }) // Form documents const { doc: newJournal, merge: mergeJournal, submit: submitJournal } = useDocument({ type: 'journal', content: '', mood: '', timestamp: Date.now() }) const { doc: newPeerMessage, merge: mergePeerMessage, submit: submitPeerMessage } = useDocument({ type: 'peer-message', content: '', messageType: 'support', isAnonymous: true, timestamp: Date.now() }) const { doc: newWin, merge: mergeWin, submit: submitWin } = useDocument({ type: 'daily-win', content: '', category: 'personal', timestamp: Date.now(), date: new Date().toISOString().split('T')[0] }) const { doc: newPrayerRequest, merge: mergePrayerRequest, submit: submitPrayerRequest } = useDocument({ type: 'prayer-request', content: '', category: 'general', isAnonymous: true, timestamp: Date.now() }) // Demo data generators const generateDemoData = async () => { const encouragementData = await callAI("Generate 8 uplifting, supportive messages for people going through crisis. Make them warm, inclusive, and appropriate for both English and Spanish speakers. Include some that acknowledge financial stress, job loss, and mental health struggles.", { schema: { properties: { encouragements: { type: "array", items: { type: "object", properties: { messageEn: { type: "string" }, messageEs: { type: "string" }, category: { type: "string" } } } } } } }) const peerMessageData = await callAI("Generate 6 supportive anonymous peer messages for a wellness app. Include messages of hope, shared struggle, encouragement, and small victories. Make them authentic and relatable.", { schema: { properties: { messages: { type: "array", items: { type: "object", properties: { contentEn: { type: "string" }, contentEs: { type: "string" }, messageType: { type: "string" } } } } } } }) const jobData = await callAI("Generate 5 job postings suitable for Spanish-speaking workers or remote positions. Include customer service, translation, virtual assistance, and entry-level tech roles.", { schema: { properties: { jobs: { type: "array", items: { type: "object", properties: { title: { type: "string" }, company: { type: "string" }, type: { type: "string" }, requirements: { type: "string" }, isRemote: { type: "boolean" }, spanishRequired: { type: "boolean" } } } } } } }) const affirmationData = await callAI("Generate 6 personal affirmations focused on strength, healing, and self-worth. Make them empowering for people facing crisis.", { schema: { properties: { affirmations: { type: "array", items: { type: "object", properties: { textEn: { type: "string" }, textEs: { type: "string" }, category: { type: "string" } } } } } } }) // Save encouragements const encParsed = JSON.parse(encouragementData) encParsed.encouragements.forEach(async (enc, index) => { await database.put({ type: 'encouragement', messageEn: enc.messageEn, messageEs: enc.messageEs, category: enc.category, priority: index, timestamp: Date.now() + index }) }) // Save peer messages const msgParsed = JSON.parse(peerMessageData) msgParsed.messages.forEach(async (msg, index) => { await database.put({ type: 'peer-message', content: language === 'es' ? msg.contentEs : msg.contentEn, messageType: msg.messageType, isAnonymous: true, timestamp: Date.now() + index + 1000 }) }) // Save job postings const jobParsed = JSON.parse(jobData) jobParsed.jobs.forEach(async (job, index) => { await database.put({ type: 'job-posting', title: job.title, company: job.company, jobType: job.type, requirements: job.requirements, isRemote: job.isRemote, spanishRequired: job.spanishRequired, timestamp: Date.now() + index + 2000 }) }) // Save affirmations const affParsed = JSON.parse(affirmationData) affParsed.affirmations.forEach(async (aff, index) => { await database.put({ type: 'affirmation', textEn: aff.textEn, textEs: aff.textEs, category: aff.category, isFavorite: false, timestamp: Date.now() + index + 3000 }) }) } const saveMoodCheckin = async (mood) => { await database.put({ type: 'mood-checkin', mood, timestamp: Date.now(), date: new Date().toISOString().split('T')[0] }) setCurrentScreen('encouragement') } const saveWin = async (content) => { const today = new Date().toISOString().split('T')[0] // Check if win already exists for today const todaysWin = dailyWins.find(win => win.date === today) if (todaysWin) { await database.put({ ...todaysWin, content }) } else { await database.put({ type: 'daily-win', content, date: today, timestamp: Date.now() }) } setCurrentScreen('welcome') } const toggleFavoriteAffirmation = async (affirmation) => { await database.put({ ...affirmation, isFavorite: !affirmation.isFavorite }) } const toggleDarkMode = () => { setIsDarkMode(!isDarkMode) updateSettings({ isDarkMode: !isDarkMode }) } const toggleLanguage = () => { const newLang = language === 'en' ? 'es' : 'en' setLanguage(newLang) updateSettings({ language: newLang }) } const toggleVoiceover = () => { setVoiceoverMode(!isVoiceoverMode) updateSettings({ voiceoverMode: !isVoiceoverMode }) } useEffect(() => { if (settings.isDarkMode !== undefined) setIsDarkMode(settings.isDarkMode) if (settings.language) setLanguage(settings.language) if (settings.voiceoverMode !== undefined) setVoiceoverMode(settings.voiceoverMode) }, [settings]) const t = (en, es) => language === 'es' ? es : en const baseClasses = `min-h-screen transition-colors duration-300 ${ isDarkMode ? 'bg-gradient-to-br from-indigo-900 via-purple-800 to-pink-700 text-purple-50' : 'bg-gradient-to-br from-rose-50 via-orange-50 to-yellow-50 text-rose-900' }` const cardClasses = `p-6 rounded-3xl shadow-xl border-4 transition-all duration-300 ${ isDarkMode ? 'bg-purple-900/40 border-pink-300/30 shadow-pink-500/20 backdrop-blur-sm' : 'bg-white/90 border-rose-200/60 shadow-rose-200/40 backdrop-blur-sm' }` const buttonClasses = `px-8 py-4 rounded-3xl font-semibold transition-all duration-300 border-4 shadow-lg hover:scale-105 ${ isDarkMode ? 'bg-gradient-to-r from-pink-500 to-purple-500 hover:from-pink-400 hover:to-purple-400 border-pink-300/50 text-white' : 'bg-gradient-to-r from-rose-400 to-orange-400 hover:from-rose-300 hover:to-orange-300 border-rose-200/60 text-white' }` const moodButtonClasses = `p-6 rounded-2xl text-5xl transition-all duration-300 border-4 hover:scale-110 active:scale-95 ${ isDarkMode ? 'bg-purple-800/50 border-purple-400/40 hover:bg-purple-700/70 hover:border-purple-300/60' : 'bg-white/80 border-rose-200/50 hover:bg-rose-50/90 hover:border-rose-300/70' }` const smallButtonClasses = `px-4 py-3 rounded-2xl text-sm font-medium transition-all duration-300 border-2 ${ isDarkMode ? 'bg-purple-700/60 border-purple-400/40 text-purple-100 hover:bg-purple-600/70' : 'bg-rose-100/80 border-rose-300/50 text-rose-800 hover:bg-rose-200/90' }` // Calculate mood trends for tracker const getMoodTrend = () => { if (moodCheckins.length < 2) return 'neutral' const recent = moodCheckins.slice(0, 7) const moodValues = { good: 5, meh: 3, sad: 1, angry: 2, tired: 2, unsure: 3 } const avg = recent.reduce((sum, checkin) => sum + (moodValues[checkin.mood] || 3), 0) / recent.length return avg > 3.5 ? 'improving' : avg < 2.5 ? 'concerning' : 'stable' } // Welcome Screen if (currentScreen === 'welcome') { return (

{/* Header Controls */}

{/* Welcome Message */}

🤗

{t('Aquí Estoy', 'Aquí Estoy')}

{t('I Am Here - You Are Not Alone', 'Estoy Aquí - No Estás Solo')}

{t( 'You are seen. You are valued. You are safe here.', 'Te vemos. Te valoramos. Estás seguro aquí.' )}

{t( 'This is your sanctuary of peace, support, and healing. Breathe deeply and trust that new hope is rising.', 'Este es tu santuario de paz, apoyo y sanación. Respira profundo y confía en que nueva esperanza está surgiendo.' )}

{/* Today's Win Quick Entry */}

✨ {t("Today's Win", "Triunfo de Hoy")}

{ if (e.key === 'Enter' && e.target.value.trim()) { saveWin(e.target.value.trim()) e.target.value = '' } }} className={`w-full p-3 rounded-xl border-2 ${ isDarkMode ? 'bg-purple-800/50 border-purple-400/30 text-purple-100 placeholder-purple-300' : 'bg-white/70 border-orange-200/50 text-rose-800 placeholder-rose-500' }`} />

{/* Navigation Grid */}

{/* Quick Access Row */}

{/* Emergency & Resources */}

) } // Mood Check-in Screen if (currentScreen === 'mood') { return (

{t('How is your heart today?', '¿Cómo está tu corazón hoy?')}

{t('Every feeling is valid. You are brave for checking in with yourself.', 'Todos los sentimientos son válidos. Eres valiente por reflexionar sobre ti mismo.')}

) } // Peer Message Wall if (currentScreen === 'peer-wall') { return (

🤝 {t('Community Support Wall', 'Muro de Apoyo Comunitario')}

{/* Share Message Form */}

mergePeerMessage({ content: e.target.value })}
                placeholder={t(
                  'Share hope, encouragement, or ask for support... (posted anonymously)',
                  'Comparte esperanza, ánimo, o pide apoyo... (publicado anónimamente)'
                )}
                className={`w-full h-24 p-3 rounded-xl border-2 resize-none ${
                  isDarkMode 
                    ? 'bg-purple-800/50 border-purple-400/30 text-purple-100 placeholder-purple-300'
                    : 'bg-white/70 border-rose-200/50 text-rose-800 placeholder-rose-500'
                }`}
              />
              <div className="flex justify-between items-center mt-3">
                <select
                  value={newPeerMessage.messageType}
                  onChange={(e) => mergePeerMessage({ messageType: e.target.value })}
                  className={`px-3 py-2 rounded-lg ${
                    isDarkMode ? 'bg-purple-700 text-purple-100' : 'bg-white text-rose-800'
                  }`}
                >
                  <option value="support">{t('Offering Support', 'Ofreciendo Apoyo')}</option>
                  <option value="request">{t('Requesting Support', 'Pidiendo Apoyo')}</option>
                  <option value="victory">{t('Sharing Victory', 'Compartiendo Victoria')}</option>
                  <option value="gratitude">{t('Expressing Gratitude', 'Expresando Gratitud')}</option>
                </select>
                <button onClick={submitPeerMessage} className={smallButtonClasses}>
                  {t('Share Anonymously', 'Compartir Anónimamente')}
                </button>
              </div>
            </div>

{/* Message Feed */}
            <div className="space-y-4 max-h-96 overflow-y-auto">
              {peerMessages.map(message => (
                <div key={message._id} className={`p-4 rounded-xl border-l-4 ${
                  message.messageType === 'victory' ? 'border-yellow-400 bg-yellow-100/20' :
                  message.messageType === 'request' ? 'border-blue-400 bg-blue-100/20' :
                  message.messageType === 'gratitude' ? 'border-green-400 bg-green-100/20' :
                  'border-pink-400 bg-pink-100/20'
                }`}>
                  <div className="flex justify-between items-start mb-2">
                    <span className="text-xs font-medium opacity-70">
                      {message.messageType === 'victory' ? '🎉' :
                       message.messageType === 'request' ? '🙏' :
                       message.messageType === 'gratitude' ? '💚' : '🤗'}
                      {' '}
                      {t('Anonymous', 'Anónimo')}
                    </span>
                    <span className="text-xs opacity-60">
                      {new Date(message.timestamp).toLocaleDateString()}
                    </span>
                  </div>
                  <p className="leading-relaxed">{message.content}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    )
  }

// Prayer/Spiritual Space
  if (currentScreen === 'prayer') {
    return (
      <div className={baseClasses}>
        <div className="container mx-auto px-4 py-6">
          <button 
            onClick={() => setCurrentScreen('welcome')}
            className="mb-6 px-4 py-2 rounded-xl bg-white/20 border-2 border-white/30"
          >
            ← {t('Back', 'Volver')}
          </button>

<div className={cardClasses}>
            <h2 className="text-3xl font-bold text-center mb-8">
              🙏 {t('Sacred Space', 'Espacio Sagrado')}
            </h2>

{/* Prayer Timer */}
            <div className="mb-8 p-6 rounded-2xl bg-gradient-to-r from-purple-200/30 to-blue-200/30 text-center">
              <h3 className="text-xl font-semibold mb-4">
                {t('Reflection Timer', 'Temporizador de Reflexión')}
              </h3>
              <div className="flex justify-center gap-4 mb-4">
                <button className={`${smallButtonClasses} px-6`}>2 min</button>
                <button className={`${smallButtonClasses} px-6`}>5 min</button>
                <button className={`${smallButtonClasses} px-6`}>10 min</button>
              </div>
              <p className="text-sm italic opacity-80">
                {t('Take time for prayer, meditation, or quiet reflection', 'Toma tiempo para orar, meditar, o reflexión silenciosa')}
              </p>
            </div>

{/* Prayer Request Form */}
            <div className="mb-6">
              <h3 className="text-lg font-semibold mb-4">
                {t('Share a Prayer Request', 'Compartir una Petición de Oración')}
              </h3>
              <textarea
                value={newPrayerRequest.content}
                onChange={(e) => mergePrayerRequest({ content: e.target.value })}
                placeholder={t(
                  'What would you like prayer for? (shared anonymously with the community)',
                  '¿Por qué te gustaría que oráramos? (compartido anónimamente con la comunidad)'
                )}
                className={`w-full h-24 p-3 rounded-xl border-2 resize-none mb-3 ${
                  isDarkMode 
                    ? 'bg-purple-800/50 border-purple-400/30 text-purple-100 placeholder-purple-300'
                    : 'bg-white/70 border-rose-200/50 text-rose-800 placeholder-rose-500'
                }`}
              />
              <div className="flex justify-between">
                <select
                  value={newPrayerRequest.category}
                  onChange={(e) => mergePrayerRequest({ category: e.target.value })}
                  className={`px-3 py-2 rounded-lg ${
                    isDarkMode ? 'bg-purple-700 text-purple-100' : 'bg-white text-rose-800'
                  }`}
                >
                  <option value="healing">{t('Healing', 'Sanación')}</option>
                  <option value="strength">{t('Strength', 'Fortaleza')}</option>
                  <option value="provision">{t('Provision', 'Provisión')}</option>
                  <option value="guidance">{t('Guidance', 'Dirección')}</option>
                  <option value="gratitude">{t('Gratitude', 'Gratitud')}</option>
                </select>
                <button onClick={submitPrayerRequest} className={smallButtonClasses}>
                  {t('Submit Request', 'Enviar Petición')}
                </button>
              </div>
            </div>

{/* Prayer Requests Feed */}
            <div className="space-y-3 max-h-64 overflow-y-auto">
              <h4 className="font-semibold">{t('Community Prayer Requests', 'Peticiones de Oración Comunitarias')}</h4>
              {prayerRequests.map(request => (
                <div key={request._id} className="p-3 rounded-lg bg-white/20 border border-white/30">
                  <div className="flex justify-between items-start mb-2">
                    <span className="text-xs font-medium opacity-70 capitalize">
                      🕊️ {request.category}
                    </span>
                    <span className="text-xs opacity-60">
                      {new Date(request.timestamp).toLocaleDateString()}
                    </span>
                  </div>
                  <p className="text-sm leading-relaxed italic">"{request.content}"</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    )
  }

// Job Board
  if (currentScreen === 'jobs') {
    return (
      <div className={baseClasses}>
        <div className="container mx-auto px-4 py-6">
          <button 
            onClick={() => setCurrentScreen('welcome')}
            className="mb-6 px-4 py-2 rounded-xl bg-white/20 border-2 border-white/30"
          >
            ← {t('Back', 'Volver')}
          </button>

<div className={cardClasses}>
            <h2 className="text-2xl font-bold text-center mb-6">
              💼 {t('Job Opportunities', 'Oportunidades de Trabajo')}
            </h2>
            
            <p className="text-center italic mb-6 opacity-80">
              {t('Remote and Spanish-friendly positions', 'Posiciones remotas y amigables para hispanohablantes')}
            </p>

<div className="space-y-4 max-h-96 overflow-y-auto">
              {jobPostings.map(job => (
                <div key={job._id} className="p-4 rounded-xl bg-white/20 border border-white/30">
                  <div className="flex justify-between items-start mb-2">
                    <h3 className="font-semibold text-lg">{job.title}</h3>
                    <div className="flex gap-2">
                      {job.isRemote && <span className="px-2 py-1 rounded-full bg-green-500/20 text-green-700 text-xs">Remote</span>}
                      {job.spanishRequired && <span className="px-2 py-1 rounded-full bg-blue-500/20 text-blue-700 text-xs">Español</span>}
                    </div>
                  </div>
                  <p className="font-medium mb-2">{job.company}</p>
                  <p className="text-sm mb-2 opacity-80">{job.jobType}</p>
                  <p className="text-sm">{job.requirements}</p>
                  <div className="mt-3 text-center">
                    <button className={`${smallButtonClasses} px-4`}>
                      {t('Learn More', 'Más Información')}
                    </button>
                  </div>
                </div>
              ))}
              
              {jobPostings.length === 0 && (
                <div className="text-center py-8">
                  <p className="text-lg opacity-70">
                    {t('Loading opportunities...', 'Cargando oportunidades...')}
                  </p>
                  <p className="text-sm mt-2">
                    {t('Generate demo content to see sample job postings', 'Genera contenido de demo para ver ejemplos de trabajos')}
                  </p>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    )
  }

// Mood Tracker
  if (currentScreen === 'mood-tracker') {
    const trend = getMoodTrend()
    return (
      <div className={baseClasses}>
        <div className="container mx-auto px-4 py-6">
          <button 
            onClick={() => setCurrentScreen('welcome')}
            className="mb-6 px-4 py-2 rounded-xl bg-white/20 border-2 border-white/30"
          >
            ← {t('Back', 'Volver')}
          </button>

<div className={cardClasses}>
            <h2 className="text-2xl font-bold text-center mb-6">
              📈 {t('Your Emotional Journey', 'Tu Viaje Emocional')}
            </h2>

{/* Trend Summary */}
            <div className="mb-6 p-4 rounded-xl bg-gradient-to-r from-blue-200/30 to-purple-200/30 text-center">
              <h3 className="text-lg font-semibold mb-2">
                {t('Recent Trend', 'Tendencia Reciente')} 
                {trend === 'improving' ? ' 📈' : trend === 'concerning' ? ' 📉' : ' ➖'}
              </h3>
              <p className="italic">
                {trend === 'improving' && t('You\'re moving in a positive direction!', '¡Te estás moviendo en dirección positiva!')}
                {trend === 'concerning' && t('Consider reaching out for extra support', 'Considera buscar apoyo adicional')}
                {trend === 'stable' && t('You\'re maintaining emotional stability', 'Mantienes estabilidad emocional')}
              </p>
            </div>

{/* Recent Mood History */}
            <div className="space-y-3">
              <h4 className="font-semibold">{t('Recent Check-ins', 'Registros Recientes')}</h4>
              {moodCheckins.slice(0, 10).map(checkin => {
                const moodEmoji = {
                  good: '😊', meh: '😐', sad: '😢', 
                  angry: '😡', tired: '😔', unsure: '❓'
                }
                return (
                  <div key={checkin._id} className="flex justify-between items-center p-3 rounded-lg bg-white/20">
                    <div className="flex items-center gap-3">
                      <span className="text-2xl">{moodEmoji[checkin.mood]}</span>
                      <span className="capitalize font-medium">{checkin.mood}</span>
                    </div>
                    <span className="text-sm opacity-70">
                      {new Date(checkin.timestamp).toLocaleDateString()}
                    </span>
                  </div>
                )
              })}
            </div>
          </div>
        </div>
      </div>
    )
  }

// Affirmations Screen
  if (currentScreen === 'affirmations') {
    return (
      <div className={baseClasses}>
        <div className="container mx-auto px-4 py-6">
          <button 
            onClick={() => setCurrentScreen('welcome')}
            className="mb-6 px-4 py-2 rounded-xl bg-white/20 border-2 border-white/30"
          >
            ← {t('Back', 'Volver')}
          </button>

<div className={cardClasses}>
            <h2 className="text-2xl font-bold text-center mb-6">
              💪 {t('Your Affirmations', 'Tus Afirmaciones')}
            </h2>

<div className="space-y-4">
              {affirmations.map(affirmation => (
                <div key={affirmation._id} className="p-4 rounded-xl bg-gradient-to-r from-yellow-200/20 to-orange-200/20 border border-yellow-300/30">
                  <div className="flex justify-between items-start">
                    <p className="text-lg italic leading-relaxed flex-1">
                      "{language === 'es' ? affirmation.textEs : affirmation.textEn}"
                    </p>
                    <button 
                      onClick={() => toggleFavoriteAffirmation(affirmation)}
                      className="ml-3 text-2xl"
                    >
                      {affirmation.isFavorite ? '⭐' : '☆'}
                    </button>
                  </div>
                  <p className="text-sm opacity-70 mt-2 capitalize">{affirmation.category}</p>
                </div>
              ))}
              
              {affirmations.length === 0 && (
                <div className="text-center py-8">
                  <p className="text-lg opacity-70">
                    {t('Your personal affirmations will appear here', 'Tus afirmaciones personales aparecerán aquí')}
                  </p>
                  <p className="text-sm mt-2">
                    {t('Generate demo content to see sample affirmations', 'Genera contenido de demo para ver afirmaciones de ejemplo')}
                  </p>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    )
  }

// Voice Reminders Screen
  if (currentScreen === 'voice-reminders') {
    return (
      <div className={baseClasses}>
        <div className="container mx-auto px-4 py-6">
          <button 
            onClick={() => setCurrentScreen('welcome')}
            className="mb-6 px-4 py-2 rounded-xl bg-white/20 border-2 border-white/30"
          >
            ← {t('Back', 'Volver')}
          </button>

<div className={cardClasses}>
            <h2 className="text-2xl font-bold text-center mb-6">
              🎤 {t('My Voice to Me', 'Mi Voz para Mí')}
            </h2>
            
            <p className="text-center italic mb-6 opacity-80">
              {t('Record messages of encouragement for your future self', 'Graba mensajes de ánimo para tu futuro yo')}
            </p>

{/* Recording Interface */}
            <div className="mb-6 p-4 rounded-xl bg-gradient-to-r from-pink-200/20 to-purple-200/20 text-center">
              <button 
                onClick={() => setIsRecording(!isRecording)}
                className={`w-20 h-20 rounded-full text-4xl border-4 transition-all duration-300 ${
                  isRecording 
                    ? 'bg-red-500 border-red-300 text-white animate-pulse' 
                    : 'bg-white/30 border-white/50 hover:bg-white/50'
                }`}
              >
                {isRecording ? '⏹️' : '🎤'}
              </button>
              <p className="mt-3 font-semibold">
                {isRecording 
                  ? t('Recording... Tap to stop', 'Grabando... Toca para parar')
                  : t('Tap to record', 'Toca para grabar')
                }
              </p>
            </div>

{/* Voice Reminders List */}
            <div className="space-y-3">
              <h4 className="font-semibold">{t('Your Voice Messages', 'Tus Mensajes de Voz')}</h4>
              {voiceReminders.map(reminder => (
                <div key={reminder._id} className="p-3 rounded-lg bg-white/20 border border-white/30 flex items-center justify-between">
                  <div>
                    <p className="font-medium">
                      {t('Voice Message', 'Mensaje de Voz')} #{reminder._id.slice(-4)}
                    </p>
                    <p className="text-sm opacity-70">
                      {new Date(reminder.timestamp).toLocaleDateString()}
                    </p>
                  </div>
                  <button className="text-3xl">▶️</button>
                </div>
              ))}
              
              {voiceReminders.length === 0 && (
                <div className="text-center py-6">
                  <p className="opacity-70">
                    {t('No voice reminders yet. Record your first message!', 'No hay recordatorios de voz aún. ¡Graba tu primer mensaje!')}
                  </p>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    )
  }

// Journal Screen (Enhanced)
  if (currentScreen === 'journal') {
    return (
      <div className={baseClasses}>
        <div className="container mx-auto px-4 py-6">
          <button 
            onClick={() => setCurrentScreen('welcome')}
            className="mb-6 px-4 py-2 rounded-xl bg-white/20 border-2 border-white/30"
          >
            ← {t('Back', 'Volver')}
          </button>

<div className={cardClasses}>
            <h2 className="text-2xl font-bold mb-6">
              📝 {t('Your Sacred Journal', 'Tu Diario Sagrado')}
            </h2>
            
            <form onSubmit={submitJournal} className="space-y-4">
              <textarea
                value={newJournal.content}
                onChange={(e) => mergeJournal({ content: e.target.value })}
                placeholder={t(
                  'This is your safe haven for thoughts, dreams, fears, and hopes. Write freely...',
                  'Este es tu refugio seguro para pensamientos, sueños, miedos y esperanzas. Escribe libremente...'
                )}
                className={`w-full h-48 p-4 rounded-xl border-2 resize-none ${
                  isDarkMode 
                    ? 'bg-purple-800/50 border-purple-400/30 text-purple-100 placeholder-purple-300'
                    : 'bg-white/70 border-rose-200/50 text-rose-800 placeholder-rose-500'
                }`}
              />
              
              <div className="flex justify-between items-center">
                <select
                  value={newJournal.mood}
                  onChange={(e) => mergeJournal({ mood: e.target.value })}
                  className={`px-3 py-2 rounded-lg ${
                    isDarkMode ? 'bg-purple-700 text-purple-100' : 'bg-white text-rose-800'
                  }`}
                >
                  <option value="">{t('Select mood (optional)', 'Seleccionar ánimo (opcional)')}</option>
                  <option value="peaceful">{t('Peaceful', 'Pacífico')}</option>
                  <option value="hopeful">{t('Hopeful', 'Esperanzado')}</option>
                  <option value="struggling">{t('Struggling', 'Luchando')}</option>
                  <option value="grateful">{t('Grateful', 'Agradecido')}</option>
                  <option value="confused">{t('Confused', 'Confundido')}</option>
                </select>
                
                <button type="submit" className={`${buttonClasses} px-6`}>
                  {t('Save Entry', 'Guardar Entrada')}
                </button>
              </div>
            </form>
          </div>

{/* Previous Journal Entries */}
          {journalEntries.length > 0 && (
            <div className={`${cardClasses} mt-6`}>
              <h3 className="font-semibold mb-4">{t('Your Journey Entries', 'Entradas de Tu Viaje')}</h3>
              <div className="space-y-4 max-h-64 overflow-y-auto">
                {journalEntries.slice(0, 5).map(entry => (
                  <div key={entry._id} className="p-3 rounded-lg bg-white/20 border border-white/30">
                    <p className="text-sm line-clamp-4 leading-relaxed">{entry.content}</p>
                    <div className="flex justify-between items-center mt-2">
                      {entry.mood && (
                        <span className="text-xs px-2 py-1 rounded-full bg-white/30 capitalize">
                          {entry.mood}
                        </span>
                      )}
                      <span className="text-xs opacity-70">
                        {new Date(entry.timestamp).toLocaleDateString()}
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    )
  }

// Encouragement Screen (Enhanced)  
  if (currentScreen === 'encouragement') {
    return (
      <div className={baseClasses}>
        <div className="container mx-auto px-4 py-6">
          <button 
            onClick={() => setCurrentScreen('welcome')}
            className="mb-6 px-4 py-2 rounded-xl bg-white/20 border-2 border-white/30"
          >
            ← {t('Back', 'Volver')}
          </button>

<div className={`${cardClasses} text-center mb-6`}>
            <h2 className="text-3xl font-bold mb-6">
              ✨ {t('Light for Your Path', 'Luz para Tu Camino')}
            </h2>
            <div className="text-6xl mb-6 animate-bounce">💖</div>
            
            {encouragements.length > 0 ? (
              <div className="space-y-6">
                {encouragements.slice(0, 3).map(enc => (
                  <div key={enc._id} className="p-6 rounded-2xl bg-gradient-to-r from-yellow-200/20 to-orange-200/20 border border-yellow-300/30">
                    <p className="text-xl italic leading-relaxed font-light">
                      "{language === 'es' ? enc.messageEs : enc.messageEn}"
                    </p>
                    {enc.category && (
                      <div className="mt-4 text-sm opacity-70 uppercase tracking-wider">
                        — {enc.category} —
                      </div>
                    )}
                  </div>
                ))}
              </div>
            ) : (
              <div className="space-y-6">
                <div className="p-6 rounded-2xl bg-gradient-to-r from-yellow-200/20 to-orange-200/20">
                  <p className="text-xl italic leading-relaxed">
                    {t(
                      '"You are a warrior, not a worrier. Every storm you have weathered has made you stronger."',
                      '"Eres un guerrero, no un preocupón. Cada tormenta que has enfrentado te ha hecho más fuerte."'
                    )}
                  </p>
                </div>
                <div className="p-6 rounded-2xl bg-gradient-to-r from-blue-200/20 to-purple-200/20">
                  <p className="text-lg italic leading-relaxed opacity-90">
                    {t(
                      '"Your current chapter is not your final story. Keep writing."',
                      '"Tu capítulo actual no es tu historia final. Sigue escribiendo."'
                    )}
                  </p>
                </div>
              </div>
            )}
          </div>

<div className="text-center space-y-3">
            <button 
              onClick={() => setCurrentScreen('mood')}
              className={buttonClasses}
            >
              {t('Share How You Feel', 'Comparte Cómo Te Sientes')}
            </button>
            <button 
              onClick={() => setCurrentScreen('peer-wall')}
              className={smallButtonClasses}
            >
              {t('Connect with Community', 'Conecta con la Comunidad')}
            </button>
          </div>
        </div>
      </div>
    )
  }

// Help Screen (Enhanced)
  if (currentScreen === 'help') {
    return (
      <div className={baseClasses}>
        <div className="container mx-auto px-4 py-6">
          <button 
            onClick={() => setCurrentScreen('welcome')}
            className="mb-6 px-4 py-2 rounded-xl bg-white/20 border-2 border-white/30"
          >
            ← {t('Back', 'Volver')}
          </button>

<div className={cardClasses}>
            <h2 className="text-3xl font-bold mb-6 text-center text-red-500">
              🆘 {t('You Are Not Alone - Help is Here', 'No Estás Solo - La Ayuda Está Aquí')}
            </h2>
            
            <div className="space-y-6">
              {/* Crisis Support */}
              <div className="p-6 rounded-2xl bg-red-50 border-4 border-red-200">
                <h3 className="font-bold text-red-700 mb-4 text-xl">
                  {t('Immediate Crisis Support', 'Apoyo Inmediato en Crisis')}
                </h3>
                <p className="text-red-600 mb-4 font-medium">
                  {t('24/7 confidential, professional support', 'Apoyo profesional confidencial 24/7')}
                </p>
                <div className="space-y-3">
                  <a href="tel:988" className="block p-4 bg-red-600 text-white rounded-2xl text-center font-bold text-lg shadow-lg">
                    📞 988 - {t('Crisis Lifeline', 'Línea de Crisis')}
                    <br/><span className="text-sm font-normal">{t('Press 2 for Spanish', 'Presiona 2 para Español')}</span>
                  </a>
                  <a href="tel:1-888-628-9454" className="block p-4 bg-red-500 text-white rounded-2xl text-center font-bold">
                    📞 1-888-628-9454 - {t('Spanish Crisis Line', 'Línea de Crisis en Español')}
                  </a>
                  <a href="sms:741741" className="block p-4 bg-red-400 text-white rounded-2xl text-center font-bold">
                    📱 {t('Text HOME to 741741', 'Envía CASA al 741741')}
                    <br/><span className="text-sm font-normal">{t('Crisis Text Line', 'Línea de Texto de Crisis')}</span>
                  </a>
                </div>
              </div>

{/* Mental Health */}
              <div className="p-6 rounded-2xl bg-blue-50 border-4 border-blue-200">
                <h3 className="font-bold text-blue-700 mb-4 text-xl">
                  {t('Mental Health Resources', 'Recursos de Salud Mental')}
                </h3>
                <div className="space-y-3">
                  <a href="tel:1-800-662-4357" className="block p-4 bg-blue-600 text-white rounded-2xl text-center font-bold">
                    📞 1-800-662-HELP (4357)
                    <br/><span className="text-sm font-normal">SAMHSA {t('National Helpline', 'Línea Nacional de Ayuda')}</span>
                  </a>
                  <p className="text-blue-600 text-center">
                    {t('Free, confidential treatment referrals and information services', 'Servicios de información y referencias de tratamiento gratuitos y confidenciales')}
                  </p>
                </div>
              </div>

{/* Financial & Basic Needs */}
              <div className="p-6 rounded-2xl bg-green-50 border-4 border-green-200">
                <h3 className="font-bold text-green-700 mb-4 text-xl">
                  {t('Financial & Basic Needs', 'Necesidades Financieras y Básicas')}
                </h3>
                <div className="space-y-3">
                  <a href="tel:211" className="block p-4 bg-green-600 text-white rounded-2xl text-center font-bold text-lg">
                    📞 2-1-1
                  </a>
                  <p className="text-green-600 text-center">
                    {t('Food assistance, housing, employment, healthcare, and local resources', 'Asistencia alimentaria, vivienda, empleo, atención médica y recursos locales')}
                  </p>
                </div>
              </div>

{/* Community Resources */}
              <div className="p-4 rounded-2xl bg-purple-50 border-2 border-purple-200">
                <h3 className="font-bold text-purple-700 mb-3">
                  {t('Community Organizations', 'Organizaciones Comunitarias')}
                </h3>
                <div className="grid grid-cols-1 gap-2 text-sm">
                  <div className="p-2 bg-white/70 rounded-lg">
                    🏥 {t('Local health centers & clinics', 'Centros y clínicas de salud locales')}
                  </div>
                  <div className="p-2 bg-white/70 rounded-lg">
                    🏠 {t('Housing assistance programs', 'Programas de asistencia de vivienda')}
                  </div>
                  <div className="p-2 bg-white/70 rounded-lg">
                    🍽️ {t('Food banks & soup kitchens', 'Bancos de comida y comedores populares')}
                  </div>
                  <div className="p-2 bg-white/70 rounded-lg">
                    👨‍👩‍👧‍👦 {t('Family support services', 'Servicios de apoyo familiar')}
                  </div>
                </div>
              </div>

{/* Hope Message */}
              <div className="text-center mt-8 p-6 rounded-2xl bg-gradient-to-r from-yellow-200/30 to-orange-200/30">
                <h3 className="text-2xl font-bold mb-4 text-orange-600">
                  {t('Remember:', 'Recuerda:')}
                </h3>
                <p className="text-xl font-semibold mb-4">
                  {t('You matter. Your life has immeasurable value.', 'Tú importas. Tu vida tiene un valor incalculable.')}
                </p>
                <p className="text-lg italic">
                  {t(
                    'Seeking help is courage, not weakness. You are taking the brave step toward healing.',
                    'Buscar ayuda es valentía, no debilidad. Estás dando el paso valiente hacia la sanación.'
                  )}
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }

return null
}</article></body></html>

Aquí Estoy

✨ Today's Win