/* NINA — páginas legais (Privacidade + Termos), em sub-abas. Voz simples e clara. */
const { useState: gUS, useEffect: gUE } = React;
const G = () => window.NinaData;
const LEGAL_API = window.NINA_API_BASE || '/api';

const PRIVACY = [
  ['Quais dados eu guardo', 'Guardo só o necessário pra te ajudar: seu nome, e-mail e número de WhatsApp; e o que você registra comigo (gastos, contas, compromissos, cartões). Não peço nem armazeno senha de banco — seu acesso é por código no WhatsApp.'],
  ['Como eu uso seus dados', 'Uso pra organizar sua vida financeira, te mostrar gráficos e te lembrar das coisas. Processo o que você me manda (texto, áudio, foto) pra entender e registrar. Nada disso vira anúncio nem é vendido.'],
  ['Com quem compartilho', 'Com ninguém pra fins de marketing. Uso provedores de tecnologia (nuvem, IA, pagamento) só pra fazer o serviço funcionar, sempre com contrato e segurança. Nunca vendo seus dados.'],
  ['Seus direitos (LGPD)', 'Você manda nos seus dados. A qualquer momento dá pra exportar tudo (CSV) ou apagar sua conta inteira, em dois passos, lá no Perfil. É só pedir — sem burocracia.'],
  ['Segurança', 'Seus dados trafegam criptografados e ficam guardados com cuidado. Faço backups e monitoro o sistema. Se algo sério acontecer, eu te aviso.'],
  ['Contato', 'Dúvida sobre privacidade? Fala comigo no WhatsApp ou no e-mail de suporte. Respondo rápido e sem juridiquês.'],
];
const TERMS = [
  ['O que é a Nina', 'Sou uma assistente financeira pessoal que vive no WhatsApp, na web e no app. Te ajudo a registrar e entender seus gastos, mas não sou um banco e não dou conselho de investimento.'],
  ['Teste e assinatura', 'Você começa com um teste grátis (o prazo aparece no app, vindo da nossa configuração). Depois, a assinatura é mensal pelo preço mostrado no momento da contratação. Cancele quando quiser — sem multa.'],
  ['Pagamento', 'A cobrança é por Pix ou cartão, conforme o que estiver disponível. Renova automaticamente até você cancelar. Se um pagamento falhar, eu te aviso antes de pausar o acesso.'],
  ['Uso responsável', 'Use a Nina pra organizar a sua vida — não pra fins ilegais nem pra terceiros sem permissão. Os números que mostro são pra te orientar; as decisões são suas.'],
  ['Disponibilidade', 'Faço o meu melhor pra estar sempre no ar, mas pode haver manutenção ou instabilidade. Não me responsabilizo por decisões tomadas com base em dados temporariamente indisponíveis.'],
  ['Mudanças nestes termos', 'Se algo mudar, eu te aviso por aqui e pelo WhatsApp com antecedência. Continuar usando depois do aviso significa que você concorda com a nova versão.'],
];

