// Telas hi-fi — todas as 18 telas em estética navy + ouro
// Cada tela cabe em 390x844 sem rolagem interna (overflow: hidden no HiFiScreen)

const TT = window.TOKENS;

// ─────────── 1. ONBOARDING
function ScreenOnboarding({ go }) {
  return (
    <div style={{
      width: '100%', height: '100%',
      background: `radial-gradient(ellipse at 50% 30%, ${TT.navy2} 0%, ${TT.navy} 60%, #060B1F 100%)`,
      position: 'relative', overflow: 'hidden',
      display: 'flex', flexDirection: 'column',
      padding: '70px 28px 30px',
    }}>
      {Array.from({ length: 30 }).map((_, i) => (
        <div key={i} style={{
          position: 'absolute',
          left: `${(i * 37) % 100}%`, top: `${(i * 53) % 100}%`,
          width: 1 + (i % 3), height: 1 + (i % 3), borderRadius: '50%',
          background: TT.gold, opacity: 0.1 + (i % 4) * 0.1,
        }} />
      ))}
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', position: 'relative', zIndex: 2 }}>
        <img src="assets/divineai-logo.png" alt="DivineAI" style={{ width: 220, height: 'auto', marginBottom: 8, filter: 'brightness(1.1)' }} />
        <div style={{ fontFamily: TT.mono, fontSize: 9, color: TT.gold, letterSpacing: 3, textTransform: 'uppercase', marginBottom: 36 }}>a ia da fé cristã</div>
        <div style={{ fontFamily: TT.serif, fontSize: 26, lineHeight: 1.15, color: '#fff', textAlign: 'center', fontWeight: 500, marginBottom: 14 }}>
          Tecnologia para fortalecer<br/><em style={{ color: TT.gold }}>a sua fé</em>
        </div>
        <div style={{ fontFamily: TT.sans, fontSize: 13, color: 'rgba(255,255,255,0.7)', textAlign: 'center', maxWidth: 260 }}>
          Conselho, oração e criação — em um só lugar.
        </div>
      </div>
      <div style={{ position: 'relative', zIndex: 2 }}>
        <HiFiButton primary full onClick={() => go('home')} style={{ marginBottom: 12 }}>Começar minha jornada</HiFiButton>
        <div style={{ textAlign: 'center', fontFamily: TT.sans, fontSize: 11, color: 'rgba(255,255,255,0.5)' }}>
          Já tenho conta · <span style={{ color: TT.gold }}>Entrar</span>
        </div>
      </div>
    </div>
  );
}

// ─────────── 3. CONSELHEIRO BÍBLICO
function ScreenChat({ go }) {
  const Bubble = ({ from, children }) => (
    <div style={{
      alignSelf: from === 'me' ? 'flex-end' : 'flex-start',
      maxWidth: '82%',
      background: from === 'me' ? 'rgba(201,162,74,0.18)' : 'rgba(255,255,255,0.06)',
      border: `1px solid ${from === 'me' ? 'rgba(201,162,74,0.4)' : 'rgba(255,255,255,0.1)'}`,
      borderRadius: 16, padding: '10px 12px',
      fontFamily: TT.sans, fontSize: 12, color: '#fff', lineHeight: 1.5,
    }}>{children}</div>
  );
  return (
    <HiFiScreen activeTab="chat" go={go}>
      <HiFiHeader title="IA Conselheiro Bíblico" onBack={() => go('home')} />
      <div style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 10 }}>
        <Bubble from="me">Estou ansiosa com meu trabalho. O que a Bíblia diz?</Bubble>
        <Bubble from="ai">
          Mariana, em <strong style={{ color: TT.gold }}>Filipenses 4:6-7</strong>, somos lembrados de não nos preocuparmos com nada.
          <div style={{ marginTop: 8, paddingTop: 8, borderTop: `1px solid rgba(255,255,255,0.1)`, fontStyle: 'italic', color: 'rgba(255,255,255,0.85)' }}>
            "Apresentai a Deus as vossas petições com ações de graças..."
          </div>
        </Bubble>
        <Bubble from="ai">Posso preparar uma oração em áudio para esta noite?</Bubble>
        <button style={{
          alignSelf: 'flex-start', marginTop: 4,
          background: TT.gold, color: TT.navy, border: 'none',
          padding: '8px 16px', borderRadius: 999, cursor: 'pointer',
          fontFamily: TT.sans, fontSize: 11, fontWeight: 600,
        }}>✨ Gerar oração em áudio</button>
      </div>
      <div style={{
        background: 'rgba(255,255,255,0.06)', border: `1px solid rgba(255,255,255,0.12)`,
        borderRadius: 999, padding: '4px 4px 4px 14px',
        display: 'flex', alignItems: 'center', gap: 8,
      }}>
        <div style={{ flex: 1, fontFamily: TT.sans, fontSize: 12, color: 'rgba(255,255,255,0.4)' }}>Escreva sua mensagem…</div>
        <button style={{
          width: 32, height: 32, borderRadius: '50%', border: 'none',
          background: TT.gold, color: TT.navy, cursor: 'pointer', fontSize: 14,
        }}>↑</button>
      </div>
    </HiFiScreen>
  );
}

