// Telas hi-fi 11-15: Bíblia Cinematográfica, Talentos, Afiliados, Planos, Botão Viral

const T9 = window.TOKENS;

// ─────────── 11. BÍBLIA CINEMATOGRÁFICA
function ScreenCinema({ go }) {
  return (
    <HiFiScreen hideTabs go={go} padding="60px 16px 0">
      <HiFiHeader title="Bíblia Cinematográfica" onBack={() => go('home')} />
      <div style={{ fontFamily: T9.mono, fontSize: 9, color: T9.gold, letterSpacing: 1.5, textTransform: 'uppercase', marginBottom: 8 }}>Êxodo 14 · Cena 3 de 8</div>
      <div style={{
        flex: 1, borderRadius: 16, overflow: 'hidden', position: 'relative',
        backgroundImage: `linear-gradient(180deg, rgba(14,24,56,0.1) 0%, rgba(14,24,56,0.85) 100%), url(assets/bible.jpeg)`,
        backgroundSize: 'cover', backgroundPosition: 'center',
        border: `1px solid rgba(201,162,74,0.35)`,
        display: 'flex', alignItems: 'flex-end', padding: 18, marginBottom: 10,
      }}>
        {Array.from({ length: 14 }).map((_, i) => (
          <div key={i} style={{
            position: 'absolute',
            left: `${(i * 31) % 100}%`, top: `${(i * 47) % 90}%`,
            width: 2, height: 2, borderRadius: '50%', background: T9.gold, opacity: 0.5,
          }} />
        ))}
        <div style={{ fontFamily: T9.serif, fontSize: 18, color: '#fff', fontStyle: 'italic', lineHeight: 1.3, position: 'relative', zIndex: 2 }}>
          "O Senhor pelejará por vós, e vós vos calareis."
        </div>
      </div>
      <HiFiCard padding={6} style={{ marginBottom: 10, display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 32, height: 32, borderRadius: '50%', background: T9.gold, color: T9.navy, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12 }}>▶</div>
        <div style={{ flex: 1 }}>
          <div style={{ height: 2, background: 'rgba(255,255,255,0.15)', borderRadius: 1, overflow: 'hidden' }}>
            <div style={{ width: '38%', height: '100%', background: T9.gold }} />
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: T9.mono, fontSize: 9, color: 'rgba(255,255,255,0.5)', marginTop: 3 }}>
            <span>1:24</span><span>3:42</span>
          </div>
        </div>
      </HiFiCard>
      <div style={{ display: 'flex', gap: 6, overflow: 'hidden' }}>
        {[1, 2, 3, 4, 5, 6, 7, 8].map(n => (
          <div key={n} style={{
            flex: '0 0 56px', aspectRatio: '4/5', borderRadius: 8,
            background: `repeating-linear-gradient(135deg, rgba(255,255,255,${n === 3 ? 0.12 : 0.04}) 0 4px, transparent 4px 8px)`,
            border: n === 3 ? `1px solid ${T9.gold}` : `1px solid rgba(255,255,255,0.08)`,
            display: 'flex', alignItems: 'flex-end', padding: 4,
            fontFamily: T9.mono, fontSize: 8, color: 'rgba(255,255,255,0.6)',
          }}>{n}</div>
        ))}
      </div>
    </HiFiScreen>
  );
}

