/* global React */
// Craque Cidadão — Política de Privacidade (LGPD)
const { Icon: I5, Reveal: R5, WA_LINK: WA5 } = window;

const PRIVACY_UPDATED = 'outubro de 2026';

const PRIVACY_SECTIONS = [
  { id: 'quem-somos', t: 'Quem somos', body: [
    'A ONG Craque Cidadão, inscrita no CNPJ 11.808.208/0001-58, com sede na Rua Doutor Furquim Mendes, 621, Centenário, Duque de Caxias/RJ, é a controladora dos dados pessoais tratados por meio deste site e das nossas atividades.',
    'Esta Política explica, de forma simples, quais dados coletamos, por que coletamos e como protegemos essas informações, em conformidade com a Lei Geral de Proteção de Dados Pessoais (Lei nº 13.709/2018 — LGPD).',
  ]},
  { id: 'dados', t: 'Quais dados coletamos', list: [
    ['Contato pelo site e WhatsApp', 'nome, telefone, e-mail e o conteúdo da mensagem que você nos envia.'],
    ['Inscrição de alunos', 'nome, data de nascimento, escola e informações de saúde relevantes para a prática esportiva da criança ou adolescente, além de nome, documento e telefone do responsável legal.'],
    ['Apoiadores e parceiros', 'nome ou razão social, CPF ou CNPJ, e dados de contato, quando necessários para formalizar doações e parcerias.'],
    ['Imagens', 'fotos e vídeos de treinos, jogos e eventos, utilizados somente com autorização do responsável legal.'],
  ]},
  { id: 'finalidade', t: 'Para que usamos os dados', list: [
    ['Atendimento', 'responder dúvidas, pedidos de informação e propostas de parceria.'],
    ['Atividades da ONG', 'realizar inscrições, organizar turmas, acompanhar a frequência e cuidar da segurança dos alunos.'],
    ['Comunicação com as famílias', 'informar horários, eventos, campeonatos e ações sociais.'],
    ['Prestação de contas', 'cumprir obrigações legais, fiscais e de transparência junto a parceiros e órgãos públicos.'],
    ['Divulgação', 'mostrar o trabalho da ONG no site e nas redes sociais, sempre com autorização de uso de imagem.'],
  ]},
  { id: 'criancas', t: 'Dados de crianças e adolescentes', body: [
    'A maior parte do nosso trabalho envolve crianças e adolescentes. Por isso, os dados deles são tratados sempre no seu melhor interesse, como determina o artigo 14 da LGPD e o Estatuto da Criança e do Adolescente.',
    'Coletamos somente o necessário para as atividades e sempre com o consentimento específico de pelo menos um dos pais ou responsável legal. A autorização de uso de imagem é separada e pode ser recusada sem prejuízo da participação do aluno.',
  ]},
  { id: 'compartilhamento', t: 'Compartilhamento', body: [
    'Não vendemos nem alugamos dados pessoais. Podemos compartilhar informações apenas quando necessário com: federações e organizadores de campeonatos (para inscrição de atletas), parceiros e financiadores (em relatórios, preferencialmente de forma agregada), e autoridades públicas, quando exigido por lei.',
    'Ferramentas de terceiros que usamos, como WhatsApp e Instagram, possuem suas próprias políticas de privacidade.',
  ]},
  { id: 'seguranca', t: 'Armazenamento e segurança', body: [
    'Os dados são guardados em ambiente com acesso restrito à equipe responsável e mantidos somente pelo tempo necessário para cumprir as finalidades acima ou as obrigações legais. Depois disso, são eliminados ou anonimizados.',
  ]},
  { id: 'direitos', t: 'Seus direitos', intro: 'Como titular, ou responsável legal pelo titular, você pode a qualquer momento solicitar:', chips: [
    'Confirmação de que tratamos seus dados', 'Acesso aos dados', 'Correção de dados incompletos ou desatualizados', 'Eliminação de dados tratados com consentimento', 'Revogação do consentimento', 'Informações sobre compartilhamento', 'Portabilidade',
  ]},
  { id: 'cookies', t: 'Cookies', body: [
    'Este site não utiliza cookies de publicidade. Podem ser usados apenas recursos técnicos essenciais ao funcionamento das páginas, como guardar preferências de exibição no seu navegador.',
  ]},
  { id: 'contato', t: 'Contato e encarregado de dados', body: [
    'Para exercer seus direitos ou tirar dúvidas sobre esta Política, fale com o encarregado pelo tratamento de dados da ONG pelo e-mail ongcraquecidadao@gmail.com ou pelo WhatsApp 21 96637-7153. Responderemos no prazo previsto em lei.',
    'Esta Política pode ser atualizada. A data da última revisão aparece no topo da página.',
  ]},
];

