# PedeLogo - Documentação do Projeto

## Visão Geral
**PedeLogo** é uma aplicação web frontend (Single Page Application - SPA) focada na criação de catálogos digitais e sistemas de pedidos online para restaurantes (ex: Pizzarias, Lanchonetes). O projeto não possui um backend integrado atualmente; ele utiliza `localStorage` para persistência de dados do carrinho de compras e do usuário, simulando as operações do lado do servidor. O fluxo principal culmina no envio e acompanhamento do pedido (com opção de integração com o WhatsApp).

## Tecnologias e Arquitetura
- **Linguagens**: HTML5, CSS3, JavaScript Vanilla.
- **Estilização**: Tailwind CSS (importado via CDN para prototipagem rápida).
- **Fontes**: Inter (textos gerais) e Outfit (títulos), providenciadas via Google Fonts.
- **Armazenamento**: `localStorage` (para salvar o carrinho `pedelogo-cart` e os dados do cliente `pedelogo-client`).
- **APIs de Terceiros**: ViaCEP API (para busca de endereço via CEP na tela de checkout).

## Estrutura de Diretórios e Arquivos

### Raiz
- **`index.html`**: A página principal e aplicação interativa completa (SPA). Contém a navegação, listagem de categorias, produtos, seleção de tamanhos de pizza, modal de opções/extras, carrinho de compras, formulário de checkout (identificação e endereço), tela de pagamento e modal/tela de sucesso e detalhes do pedido.
- **`cardapio.html`**: Uma página simplificada (somente leitura) do catálogo. Serve apenas para clientes visualizarem as categorias e produtos sem opção de adicionar ao carrinho ou finalizar pedido.

### Pasta `js/`
- **`main.js`**: O "coração" da aplicação (`index.html`). Funções e lógicas principais incluem:
  - **Dados Mockados**: Variáveis `categories` e `products` com informações falsas para demonstração.
  - **Renderização**: Funções para renderizar categorias, listas de produtos (com lógica especial para metades de "pizzas"), e itens do carrinho.
  - **Carrinho**: Lógica de adicionar ao carrinho (`addToCart`, `confirmAddToCart`), lidar com modificadores (extras/adicionais), atualizar quantidades e calcular totais (subtotal + taxa de entrega).
  - **Navegação (Fake SPA)**: Transições entre "telas" (ocultar/mostrar `<section>`), lidar com estados de voltar (`goBack`, `goBackToProducts`, etc).
  - **Integração de Endereço**: `fetchAddressByCep` busca os dados do ViaCEP automaticamente ao perder o foco (`onblur`) no campo de CEP.
  - **Fluxo de Pagamento e Finalização**: Manipulação dos métodos de pagamento (cartão, pix, dinheiro/troco) e a criação do formato final do pedido salvo em localStorage.
- **`cardapio.js`**: Lógica associada ao `cardapio.html`. Essencialmente uma versão reduzida do `main.js`, contendo os mock data de categorias/produtos e lógicas de renderização para apenas visualizar o menu.

## Fluxo Principal de Usuário (Index)
1. **Página Inicial (`hero-section`, `category-grid`)**: O usuário visualiza os dados do restaurante e escolhe uma categoria.
2. **Lista de Produtos (`product-list`)**: Exibição dos produtos da categoria selecionada. 
   - *Funcionalidade Especial - Pizzas*: Se o usuário clica em "Pizzas", vai para a seleção de tamanho e pode selecionar 1 ou 2 sabores (meia a meia), sendo o valor manipulado automaticamente no JS.
3. **Opções / Adicionais (`product-options-modal`)**: Modal que permite adicionar bordas recheadas, adicionais extras e campo genérico de "observações" aos itens.
4. **Carrinho (`cart-section`)**: Resumo dos itens adicionados, campo de observação final do pedido, e valor total (com cálculo de subtotal + taxa de entrega estática/grátis).
5. **Checkout (`checkout-section`)**: Formulário com campos de Nome, Telefone/WhatsApp, e endereço de entrega completo (com preenchimento automático via CEP). Dados ficam salvos via `localStorage`.
6. **Pagamento (`payment-section`)**: Seleção de método de pagamento. Para o método "Dinheiro", apresenta formulário interativo perguntando se é necessário troco.
7. **Sucesso e Detalhes**: Um modal confirma o pedido e a página redireciona para a `order-details-section`, onde exibe um resumo dos dados formatados (Itens, Valores, Entrega, Pagamento) e o botão "Acompanhar via WhatsApp".

## Pontos de Melhoria / Futuro (To-Do)
- Transformar os "mock dados" (categories, products) em chamadas de API reais dinâmicas (`fetch` ou `axios`).
- Melhorar a gestão do SPA (atualizar URL via `history API` para permitir uso do botão nativo de voltar do navegador).
- Transferir a configuração do Tailwind CDN para um build process estruturado (Next.js, Vite + TailwindCLI) a fim de otimizar performance em produção.
- Separar o arquivo `main.js` em módulos menores (Ex: `cart.js`, `checkout.js`, `api.js`, `ui.js`) para suportar manutenções em longo prazo.