// Pau Fit — Tab screens (Home, Retos, Recetas, Comunidad, Perfil)

const { useState, useRef, useEffect } = React;

function timeShort() {
  const d = new Date();
  return `${String(d.getHours()).padStart(2,'0')}:${String(d.getMinutes()).padStart(2,'0')}`;
}

// ═════════════════════════════════════════════════════════════
// HOME
// ═════════════════════════════════════════════════════════════
function HomeScreen({ theme, isPremium, nav }) {
  const T = theme;
  const [mood, setMood] = useState(null);
  const [moodNote, setMoodNote] = useState('');
  const [moodSaved, setMoodSaved] = useState(false);
  const [moodPublic, setMoodPublic] = useState(false);
  const [meals, setMeals] = useState(MEAL_LOG_TODAY);
  const active = RETOS.find(r => r.enrolled);

  function openAddMeal() {
    nav.openModal(<AddMealModal
      open T={T} accent={T.accent}
      onClose={() => nav.closeModal()}
      onSave={(m) => {
        setMeals(arr => [...arr, { meal: m.meal, text: m.text, time: m.time || timeShort(), photo: m.photo }]);
        nav.toast(m.saved ? 'Comida anotada + guardada como frecuente' : 'Comida anotada 💗', { icon: '🍓' });
      }}
    />);
  }

  function saveMood() {
    if (!mood) return;
    setMoodSaved(true);
    nav.toast(moodPublic ? 'Mood compartido en comunidad 💗' : 'Mood guardado · privado 🔒', { icon: '✓' });
  }
  const popular = RETOS.filter(r => r.id !== active?.id).slice(0, 4);
  const featured = RECETAS[0];
  const todayProgress = active ? active.completed.length / active.days : 0;

  return (
    <div style={{ paddingBottom: 110 }}>
      {/* Greeting */}
      <div style={{ padding: '8px 22px 0' }}>
        <div style={{
          fontFamily: 'Poppins, system-ui', fontSize: 13, fontWeight: 500,
          color: T.muted, letterSpacing: 0.3, textTransform: 'uppercase',
        }}>Martes, 19 de mayo</div>
        <div style={{
          fontFamily: 'Poppins, system-ui', fontSize: 34, fontWeight: 600,
          color: T.text, lineHeight: 1.1, marginTop: 4, letterSpacing: -0.8,
        }}>Hola {STATS.name},<br/>
          <span style={{ color: T.accent, fontStyle: 'italic', fontWeight: 500 }}>brilla hoy ✨</span>
        </div>
      </div>

      {/* Streak + Week summary card */}
      <div style={{
        margin: '20px 18px 0',
        padding: '18px 20px',
        background: T.card,
        borderRadius: 22,
        border: T.border,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div>
            <div style={{ fontFamily: 'Poppins', fontSize: 11, color: T.muted, fontWeight: 500, letterSpacing: 0.6, textTransform: 'uppercase' }}>Racha actual</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 4 }}>
              <span style={{ fontFamily: 'Poppins', fontSize: 32, fontWeight: 700, color: T.text, letterSpacing: -1 }}>{STATS.streak}</span>
              <span style={{ fontFamily: 'Poppins', fontSize: 13, color: T.muted }}>días seguidos</span>
            </div>
          </div>
          <StreakFlame count="" color={T.accent}/>
        </div>
        {/* Week dots */}
        <div style={{ display: 'flex', gap: 6, marginTop: 14, justifyContent: 'space-between' }}>
          {['L','M','X','J','V','S','D'].map((d, i) => {
            const done = STATS.weekProgress[i];
            const isToday = i === 4;
            return (
              <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                <span style={{ fontFamily: 'Poppins', fontSize: 10, fontWeight: 500, color: isToday ? T.accent : T.muted }}>{d}</span>
                <div style={{
                  width: 28, height: 28, borderRadius: 999,
                  background: done ? T.accent : T.subtle,
                  border: isToday && !done ? `1.5px solid ${T.accent}` : 'none',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>{done ? Icon.check('#fff', 14) : null}</div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Active reto */}
      {active && (
        <div onClick={() => nav.go('reto', active.id)} style={{
          margin: '14px 18px 0',
          padding: '20px',
          background: T.dark ? '#1F1B17' : '#2D2A26',
          borderRadius: 22, cursor: 'pointer', position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', top: -30, right: -30, width: 160, height: 160,
            borderRadius: '50%', background: `radial-gradient(circle, ${active.color}55, transparent 70%)`,
          }}/>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, position: 'relative' }}>
            <ProgressRing value={todayProgress} size={64} stroke={5} color={active.color} track="rgba(255,255,255,0.08)">
              <span style={{ fontFamily: 'Poppins', fontSize: 14, fontWeight: 700, color: '#fff' }}>{Math.round(todayProgress*100)}%</span>
            </ProgressRing>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'Poppins', fontSize: 10, color: '#C9956B', fontWeight: 600, letterSpacing: 1.2, textTransform: 'uppercase' }}>Reto activo</div>
              <div style={{ fontFamily: 'Poppins', fontSize: 18, fontWeight: 600, color: '#fff', marginTop: 2, letterSpacing: -0.3 }}>{active.title}</div>
              <div style={{ fontFamily: 'Poppins', fontSize: 12, color: 'rgba(255,255,255,0.55)', marginTop: 2 }}>Día {active.currentDay} de {active.days} · {VIDEOS_BY_DAY[active.currentDay]?.length || 0} videos hoy</div>
            </div>
          </div>
          <button style={{
            marginTop: 16, width: '100%', padding: '12px',
            border: 'none', borderRadius: 14, cursor: 'pointer',
            background: active.color, color: '#fff',
            fontFamily: 'Poppins', fontSize: 14, fontWeight: 600,
          }}>Continuar día {active.currentDay} →</button>
        </div>
      )}

      {/* Diario de hoy: mood + comidas */}
      <SectionHeader title="Diario de hoy" T={T}/>
      <div style={{
        margin: '0 18px', padding: 16, background: T.card, borderRadius: 22, border: T.border,
      }}>
        <div style={{ fontFamily: 'Poppins', fontSize: 11, color: T.muted, fontWeight: 600, letterSpacing: 0.5, textTransform: 'uppercase' }}>¿Cómo te sientes?</div>
        <div style={{ display: 'flex', gap: 6, marginTop: 10, justifyContent: 'space-between' }}>
          {MOODS_LABELS.map(m => (
            <button key={m.id} onClick={() => { setMood(m.id); setMoodSaved(false); }} style={{
              flex: 1, padding: '10px 4px', border: 'none', cursor: 'pointer',
              borderRadius: 14, background: mood === m.id ? `${T.accent}18` : 'transparent',
              border: mood === m.id ? `1.5px solid ${T.accent}` : '1.5px solid transparent',
              transition: 'all 200ms ease',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
            }}>
              <span style={{ fontSize: 22, filter: mood && mood !== m.id ? 'grayscale(0.4) opacity(0.6)' : 'none' }}>{m.emoji}</span>
              <span style={{
                fontFamily: 'Poppins', fontSize: 9, fontWeight: 500,
                color: mood === m.id ? T.accent : T.muted,
              }}>{m.label}</span>
            </button>
          ))}
        </div>

        {mood && (
          <div style={{ marginTop: 12, animation: 'fade-in 240ms ease' }}>
            <textarea
              value={moodNote} onChange={(e) => setMoodNote(e.target.value)}
              placeholder="Cuéntanos algo (opcional)…"
              style={{
                width: '100%', minHeight: 56, padding: '10px 14px',
                border: T.border, borderRadius: 12, background: T.bg,
                fontFamily: 'Poppins', fontSize: 13, color: T.text, resize: 'none', outline: 'none',
              }}/>
            {!moodSaved && (
              <div style={{
                marginTop: 8, padding: '8px 12px',
                background: T.bg, borderRadius: 10, border: T.border,
                display: 'flex', alignItems: 'center', gap: 8,
              }}>
                <span style={{ fontSize: 14 }}>{moodPublic ? '👥' : '🔒'}</span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: 'Poppins', fontSize: 11, fontWeight: 600, color: T.text }}>{moodPublic ? 'Pública en comunidad' : 'Privada (solo tú)'}</div>
                  <div style={{ fontFamily: 'Poppins', fontSize: 9, color: T.muted, marginTop: 1 }}>{moodPublic ? 'Otras chicas la verán en el feed' : 'Nadie más la verá'}</div>
                </div>
                <button onClick={() => setMoodPublic(!moodPublic)} style={{
                  width: 36, height: 21, borderRadius: 999, border: 'none', cursor: 'pointer',
                  background: moodPublic ? T.accent : 'rgba(0,0,0,0.12)', position: 'relative',
                  transition: 'background 200ms ease',
                }}>
                  <div style={{
                    position: 'absolute', top: 2.5, left: moodPublic ? 17.5 : 2.5,
                    width: 16, height: 16, borderRadius: 999, background: '#fff',
                    transition: 'left 200ms ease', boxShadow: '0 1px 3px rgba(0,0,0,0.15)',
                  }}/>
                </button>
              </div>
            )}
            {!moodSaved ? (
              <button onClick={saveMood} style={{
                marginTop: 8, width: '100%', padding: '10px',
                border: 'none', borderRadius: 10, cursor: 'pointer',
                background: T.accent, color: '#fff',
                fontFamily: 'Poppins', fontSize: 12, fontWeight: 600,
              }}>Guardar</button>
            ) : (
              <div style={{
                marginTop: 8, padding: '8px 12px', borderRadius: 10,
                background: 'rgba(168,197,160,0.18)',
                fontFamily: 'Poppins', fontSize: 11, fontWeight: 600, color: '#5C7A56',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              }}>✓ Guardado · {moodPublic ? 'Pública en comunidad' : 'Privada'}</div>
            )}
          </div>
        )}

        <div style={{
          marginTop: 16, paddingTop: 14,
          borderTop: T.dark ? '0.5px solid rgba(255,255,255,0.06)' : '0.5px solid rgba(0,0,0,0.05)',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <span style={{ fontFamily: 'Poppins', fontSize: 11, color: T.muted, fontWeight: 600, letterSpacing: 0.5, textTransform: 'uppercase' }}>Mis comidas</span>
          </div>
          <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
            {meals.map((m, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{
                  width: 38, padding: '4px 0', borderRadius: 8, textAlign: 'center', flexShrink: 0,
                  background: T.subtle, fontFamily: 'Poppins', fontSize: 10, color: T.text, fontWeight: 600, letterSpacing: 0.3,
                }}>{m.time}</span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontFamily: 'Poppins', fontSize: 10, color: T.accent, fontWeight: 600, letterSpacing: 0.3, textTransform: 'uppercase' }}>{m.meal}</div>
                  <div style={{ fontFamily: 'Poppins', fontSize: 12, color: T.text, marginTop: 1, fontWeight: 500 }}>{m.text}</div>
                </div>
                {m.photo && (
                  <div style={{
                    width: 36, height: 36, borderRadius: 8, flexShrink: 0,
                    background: `linear-gradient(135deg, ${T.accent}30, ${T.subtle})`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16,
                  }}>🍽️</div>
                )}
              </div>
            ))}
            <button onClick={openAddMeal} style={{
              padding: '10px', border: `1.5px dashed ${T.muted}55`, borderRadius: 12,
              background: 'transparent', cursor: 'pointer',
              fontFamily: 'Poppins', fontSize: 12, fontWeight: 500, color: T.muted,
              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            }}>＋ Anotar comida</button>
          </div>
        </div>
      </div>

      {/* Retos populares */}
      <SectionHeader title="Retos populares" action="Ver todos" onAction={() => nav.tab('retos')} T={T}/>
      <div style={{
        display: 'flex', gap: 12, padding: '0 18px 4px',
        overflowX: 'auto', scrollSnapType: 'x mandatory',
        scrollbarWidth: 'none',
      }} className="hide-scroll">
        {popular.map(r => (
          <div key={r.id} onClick={() => nav.go('reto', r.id)} style={{
            flexShrink: 0, width: 184, cursor: 'pointer',
            background: T.card, borderRadius: 20, padding: 12,
            scrollSnapAlign: 'start', border: T.border,
            display: 'flex', flexDirection: 'column', gap: 8,
          }}>
            <RetoCover reto={r} style={{ aspectRatio: '16 / 11' }}/>
            <div style={{ flex: 1, padding: '2px 4px 0' }}>
              <div style={{ fontFamily: 'Poppins', fontSize: 15, fontWeight: 600, color: T.text, letterSpacing: -0.2, lineHeight: 1.2 }}>{r.title}</div>
              <div style={{ fontFamily: 'Poppins', fontSize: 11, color: T.muted, marginTop: 4 }}>{r.subtitle} · {r.minPerDay} min/día</div>
            </div>
            <div style={{ padding: '0 4px 4px' }}><RetoBadge tag={r.tag} isPremium={isPremium}/></div>
          </div>
        ))}
      </div>

      {/* Receta del día */}
      <SectionHeader title="Receta del día" action="Recetas" onAction={() => nav.tab('recetas')} T={T}/>
      <div onClick={() => nav.go('receta', featured.id)} style={{
        margin: '0 18px', padding: 12, background: T.card, borderRadius: 20,
        display: 'flex', alignItems: 'center', gap: 14, cursor: 'pointer',
        border: T.border,
      }}>
        <RecipeImage receta={featured} T={T} style={{ width: 76, height: 76, borderRadius: 16, flexShrink: 0 }}/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontFamily: 'Poppins', fontSize: 10, color: T.muted, fontWeight: 500, letterSpacing: 0.6, textTransform: 'uppercase' }}>{featured.category}</div>
          <div style={{ fontFamily: 'Poppins', fontSize: 15, fontWeight: 600, color: T.text, marginTop: 2, letterSpacing: -0.2 }}>{featured.title}</div>
          <div style={{ fontFamily: 'Poppins', fontSize: 11, color: T.muted, marginTop: 4 }}>{featured.kcal} kcal · {featured.minutes} min</div>
        </div>
        {Icon.chevR(T.muted, 9)}
      </div>

      {/* Premium banner */}
      {!isPremium && (
        <div onClick={() => nav.go('paywall')} style={{
          margin: '20px 18px 0', padding: '20px',
          background: 'linear-gradient(135deg, #2D2A26 0%, #3A332C 100%)',
          borderRadius: 22, cursor: 'pointer', position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', top: -40, right: -20, width: 140, height: 140,
            background: 'radial-gradient(circle, rgba(201,149,107,0.35), transparent 70%)',
          }}/>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, position: 'relative' }}>
            {Icon.diamond(28, '#C9956B')}
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'Poppins', fontSize: 16, fontWeight: 600, color: '#F5E6C8', letterSpacing: -0.2 }}>Desbloquea todo</div>
              <div style={{ fontFamily: 'Poppins', fontSize: 12, color: 'rgba(245,230,200,0.7)', marginTop: 2 }}>Todos los retos premium + planes</div>
            </div>
          </div>
          <button style={{
            marginTop: 14, width: '100%', padding: '12px',
            background: '#C9956B', color: '#2D2A26', border: 'none', borderRadius: 12,
            fontFamily: 'Poppins', fontSize: 13, fontWeight: 600, cursor: 'pointer',
          }}>Prueba 7 días gratis</button>
        </div>
      )}
    </div>
  );
}

