# Configurando o Firebase para o site da Elyra

O site usa Firebase para armazenar os produtos e proteger a área administrativa. É **gratuito** no plano inicial (Spark) e suficiente pra o tamanho de uma empresa nova.

Tempo total: **uns 10 minutos**.

---

## Passo 1 — Criar o projeto Firebase

1. Acesse https://console.firebase.google.com com a conta Google de vocês.
2. Clique em **"Adicionar projeto"** (Add project).
3. Nome do projeto: `elyra-3d` (ou outro nome). Continue.
4. Quando perguntar sobre Google Analytics: **desative** (não precisamos).
5. Clique em **"Criar projeto"**. Espere terminar (uns 30s).

---

## Passo 2 — Ativar o Firestore (banco de dados)

1. No menu lateral, clique em **Build → Firestore Database**.
2. Clique em **"Criar banco de dados"** (Create database).
3. Modo: escolha **"Iniciar em modo de produção"** (Production mode).
4. Localização: escolha **`southamerica-east1` (São Paulo)** — mais rápido para o Brasil.
5. Clique em **"Ativar"**.

Em seguida, na aba **"Regras"** (Rules) do Firestore, **substitua todo o conteúdo** por:

```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /produtos/{produto} {
      allow read: if true;
      allow write: if request.auth != null;
    }
  }
}
```

Clique em **"Publicar"**. Isso permite que **qualquer pessoa veja** os produtos (clientes do site), mas **só usuários logados podem editar/excluir** (vocês).

---

## Passo 3 — Ativar Autenticação por e-mail/senha

1. No menu lateral, **Build → Authentication**.
2. Clique em **"Começar"** (Get started).
3. Na aba **"Sign-in method"**, clique em **"E-mail/Senha"**.
4. Ative o toggle **"E-mail/Senha"** (a primeira opção). Pode deixar o "Link por e-mail" desligado.
5. Clique em **"Salvar"**.

Agora vamos criar o usuário de admin:
6. Vá na aba **"Users"**.
7. Clique em **"Adicionar usuário"** (Add user).
8. Coloque o e-mail e uma senha que você vai usar pra entrar no painel. **Anote essa senha em um lugar seguro.** Pode adicionar mais de um usuário (um pra você, outro pra sua esposa).

---

## Passo 4 — Pegar as chaves do projeto

1. Clique no ícone de engrenagem (⚙️) no canto superior esquerdo → **"Configurações do projeto"**.
2. Role até a seção **"Seus aplicativos"** (Your apps).
3. Clique no ícone **`</>`** (Web).
4. Apelido do app: `site-elyra`. **NÃO marque** "Configurar Firebase Hosting".
5. Clique em **"Registrar app"**.
6. Vai aparecer um bloco de código com a variável `firebaseConfig`. **Copie esse bloco inteiro.** Algo assim:

```js
const firebaseConfig = {
  apiKey: "AIzaSy...",
  authDomain: "elyra-3d.firebaseapp.com",
  projectId: "elyra-3d",
  storageBucket: "elyra-3d.appspot.com",
  messagingSenderId: "1234567890",
  appId: "1:1234567890:web:abcdef..."
};
```

---

## Passo 5 — Colar as chaves no `firebase-config.js`

1. Abra o arquivo **`firebase-config.js`** (na pasta do site).
2. Substitua os valores `"COLE-AQUI..."` pelos valores reais que você copiou.

Exemplo do antes/depois:

```js
// ANTES
apiKey: "COLE-AQUI-SUA-API-KEY",

// DEPOIS
apiKey: "AIzaSyA1B2C3D4E5F6...",
```

Faça isso para os 6 valores: `apiKey`, `authDomain`, `projectId`, `storageBucket`, `messagingSenderId`, `appId`.

3. **Atualize também os dados de contato** no mesmo arquivo:

```js
export const CONTATO = {
  whatsappNumero: '5511987654321',     // seu WhatsApp real
  whatsappExibe:  '(11) 98765-4321',
  instagram:      'elyra3d',           // seu @ real
  email:          'contato@elyra.com.br'
};
```

4. Salve o arquivo.

---

## Passo 6 — Testar localmente

Abra o `index.html` no navegador. Vai estar funcionando, mas o catálogo aparecerá vazio (ainda não há produtos).

Vá em `admin.html`, faça login com o e-mail/senha que você criou no Passo 3, e cadastre alguns produtos com foto, nome, categoria, preço e descrição. Volte ao `index.html` e os produtos aparecerão no catálogo!

---

## Passo 7 — Publicar online (opcional mas recomendado)

Quando estiver tudo configurado:

1. Acesse https://app.netlify.com (ou crie conta gratuita).
2. Arraste a pasta `site` inteira para a área **"Drag and drop"**.
3. Em segundos o Netlify gera um link público (ex: `elyra-3d.netlify.app`).
4. **Importante**: volte no Firebase → Authentication → Settings → **"Domínios autorizados"** e adicione o domínio do Netlify (ex: `elyra-3d.netlify.app`). Senão o login não funciona online.

---

## Limites do plano grátis (Spark)

- **Firestore**: 1 GB de armazenamento + 50 mil leituras/dia + 20 mil escritas/dia. Para um catálogo de até 100 produtos com tráfego baixo-médio, é mais que suficiente.
- **Authentication**: ilimitado para email/senha.

Se um dia precisarem escalar, dá pra mudar pro plano pago só pagando o que usar.

---

## Problemas comuns

**"Firebase ainda não configurado"** → você abriu o site mas o `firebase-config.js` ainda tem os valores `COLE-AQUI`. Volte ao passo 5.

**"Permission denied" ao salvar produto** → as regras do Firestore não foram publicadas. Volte ao passo 2.

**Login dá "auth/invalid-credential"** → o usuário não foi criado no Authentication, ou a senha está errada. Volte ao passo 3.

**Site online não consegue logar** → adicione o domínio do Netlify nos "Domínios autorizados" do Firebase. Veja passo 7.

---

Qualquer dúvida, abra o console do navegador (F12 → aba "Console") — geralmente o erro está descrito ali e ajuda a entender o que aconteceu.