// ─────────── 4. EMOÇÕES (3 variações + resultado)
function ScreenEmotions({ go, variant = 'a' }) {
  if (variant === 'a') return (
    <HiFiScreen hideTabs go={go}>
      <HiFiHeader title="Como você se sente?" onBack={() => go('home')} />
      <HiFiCard padding={20} style={{ marginBottom: 16, minHeight: 120 }}>
        <div style={{ fontFamily: TT.serif, fontSize: 16, color: 'rgba(255,255,255,0.5)', fontStyle: 'italic' }}>Sinto-me desanimado…</div>
      </HiFiCard>
      <div style={{ fontFamily: TT.mono, fontSize: 9, color: TT.gold, letterSpacing: 1.5, textTransform: 'uppercase', marginBottom: 10 }}>ou escolha</div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 'auto' }}>
        {['ansioso', 'triste', 'grato', 'em dúvida', 'cansado', 'com medo', 'sozinho', 'feliz'].map(e => (
          <HiFiPill key={e} gold={e === 'triste'}>{e}</HiFiPill>
        ))}
      </div>
      <HiFiButton primary full onClick={() => go('emotionsResult')} style={{ marginTop: 16 }}>Receber palavra ✨</HiFiButton>
    </HiFiScreen>
  );
  if (variant === 'b') return (
    <HiFiScreen hideTabs go={go}>
      <HiFiHeader title="Roda das emoções" onBack={() => go('home')} />
      <HiFiCard padding={16} style={{ marginBottom: 14 }}>
        <div style={{ position: 'relative', width: '100%', aspectRatio: '1' }}>
          <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="rgba(201,162,74,0.2)" strokeWidth="0.5" />;
            })}
            <circle cx="100" cy="100" r="90" fill="none" stroke="rgba(201,162,74,0.3)" />
            <circle cx="100" cy="100" r="60" fill="none" stroke="rgba(201,162,74,0.15)" />
            <circle cx="100" cy="100" r="30" fill="none" stroke="rgba(201,162,74,0.15)" />
            <circle cx="100" cy="100" r="6" fill={TT.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: TT.sans, fontSize: 10, color: '#fff' }}>{label}</div>;
          })}
        </div>
      </HiFiCard>
      <div style={{ textAlign: 'center', fontFamily: TT.sans, fontSize: 11, color: 'rgba(255,255,255,0.7)', marginBottom: 'auto' }}>
        Intensidade: <span style={{ color: TT.gold, fontWeight: 600 }}>média</span>
      </div>
      <HiFiButton primary full onClick={() => go('emotionsResult')}>Receber palavra ✨</HiFiButton>
    </HiFiScreen>
  );
  return (
    <HiFiScreen hideTabs go={go}>
      <HiFiHeader title="Conte com sua voz" onBack={() => go('home')} />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 20 }}>
        <div style={{
          width: 160, height: 160, borderRadius: '50%',
          border: `1px solid ${TT.gold}`, display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: `0 0 40px rgba(201,162,74,0.3)`,
        }}>
          <div style={{ position: 'absolute', width: 130, height: 130, borderRadius: '50%', border: `1px solid rgba(201,162,74,0.4)` }} />
          <div style={{ width: 56, height: 56, borderRadius: '50%', background: TT.gold, color: TT.navy, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: TT.mono, fontSize: 9, fontWeight: 700 }}>REC</div>
        </div>
        <div style={{ fontFamily: TT.serif, fontSize: 22, color: '#fff' }}>0:08</div>
        <div style={{ display: 'flex', gap: 3 }}>
          {Array.from({ length: 24 }).map((_, i) => (
            <div key={i} style={{ width: 2, height: 6 + Math.abs(Math.sin(i * 0.7)) * 24, background: TT.gold, opacity: 0.6, borderRadius: 1 }} />
          ))}
        </div>
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        <HiFiButton style={{ flex: 1 }} onClick={() => go('emotions', 'a')}>Escrever</HiFiButton>
        <HiFiButton primary style={{ flex: 1 }} onClick={() => go('emotionsResult')}>Finalizar</HiFiButton>
      </div>
    </HiFiScreen>
  );
}