function SectionHeader({ title, action, onAction, T }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
      padding: '24px 22px 12px',
    }}>
      <span style={{ fontFamily: 'Poppins', fontSize: 18, fontWeight: 600, color: T.text, letterSpacing: -0.3 }}>{title}</span>
      {action && (
        <button onClick={onAction} style={{
          border: 'none', background: 'transparent', cursor: 'pointer',
          fontFamily: 'Poppins', fontSize: 12, fontWeight: 500, color: T.accent,
        }}>{action}</button>
      )}
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// RETOS (con sub-tabs Retos | Rutinas)
// ═════════════════════════════════════════════════════════════
function RetosScreen({ theme, isPremium, nav }) {
  const T = theme;
  const [sub, setSub] = useState('retos');

  return (
    <div style={{ paddingBottom: 110 }}>
      <div style={{ padding: '8px 22px 0' }}>
        <div style={{ fontFamily: 'Poppins', fontSize: 34, fontWeight: 600, color: T.text, letterSpacing: -0.8 }}>Entreno</div>
        <div style={{ fontFamily: 'Poppins', fontSize: 14, color: T.muted, marginTop: 2 }}>Retos guiados y rutinas 💗</div>
      </div>

      {/* Segmented */}
      <div style={{
        margin: '20px 18px 0', padding: 4,
        background: T.subtle, borderRadius: 12, display: 'flex', position: 'relative',
      }}>
        <div style={{
          position: 'absolute', top: 4, bottom: 4,
          left: sub === 'retos' ? 4 : 'calc(50% + 0px)',
          width: 'calc(50% - 4px)',
          background: T.card, borderRadius: 9,
          boxShadow: '0 1px 3px rgba(0,0,0,0.06)',
          transition: 'left 240ms cubic-bezier(.2,.8,.2,1)',
        }}/>
        {[
          { id: 'retos', label: 'Retos guiados' },
          { id: 'rutinas', label: 'Rutinas' },
        ].map(s => (
          <button key={s.id} onClick={() => setSub(s.id)} style={{
            flex: 1, padding: '8px', border: 'none', background: 'transparent', cursor: 'pointer',
            position: 'relative', zIndex: 1,
            fontFamily: 'Poppins', fontSize: 12, fontWeight: 600,
            color: sub === s.id ? T.text : T.muted, letterSpacing: -0.1,
          }}>{s.label}</button>
        ))}
      </div>

      {sub === 'retos' ? <RetosList T={T} isPremium={isPremium} nav={nav}/> : <RutinasList T={T} isPremium={isPremium} nav={nav}/>}
    </div>
  );
}

