// Telas hi-fi 6-10: Promessas, Timeline, Cápsula, CreatorAx, Voz IA

const T6 = window.TOKENS;

// ─────────── 6. CAIXA DE PROMESSAS
function ScreenPromise({ go }) {
  return (
    <HiFiScreen activeTab="promise" go={go}>
      <HiFiHeader title="Caixa de Promessas" onBack={() => go('home')}
        action={<button style={{ width: 36, height: 36, borderRadius: '50%', background: T6.gold, color: T6.navy, border: 'none', cursor: 'pointer', fontSize: 18, fontWeight: 600 }}>+</button>} />
      <div style={{ display: 'flex', gap: 6, marginBottom: 14 }}>
        {['Ativas', 'Cumpridas', 'Cápsulas'].map((t, i) => (
          <button key={t} style={{
            flex: 1, padding: '8px 0', borderRadius: 999,
            background: i === 0 ? 'rgba(201,162,74,0.2)' : 'transparent',
            border: `1px solid ${i === 0 ? T6.gold : 'rgba(255,255,255,0.12)'}`,
            color: '#fff', fontFamily: T6.sans, fontSize: 11, fontWeight: 500, cursor: 'pointer',
          }}>{t}</button>
        ))}
      </div>
      <HiFiCard padding={14} style={{ marginBottom: 10 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
          <div style={{ fontFamily: T6.mono, fontSize: 9, color: T6.gold, letterSpacing: 1, textTransform: 'uppercase' }}>Em curso · 21 dias</div>
          <div style={{ fontFamily: T6.mono, fontSize: 10, color: '#fff' }}>14/21</div>
        </div>
        <div style={{ fontFamily: T6.serif, fontSize: 17, color: '#fff', fontWeight: 500, marginBottom: 8 }}>Restauração da família</div>
        <div style={{ display: 'flex', gap: 3, marginBottom: 4 }}>
          {Array.from({ length: 21 }).map((_, i) => (
            <div key={i} style={{ flex: 1, height: 5, borderRadius: 1, background: i < 14 ? T6.gold : 'rgba(255,255,255,0.12)' }} />
          ))}
        </div>
      </HiFiCard>
      {[
        { t: 'Restauração da saúde', d: '7 dias', p: 0.43, days: '3/7' },
        { t: 'Sabedoria nas finanças', d: '90 dias', p: 0.12, days: '11/90' },
      ].map((p, i) => (
        <HiFiCard key={i} padding={12} style={{ marginBottom: 8 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
            <div style={{ fontFamily: T6.serif, fontSize: 14, color: '#fff', fontWeight: 500 }}>{p.t}</div>
            <div style={{ fontFamily: T6.mono, fontSize: 9, color: 'rgba(255,255,255,0.6)' }}>{p.days}</div>
          </div>
          <div style={{ height: 3, background: 'rgba(255,255,255,0.12)', borderRadius: 2, overflow: 'hidden' }}>
            <div style={{ width: `${p.p * 100}%`, height: '100%', background: T6.gold }} />
          </div>
        </HiFiCard>
      ))}
      <HiFiCard padding={12} style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ width: 6, height: 6, borderRadius: '50%', background: T6.gold }} />
        <div style={{ flex: 1, fontFamily: T6.sans, fontSize: 11, color: 'rgba(255,255,255,0.7)' }}>
          <strong style={{ color: '#fff' }}>IA:</strong> faltam 7 dias — adicionar oração?
        </div>
      </HiFiCard>
    </HiFiScreen>
  );
}

// ─────────── 7. TIMELINE
function ScreenTimeline({ go }) {
  const items = [
    { d: 'mai 2026', t: 'Semana de paz em casa', k: 'progress' },
    { d: 'abr 2026', t: 'Emprego confirmado', k: 'miracle' },
    { d: 'mar 2026', t: 'Exame positivo', k: 'miracle' },
    { d: 'fev 2026', t: 'Pedido por sabedoria', k: 'request' },
    { d: 'jan 2026', t: 'Reconciliação com irmão', k: 'miracle' },
  ];
  return (
    <HiFiScreen hideTabs go={go}>
      <HiFiHeader title="Timeline das Bênçãos" onBack={() => go('home')} />
      <div style={{ display: 'flex', gap: 6, marginBottom: 14 }}>
        {['Tudo', 'Milagres', 'Pedidos'].map((t, i) => (
          <HiFiPill key={t} gold={i === 0}>{t}</HiFiPill>
        ))}
      </div>
      <div style={{ flex: 1, overflow: 'hidden', position: 'relative', paddingLeft: 24 }}>
        <div style={{ position: 'absolute', left: 7, top: 4, bottom: 4, width: 1, background: 'rgba(201,162,74,0.3)' }} />
        {items.map((it, i) => (
          <div key={i} style={{ position: 'relative', marginBottom: 10 }}>
            <div style={{
              position: 'absolute', left: -22, top: 12,
              width: 14, height: 14, borderRadius: '50%',
              background: it.k === 'miracle' ? T6.gold : it.k === 'progress' ? 'rgba(201,162,74,0.4)' : T6.navy,
              border: `1px solid ${T6.gold}`,
            }} />
            <HiFiCard padding={10}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 2 }}>
                <div style={{ fontFamily: T6.mono, fontSize: 8, color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', letterSpacing: 1 }}>{it.d}</div>
                <div style={{ fontFamily: T6.mono, fontSize: 8, color: it.k === 'miracle' ? T6.gold : 'rgba(255,255,255,0.6)', textTransform: 'uppercase', letterSpacing: 1 }}>{it.k}</div>
              </div>
              <div style={{ fontFamily: T6.serif, fontSize: 14, color: '#fff' }}>{it.t}</div>
            </HiFiCard>
          </div>
        ))}
      </div>
      <HiFiCard style={{ textAlign: 'center', marginTop: 8 }}>
        <div style={{ fontFamily: T6.serif, fontSize: 24, color: T6.gold, fontWeight: 500 }}>12</div>
        <div style={{ fontFamily: T6.sans, fontSize: 10, color: 'rgba(255,255,255,0.6)' }}>milagres em 2026</div>
      </HiFiCard>
    </HiFiScreen>
  );
}

// ─────────── 8. CÁPSULA DA FÉ
function ScreenCapsule({ go }) {
  return (
    <HiFiScreen hideTabs go={go}>
      <HiFiHeader title="Cápsula da Fé" onBack={() => go('home')} />
      <HiFiCard padding={16} style={{ marginBottom: 12, minHeight: 130 }}>
        <div style={{ fontFamily: T6.mono, fontSize: 9, color: T6.gold, letterSpacing: 1, textTransform: 'uppercase', marginBottom: 8 }}>Mensagem para o futuro</div>
        <div style={{ fontFamily: T6.serif, fontSize: 14, color: 'rgba(255,255,255,0.7)', fontStyle: 'italic', lineHeight: 1.5 }}>
          "Eu quero que você se lembre que, mesmo no escuro, a luz já estava a caminho…"
        </div>
      </HiFiCard>
      <HiFiCard padding={14} style={{ marginBottom: 12 }}>
        <div style={{ fontFamily: T6.mono, fontSize: 9, color: T6.gold, letterSpacing: 1, textTransform: 'uppercase', marginBottom: 8 }}>Abrir em</div>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 8 }}>
          {['3 meses', '6 meses', '1 ano', '3 anos'].map((d, i) => <HiFiPill key={d} gold={i === 1}>{d}</HiFiPill>)}
        </div>
        <div style={{ fontFamily: T6.sans, fontSize: 11, color: 'rgba(255,255,255,0.7)' }}>
          Será liberada em <span style={{ color: T6.gold, fontWeight: 600 }}>7 nov 2026</span>
        </div>
      </HiFiCard>
      <div style={{ fontFamily: T6.mono, fontSize: 9, color: 'rgba(255,255,255,0.5)', letterSpacing: 1, textTransform: 'uppercase', marginBottom: 8 }}>Anteriores</div>
      <div style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column', gap: 6 }}>
        {[
          { d: 'abre em 14 dias', t: 'Para quando eu duvidar', locked: true },
          { d: 'aberta em 02/2026', t: 'A jovem que eu fui', locked: false },
        ].map((c, i) => (
          <HiFiCard key={i} padding={10} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{
              width: 32, height: 32, borderRadius: '50%',
              background: c.locked ? 'rgba(255,255,255,0.06)' : 'rgba(201,162,74,0.25)',
              border: `1px solid ${c.locked ? 'rgba(255,255,255,0.2)' : T6.gold}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: c.locked ? 'rgba(255,255,255,0.5)' : T6.gold, fontSize: 11,
            }}>{c.locked ? '⌛' : '✓'}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: T6.serif, fontSize: 14, color: '#fff' }}>{c.t}</div>
              <div style={{ fontFamily: T6.sans, fontSize: 10, color: 'rgba(255,255,255,0.6)' }}>{c.d}</div>
            </div>
          </HiFiCard>
        ))}
      </div>
      <HiFiButton primary full style={{ marginTop: 10 }}>Selar cápsula</HiFiButton>
    </HiFiScreen>
  );
}

// ─────────── 9. CREATORAX
function ScreenCreator({ go }) {
  return (
    <HiFiScreen activeTab="creator" go={go}>
      <HiFiHeader title="Creator Studio" onBack={() => go('home')} />
      <HiFiCard padding={12} style={{ marginBottom: 10 }}>
        <div style={{ fontFamily: T6.mono, fontSize: 9, color: T6.gold, letterSpacing: 1, textTransform: 'uppercase', marginBottom: 6 }}>Versículo</div>
        <div style={{ fontFamily: T6.serif, fontSize: 15, color: '#fff' }}>Salmos 91 — proteção</div>
      </HiFiCard>
      <div style={{ fontFamily: T6.mono, fontSize: 9, color: 'rgba(255,255,255,0.5)', letterSpacing: 1, textTransform: 'uppercase', marginBottom: 8 }}>Estilo visual</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8, marginBottom: 12 }}>
        {[
          { l: 'Cinema', img: 'assets/sunset.jpg' },
          { l: 'Bíblia', img: 'assets/bible.jpeg' },
          { l: 'Oração', img: 'assets/hands-praying.avif' },
        ].map((s, i) => (
          <div key={s.l} style={{
            aspectRatio: '9/16', borderRadius: 10,
            border: `1px solid ${i === 0 ? T6.gold : 'rgba(255,255,255,0.15)'}`,
            backgroundImage: `linear-gradient(180deg, rgba(14,24,56,0.1), rgba(14,24,56,0.7)), url(${s.img})`,
            backgroundSize: 'cover', backgroundPosition: 'center',
            display: 'flex', alignItems: 'flex-end', padding: 6,
            fontFamily: T6.sans, fontSize: 10, color: '#fff', fontWeight: 600,
          }}>{s.l}</div>
        ))}
      </div>
      <HiFiCard padding={0} style={{ marginBottom: 10, overflow: 'hidden' }}>
        {[
          { l: 'Voz', v: 'Pastor André (clonada)' },
          { l: 'Música', v: 'Cinemática · piano' },
          { l: 'Duração', v: '0:30' },
        ].map((row, i, arr) => (
          <div key={row.l} style={{
            padding: '10px 14px',
            borderBottom: i < arr.length - 1 ? `1px solid rgba(255,255,255,0.08)` : 'none',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          }}>
            <span style={{ fontFamily: T6.sans, fontSize: 12, color: '#fff' }}>{row.l}</span>
            <span style={{ fontFamily: T6.sans, fontSize: 11, color: 'rgba(255,255,255,0.7)' }}>{row.v} ›</span>
          </div>
        ))}
      </HiFiCard>
      <div style={{ display: 'flex', gap: 6, marginBottom: 'auto' }}>
        {['TikTok', 'Reels', 'Shorts'].map(p => <HiFiPill key={p}>{p}</HiFiPill>)}
      </div>
      <HiFiCard padding={10} style={{ marginTop: 10, marginBottom: 10, display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ width: 5, height: 5, borderRadius: '50%', background: T6.gold }} />
        <div style={{ flex: 1, fontFamily: T6.sans, fontSize: 11, color: 'rgba(255,255,255,0.7)' }}>
          Custo: <strong style={{ color: '#fff' }}>40 créditos</strong> · saldo 4.500
        </div>
      </HiFiCard>
      <HiFiButton primary full>✨ Gerar reel</HiFiButton>
    </HiFiScreen>
  );
}

// ─────────── 10. MINHA VOZ IA
function ScreenVoice({ go }) {
  return (
    <HiFiScreen hideTabs go={go}>
      <HiFiHeader title="Minha Voz · Clonagem" onBack={() => go('creator')} />
      <div style={{ display: 'flex', gap: 6, marginBottom: 14 }}>
        {[1, 2, 3].map((n, i) => (
          <div key={n} style={{ flex: 1 }}>
            <div style={{ height: 3, borderRadius: 2, background: i <= 1 ? T6.gold : 'rgba(255,255,255,0.12)' }} />
            <div style={{ fontFamily: T6.mono, fontSize: 8, color: i <= 1 ? T6.gold : 'rgba(255,255,255,0.4)', marginTop: 4, letterSpacing: 1 }}>ETAPA {n}</div>
          </div>
        ))}
      </div>
      <HiFiCard padding={16} style={{ marginBottom: 14 }}>
        <div style={{ fontFamily: T6.mono, fontSize: 9, color: T6.gold, letterSpacing: 1, textTransform: 'uppercase', marginBottom: 8 }}>Leia em voz alta</div>
        <div style={{ fontFamily: T6.serif, fontSize: 16, color: '#fff', lineHeight: 1.4, fontStyle: 'italic' }}>
          "Bem-aventurado o homem que confia no Senhor."
        </div>
        <div style={{ fontFamily: T6.sans, fontSize: 10, color: 'rgba(255,255,255,0.5)', marginTop: 8 }}>Jeremias 17:7 · 2 de 5</div>
      </HiFiCard>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 16 }}>
        <div style={{
          width: 72, height: 72, borderRadius: '50%', border: `1px solid ${T6.gold}`,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: `0 0 30px rgba(201,162,74,0.3)`,
        }}>
          <div style={{ width: 36, height: 36, borderRadius: '50%', background: T6.gold }} />
        </div>
        <div style={{ display: 'flex', gap: 3 }}>
          {Array.from({ length: 28 }).map((_, i) => (
            <div key={i} style={{ width: 2, height: 6 + Math.abs(Math.sin(i * 0.5)) * 22, background: i < 16 ? T6.gold : 'rgba(255,255,255,0.2)', borderRadius: 1 }} />
          ))}
        </div>
      </div>
      <HiFiCard padding={10} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 30, height: 30, borderRadius: '50%', background: 'rgba(201,162,74,0.25)', color: T6.gold, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12 }}>♪</div>
        <div style={{ flex: 1 }}>
          <div style={{ fontFamily: T6.sans, fontSize: 12, color: '#fff', fontWeight: 600 }}>Minha voz · principal</div>
          <div style={{ fontFamily: T6.sans, fontSize: 10, color: 'rgba(255,255,255,0.6)' }}>4:32 · ativa</div>
        </div>
        <div style={{ fontFamily: T6.mono, fontSize: 8, color: T6.gold, letterSpacing: 1, textTransform: 'uppercase' }}>EM USO</div>
      </HiFiCard>
    </HiFiScreen>
  );
}

Object.assign(window, { ScreenPromise, ScreenTimeline, ScreenCapsule, ScreenCreator, ScreenVoice });