# 🚀 Empieza Ahora - En 5 Pasos

Sigue estos pasos para ver tu nueva invitación elegante funcionando.

---

## ✅ Paso 1: Actualizar la Base de Datos (1 min)

Si es la primera vez, la BD se creará automáticamente. Si ya la tenías:

### Opción A: Dejar datos existentes (Recomendado)
Los nuevos campos se llenarán vacíos automáticamente. Tus datos antiguos seguirán ahí.

### Opción B: Empezar de cero
```bash
# En terminal (desde e:\invitacion):
mysql -u root -p < setup.sql
```

---

## ✅ Paso 2: Verificar .env.local (1 min)

Abre el archivo `.env.local` y verifica que tenga tus credenciales:

```env
DB_HOST=localhost
DB_PORT=3306
DB_USER=root          ← Tu usuario MySQL
DB_PASSWORD=...       ← Tu contraseña
DB_NAME=invitacion_db
```

Si no existe, créalo con estas credenciales.

---

## ✅ Paso 3: Iniciar Servidor (1 min)

```bash
npm run dev
```

Verás algo como:
```
> invitacion@0.1.0 dev
> next dev

✓ Ready in 1234ms
- Local:        http://localhost:3000
```

---

## ✅ Paso 4: Inicializar BD (1 min)

Abre en navegador:
```
http://localhost:3000/api/init-db
```

Deberías ver:
```json
{
  "success": true,
  "message": "Database initialized successfully"
}
```

✅ Si ves esto, ¡perfecto! La BD está lista.

❌ Si ves error, revisa la consola para más detalles.

---

## ✅ Paso 5: Acceder al Panel Admin (2 min)

1. Abre en navegador:
```
http://localhost:3000/admin
```

2. Verás un formulario con varias secciones:
   - 📝 Información Principal
   - 🖼️ Imágenes
   - 📅 Información del Evento
   - 👨‍👩‍👧 Mis Padres
   - 🍽️ Recepción
   - 👗 Dress Code
   - 🎨 Tema

3. Llena los campos que quieras

4. Presiona el botón **💾 Guardar Cambios** al final

5. ¡Listo! Ahora abre:
```
http://localhost:3000
```

Verás tu invitación personalizada! 🎉

---

## 📝 Campos Principales

### Esencial (DEBE tener estos):
- ✅ Título (ej: `Mrs XV`)
- ✅ Imagen Principal (URL)
- ✅ Fecha (2026-06-15)
- ✅ Hora (18:00)
- ✅ Ubicación

### Recomendado:
- 📢 Subtítulo (Tu nombre)
- 📢 Descripción
- 📢 Nombres de padres
- 📢 Información recepción

### Opcional:
- 📷 Imagen 2 y 3
- 👗 Dress Code
- 🎨 Color principal

---

## 🎨 Dónde Conseguir Imágenes

### Gratis:
1. **Unsplash**: https://unsplash.com
   - Busca foto bonita
   - Click derecho → Copiar enlace de imagen
   - Pega en el admin

2. **Pixabay**: https://pixabay.com
   - Mismo proceso

3. **Pexels**: https://pexels.com
   - Ídem

### Personalizado:
1. Sube a **ImgBB**: https://imgbb.com
2. Obtén el link
3. Usa en tu invitación

---

## 🎯 Ejemplo Rápido

```
Título:              Mrs XV
Subtítulo:           Tu Nombre
Descripción:         Ven a celebrar mis 15 años
Imagen 1:            https://unsplash.com/foto-hermosa.jpg
Fecha:               2026-06-15
Hora:                18:00
Ubicación:           Salón de Eventos - Calle X
Papá:                Tu Papá
Mamá:                Tu Mamá
Recepción:           Casa MAMA boutique
Dress Code:          De Gala
Color:               🟣 Púrpura
```

Presiona: **💾 Guardar Cambios**

Resultado: ¡Una invitación elegante lista! ✨

---

## 🎬 URLs de Desarrollo

| URL | Para |
|-----|------|
| http://localhost:3000 | Ver tu invitación |
| http://localhost:3000/admin | Editar datos |
| http://localhost:3000/api/init-db | Reiniciar BD |

---

## 🆘 Si Algo No Funciona

### "Error de conexión a BD"
```
✓ Abre terminal: mysql -u root -p
✓ Verifica usuario/contraseña en .env.local
✓ Revisa que la BD existe: SHOW DATABASES;
```

### "Cambios no se ven"
```
✓ Recarga página: Ctrl+F5 (o Cmd+Shift+R en Mac)
✓ Abre DevTools: F12
✓ Busca errores en rojo en la consola
```

### "Las imágenes no cargan"
```
✓ Verifica que la URL sea válida
✓ Abrela en otra pestaña
✓ Debe empezar con https://
```

### "Servidor no inicia"
```
✓ Verifica que el puerto 3000 no está en uso
✓ Prueba: npm run dev
✓ Si falla de nuevo, ve a "CAMBIOS_REALIZADOS.md"
```

---

## 📞 Soporte Rápido

Si necesitas help:

1. Mira el archivo: `GUIA_INVITACION_MEJORADA.md`
2. Mira el archivo: `CAMBIOS_REALIZADOS.md`
3. Revisa la consola del navegador (F12)
4. Revisa los logs del servidor

---

## 🎉 ¡Listo!

Ahora tienes:
- ✨ Invitación elegante
- ✨ Contador regresivo automático
- ✨ Galería de fotos
- ✨ Panel para editar todo
- ✨100% personalizable

**¡Que disfrutes tu invitación!** 🚀

---

**Duración estimada**: 5-10 minutos  
**Dificultad**: 🟢 Fácil  
**Resultado**: Invitación profesional ✨