// ─────────── 12. TALENTOS
function ScreenTalents({ go }) {
  return (
    <HiFiScreen activeTab="talents" go={go}>
      <HiFiHeader title="Carteira · Talentos" onBack={() => go('home')} />
      <HiFiCard padding={20} style={{ textAlign: 'center', marginBottom: 12, background: 'linear-gradient(180deg, rgba(201,162,74,0.18), rgba(201,162,74,0.04))' }}>
        <div style={{ fontFamily: T9.mono, fontSize: 9, color: T9.gold, letterSpacing: 1.5, textTransform: 'uppercase', marginBottom: 6 }}>Saldo</div>
        <div style={{ fontFamily: T9.serif, fontSize: 44, color: '#fff', fontWeight: 500, lineHeight: 1 }}>4.500</div>
        <div style={{ fontFamily: T9.sans, fontSize: 11, color: 'rgba(255,255,255,0.7)', marginTop: 6 }}>+250 esta semana</div>
        <div style={{ height: 3, background: 'rgba(255,255,255,0.15)', borderRadius: 2, overflow: 'hidden', marginTop: 10 }}>
          <div style={{ width: '82%', height: '100%', background: T9.gold }} />
        </div>
      </HiFiCard>
      <div style={{ fontFamily: T9.mono, fontSize: 9, color: 'rgba(255,255,255,0.5)', letterSpacing: 1, textTransform: 'uppercase', marginBottom: 6 }}>Como ganhar</div>
      <HiFiCard padding={0} style={{ marginBottom: 10, overflow: 'hidden' }}>
        {[
          { t: 'Oração diária', v: '+5', done: true },
          { t: 'Etapa de promessa', v: '+10', done: false },
          { t: 'Convidar amigo', v: '+25', done: false },
        ].map((it, i, arr) => (
          <div key={i} style={{
            padding: '10px 14px',
            borderBottom: i < arr.length - 1 ? `1px solid rgba(255,255,255,0.08)` : 'none',
            display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <div style={{
              width: 20, height: 20, borderRadius: '50%',
              border: `1px solid ${it.done ? T9.gold : 'rgba(255,255,255,0.25)'}`,
              background: it.done ? T9.gold : 'transparent',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: T9.navy, fontSize: 10,
            }}>{it.done ? '✓' : ''}</div>
            <div style={{ flex: 1, fontFamily: T9.sans, fontSize: 12, color: '#fff' }}>{it.t}</div>
            <div style={{ fontFamily: T9.mono, fontSize: 11, color: T9.gold, fontWeight: 600 }}>{it.v}</div>
          </div>
        ))}
      </HiFiCard>
      <div style={{ fontFamily: T9.mono, fontSize: 9, color: 'rgba(255,255,255,0.5)', letterSpacing: 1, textTransform: 'uppercase', marginBottom: 6 }}>Trocar por</div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 'auto' }}>
        {[
          { t: 'Créditos IA', c: '50 talentos' },
          { t: 'Voz premium', c: '120 talentos' },
        ].map((p, i) => (
          <HiFiCard key={i} padding={10}>
            <div style={{ width: 20, height: 20, borderRadius: '50%', border: `1px solid ${T9.gold}`, marginBottom: 8 }} />
            <div style={{ fontFamily: T9.sans, fontSize: 12, color: '#fff', fontWeight: 600 }}>{p.t}</div>
            <div style={{ fontFamily: T9.mono, fontSize: 10, color: T9.gold, marginTop: 2 }}>{p.c}</div>
          </HiFiCard>
        ))}
      </div>
    </HiFiScreen>
  );
}

