// Telas 1-5: Onboarding, Home, Conselheiro IA, IA Emoções (3 variações), Cartas de Deus

const T = window.TOKENS;

// ─────────────────────────────────────────
// 1. ONBOARDING
// ─────────────────────────────────────────
function ScreenOnboarding({ go }) {
  return (
    <Screen noTabs>
      <div style={{ padding: '80px 28px 40px', textAlign: 'center', minHeight: 700 }}>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 24 }}>
          <img src="assets/divineai-logo.png" alt="DivineAI" style={{ width: 220, height: 'auto', display: 'block' }} />
        </div>
        <div style={{ fontFamily: T.mono, fontSize: 9, color: T.ink3, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 32 }}>a ia da fé cristã</div>
        <div style={{
          fontFamily: T.serif, fontSize: 38, lineHeight: 1.05,
          color: T.ink, fontWeight: 500, letterSpacing: -0.5, marginBottom: 16,
        }}>
          Tecnologia para<br/>fortalecer<br/><em style={{ color: T.gold }}>a sua fé.</em>
        </div>
        <div style={{ fontFamily: T.sans, fontSize: 14, color: T.ink2, lineHeight: 1.5, maxWidth: 280, margin: '0 auto 48px' }}>
          Conselho, oração e criação — em um só lugar.
        </div>

        <Annotation style={{ textAlign: 'left', marginBottom: 12 }}>escolha de jornada (3 cards)</Annotation>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 32 }}>
          {[
            { t: 'Buscar conselho', s: 'IA bíblica e cartas pessoais' },
            { t: 'Cumprir promessas', s: 'metas espirituais com prazos' },
            { t: 'Criar conteúdo', s: 'reels, vozes e devocionais' },
          ].map((j, i) => (
            <WCard key={i} padding={16} style={{ display: 'flex', alignItems: 'center', gap: 14, textAlign: 'left' }}>
              <div style={{ width: 36, height: 36, borderRadius: '50%', border: `1px solid ${T.gold}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Dot size={6} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: T.sans, fontSize: 14, fontWeight: 600, color: T.ink, marginBottom: 2 }}>{j.t}</div>
                <div style={{ fontFamily: T.sans, fontSize: 12, color: T.ink2 }}>{j.s}</div>
              </div>
            </WCard>
          ))}
        </div>

        <WButton primary full onClick={() => go('home')}>Começar</WButton>
        <div style={{ marginTop: 16, fontFamily: T.sans, fontSize: 12, color: T.ink3 }}>
          Já tenho conta · <span style={{ color: T.gold, textDecoration: 'underline' }}>Entrar</span>
        </div>
      </div>
    </Screen>
  );
}

// ─────────────────────────────────────────
// 2. HOME
// ─────────────────────────────────────────
function ScreenHome({ go }) {
  const navy = T.navy;
  const navy2 = T.navy2;
  const Pill = ({ children, onClick }) => (
    <button onClick={onClick} style={{
      background: 'rgba(255,255,255,0.08)',
      border: `1px solid rgba(201,162,74,0.35)`,
      borderRadius: 999, padding: '8px 14px',
      display: 'inline-flex', alignItems: 'center', gap: 6,
      fontFamily: T.sans, fontSize: 11, color: '#fff', fontWeight: 500,
      cursor: 'pointer', backdropFilter: 'blur(8px)',
    }}>{children}</button>
  );
  const Shortcut = ({ label, onClick, sub }) => (
    <button onClick={onClick} style={{
      flex: 1, background: 'transparent', border: 'none', cursor: 'pointer',
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
    }}>
      <div style={{
        width: 56, height: 56, borderRadius: 18,
        background: 'rgba(255,255,255,0.06)',
        border: `1px solid rgba(201,162,74,0.3)`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
      }}>
        <div style={{ width: 22, height: 22, borderRadius: '50%', border: `1.5px solid ${T.gold}` }} />
      </div>
      <div style={{ fontFamily: T.sans, fontSize: 10, color: '#fff', fontWeight: 500, textAlign: 'center', lineHeight: 1.2 }}>{label}</div>
    </button>
  );
  return (
    <div style={{
      width: '100%', minHeight: '100%',
      background: `radial-gradient(ellipse at 50% 0%, ${navy2} 0%, ${navy} 50%, #060B1F 100%)`,
      position: 'relative', overflow: 'auto', paddingBottom: 100,
    }}>
      {/* partículas decorativas */}
      {Array.from({ length: 24 }).map((_, i) => (
        <div key={i} style={{
          position: 'absolute',
          left: `${(i * 37 + 13) % 100}%`,
          top: `${(i * 53 + 7) % 90}%`,
          width: 1 + (i % 3), height: 1 + (i % 3), borderRadius: '50%',
          background: T.gold, opacity: 0.15 + (i % 4) * 0.1,
          pointerEvents: 'none',
        }} />
      ))}

      {/* Header com saudação + sino */}
      <div style={{ padding: '60px 20px 0', position: 'relative', zIndex: 2 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
          <div style={{ fontFamily: T.serif, fontSize: 28, color: '#fff', fontWeight: 500 }}>
            Bom dia, <span style={{ color: T.gold }}>Mariana!</span>
          </div>
          <button style={{
            width: 38, height: 38, borderRadius: '50%',
            background: 'rgba(255,255,255,0.06)', border: `1px solid rgba(255,255,255,0.12)`,
            display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
            position: 'relative',
          }}>
            <div style={{ width: 14, height: 14, borderRadius: '50%', border: `1.5px solid #fff` }} />
            <div style={{ position: 'absolute', top: 8, right: 8, width: 6, height: 6, borderRadius: '50%', background: '#E55' }} />
          </button>
        </div>
        <div style={{ display: 'flex', gap: 8, marginBottom: 22 }}>
          <Pill onClick={() => go('timeline')}>
            <Dot size={6} color={T.gold} /> Streak de Fé: 12 dias
          </Pill>
          <Pill onClick={() => go('talents')}>
            <Dot size={6} color={T.gold} /> Talentos: 4.500
          </Pill>
        </div>

        {/* Destaque do Céu */}
        <div style={{ fontFamily: T.serif, fontSize: 18, color: '#fff', fontWeight: 500, marginBottom: 10 }}>Destaque do Céu</div>
        <div style={{
          position: 'relative', borderRadius: 18, overflow: 'hidden',
          marginBottom: 14, aspectRatio: '16/10',
          backgroundImage: 'url(assets/sunset.jpg)',
          backgroundSize: 'cover', backgroundPosition: 'center',
          border: `1px solid rgba(201,162,74,0.35)`,
        }}>
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(14,24,56,0.15) 0%, rgba(14,24,56,0.5) 100%)' }} />
          <div style={{ position: 'relative', zIndex: 2, padding: 20, height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center' }}>
            <div style={{ fontFamily: T.serif, fontSize: 18, lineHeight: 1.3, color: '#fff', fontStyle: 'italic', marginBottom: 6, textShadow: '0 2px 8px rgba(0,0,0,0.6)' }}>
              "O Senhor é o meu pastor;<br/>nada me faltará."
            </div>
            <div style={{ fontFamily: T.sans, fontSize: 11, color: 'rgba(255,255,255,0.85)' }}>(Salmos 23:1)</div>
          </div>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 6 }}>
          <button style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '8px 18px', borderRadius: 999,
            background: 'rgba(255,255,255,0.1)', border: `1px solid rgba(201,162,74,0.4)`,
            color: '#fff', fontFamily: T.sans, fontSize: 12, fontWeight: 500, cursor: 'pointer',
          }}>
            <div style={{ width: 18, height: 18, borderRadius: '50%', background: T.gold, display: 'flex', alignItems: 'center', justifyContent: 'center', color: navy, fontSize: 9 }}>▶</div>
            Ouvir áudio (Pastor André)
          </button>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 4, marginBottom: 22 }}>
          {[0,1,2].map(i => <div key={i} style={{ width: 5, height: 5, borderRadius: '50%', background: i === 0 ? T.gold : 'rgba(255,255,255,0.3)' }} />)}
        </div>

        {/* Botão viral · com partículas */}
        <button onClick={() => go('viral')} style={{
          width: '100%', padding: '14px 20px', borderRadius: 999,
          background: `linear-gradient(180deg, rgba(201,162,74,0.2), rgba(201,162,74,0.05))`,
          border: `1px solid ${T.gold}`, cursor: 'pointer',
          fontFamily: T.serif, fontSize: 16, color: '#fff', fontWeight: 500,
          position: 'relative', overflow: 'hidden', marginBottom: 28,
          boxShadow: `0 0 24px rgba(201,162,74,0.25)`,
        }}>
          {Array.from({ length: 8 }).map((_, i) => (
            <span key={i} style={{
              position: 'absolute', top: '50%',
              left: `${10 + i * 11}%`,
              width: 2, height: 2, borderRadius: '50%',
              background: T.gold, opacity: 0.6,
            }} />
          ))}
          ✨ Receba sua palavra agora
        </button>

        {/* Minha Jornada */}
        <div style={{ fontFamily: T.serif, fontSize: 18, color: '#fff', fontWeight: 500, marginBottom: 10 }}>Minha Jornada</div>
        <div onClick={() => go('promise')} style={{
          background: 'rgba(255,255,255,0.05)',
          border: `1px solid rgba(201,162,74,0.25)`,
          borderRadius: 16, padding: 14, marginBottom: 12,
          display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer',
        }}>
          <div style={{
            width: 56, height: 56, borderRadius: 12, flexShrink: 0,
            backgroundImage: 'url(assets/hands-praying.avif)',
            backgroundSize: 'cover', backgroundPosition: 'center',
          }} />
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: T.sans, fontSize: 14, color: '#fff', fontWeight: 600, marginBottom: 2 }}>Restauração do casamento</div>
            <div style={{ fontFamily: T.sans, fontSize: 11, color: 'rgba(255,255,255,0.6)' }}>Dia 14 de 30</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8, marginBottom: 28 }}>
          <button style={{
            flex: 1, padding: '10px 12px', borderRadius: 12,
            background: T.gold, border: 'none', cursor: 'pointer',
            fontFamily: T.sans, fontSize: 11, color: navy, fontWeight: 600, lineHeight: 1.3,
          }}>Marcar etapa de hoje<br/><span style={{ fontSize: 9, fontWeight: 500, opacity: 0.7 }}>(+50 talentos)</span></button>
          <button onClick={() => go('chat')} style={{
            flex: 1, padding: '10px 12px', borderRadius: 12,
            background: 'rgba(255,255,255,0.06)', border: `1px solid rgba(255,255,255,0.15)`,
            cursor: 'pointer', fontFamily: T.sans, fontSize: 11, color: '#fff', fontWeight: 500,
          }}>Falar com Conselheiro IA</button>
        </div>

        {/* Atalhos Inteligentes */}
        <div style={{ fontFamily: T.serif, fontSize: 18, color: '#fff', fontWeight: 500, marginBottom: 14 }}>Atalhos Inteligentes</div>
        <div style={{ display: 'flex', gap: 8, marginBottom: 28 }}>
          <Shortcut label={<>IA<br/>Conselheiro</>} onClick={() => go('chat')} />
          <Shortcut label={<>Creator<br/>Studio</>} onClick={() => go('creator')} />
          <Shortcut label={<>Caixa de<br/>Promessas</>} onClick={() => go('promise')} />
          <Shortcut label={<>Comunidade</>} onClick={() => go('viral')} />
        </div>

        {/* Desafios */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
          <div style={{ fontFamily: T.serif, fontSize: 18, color: '#fff', fontWeight: 500 }}>Desafios</div>
          <button style={{ background: 'transparent', border: 'none', color: T.gold, fontFamily: T.sans, fontSize: 11, cursor: 'pointer' }}>Carrossel ›</button>
        </div>
        <div style={{ display: 'flex', gap: 10, overflow: 'auto', paddingBottom: 4, marginBottom: 28 }}>
          {[
            { t: '7 dias de Gratidão', p: '4/7', img: 'assets/hands-praying.avif' },
            { t: 'Leitura da Bíblia em 1 ano', p: '12%', img: 'assets/bible.jpeg' },
            { t: 'Jejum de 21 dias', p: '0/21', img: 'assets/sunset.jpg' },
          ].map((c, i) => (
            <div key={i} style={{
              flexShrink: 0, width: 150, aspectRatio: '4/3', borderRadius: 14,
              backgroundImage: `linear-gradient(180deg, rgba(14,24,56,0.1) 0%, rgba(14,24,56,0.85) 100%), url(${c.img})`,
              backgroundSize: 'cover', backgroundPosition: 'center',
              border: `1px solid rgba(201,162,74,0.25)`,
              padding: 12, display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
            }}>
              <div style={{ fontFamily: T.sans, fontSize: 12, color: '#fff', fontWeight: 600, lineHeight: 1.25, marginBottom: 4 }}>{c.t}</div>
              <div style={{ fontFamily: T.mono, fontSize: 10, color: T.gold }}>{c.p}</div>
            </div>
          ))}
        </div>

        {/* Faith Radar */}
        <div style={{ fontFamily: T.serif, fontSize: 18, color: '#fff', fontWeight: 500, marginBottom: 14 }}>Faith Radar</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            { n: 'Marta V.', a: 'cumpriu uma promessa!' },
            { n: 'Roberto C.', a: 'gerou um vídeo para o TikTok.' },
          ].map((item, i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'center', gap: 10,
              padding: '10px 14px', borderRadius: 999,
              background: 'rgba(255,255,255,0.05)',
              border: `1px solid rgba(255,255,255,0.08)`,
            }}>
              <div style={{ width: 28, height: 28, borderRadius: '50%', background: T.gold, opacity: 0.4 }} />
              <div style={{ flex: 1, fontFamily: T.sans, fontSize: 12, color: 'rgba(255,255,255,0.9)' }}>
                <strong style={{ color: '#fff' }}>{item.n}</strong> {item.a}
              </div>
              <div style={{ color: 'rgba(255,255,255,0.4)', fontFamily: T.mono, fontSize: 12 }}>›</div>
            </div>
          ))}
        </div>
      </div>

      {/* Tab bar dark */}
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        paddingBottom: 28, paddingTop: 10,
        background: 'rgba(6,11,31,0.85)', backdropFilter: 'blur(12px)',
        borderTop: `1px solid rgba(201,162,74,0.2)`,
        display: 'flex', justifyContent: 'space-around', zIndex: 10,
      }}>
        {[
          { id: 'home', label: 'Início', active: true },
          { id: 'chat', label: 'Orar' },
          { id: 'creator', label: 'Criar' },
          { id: 'promise', label: 'Promessas' },
          { id: 'talents', label: 'Eu' },
        ].map(t => (
          <button key={t.id} onClick={() => !t.active && go(t.id)} style={{
            background: 'transparent', border: 'none', cursor: 'pointer',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4,
            fontFamily: T.sans, fontSize: 10,
            color: t.active ? T.gold : 'rgba(255,255,255,0.5)',
          }}>
            <div style={{ width: 6, height: 6, borderRadius: '50%', background: t.active ? T.gold : 'rgba(255,255,255,0.3)' }} />
            {t.label}
          </button>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────
// 3. CONSELHEIRO BÍBLICO IA (chat)
// ─────────────────────────────────────────
function ScreenChat({ go }) {
  const Bubble = ({ from, children }) => (
    <div style={{
      alignSelf: from === 'me' ? 'flex-end' : 'flex-start',
      maxWidth: '78%',
      background: from === 'me' ? T.goldSoft : '#fff',
      border: `1px solid ${from === 'me' ? T.goldSoft : T.line2}`,
      borderRadius: 18,
      padding: '12px 14px',
      fontFamily: T.sans, fontSize: 13, color: T.ink, lineHeight: 1.5,
    }}>{children}</div>
  );
  return (
    <Screen noTabs>
      <ScreenHeader
        onBack={() => go('home')}
        subtitle="conselheiro bíblico"
        title="Conversa"
      />
      <div style={{ padding: '0 20px 120px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        <Annotation>chat · histórico rolável</Annotation>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: T.ink3, fontFamily: T.sans, fontSize: 11, justifyContent: 'center', margin: '8px 0' }}>
          <div style={{ flex: 1, height: 1, background: T.line2 }} />
          hoje, 14:32
          <div style={{ flex: 1, height: 1, background: T.line2 }} />
        </div>
        <Bubble from="me">Estou ansiosa com o trabalho, não consigo dormir.</Bubble>
        <Bubble from="ai">
          Mariana, a ansiedade é real — mas Filipenses 4:6-7 nos lembra de não nos preocuparmos com nada.
          <div style={{ marginTop: 10, paddingTop: 10, borderTop: `1px solid ${T.line2}` }}>
            <div style={{ fontFamily: T.mono, fontSize: 9, color: T.gold, letterSpacing: 1, textTransform: 'uppercase', marginBottom: 4 }}>passagem citada</div>
            <div style={{ fontFamily: T.serif, fontSize: 14, fontStyle: 'italic', color: T.ink2 }}>"Apresentai a Deus as vossas petições com ações de graças..."</div>
          </div>
        </Bubble>
        <Bubble from="ai">Quer que eu prepare uma oração curta para esta noite?</Bubble>
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          <Chip>sim, oração</Chip>
          <Chip>quero entender mais</Chip>
          <Chip>outra passagem</Chip>
        </div>
      </div>

      {/* Input bar */}
      <div style={{
        position: 'absolute', bottom: 28, left: 16, right: 16,
        background: '#fff', border: `1px solid ${T.line}`, borderRadius: 999,
        padding: '6px 6px 6px 18px', display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <div style={{ flex: 1, fontFamily: T.sans, fontSize: 13, color: T.ink3 }}>Escreva o que sente…</div>
        <button style={{
          width: 36, height: 36, borderRadius: '50%', border: 'none',
          background: T.gold, color: '#fff', cursor: 'pointer',
          fontFamily: T.sans, fontSize: 14,
        }}>↑</button>
      </div>
    </Screen>
  );
}

// ─────────────────────────────────────────
// 4. IA DE EMOÇÕES — 3 variações
// ─────────────────────────────────────────
function ScreenEmotions({ go, variant = 'a' }) {
  if (variant === 'a') {
    // Variação A: input livre + chips
    return (
      <Screen noTabs>
        <ScreenHeader onBack={() => go('home')} subtitle="ia de emoções · v.A" title="Como você se sente agora?" />
        <div style={{ padding: '0 20px' }}>
          <Annotation style={{ marginBottom: 8 }}>input emocional + sugestões rápidas</Annotation>
          <WCard padding={20} style={{ marginBottom: 16, minHeight: 140 }}>
            <div style={{ fontFamily: T.serif, fontSize: 18, color: T.ink3, fontStyle: 'italic' }}>
              Sinto-me desanimado…
            </div>
            <div style={{ marginTop: 60, fontFamily: T.mono, fontSize: 9, color: T.ink3, letterSpacing: 1, textTransform: 'uppercase' }}>
              ↑ campo de texto livre
            </div>
          </WCard>
          <div style={{ fontFamily: T.sans, fontSize: 11, color: T.ink2, textTransform: 'uppercase', letterSpacing: 1, marginBottom: 8 }}>ou escolha</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 24 }}>
            {['ansioso', 'triste', 'grato', 'em dúvida', 'cansado', 'com medo', 'sozinho', 'feliz'].map(e => (
              <Chip key={e} active={e === 'triste'}>{e}</Chip>
            ))}
          </div>
          <WButton primary full onClick={() => go('emotionsResult')}>Receber palavra</WButton>
        </div>
      </Screen>
    );
  }
  if (variant === 'b') {
    // Variação B: roda emocional / seletor radial
    return (
      <Screen noTabs>
        <ScreenHeader onBack={() => go('home')} subtitle="ia de emoções · v.B" title="Toque no que descreve hoje" />
        <div style={{ padding: '0 20px' }}>
          <Annotation style={{ marginBottom: 12 }}>seletor visual radial · 8 estados</Annotation>
          <WCard padding={20} style={{ marginBottom: 16 }}>
            <div style={{ position: 'relative', width: '100%', aspectRatio: '1', maxWidth: 280, margin: '0 auto' }}>
              <svg viewBox="0 0 200 200" width="100%" height="100%">
                {[0, 45, 90, 135, 180, 225, 270, 315].map((a, i) => {
                  const rad = (a * Math.PI) / 180;
                  return <line key={i} x1="100" y1="100" x2={100 + Math.cos(rad) * 90} y2={100 + Math.sin(rad) * 90} stroke={T.line} strokeWidth="0.5" />;
                })}
                <circle cx="100" cy="100" r="90" fill="none" stroke={T.line} strokeWidth="1" />
                <circle cx="100" cy="100" r="60" fill="none" stroke={T.line2} strokeWidth="1" />
                <circle cx="100" cy="100" r="30" fill="none" stroke={T.line2} strokeWidth="1" />
                <circle cx="100" cy="100" r="6" fill={T.gold} />
              </svg>
              {['paz', 'gratidão', 'esperança', 'alegria', 'medo', 'tristeza', 'raiva', 'ansiedade'].map((label, i) => {
                const a = (i * 45 - 90) * Math.PI / 180;
                const x = 50 + Math.cos(a) * 47;
                const y = 50 + Math.sin(a) * 47;
                return (
                  <div key={label} style={{
                    position: 'absolute', left: `${x}%`, top: `${y}%`,
                    transform: 'translate(-50%, -50%)',
                    fontFamily: T.sans, fontSize: 11, color: T.ink2,
                  }}>{label}</div>
                );
              })}
            </div>
          </WCard>
          <div style={{ fontFamily: T.sans, fontSize: 12, color: T.ink2, textAlign: 'center', marginBottom: 16 }}>
            Intensidade: <span style={{ color: T.gold, fontWeight: 600 }}>média</span>
          </div>
          <WButton primary full onClick={() => go('emotionsResult')}>Receber palavra</WButton>
        </div>
      </Screen>
    );
  }
  // Variação C: voz / gravação
  return (
    <Screen noTabs>
      <ScreenHeader onBack={() => go('home')} subtitle="ia de emoções · v.C" title="Conte com a voz" />
      <div style={{ padding: '40px 20px', textAlign: 'center' }}>
        <Annotation style={{ marginBottom: 16 }}>gravação por voz · fallback texto</Annotation>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 32 }}>
          <div style={{
            width: 160, height: 160, borderRadius: '50%',
            border: `1px solid ${T.gold}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            position: 'relative',
          }}>
            <div style={{
              position: 'absolute', inset: 12, borderRadius: '50%',
              border: `1px solid ${T.goldSoft}`,
            }} />
            <div style={{
              width: 56, height: 56, borderRadius: '50%', background: T.gold,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: '#fff', fontFamily: T.mono, fontSize: 9, letterSpacing: 1,
            }}>REC</div>
          </div>
        </div>
        <div style={{ fontFamily: T.serif, fontSize: 18, color: T.ink, marginBottom: 8 }}>
          0:08
        </div>
        <div style={{ fontFamily: T.sans, fontSize: 12, color: T.ink2, marginBottom: 24 }}>
          Toque para parar
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 4, marginBottom: 32 }}>
          {Array.from({ length: 24 }).map((_, i) => (
            <div key={i} style={{
              width: 2, height: 8 + Math.abs(Math.sin(i * 0.7)) * 28,
              background: T.line, borderRadius: 1,
            }} />
          ))}
        </div>
        <div style={{ display: 'flex', gap: 8, justifyContent: 'center' }}>
          <WButton onClick={() => go('emotions', 'a')}>escrever</WButton>
          <WButton primary onClick={() => go('emotionsResult')}>finalizar</WButton>
        </div>
      </div>
    </Screen>
  );
}

// 4b. RESULTADO da IA de emoções
function ScreenEmotionsResult({ go }) {
  return (
    <Screen noTabs>
      <ScreenHeader onBack={() => go('emotions', 'a')} subtitle="resposta da ia" title="Para o seu desânimo" />
      <div style={{ padding: '0 20px' }}>
        <Annotation style={{ marginBottom: 8 }}>combo · versículo + oração + imagem</Annotation>
        <WCard padding={20} style={{ marginBottom: 12, background: T.bgAlt, borderColor: T.line }}>
          <div style={{ fontFamily: T.mono, fontSize: 10, color: T.gold, letterSpacing: 1.5, textTransform: 'uppercase', marginBottom: 10 }}>
            Isaías 41:10
          </div>
          <div style={{ fontFamily: T.serif, fontSize: 20, lineHeight: 1.35, color: T.ink, fontStyle: 'italic' }}>
            "Não temas, porque eu sou contigo; não te assombres, porque eu sou o teu Deus."
          </div>
        </WCard>

        <WCard padding={16} style={{ marginBottom: 12 }}>
          <Annotation style={{ marginBottom: 8 }}>oração narrada · player</Annotation>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 44, height: 44, borderRadius: '50%', background: T.gold, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontFamily: T.mono, fontSize: 14 }}>▶</div>
            <div style={{ flex: 1 }}>
              <div style={{ height: 3, background: T.line2, borderRadius: 2, overflow: 'hidden', marginBottom: 6 }}>
                <div style={{ width: '34%', height: '100%', background: T.gold }} />
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: T.mono, fontSize: 10, color: T.ink3 }}>
                <span>0:42</span><span>2:03</span>
              </div>
            </div>
          </div>
        </WCard>

        <div style={{
          height: 200, borderRadius: 16, marginBottom: 16,
          backgroundImage: 'url(assets/hands-praying.avif)',
          backgroundSize: 'cover', backgroundPosition: 'center',
          border: `1px solid ${T.line}`,
        }} />

        <div style={{ display: 'flex', gap: 8 }}>
          <WButton style={{ flex: 1 }}>guardar</WButton>
          <WButton primary style={{ flex: 1 }} onClick={() => go('viral')}>compartilhar</WButton>
        </div>
      </div>
    </Screen>
  );
}

// ─────────────────────────────────────────
// 5. CARTAS DE DEUS
// ─────────────────────────────────────────
function ScreenLetter({ go }) {
  return (
    <Screen noTabs>
      <ScreenHeader onBack={() => go('home')} subtitle="cartas de Deus" title="Carta para Mariana" />
      <div style={{ padding: '0 20px' }}>
        <Annotation style={{ marginBottom: 12 }}>carta gerada · estilo manuscrito</Annotation>
        <WCard padding={28} style={{ marginBottom: 16, background: '#FDFBF6' }}>
          <div style={{ fontFamily: T.serif, fontSize: 13, color: T.ink3, marginBottom: 16, fontStyle: 'italic' }}>
            7 de maio de 2026
          </div>
          <div style={{ fontFamily: T.serif, fontSize: 22, color: T.ink, marginBottom: 16, fontWeight: 500 }}>
            Minha querida filha,
          </div>
          <div style={{ fontFamily: T.serif, fontSize: 16, lineHeight: 1.7, color: T.ink, fontStyle: 'italic' }}>
            <p style={{ margin: '0 0 14px' }}>Eu vejo o seu cansaço. Vejo as noites em que você dorme tarde
            tentando resolver o que só Eu posso resolver. Quero que saiba: não preciso da sua perfeição —
            preciso do seu coração.</p>
            <p style={{ margin: '0 0 14px' }}>Hoje, descanse. Amanhã eu cuido do que você não pode carregar.</p>
            <p style={{ margin: 0 }}>Com amor eterno,<br/><span style={{ color: T.gold }}>seu Pai.</span></p>
          </div>
        </WCard>
        <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
          <Chip>ouvir narração</Chip>
          <Chip>gerar nova</Chip>
          <Chip>guardar</Chip>
        </div>
        <WButton primary full onClick={() => go('viral')}>Compartilhar trecho</WButton>
      </div>
    </Screen>
  );
}

Object.assign(window, {
  ScreenOnboarding, ScreenHome, ScreenChat, ScreenEmotions, ScreenEmotionsResult, ScreenLetter,
});