function RetosList({ T, isPremium, nav }) {
  const [filter, setFilter] = useState('Todos');
  const filters = ['Todos', 'Gratis', 'Premium'];
  const filtered = RETOS.filter(r => {
    if (filter === 'Gratis') return r.tag === 'GRATIS';
    if (filter === 'Premium') return r.tag === 'PRO';
    return true;
  });

  return (
    <div>
      <div style={{ display: 'flex', gap: 8, padding: '18px 22px 4px' }}>
        {filters.map(f => <Pill key={f} active={filter===f} onClick={() => setFilter(f)} dark={T.dark} color={T.accent}>{f}</Pill>)}
      </div>
      <div style={{ padding: '14px 18px 0', display: 'flex', flexDirection: 'column', gap: 14 }}>
        {filtered.map(r => <RetoCard key={r.id} reto={r} T={T} isPremium={isPremium} onClick={() => nav.go('reto', r.id)}/>)}
      </div>
    </div>
  );
}

function RutinasList({ T, isPremium, nav }) {
  const groups = ['Todos', ...new Set(RUTINAS.map(r => r.muscle))];
  const [g, setG] = useState('Todos');
  const list = RUTINAS.filter(r => g === 'Todos' || r.muscle === g);

  return (
    <div>
      <div style={{ display: 'flex', gap: 8, padding: '18px 22px 4px', overflowX: 'auto' }} className="hide-scroll">
        {groups.map(f => <Pill key={f} active={g===f} onClick={() => setG(f)} dark={T.dark} color={T.accent}>{f}</Pill>)}
      </div>
      <div style={{ padding: '14px 18px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {list.map(r => {
          const locked = r.tag === 'PRO' && !isPremium;
          return (
            <div key={r.id} onClick={() => nav.go(locked ? 'paywall' : 'rutina', r.id)} style={{
              background: T.card, borderRadius: 18, padding: 12, cursor: 'pointer',
              display: 'flex', gap: 12, alignItems: 'center', border: T.border,
              position: 'relative', overflow: 'hidden',
            }}>
              <div style={{
                width: 80, height: 70, borderRadius: 14, flexShrink: 0,
                background: `linear-gradient(135deg, ${T.subtle}, ${T.accent}40)`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 32, position: 'relative',
                filter: locked ? 'grayscale(0.5)' : 'none',
              }}>
                {r.emoji}
                <div style={{
                  position: 'absolute', bottom: 6, right: 6,
                  width: 22, height: 22, borderRadius: 999,
                  background: locked ? 'rgba(45,42,38,0.85)' : 'rgba(45,42,38,0.78)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', paddingLeft: locked ? 0 : 1,
                }}>{locked ? Icon.lock('#fff', 11) : Icon.play('#fff')}</div>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 3 }}>
                  <RetoBadge tag={r.tag} isPremium={isPremium}/>
                  <span style={{ fontFamily: 'Poppins', fontSize: 9, color: T.muted, fontWeight: 600, letterSpacing: 0.4 }}>· {r.muscle.toUpperCase()}</span>
                </div>
                <div style={{ fontFamily: 'Poppins', fontSize: 14, fontWeight: 600, color: T.text, letterSpacing: -0.2, lineHeight: 1.2 }}>{r.title}</div>
                <div style={{ display: 'flex', gap: 10, marginTop: 4 }}>
                  <span style={{ fontFamily: 'Poppins', fontSize: 11, color: T.muted, fontWeight: 500 }}>{r.minutes} min</span>
                  <span style={{ fontFamily: 'Poppins', fontSize: 11, color: T.muted, fontWeight: 500 }}>· {r.level}</span>
                  <span style={{ fontFamily: 'Poppins', fontSize: 11, color: T.muted, fontWeight: 500 }}>· {r.views} 👀</span>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function RetoCard({ reto, T, isPremium, onClick }) {
  const r = reto;
  return (
    <div onClick={onClick} style={{
      background: T.card, borderRadius: 22, padding: 12, cursor: 'pointer',
      display: 'flex', gap: 14, alignItems: 'center', border: T.border,
      position: 'relative', overflow: 'hidden',
    }}>
      <RetoCover reto={r} style={{ width: 92, height: 92, flexShrink: 0 }}/>
      <div style={{ flex: 1, minWidth: 0, padding: '2px 4px 2px 0' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
          <RetoBadge tag={r.tag} isPremium={isPremium}/>
          <span style={{ fontFamily: 'Poppins', fontSize: 10, color: T.muted, fontWeight: 500, letterSpacing: 0.4 }}>· {r.category.toUpperCase()}</span>
        </div>
        <div style={{ fontFamily: 'Poppins', fontSize: 17, fontWeight: 600, color: T.text, letterSpacing: -0.3 }}>{r.title}</div>
        <div style={{ display: 'flex', gap: 10, marginTop: 6 }}>
          <Stat label={r.subtitle} T={T}/>
          <Stat label={`${r.minPerDay} min/día`} T={T}/>
        </div>
      </div>
    </div>
  );
}

function Dots({ count = 5, color = '#D14C7A' }) {
  return (
    <span style={{ display: 'inline-flex', gap: 2 }}>
      {[0,1,2,3,4].map(i => (
        <span key={i} style={{
          width: 6, height: 6, borderRadius: 999,
          background: i < count ? color : 'rgba(0,0,0,0.08)',
        }}/>
      ))}
    </span>
  );
}

function Stat({ label, T }) {
  return <span style={{ fontFamily: 'Poppins', fontSize: 11, color: T.muted, fontWeight: 500 }}>{label}</span>;
}

// ═════════════════════════════════════════════════════════════
// COMIDAS (Planes + Recetas) — antes "Recetas"
// ═════════════════════════════════════════════════════════════
function RecetasScreen({ theme, isPremium, nav }) {
  const T = theme;
  const [sub, setSub] = useState('planes');
  return (
    <div style={{ paddingBottom: 110 }}>
      <div style={{ padding: '8px 22px 0' }}>
        <div style={{ fontFamily: 'Poppins', fontSize: 34, fontWeight: 600, color: T.text, letterSpacing: -0.8 }}>Comidas</div>
        <div style={{ fontFamily: 'Poppins', fontSize: 14, color: T.muted, marginTop: 2 }}>Planes completos y recetas sueltas 🍓</div>
      </div>

      {/* Segmented sub-tabs */}
      <div style={{
        margin: '20px 18px 0', padding: 4,
        background: T.subtle, borderRadius: 12, display: 'flex', position: 'relative',
      }}>
        <div style={{
          position: 'absolute', top: 4, bottom: 4,
          left: sub === 'planes' ? 4 : 'calc(50% + 0px)',
          width: 'calc(50% - 4px)',
          background: T.card, borderRadius: 9,
          boxShadow: '0 1px 3px rgba(0,0,0,0.06)',
          transition: 'left 240ms cubic-bezier(.2,.8,.2,1)',
        }}/>
        {[
          { id: 'planes', label: 'Planes de alimentación' },
          { id: 'recetas', label: 'Recetas' },
        ].map(s => (
          <button key={s.id} onClick={() => setSub(s.id)} style={{
            flex: 1, padding: '8px', border: 'none', background: 'transparent', cursor: 'pointer',
            position: 'relative', zIndex: 1,
            fontFamily: 'Poppins', fontSize: 12, fontWeight: 600,
            color: sub === s.id ? T.text : T.muted, letterSpacing: -0.1,
          }}>{s.label}</button>
        ))}
      </div>

      {sub === 'planes' && <PlanesList T={T} isPremium={isPremium} nav={nav}/>}
      {sub === 'recetas' && <RecetasList T={T} nav={nav}/>}
    </div>
  );
}

function PlanesList({ T, isPremium, nav }) {
  return (
    <div style={{ padding: '18px 18px 0', display: 'flex', flexDirection: 'column', gap: 14 }}>
      <div style={{
        margin: '0 4px 4px', padding: '14px 16px',
        background: `linear-gradient(135deg, ${T.accent}18, ${T.accent}08)`,
        borderRadius: 14, border: `0.5px solid ${T.accent}30`,
        display: 'flex', alignItems: 'center', gap: 10,
      }}>
        <span style={{ fontSize: 18 }}>💡</span>
        <span style={{ fontFamily: 'Poppins', fontSize: 12, color: T.text, fontWeight: 500, lineHeight: 1.4 }}>
          Los planes se sincronizan con tu reto activo. Combina entreno + comida para resultados reales.
        </span>
      </div>
      {PLANES.map(p => (
        <div key={p.id} onClick={() => nav.go('plan', p.id)} style={{
          background: T.card, borderRadius: 22, padding: 16, cursor: 'pointer',
          border: T.border, position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', top: -20, right: -20, width: 120, height: 120,
            borderRadius: '50%', background: `radial-gradient(circle, ${p.color}30, transparent 70%)`,
          }}/>
          <div style={{ display: 'flex', gap: 14, position: 'relative' }}>
            <div style={{
              width: 80, height: 80, borderRadius: 18, flexShrink: 0,
              background: `linear-gradient(135deg, ${p.bg}, ${p.color}66)`,
              display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 44,
            }}>{p.emoji}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4 }}>
                <RetoBadge tag={p.tag} isPremium={isPremium}/>
                <span style={{ fontFamily: 'Poppins', fontSize: 10, color: T.muted, fontWeight: 500, letterSpacing: 0.4 }}>· {p.objective.toUpperCase()}</span>
              </div>
              <div style={{ fontFamily: 'Poppins', fontSize: 16, fontWeight: 600, color: T.text, letterSpacing: -0.3, lineHeight: 1.2 }}>{p.title}</div>
              <div style={{ fontFamily: 'Poppins', fontSize: 11, color: T.accent, fontWeight: 600, marginTop: 6 }}>💗 {recommendsPercent(`${p.id}-plan`) || 98}% lo recomienda</div>
              <div style={{ display: 'flex', gap: 10, marginTop: 8 }}>
                <span style={{ fontFamily: 'Poppins', fontSize: 11, color: T.muted, fontWeight: 500 }}>{p.kcalDay} kcal/día</span>
                <span style={{ fontFamily: 'Poppins', fontSize: 11, color: T.muted, fontWeight: 500 }}>· {p.meals.length} comidas</span>
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

function RecetasList({ T, nav }) {
  const cats = ['Todas', 'Desayuno', 'Almuerzo', 'Snack', 'Cena'];
  const [cat, setCat] = useState('Todas');
  const [favs, setFavs] = useState(new Set());
  const toggleFav = (id, title) => {
    setFavs(prev => {
      const n = new Set(prev);
      if (n.has(id)) {
        n.delete(id);
        nav.toast(`Quitado de favoritos`, { icon: '🤍' });
      } else {
        n.add(id);
        nav.toast(`${title} guardado 💗`, { icon: '❤️' });
      }
      return n;
    });
  };
  const list = RECETAS.filter(r => cat === 'Todas' || r.category === cat);

  return (
    <div>
      <div style={{ display: 'flex', gap: 8, padding: '20px 18px 4px', overflowX: 'auto' }} className="hide-scroll">
        {cats.map(f => <Pill key={f} active={cat===f} onClick={() => setCat(f)} dark={T.dark} color={T.accent}>{f}</Pill>)}
      </div>

      <div style={{ padding: '16px 18px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
        {list.map(r => (
          <div key={r.id} onClick={() => nav.go('receta', r.id)} style={{
            background: T.card, borderRadius: 20, padding: 12, cursor: 'pointer', border: T.border,
            display: 'flex', flexDirection: 'column', gap: 8,
          }}>
            <div style={{ position: 'relative' }}>
              <RecipeImage receta={r} T={T} style={{ aspectRatio: '1 / 1' }}/>
              <button onClick={(e) => { e.stopPropagation(); toggleFav(r.id, r.title); }} style={{
                position: 'absolute', top: 8, right: 8,
                width: 30, height: 30, borderRadius: 999, border: 'none',
                background: 'rgba(255,255,255,0.85)',
                backdropFilter: 'blur(10px)', cursor: 'pointer',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
              }}>{Icon.heart(favs.has(r.id) ? '#D14C7A' : '#2D2A26', favs.has(r.id))}</button>
              {r.image && (
                <span style={{
                  position: 'absolute', top: 8, left: 8,
                  padding: '3px 8px', borderRadius: 6,
                  background: 'rgba(45,42,38,0.6)',
                  backdropFilter: 'blur(6px)',
                  fontFamily: 'Poppins', fontSize: 8, fontWeight: 600, color: '#fff',
                  letterSpacing: 0.6, textTransform: 'uppercase',
                }}>{r.minutes} min</span>
              )}
            </div>
            <div>
              <div style={{ fontFamily: 'Poppins', fontSize: 9, color: T.muted, fontWeight: 500, letterSpacing: 0.6, textTransform: 'uppercase' }}>{r.category}</div>
              <div style={{ fontFamily: 'Poppins', fontSize: 13, fontWeight: 600, color: T.text, marginTop: 2, letterSpacing: -0.2, lineHeight: 1.2 }}>{r.title}</div>
              <div style={{ fontFamily: 'Poppins', fontSize: 11, color: T.muted, marginTop: 4 }}>{r.kcal} kcal · {r.minutes} min</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// COMUNIDAD — testimonios + fotos compartidas
// ═════════════════════════════════════════════════════════════
function ComunidadScreen({ theme, nav }) {
  const T = theme;
  // Collect all testimonies across keys (flatten with origin)
  const allTestis = Object.entries(TESTIMONIES).flatMap(([key, arr]) =>
    arr.map(t => ({ ...t, origin: key }))
  );
  const featured = allTestis.slice(0, 5);
  const photoTestis = allTestis.filter(t => t.photo);

  return (
    <div style={{ paddingBottom: 110 }}>
      <div style={{ padding: '8px 22px 0' }}>
        <div style={{ fontFamily: 'Poppins', fontSize: 34, fontWeight: 600, color: T.text, letterSpacing: -0.8 }}>Comunidad</div>
        <div style={{ fontFamily: 'Poppins', fontSize: 14, color: T.muted, marginTop: 2 }}>Historias reales de chicas como ustedes 💗</div>
      </div>

      {/* Chat de la comunidad */}
      <div onClick={() => nav.go('chat')} style={{
        margin: '24px 18px 0', padding: '16px 18px',
        background: T.card, borderRadius: 18, border: T.border, cursor: 'pointer',
        display: 'flex', alignItems: 'center', gap: 14, position: 'relative', overflow: 'hidden',
      }}>
        <div style={{
          position: 'absolute', top: -20, right: -20, width: 100, height: 100,
          borderRadius: '50%', background: `radial-gradient(circle, ${T.accent}25, transparent 70%)`,
        }}/>
        <div style={{
          width: 52, height: 52, borderRadius: 14, flexShrink: 0, position: 'relative',
          background: `linear-gradient(135deg, ${T.accent}, ${T.accent}88)`,
          display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 26,
        }}>💬</div>
        <div style={{ flex: 1, position: 'relative' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ fontFamily: 'Poppins', fontSize: 15, fontWeight: 600, color: T.text, letterSpacing: -0.2 }}>Chat de la comunidad</span>
            <span style={{
              padding: '2px 6px', borderRadius: 5, background: T.accent, color: '#fff',
              fontFamily: 'Poppins', fontSize: 8, fontWeight: 700, letterSpacing: 0.4,
            }}>NUEVO</span>
          </div>
          <div style={{ fontFamily: 'Poppins', fontSize: 11, color: T.muted, marginTop: 2 }}>
            <span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: 999, background: '#A8C5A0', marginRight: 4 }}/>
            287 chicas en línea ahora
          </div>
        </div>
        {Icon.chevR(T.muted, 9)}
      </div>

      {/* Hashtag */}
      <div style={{
        margin: '20px 18px 0', padding: '14px 16px',
        background: `linear-gradient(135deg, ${T.accent}15, ${T.accent}05)`,
        borderRadius: 16, display: 'flex', alignItems: 'center', gap: 12,
        border: `0.5px solid ${T.accent}30`,
      }}>
        <span style={{ fontSize: 24 }}>💗</span>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: 'Poppins', fontSize: 13, fontWeight: 700, color: T.accent, fontStyle: 'italic' }}>#YoSiemprePuedo</div>
          <div style={{ fontFamily: 'Poppins', fontSize: 11, color: T.muted, marginTop: 1 }}>14,283 chicas en la comunidad</div>
        </div>
      </div>

      {/* Photos shared */}
      <div style={{ padding: '24px 22px 0', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <span style={{ fontFamily: 'Poppins', fontSize: 18, fontWeight: 600, color: T.text, letterSpacing: -0.3 }}>Fotos del día</span>
        <span style={{ fontFamily: 'Poppins', fontSize: 11, color: T.muted, fontWeight: 500 }}>de la comunidad</span>
      </div>
      <div style={{ display: 'flex', gap: 10, padding: '12px 18px 4px', overflowX: 'auto' }} className="hide-scroll">
        {[0,1,2,3,4,5].map(i => (
          <div key={i} style={{
            flexShrink: 0, width: 120, aspectRatio: '9 / 16',
            borderRadius: 16, position: 'relative', overflow: 'hidden',
            background: `linear-gradient(${135 + i*20}deg, ${T.accent}40, ${T.subtle})`,
          }}>
            <div style={{
              position: 'absolute', inset: 0,
              background: 'repeating-linear-gradient(45deg, rgba(255,255,255,0.15) 0px, rgba(255,255,255,0.15) 2px, transparent 2px, transparent 8px)',
            }}/>
            <div style={{
              position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)',
              fontSize: 36, opacity: 0.7,
            }}>📸</div>
            <div style={{
              position: 'absolute', bottom: 8, left: 8, right: 8,
              fontFamily: 'Poppins', fontSize: 9, fontWeight: 600, color: '#fff',
              textShadow: '0 1px 4px rgba(0,0,0,0.4)',
            }}>@{['lucia_fit', 'mary_glow', 'sof_morning', 'ana_pau', 'carla_h', 'bea_2026'][i]}</div>
            <div style={{
              position: 'absolute', top: 8, right: 8, padding: '3px 8px',
              background: 'rgba(0,0,0,0.4)', borderRadius: 999, backdropFilter: 'blur(8px)',
              fontFamily: 'Poppins', fontSize: 8, color: '#fff', fontWeight: 600, letterSpacing: 0.4,
            }}>Día {i + 3}</div>
          </div>
        ))}
      </div>

      {/* Top testimonies */}
      <div style={{ padding: '24px 22px 12px' }}>
        <span style={{ fontFamily: 'Poppins', fontSize: 18, fontWeight: 600, color: T.text, letterSpacing: -0.3 }}>Testimonios destacados</span>
      </div>
      <div style={{ padding: '0 18px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {featured.map(t => {
          const reto = RETOS.find(r => r.id === t.origin);
          const receta = RECETAS.find(r => r.id === t.origin);
          const sourceTitle = reto ? reto.title : receta ? receta.title : t.origin;
          return (
            <div key={t.id} style={{
              padding: '14px 16px', background: T.card, borderRadius: 16, border: T.border,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 999,
                  background: `linear-gradient(135deg, ${T.accent}, ${T.accent}99)`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'Poppins', fontSize: 13, fontWeight: 700, color: '#fff',
                }}>{t.initials}</div>
                <div style={{ flex: 1 }}>
                  <span style={{ fontFamily: 'Poppins', fontSize: 13, fontWeight: 600, color: T.text }}>{t.user}</span>
                  <div style={{ fontFamily: 'Poppins', fontSize: 10, color: T.muted }}>{sourceTitle} · {t.date}</div>
                </div>
                {t.recommends && <span style={{ fontSize: 18 }}>💗</span>}
              </div>
              <div style={{ marginTop: 10, fontFamily: 'Poppins', fontSize: 13, color: T.text, lineHeight: 1.5 }}>{t.text}</div>
            </div>
          );
        })}
      </div>

      {/* Coming soon */}
      <div style={{
        margin: '24px 18px 0', padding: '20px',
        background: T.card, borderRadius: 22, border: T.border,
        textAlign: 'center',
      }}>
        <div style={{ fontSize: 36 }}>👯‍♀️</div>
        <div style={{ fontFamily: 'Poppins', fontSize: 16, fontWeight: 600, color: T.text, marginTop: 8, letterSpacing: -0.3 }}>Próximamente</div>
        <div style={{ fontFamily: 'Poppins', fontSize: 12, color: T.muted, marginTop: 4, lineHeight: 1.5 }}>Retos en equipo, chat grupal y ranking semanal</div>
      </div>
    </div>
  );
}

// ═════════════════════════════════════════════════════════════
// PERFIL
// ═════════════════════════════════════════════════════════════
function PerfilScreen({ theme, isPremium, isPau, nav }) {
  const T = theme;
  const initials = STATS.name.slice(0,2).toUpperCase();

  return (
    <div style={{ paddingBottom: 110 }}>
      <div style={{ padding: '8px 22px 0' }}>
        <div style={{ fontFamily: 'Poppins', fontSize: 34, fontWeight: 600, color: T.text, letterSpacing: -0.8 }}>Perfil</div>
      </div>

      {/* Avatar + name */}
      <div style={{
        margin: '20px 18px 0', padding: '24px',
        background: T.card, borderRadius: 24, border: T.border,
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12,
      }}>
        <div style={{
          width: 80, height: 80, borderRadius: 999,
          background: `linear-gradient(135deg, ${T.accent}, ${T.accent}99)`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'Poppins', fontSize: 28, fontWeight: 600, color: '#fff', letterSpacing: -0.5,
        }}>{initials}</div>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontFamily: 'Poppins', fontSize: 22, fontWeight: 600, color: T.text, letterSpacing: -0.4 }}>{STATS.name}</div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 4,
            padding: '4px 12px', borderRadius: 999,
            background: isPremium ? '#2D2A26' : T.subtle,
            color: isPremium ? '#C9956B' : T.muted,
            fontFamily: 'Poppins', fontSize: 11, fontWeight: 600, letterSpacing: 0.5,
          }}>
            {isPremium && Icon.diamond(12, '#C9956B')}
            {isPremium ? 'PLAN PREMIUM' : 'PLAN GRATUITO'}
          </div>
        </div>
      </div>

      {/* Stats grid */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, padding: '14px 18px 0' }}>
        <StatBlock value={STATS.retosCompleted} label="Retos" T={T}/>
        <StatBlock value={STATS.totalDays} label="Días activos" T={T}/>
        <StatBlock value={STATS.streak} label="Racha" T={T} accent/>
      </div>

      {/* Insignias */}
      <div style={{ padding: '24px 22px 8px', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <span style={{ fontFamily: 'Poppins', fontSize: 11, color: T.muted, fontWeight: 600, letterSpacing: 0.5, textTransform: 'uppercase' }}>Insignias ganadas · {INSIGNIAS.length}</span>
        <span style={{ fontFamily: 'Poppins', fontSize: 10, color: T.muted }}>completa retos para ganar más</span>
      </div>
      <div style={{ display: 'flex', gap: 14, padding: '14px 18px 4px', overflowX: 'auto', scrollSnapType: 'x mandatory' }} className="hide-scroll">
        {INSIGNIAS.map(b => <InsigniaCard key={b.retoId} b={b} T={T}/>)}
        {/* Próxima insignia (placeholder) */}
        <div style={{
          flexShrink: 0, width: 112, scrollSnapAlign: 'start',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
          padding: '10px 4px',
          opacity: 0.4,
        }}>
          <div style={{
            width: 88, height: 88, borderRadius: '50%',
            border: `2px dashed ${T.muted}80`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 28,
          }}>?</div>
          <div style={{ fontFamily: 'Poppins', fontSize: 11, color: T.muted, fontWeight: 500, textAlign: 'center', lineHeight: 1.2 }}>Próxima insignia</div>
        </div>
      </div>

      {/* Mi progreso */}
      <div style={{ padding: '20px 22px 8px' }}>
        <div style={{ fontFamily: 'Poppins', fontSize: 11, color: T.muted, fontWeight: 600, letterSpacing: 0.5, textTransform: 'uppercase' }}>Mi progreso</div>
      </div>
      <div style={{ margin: '0 18px', background: T.card, borderRadius: 20, overflow: 'hidden', border: T.border }}>
        {[
          { e: '📐', t: 'Progreso fotográfico', detail: '4 fotos · 2 medidas', kind: 'progreso' },
          { e: '🏆', t: 'Mis logros', detail: '6 / 12', kind: 'logros' },
          { e: '📋', t: 'Historial completo', detail: 'rutinas, retos, recetas', kind: 'historial' },
        ].map((o, i, arr) => (
          <div key={i} onClick={() => nav.go(o.kind)} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '14px 16px', cursor: 'pointer',
            borderBottom: i < arr.length-1 ? (T.dark ? '0.5px solid rgba(255,255,255,0.06)' : '0.5px solid rgba(0,0,0,0.05)') : 'none',
          }}>
            <span style={{ fontSize: 18 }}>{o.e}</span>
            <span style={{ flex: 1, fontFamily: 'Poppins', fontSize: 14, fontWeight: 500, color: T.text }}>{o.t}</span>
            <span style={{ fontFamily: 'Poppins', fontSize: 11, color: T.muted }}>{o.detail}</span>
            {Icon.chevR(T.muted, 8)}
          </div>
        ))}
      </div>

      {/* Premium card */}
      {!isPremium && (
        <div onClick={() => nav.go('paywall')} style={{
          margin: '14px 18px 0', padding: '18px',
          background: 'linear-gradient(135deg, #2D2A26, #3A332C)',
          borderRadius: 20, cursor: 'pointer', position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            {Icon.diamond(24, '#C9956B')}
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'Poppins', fontSize: 14, fontWeight: 600, color: '#F5E6C8' }}>Hazte Premium</div>
              <div style={{ fontFamily: 'Poppins', fontSize: 11, color: 'rgba(245,230,200,0.65)', marginTop: 2 }}>Desde 4,99€/mes · 7 días gratis</div>
            </div>
            {Icon.chevR('#C9956B', 9)}
          </div>
        </div>
      )}

      {/* Options list */}
      <div style={{ margin: '14px 18px 0', background: T.card, borderRadius: 20, overflow: 'hidden', border: T.border }}>
        {[
          { e: '⚙️', t: 'Ajustes', kind: 'ajustes' },
          { e: '🌐', t: 'Idioma', detail: 'Español' },
          { e: '🔔', t: 'Notificaciones', kind: 'notif' },
          { e: '💬', t: 'Ayuda y soporte' },
          { e: '💗', t: 'Compartir Pau Fit' },
          ...(isPau ? [{ e: '👑', t: 'Panel admin (Pau)', kind: 'admin' }] : []),
          { e: '↗️', t: 'Cerrar sesión', last: true, danger: true, kind: 'login' },
        ].map((o, i, arr) => (
          <div key={i} onClick={() => {
            if (o.kind) nav.go(o.kind);
            else nav.toast(`${o.t}: próximamente`, { icon: '⏳' });
          }} style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '14px 16px', cursor: 'pointer',
            borderBottom: i < arr.length-1 ? (T.dark ? '0.5px solid rgba(255,255,255,0.06)' : '0.5px solid rgba(0,0,0,0.05)') : 'none',
          }}>
            <span style={{ fontSize: 18 }}>{o.e}</span>
            <span style={{ flex: 1, fontFamily: 'Poppins', fontSize: 14, fontWeight: 500, color: o.danger ? '#D4847A' : T.text }}>{o.t}</span>
            {o.detail && <span style={{ fontFamily: 'Poppins', fontSize: 12, color: T.muted }}>{o.detail}</span>}
            {!o.danger && Icon.chevR(T.muted, 8)}
          </div>
        ))}
      </div>

      <div style={{ textAlign: 'center', padding: '24px 0 8px', fontFamily: 'Poppins', fontSize: 10, color: T.muted, letterSpacing: 0.4 }}>
        Pau Fit · v1.0.0 · #YoSiemprePuedo
      </div>
    </div>
  );
}

function StatBlock({ value, label, T, accent }) {
  return (
    <div style={{
      background: T.card, borderRadius: 18, padding: '16px 12px',
      textAlign: 'center', border: T.border,
    }}>
      <div style={{ fontFamily: 'Poppins', fontSize: 26, fontWeight: 700, color: accent ? T.accent : T.text, letterSpacing: -0.8 }}>{value}</div>
      <div style={{ fontFamily: 'Poppins', fontSize: 10, color: T.muted, marginTop: 2, fontWeight: 500, letterSpacing: 0.4, textTransform: 'uppercase' }}>{label}</div>
    </div>
  );
}

Object.assign(window, { HomeScreen, RetosScreen, RecetasScreen, ComunidadScreen, PerfilScreen });