// ─────────── 13. AFILIADOS
function ScreenAffiliate({ go }) {
  return (
    <HiFiScreen hideTabs go={go}>
      <HiFiHeader title="Painel de Afiliados" onBack={() => go('home')} />
      <HiFiCard padding={16} style={{ marginBottom: 10, background: 'linear-gradient(180deg, rgba(201,162,74,0.18), rgba(201,162,74,0.04))' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6 }}>
          <div style={{ fontFamily: T9.mono, fontSize: 9, color: T9.gold, letterSpacing: 1, textTransform: 'uppercase' }}>Saldo</div>
          <div style={{ fontFamily: T9.mono, fontSize: 9, color: T9.gold, letterSpacing: 1, textTransform: 'uppercase' }}>Nível Ouro</div>
        </div>
        <div style={{ fontFamily: T9.serif, fontSize: 30, color: '#fff', fontWeight: 500, marginBottom: 8 }}>R$ 4.500,00</div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: T9.sans, fontSize: 11, color: 'rgba(255,255,255,0.7)', marginBottom: 6 }}>
          <span>Meta</span>
          <span><strong style={{ color: '#fff' }}>500</strong> / 1.000</span>
        </div>
        <div style={{ height: 4, background: 'rgba(255,255,255,0.15)', borderRadius: 2, overflow: 'hidden' }}>
          <div style={{ width: '50%', height: '100%', background: T9.gold }} />
        </div>
      </HiFiCard>
      <div style={{ fontFamily: T9.mono, fontSize: 9, color: 'rgba(255,255,255,0.5)', letterSpacing: 1, textTransform: 'uppercase', marginBottom: 6 }}>Ganhos mensais</div>
      <HiFiCard padding={12} style={{ marginBottom: 10, height: 100 }}>
        <svg viewBox="0 0 280 70" width="100%" height="100%" preserveAspectRatio="none">
          <polyline fill="none" stroke={T9.gold} strokeWidth="2"
            points="0,55 50,40 100,45 150,28 200,18 250,8 280,12" />
          <polyline fill="rgba(201,162,74,0.15)" stroke="none"
            points="0,55 50,40 100,45 150,28 200,18 250,8 280,12 280,70 0,70" />
        </svg>
      </HiFiCard>
      <div style={{ fontFamily: T9.mono, fontSize: 9, color: 'rgba(255,255,255,0.5)', letterSpacing: 1, textTransform: 'uppercase', marginBottom: 6 }}>Seu link</div>
      <HiFiCard padding={8} style={{ marginBottom: 10, display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ flex: 1, fontFamily: T9.mono, fontSize: 11, color: 'rgba(255,255,255,0.7)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
          divineai.app/r/mariana
        </div>
        <button style={{ background: T9.gold, color: T9.navy, border: 'none', padding: '6px 12px', borderRadius: 999, fontFamily: T9.sans, fontSize: 10, fontWeight: 600, cursor: 'pointer' }}>copiar</button>
      </HiFiCard>
      <HiFiCard padding={10} style={{ marginTop: 'auto' }}>
        <div style={{ fontFamily: T9.sans, fontSize: 12, color: '#fff', fontWeight: 600, marginBottom: 4 }}>Kit de Guerra</div>
        <div style={{ fontFamily: T9.sans, fontSize: 10, color: 'rgba(255,255,255,0.7)', lineHeight: 1.4 }}>
          Posts, vídeos e cupom personalizado <span style={{ color: T9.gold }}>PASTORANDRE</span>
        </div>
      </HiFiCard>
    </HiFiScreen>
  );
}