function ScreenEmotionsResult({ go }) {
  return (
    <HiFiScreen hideTabs go={go}>
      <HiFiHeader title="Para o seu desânimo" onBack={() => go('emotions', 'a')} />
      <div style={{
        height: 130, borderRadius: 14, marginBottom: 12,
        backgroundImage: `linear-gradient(180deg, rgba(14,24,56,0.1), rgba(14,24,56,0.7)), url(assets/hands-praying.avif)`,
        backgroundSize: 'cover', backgroundPosition: 'center',
        display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: 14,
        border: `1px solid rgba(201,162,74,0.3)`,
      }}>
        <div style={{ fontFamily: TT.mono, fontSize: 9, color: TT.gold, letterSpacing: 1.5, textTransform: 'uppercase', marginBottom: 4 }}>Isaías 41:10</div>
        <div style={{ fontFamily: TT.serif, fontSize: 14, color: '#fff', fontStyle: 'italic', lineHeight: 1.3 }}>"Não temas, porque eu sou contigo."</div>
      </div>
      <HiFiCard style={{ marginBottom: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 36, height: 36, borderRadius: '50%', background: TT.gold, color: TT.navy, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13 }}>▶</div>
          <div style={{ flex: 1 }}>
            <div style={{ fontFamily: TT.sans, fontSize: 11, color: '#fff', marginBottom: 4 }}>Oração narrada</div>
            <div style={{ height: 3, background: 'rgba(255,255,255,0.15)', borderRadius: 2, overflow: 'hidden' }}>
              <div style={{ width: '34%', height: '100%', background: TT.gold }} />
            </div>
          </div>
          <div style={{ fontFamily: TT.mono, fontSize: 10, color: 'rgba(255,255,255,0.5)' }}>2:03</div>
        </div>
      </HiFiCard>
      <HiFiCard style={{ marginBottom: 'auto' }}>
        <div style={{ fontFamily: TT.sans, fontSize: 11, color: 'rgba(255,255,255,0.7)', lineHeight: 1.5 }}>
          <strong style={{ color: '#fff' }}>Reflexão:</strong> Permita que esta passagem more no seu coração esta noite. O Senhor caminha contigo.
        </div>
      </HiFiCard>
      <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
        <HiFiButton style={{ flex: 1 }}>Guardar</HiFiButton>
        <HiFiButton primary style={{ flex: 1 }} onClick={() => go('viral')}>Compartilhar</HiFiButton>
      </div>
    </HiFiScreen>
  );
}

// ─────────── 5. CARTAS DE DEUS
function ScreenLetter({ go }) {
  return (
    <HiFiScreen hideTabs go={go}>
      <HiFiHeader title="Carta de Deus" onBack={() => go('home')} />
      <HiFiCard padding={20} style={{ flex: 1, overflow: 'hidden', marginBottom: 12, background: 'rgba(255,255,255,0.06)' }}>
        <div style={{ fontFamily: TT.mono, fontSize: 9, color: TT.gold, letterSpacing: 1.5, marginBottom: 12 }}>7 DE MAIO DE 2026</div>
        <div style={{ fontFamily: TT.serif, fontSize: 20, color: '#fff', marginBottom: 12, fontWeight: 500 }}>Minha querida filha,</div>
        <div style={{ fontFamily: TT.serif, fontSize: 14, lineHeight: 1.6, color: 'rgba(255,255,255,0.85)', fontStyle: 'italic' }}>
          <p style={{ margin: '0 0 10px' }}>Eu vejo o seu cansaço. Vejo as noites em que você dorme tarde tentando resolver o que só Eu posso resolver.</p>
          <p style={{ margin: '0 0 10px' }}>Hoje, descanse. Amanhã eu cuido do que você não pode carregar.</p>
          <p style={{ margin: 0 }}>Com amor eterno,<br/><span style={{ color: TT.gold }}>seu Pai.</span></p>
        </div>
      </HiFiCard>
      <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
        <HiFiPill>🎧 ouvir</HiFiPill>
        <HiFiPill>↻ nova</HiFiPill>
        <HiFiPill>♡ guardar</HiFiPill>
      </div>
      <HiFiButton primary full onClick={() => go('viral')}>Compartilhar trecho</HiFiButton>
    </HiFiScreen>
  );
}

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