# Plano técnico: novo site da You Estética

Documento de apoio aos três protótipos em `layouts/`. Cobre stack, hospedagem, integração com o ERP (agenda, clube de assinatura, portal da paciente), SEO local e visibilidade em buscadores de IA.

## 1. Diagnóstico do site atual

| Ponto | Situação hoje | Impacto |
|---|---|---|
| Renderização | SPA React (Vite) gerada no Lovable. O HTML entregue é só `<div id="root"></div>`; todo o texto chega via JavaScript. | A maioria dos crawlers de IA (ChatGPT, Claude, Perplexity) não executa JavaScript e enxerga a página vazia. O Google renderiza, mas com atraso e custo. |
| Conteúdo | Tratamentos, planos, equipe e FAQ ficam em arquivos JS do bundle. | Para mudar um texto é preciso novo deploy. Não há fonte única de dados com o ERP. |
| Backend | Supabase `nnfpsblxphadqvkfjgrt` (funções `consultar-voucher` e `resend-voucher-email`). Checkout em `my.youestetica.com.br`. | Já existe base para integrar; falta unificar com o ERP. |
| Dados estruturados | Um bloco `BeautySalon` na home. | Bom ponto de partida, mas sem serviços, FAQ, equipe ou páginas de tratamento marcadas. |

## 2. Stack recomendada

- **Astro** (geração estática + ilhas interativas). Cada página sai do build como HTML completo, legível por qualquer crawler, com JavaScript só onde há interação.
- **GSAP 3.13 + ScrollTrigger + SplitText + Flip** e **Lenis** para o scroll suave. Os protótipos já usam exatamente essas bibliotecas; o código migra quase sem mudança.
- **Ilhas React** apenas para: agendamento, Portal da Paciente, buscador de tratamentos e checkout do clube.
- **Supabase do ERP** como única fonte de dados (tratamentos, planos, equipe, agenda, pacientes).

### Sobre hospedar "no mesmo Supabase do ERP"

O Supabase é backend (banco, autenticação, storage, edge functions). Ele **não hospeda o front-end de um site** com CDN e SSR. O caminho equivalente é:

- **Site**: Cloudflare Pages (ou Vercel/Netlify), apontando o domínio `youestetica.com.br`.
- **Dados, login, agenda e portal**: o **mesmo projeto Supabase do ERP**, consumido pelo site.

Na prática, é "o mesmo Supabase do ERP": uma base, uma autenticação, um cadastro de paciente.

## 3. Integração com o ERP

```
                 build (SSG)                       tempo real
 ┌──────────┐   leitura pública   ┌──────────────────────────────┐
 │  Site    │ ──────────────────▶ │ Supabase do ERP              │
 │  Astro   │                     │  views públicas (conteúdo)   │
 │ (Pages)  │ ── ilhas React ───▶ │  Edge Functions (agenda,     │
 └──────────┘   anon key + JWT    │  reserva, portal)            │
      ▲                           │  Auth (paciente)             │
      │ deploy hook               │  Storage privado (fotos)     │
      └──── webhook do banco ◀────┤  RLS por paciente            │
                                  └──────────────────────────────┘
```

### 3.1 Conteúdo do site
- Criar **views somente leitura** no ERP (`site_tratamentos`, `site_planos`, `site_equipe`, `site_faq`) expondo só campos publicáveis.
- O build do Astro lê essas views. Quando alguém edita no ERP, um **database webhook** chama o deploy hook e o site é republicado em cerca de 1 minuto.

### 3.2 Agenda online
- **Nunca** expor tabelas de agenda ao público. Duas Edge Functions:
  - `agenda-disponibilidade`: recebe tipo de avaliação e período; devolve horários livres calculados a partir de profissionais, salas e equipamentos do ERP.
  - `agenda-reservar`: cria o agendamento como `pendente` (ou `confirmado`, conforme a regra da clínica), com chave de idempotência, **Cloudflare Turnstile** contra robôs e limite de requisições por IP.
- Confirmação por WhatsApp usando o canal que o ERP já tiver.
- O widget do **Layout 03** já segue esse fluxo (tipo, dia, horário, dados, confirmação) e mostra estados de carregamento e erro.