// ─────────── 14. PLANOS
function ScreenPlans({ go }) {
  const plans = [
    { n: 'Caminho', s: 'Grátis', p: 'R$ 0', current: true },
    { n: 'Aliança', s: 'Premium', p: 'R$ 29', highlight: true },
    { n: 'Mensageiro', s: 'Creator Pro', p: 'R$ 79' },
    { n: 'Reino', s: 'Church Pro', p: 'R$ 199' },
  ];
  return (
    <HiFiScreen hideTabs go={go}>
      <HiFiHeader title="Escolha sua jornada" onBack={() => go('home')} />
      <div style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column', gap: 8 }}>
        {plans.map((p, i) => (
          <HiFiCard key={i} padding={14} style={{
            background: p.highlight ? 'linear-gradient(180deg, rgba(201,162,74,0.2), rgba(201,162,74,0.04))' : 'rgba(255,255,255,0.05)',
            border: p.highlight ? `1px solid ${T9.gold}` : `1px solid rgba(201,162,74,0.2)`,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
              <div style={{ fontFamily: T9.mono, fontSize: 9, color: p.highlight ? T9.gold : 'rgba(255,255,255,0.5)', letterSpacing: 1.5, textTransform: 'uppercase' }}>{p.s}</div>
              {p.highlight && <div style={{ fontFamily: T9.mono, fontSize: 9, color: T9.gold, letterSpacing: 1.5, textTransform: 'uppercase' }}>★ recomendado</div>}
              {p.current && <div style={{ fontFamily: T9.mono, fontSize: 9, color: 'rgba(255,255,255,0.5)', letterSpacing: 1.5, textTransform: 'uppercase' }}>atual</div>}
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <div style={{ fontFamily: T9.serif, fontSize: 22, color: '#fff', fontWeight: 500 }}>{p.n}</div>
              <div style={{ fontFamily: T9.sans, fontSize: 14, color: '#fff', fontWeight: 600 }}>{p.p}<span style={{ fontSize: 10, color: 'rgba(255,255,255,0.6)' }}>/mês</span></div>
            </div>
          </HiFiCard>
        ))}
      </div>
      <div style={{ fontFamily: T9.sans, fontSize: 10, color: 'rgba(255,255,255,0.4)', textAlign: 'center', marginTop: 10 }}>
        7 dias de garantia · cancele quando quiser
      </div>
    </HiFiScreen>
  );
}

// ─────────── 15. BOTÃO VIRAL
function ScreenViral({ go }) {
  return (
    <HiFiScreen hideTabs go={go} padding="60px 16px 0">
      <HiFiHeader title="Uma palavra para mim" onBack={() => go('home')} />
      <div style={{
        flex: 1, borderRadius: 18, overflow: 'hidden', position: 'relative', marginBottom: 12,
        backgroundImage: `linear-gradient(180deg, rgba(14,24,56,0.4), rgba(14,24,56,0.85)), url(assets/sunset.jpg)`,
        backgroundSize: 'cover', backgroundPosition: 'center',
        border: `1px solid rgba(201,162,74,0.4)`,
        padding: 24, display: 'flex', flexDirection: 'column',
      }}>
        {Array.from({ length: 22 }).map((_, i) => (
          <div key={i} style={{
            position: 'absolute',
            left: `${(i * 31) % 100}%`, top: `${(i * 47) % 100}%`,
            width: 1 + (i % 3), height: 1 + (i % 3), borderRadius: '50%',
            background: T9.gold, opacity: 0.2 + (i % 4) * 0.1,
          }} />
        ))}
        <img src="assets/divineai-logo.png" alt="" style={{ width: 90, filter: 'brightness(1.2)', alignSelf: 'flex-start', position: 'relative', zIndex: 2 }} />
        <div style={{ marginTop: 'auto', position: 'relative', zIndex: 2 }}>
          <div style={{ fontFamily: T9.mono, fontSize: 9, color: T9.gold, letterSpacing: 2, textTransform: 'uppercase', marginBottom: 10 }}>Provérbios 3:5</div>
          <div style={{ fontFamily: T9.serif, fontSize: 22, color: '#fff', lineHeight: 1.25, fontStyle: 'italic', fontWeight: 500, marginBottom: 16 }}>
            "Confia no Senhor de todo o teu coração."
          </div>
          <div style={{ fontFamily: T9.sans, fontSize: 10, color: 'rgba(255,255,255,0.6)', letterSpacing: 1, textTransform: 'uppercase' }}>
            divineai · para mariana
          </div>
        </div>
      </div>
      <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
        <HiFiButton style={{ flex: 1 }}>Nova palavra</HiFiButton>
        <HiFiButton primary style={{ flex: 1.4 }}>Compartilhar</HiFiButton>
      </div>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
        {['stories', 'whats', 'feed', 'baixar'].map(s => (
          <div key={s} style={{ textAlign: 'center' }}>
            <div style={{ width: 32, height: 32, borderRadius: '50%', border: `1px solid rgba(255,255,255,0.2)`, marginBottom: 3 }} />
            <div style={{ fontFamily: T9.sans, fontSize: 9, color: 'rgba(255,255,255,0.5)' }}>{s}</div>
          </div>
        ))}
      </div>
    </HiFiScreen>
  );
}

Object.assign(window, { ScreenCinema, ScreenTalents, ScreenAffiliate, ScreenPlans, ScreenViral });