function Privacidade({ onNav }) {
  const { Card, Button } = window.CraqueCidadODesignSystem_6fdc08;
  const [active, setActive] = React.useState(PRIVACY_SECTIONS[0].id);
  React.useEffect(() => {
    const els = PRIVACY_SECTIONS.map((s) => document.getElementById('lgpd-' + s.id)).filter(Boolean);
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) setActive(e.target.id.replace('lgpd-', '')); });
    }, { rootMargin: '-30% 0px -60% 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
  const jump = (id) => {
    const el = document.getElementById('lgpd-' + id);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 110, behavior: 'smooth' });
  };
  const h2 = { fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(1.3rem, 2.4vw, 1.6rem)', color: 'var(--brand-ink)', margin: '0 0 14px', letterSpacing: '-0.01em' };
  const p = { margin: '0 0 14px', fontSize: 16, lineHeight: 1.7, color: 'var(--text-body)', textWrap: 'pretty' };
  return (
    <>
      <window.PageHero eyebrow="Privacidade · LGPD" title="Política de Privacidade"
        intro={`Como a ONG Craque Cidadão cuida dos dados de alunos, famílias, apoiadores e visitantes. Última atualização: ${PRIVACY_UPDATED}.`} />
      <section style={{ background: 'var(--surface-card)' }}>
        <div className="cc-privacy-grid" style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: 'var(--cc-sy, 88px) 24px', display: 'grid', gridTemplateColumns: '260px minmax(0,1fr)', gap: 56, alignItems: 'start' }}>
          <nav className="cc-privacy-toc" aria-label="Índice" style={{ position: 'sticky', top: 'calc(var(--cc-header-live, 96px) + 24px)', display: 'flex', flexDirection: 'column', gap: 2 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-muted)', margin: '0 0 10px 12px' }}>Nesta página</div>
            {PRIVACY_SECTIONS.map((s, i) => (
              <a key={s.id} onClick={() => jump(s.id)} className="cc-toc-link" data-active={active === s.id ? 'true' : 'false'}>
                <span className="cc-toc-n">{String(i + 1).padStart(2, '0')}</span>{s.t}
              </a>
            ))}
          </nav>
          <div style={{ maxWidth: 720 }}>
            {PRIVACY_SECTIONS.map((s, i) => (
              <R5 key={s.id}>
                <article id={'lgpd-' + s.id} style={{ paddingBottom: 40, marginBottom: 40, borderBottom: i < PRIVACY_SECTIONS.length - 1 ? '1px solid var(--border)' : 'none' }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 13, color: 'var(--brand)', letterSpacing: '0.1em', marginBottom: 6 }}>{String(i + 1).padStart(2, '0')}</div>
                  <h2 style={h2}>{s.t}</h2>
                  {s.body && s.body.map((b, j) => <p key={j} style={p}>{b}</p>)}
                  {s.intro && <p style={p}>{s.intro}</p>}
                  {s.list && (
                    <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
                      {s.list.map(([k, v]) => (
                        <li key={k} style={{ display: 'flex', gap: 12, fontSize: 16, lineHeight: 1.65, color: 'var(--text-body)' }}>
                          <I5 name="check" size={18} color="var(--brand)" style={{ flex: 'none', marginTop: 4 }} />
                          <span><strong style={{ color: 'var(--brand-ink)' }}>{k}:</strong> {v}</span>
                        </li>
                      ))}
                    </ul>
                  )}
                  {s.chips && (
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                      {s.chips.map((c) => (
                        <span key={c} style={{ padding: '9px 14px', borderRadius: 'var(--radius-pill)', background: 'var(--brand-soft)', color: 'var(--brand-ink)', fontWeight: 600, fontSize: 14.5 }}>{c}</span>
                      ))}
                    </div>
                  )}
                </article>
              </R5>
            ))}
            <R5>
              <Card tone="sky" padding="var(--space-6)" style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 18 }}>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 19, color: 'var(--brand-ink)' }}>Quer exercer um direito ou tirar uma dúvida?</div>
                  <div style={{ fontSize: 15, color: 'var(--text-body)', marginTop: 4 }}>ongcraquecidadao@gmail.com</div>
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                  <Button as="a" href="mailto:ongcraquecidadao@gmail.com" variant="secondary" size="sm" iconLeft={<I5 name="mail" size={15} />}>Enviar e-mail</Button>
                  <window.WAButton size="sm">WhatsApp</window.WAButton>
                </div>
              </Card>
            </R5>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { Privacidade });