# Research: Página de Política de Privacidade

**Feature**: 020-politica-de-privacidade  
**Phase**: 0 — Outline & Research  
**Status**: Complete — sem NEEDS CLARIFICATION

---

## 1. Padrão de página estática no projeto

**Decision**: Usar o mesmo padrão de `AgentsPage.tsx` — `<Navbar />` + `<main className="min-h-screen bg-canvas">` + `<Footer />`.

**Rationale**: Todas as páginas públicas do projeto seguem este padrão. `AgentsPage.tsx` é o exemplo mais recente e pode ser usado como referência direta.

**Alternatives considered**: Criar um componente `PublicLayout` com Navbar/Footer embutidos. Rejeitado por violar Principle VI (YAGNI — só 1 page nova, sem reutilização real).

---

## 2. Roteamento client-side

**Decision**: Adicionar `<Route path="/politica-de-privacidade" element={<PrivacyPolicyPage />} />` direto no arquivo `frontend/src/App.tsx`, na mesma camada das rotas públicas (`/`, `/imoveis`, `/corretores`).

**Rationale**: Padrão já usado por todas as rotas públicas. Sem guards de autenticação necessários.

**Alternatives considered**: Rota aninhada num layout público. Rejeitado — nenhuma outra rota pública usa layout aninhado; seria over-engineering.

---

## 3. Link no Footer — `<a>` vs `<Link>`

**Decision**: Usar `<Link to="/politica-de-privacidade">` do `react-router-dom` para o novo link no Footer. Os links existentes (`#sobre`, `#contato`) permanecem como `<a>` (são âncoras intra-página, não rotas SPA). O link `/imoveis` existente também fica como `<a>` para não alterar comportamento legado fora do escopo.

**Rationale**: FR-006 exige navegação sem recarregamento. O `<Link>` do React Router garante transição client-side sem `window.location` reload. O Footer está dentro do `<BrowserRouter>` (App.tsx), então `<Link>` funciona sem nenhuma mudança estrutural.

**Alternatives considered**:
1. Converter todos os links do footer para `<Link>` — fora de escopo, Principle VI proíbe mudanças além do especificado.
2. Usar `<a href="/politica-de-privacidade">` — causaria reload completo da página, violando FR-006 e SC-003.

---

## 4. Design tokens a utilizar

**Decision**: Seguir exatamente as classes Tailwind mapeadas para os tokens do DESIGN.md:

| Elemento | Classe Tailwind |
|---|---|
| Fundo da página | `bg-canvas` |
| Fundo de seção alternada (opcional) | N/A — fundo único para simplicidade |
| Texto principal (título, corpo) | `text-text-primary` |
| Texto secundário | `text-text-secondary` |
| Texto terciário (metadata) | `text-text-tertiary` |
| Separador entre seções | `border-white/[0.06]` |
| Largura máxima do conteúdo | `max-w-[800px] mx-auto px-6` |
| Títulos de seção | `font-semibold text-text-primary` + `fontFeatureSettings: '"cv01","ss03"'` |
| Label de categoria | `text-[#5e6ad2] text-sm font-medium tracking-widest uppercase` |

**Rationale**: Alinhamento com Principle I (Design-First). Tokens já existentes no `tailwind.config.ts`; sem novos tokens necessários.

---

## 5. Estrutura das 8 seções LGPD

**Decision**: Conteúdo estático inline no componente. Sem fonte de dados externa, sem CMS, sem JSON separado.

**Rationale**: Principle VI — a solução mais simples. A política muda raramente; extrair para arquivo JSON seria over-abstraction sem benefício concreto.

**Seções obrigatórias (FR-003)**:

| # | Título | Conteúdo-chave |
|---|---|---|
| 1 | Instituição Responsável | Nome, CNPJ, endereço (placeholders) |
| 2 | Coleta e Uso de Dados Pessoais | Quais dados, finalidade de uso |
| 3 | Transferência de Dados Pessoais | Compartilhamento com terceiros (parceiros, financeiras) |
| 4 | Uso de Cookies | Tipos de cookies, finalidade |
| 5 | Direitos do Usuário | Acesso, correção, exclusão, portabilidade, revogação de consentimento |
| 6 | Segurança dos Dados | Medidas técnicas adotadas |
| 7 | Alterações nesta Política | Versionamento e data de última atualização |
| 8 | Contato / DPO | E-mail do encarregado (placeholder `[EMAIL DO DPO]`) |

---

## 6. Responsividade

**Decision**: `max-w-[800px] mx-auto px-6` para o container do conteúdo. Em mobile, o padding `px-6` garante margens laterais. Sem media queries adicionais — Tailwind + text-base resolve legibilidade.

**Rationale**: SC-004 exige legibilidade a partir de 320px sem overflow horizontal. O container com `px-6` e `max-w-[800px]` atende naturalmente por ser menor que qualquer viewport padrão >375px.

---

## 7. Dependências novas

**Decision**: Nenhuma dependência nova.

**Rationale**: `react-router-dom` já está instalado. Tailwind já configurado. Principle VI — sem pacotes novos sem justificativa.

---

## Resolução de NEEDS CLARIFICATION

Não havia ambiguidades de natureza técnica que exigissem pesquisa externa. Todos os pontos foram resolvidos com base no código existente no projeto.