### 3.3 Beauty You Club (assinaturas)
- Planos vêm da tabela de planos do ERP (nome, período, benefícios, destaque, preço, ativo).
- Checkout continua em `my.youestetica.com.br` ou vira uma ilha no site. Os webhooks do gateway de pagamento atualizam o status da assinatura no ERP; o portal só lê.

### 3.4 Portal da Paciente
- Rota `/portal` no próprio site (ilha React) ou subdomínio `minha.youestetica.com.br`.
- **Login sem senha** via Supabase Auth (código por e-mail ou link mágico; WhatsApp via função própria).
- Vínculo `auth.users.id` com o cadastro do paciente no ERP.
- **RLS** em todas as tabelas expostas: cada paciente lê apenas os próprios registros.
- Telas: próximos agendamentos (remarcar e confirmar), sessões do pacote ou assinatura, evolução (fotos, medidas, bioimpedância do Método SS You), pontos do Clube da You e vouchers (reaproveitando `consultar-voucher`).
- **Fotos de evolução**: bucket privado, URLs assinadas de curta duração, nunca públicas.

### 3.5 LGPD e regras profissionais
- Fotos, medidas e histórico são **dados pessoais sensíveis de saúde** (LGPD, art. 11). Exigem consentimento específico, registro de acesso, política de retenção e canal para exclusão.
- Antes e depois **públicos** no site seguem as regras do conselho de cada profissional (CFM, CRBM e outros). No portal, a paciente vê só as próprias fotos.

## 4. SEO local e visibilidade em IAs

1. **Manter as URLs atuais** (`/tratamentos/faciais/:id`, `/metodo-ss-you`, `/beauty-you-club` etc.). Os protótipos já linkam para elas.
2. **Uma página completa por tratamento**, com o conteúdo que já existe no site atual (duração, número de sessões, indicações, contraindicações, recuperação).
3. **Dados estruturados** em JSON-LD: `BeautySalon`/`MedicalBusiness`, `Service` por tratamento, `FAQPage`, `BreadcrumbList`, `Person` para a equipe. Os protótipos já trazem a base.
4. **Avaliações**: exibir somente avaliações reais do Google, com autorização. Não marcar nota própria com `AggregateRating` no próprio site.
5. **NAP consistente** (nome, endereço, telefone) entre site, Google Business Profile, Instagram e diretórios.
6. **`llms.txt`** e `robots.txt` liberando os crawlers de IA desejados (GPTBot, ClaudeBot, PerplexityBot, Google-Extended). Rascunho em `docs/llms.txt`.
7. **Core Web Vitals**: imagens AVIF/WebP com `srcset`, fontes hospedadas no próprio domínio, GSAP carregado sem bloquear a primeira pintura, `prefers-reduced-motion` respeitado (os protótipos já fazem isso).

## 5. O que os protótipos já resolvem

- HTML semântico com todo o conteúdo no documento (sem depender de JavaScript para o texto).
- Movimento com propósito: entrada do hero, revelações no scroll, painéis fixados, filtros com Flip.
- Acessibilidade: navegação por teclado nas abas, rótulos acima dos campos, foco visível, conteúdo integral com movimento reduzido.
- Responsivo testado em 390 px e 1440 px, sem rolagem horizontal, sem erros no console.

## 6. Próximos passos

1. Escolher um layout (ou combinar seções de mais de um).
2. Enviar as fotos conforme `docs/BRIEFING-DE-IMAGENS.md`.
3. Dar acesso ao **repositório do ERP no GitHub** e ao **projeto Supabase do ERP**. A conta Supabase conectada nesta sessão mostra apenas os projetos `hub` e `boeng`, e o site atual usa `nnfpsblxphadqvkfjgrt`; nenhum deles parece ser o ERP da clínica.
4. Definir as regras da agenda online: quais serviços aceitam agendamento direto, antecedência mínima, política de remarcação.
5. Montar o projeto Astro com o layout escolhido, ligar as views de conteúdo e depois agenda, clube e portal, nessa ordem.