function Legal() {
  const cfg = G().config;
  const [tab, setTab] = gUS(() => (location.hash.replace('#', '') === 'termos' ? 'termos' : 'privacidade'));
  gUE(() => { const h = () => setTab(location.hash.replace('#', '') === 'termos' ? 'termos' : 'privacidade'); window.addEventListener('hashchange', h); return () => window.removeEventListener('hashchange', h); }, []);
  const items = tab === 'termos' ? TERMS : PRIVACY;
  return (
    <div>
      <nav className="lp-nav">
        <a href="index.html" className="lp-nav__brand" style={{ textDecoration: 'none', color: 'inherit' }}>
          <img src={cfg.logos.mark} alt="" /><span>{cfg.projectName}</span>
        </a>
        <div className="lp-nav__links">
          <a href="index.html" className="lp-nav__link">← Voltar ao site</a>
          <a href="entrada.html" className="btn btn--primary" style={{ padding: '9px 16px' }}>Começar grátis</a>
        </div>
      </nav>

      <div className="lp" style={{ maxWidth: 820 }}>
        <header style={{ padding: '64px 0 24px' }}>
          <span className="lp-eyebrow"><Icon name="shield" size={14} /> Transparência</span>
          <h1 className="lp-h2" style={{ fontSize: 40, marginBottom: 8 }}>{tab === 'termos' ? 'Termos de uso' : 'Política de privacidade'}</h1>
          <p className="muted">Escrito pra ser entendido. Sem letrinha miúda escondida. Atualizado em 5 de junho de 2026.</p>
        </header>

        <div className="subtabs" style={{ marginBottom: 32 }}>
          <button className={tab === 'privacidade' ? 'on' : ''} onClick={() => { location.hash = 'privacidade'; }}>Privacidade</button>
          <button className={tab === 'termos' ? 'on' : ''} onClick={() => { location.hash = 'termos'; }}>Termos de uso</button>
        </div>

        <div className="col rise" style={{ gap: 28, paddingBottom: 64 }}>
          {items.map(([t, d], i) => (
            <div key={t} className="row" style={{ gap: 18, alignItems: 'flex-start' }}>
              <span className="serif" style={{ fontSize: 22, fontWeight: 600, color: 'var(--coral-tint)', minWidth: 32 }}>{String(i + 1).padStart(2, '0')}</span>
              <div>
                <h2 className="serif" style={{ fontSize: 20, fontWeight: 600, margin: '0 0 8px' }}>{t}</h2>
                <p className="muted" style={{ margin: 0, fontSize: 16, lineHeight: 1.6 }}>{d}</p>
              </div>
            </div>
          ))}
          <div className="card card--pad" style={{ background: 'var(--surface-warm)', marginTop: 8 }}>
            <div className="row" style={{ gap: 10, alignItems: 'center' }}>
              <img src={cfg.logos.mark} alt="" style={{ width: 40, height: 40, borderRadius: 999 }} />
              <div style={{ fontSize: 14 }}>Ficou com dúvida? <a href={`mailto:${cfg.contact.email}`} style={{ color: 'var(--coral-strong)', fontWeight: 600 }}>{cfg.contact.email}</a> ou no WhatsApp. 🧡</div>
            </div>
          </div>
        </div>
      </div>

      <footer className="lp-footer">
        <div className="lp" style={{ maxWidth: 820 }}>
          <div className="lp-footer__grid">
            <div className="lp-nav__brand"><img src={cfg.logos.mark} alt="" /><span>{cfg.projectName}</span></div>
            <div className="lp-footer__links">
              <a href="index.html">Início</a><a href="#privacidade">Privacidade</a><a href="#termos">Termos</a><a href={`mailto:${cfg.contact.email}`}>Suporte</a>
            </div>
          </div>
          <div className="subtle" style={{ fontSize: 13, marginTop: 24 }}>© 2026 {cfg.projectName} · {cfg.contact.site}</div>
        </div>
      </footer>
    </div>
  );
}

(async () => {
  try {
    const r = await fetch(LEGAL_API + '/config');
    if (r.ok) {
      const cfg = await r.json();
      const nd = window.NinaData;
      nd.config.projectName = cfg.projectName || nd.config.projectName;
      if (cfg.contact) Object.assign(nd.config.contact, cfg.contact);
      if (cfg.logos) Object.assign(nd.config.logos, {
        mark: cfg.logos.mark || nd.config.logos.mark,
        lockup: cfg.logos.lockup || nd.config.logos.lockup,
      });
      if (cfg.palette && cfg.palette.accent) {
        window.applyNinaPalette({ accent: cfg.palette.accent, strong: cfg.palette.accent, tint: cfg.palette.accent + '22' });
      }
    }
  } catch (e) { /* segue com o default */ }
  ReactDOM.createRoot(document.getElementById('root')).render(<Legal />);
})();