# 🗺️ Mapa de la Nueva Invitación

## 🏗️ Arquitectura General

```
┌─────────────────────────────────────────────────────────────┐
│                    INVITACIÓN ELEGANTE                       │
│                        (localhost:3000)                       │
│                                                               │
│  ┌────────────────────────────────────────────────────────┐ │
│  │ 🖼️ GALERÍA DE IMÁGENES                                 │ │
│  │  - Imagen 1 (principal)                               │ │
│  │  - Imagen 2 (opcional)                                │ │
│  │  - Imagen 3 (opcional)                                │ │
│  │  Navegación: ❮ [●●●] ❯                               │ │
│  └────────────────────────────────────────────────────────┘ │
│                                                               │
│  ┌────────────────────────────────────────────────────────┐ │
│  │ 📝 ENCABEZADO                                          │ │
│  │  - Título (Mrs XV)                                    │ │
│  │  - Subtítulo (Nombre)                                 │ │
│  │  - Descripción                                        │ │
│  └────────────────────────────────────────────────────────┘ │
│                                                               │
│  ┌────────────────────────────────────────────────────────┐ │
│  │ ⏱️ CONTADOR REGRESIVO                          │ │
│  │  - Componente Countdown                               │ │
│  │  - Actualización en tiempo real                       │ │
│  │  - Muestra: Días | Horas | Min | Seg                 │ │
│  └────────────────────────────────────────────────────────┘ │
│                                                               │
│  ┌────────────────────────────────────────────────────────┐ │
│  │ 📅 INFORMACIÓN DEL EVENTO                              │ │
│  │  - Fecha                                              │ │
│  │  - Hora                                               │ │
│  │  - Ubicación                                          │ │
│  └────────────────────────────────────────────────────────┘ │
│                                                               │
│  ┌────────────────────────────────────────────────────────┐ │
│  │ 👨‍👩‍👧 MIS PADRES                                          │ │
│  │  - Nombre del papá                                    │ │
│  │  - e                                                  │ │
│  │  - Nombre de la mamá                                  │ │
│  │  - Mensaje personalizado                             │ │
│  └────────────────────────────────────────────────────────┘ │
│                                                               │
│  ┌────────────────────────────────────────────────────────┐ │
│  │ 🍽️ RECEPCIÓN                                           │ │
│  │  - Ubicación recepción                                │ │
│  │  - Detalles (horarios, etc)                           │ │
│  │  - Botón "Ver Ubicación"                              │ │
│  └────────────────────────────────────────────────────────┘ │
│                                                               │
│  ┌────────────────────────────────────────────────────────┐ │
│  │ 👗 DRESS CODE                                          │ │
│  │  - Código de vestuario                                │ │
│  └────────────────────────────────────────────────────────┘ │
│                                                               │
│  ┌────────────────────────────────────────────────────────┐ │
│  │ 🎨 COLORES RESERVADOS                                 │ │
│  │  - Color 1: [■]                                       │ │
│  │  - Color 2: [■]                                       │ │
│  └────────────────────────────────────────────────────────┘ │
│                                                               │
│  ┌────────────────────────────────────────────────────────┐ │
│  │ ✅ CONFIRMACIÓN DE ASISTENCIA                          │ │
│  │  - Para Mamá: [Confirmar]                             │ │
│  │  - Para Papá: [Confirmar]                             │ │
│  └────────────────────────────────────────────────────────┘ │
│                                                               │
└─────────────────────────────────────────────────────────────┘
```

---

## 🎮 Panel de Administración

```
┌─────────────────────────────────────────────────────────────┐
│              PANEL DE ADMINISTRACIÓN                         │
│                  (localhost:3000/admin)                      │
│                                                               │
│  📝 INFORMACIÓN PRINCIPAL                                    │
│  ├─ Título: [________________] (Mrs XV)                      │
│  ├─ Subtítulo: [________________] (Tu Nombre)                │
│  └─ Descripción: [________________] (Texto largo)            │
│                                                               │
│  🖼️ IMÁGENES                                                 │
│  ├─ Imagen Principal: [________________] + Preview           │
│  ├─ Imagen 2: [________________] (opcional)                  │
│  └─ Imagen 3: [________________] (opcional)                  │
│                                                               │
│  📅 INFORMACIÓN DEL EVENTO                                  │
│  ├─ Fecha: [2026-06-15]                                     │
│  ├─ Hora: [18:00]                                           │
│  ├─ Ubicación: [________________]                            │
│  └─ ☑ Mostrar contador regresivo                            │
│                                                               │
│  👨‍👩‍👧 MIS PADRES                                             │
│  ├─ Papá: [________________]                                 │
│  └─ Mamá: [________________]                                 │
│                                                               │
│  🍽️ RECEPCIÓN                                                │
│  ├─ Ubicación: [________________]                            │
│  └─ Detalles: [________________]                             │
│                                                               │
│  👗 DRESS CODE                                               │
│  ├─ Código: [De Gala]                                       │
│  └─ Colores: [Púrpura y Rosa]                               │
│                                                               │
│  🎨 TEMA                                                     │
│  └─ Color: [Púrpura ▼]  (purple|pink|blue|green|red|yellow)│
│                                                               │
│  [💾 Guardar Cambios]                                        │
│                                                               │
│  ✅ Invitación actualizada correctamente!                   │
│                                                               │
└─────────────────────────────────────────────────────────────┘
```

---

## 🗄️ Base de Datos

```sql
└─ DATABASE: invitacion_db
   └─ TABLE: invitations
      ├─ id (INT, PRIMARY KEY)
      │
      ├─ 📝 INFORMACIÓN PRINCIPAL
      │  ├─ title (VARCHAR)
      │  ├─ subtitle (VARCHAR)
      │  └─ description (TEXT)
      │
      ├─ 🖼️ IMÁGENES
      │  ├─ image_url (VARCHAR)
      │  ├─ image_url_2 (VARCHAR)
      │  └─ image_url_3 (VARCHAR)
      │
      ├─ 📅 EVENTO
      │  ├─ event_date (VARCHAR)
      │  ├─ event_time (VARCHAR)
      │  ├─ location (VARCHAR)
      │  └─ show_countdown (INT)
      │
      ├─ 👥 PADRES
      │  ├─ parent_1_name (VARCHAR)
      │  └─ parent_2_name (VARCHAR)
      │
      ├─ 🍽️ RECEPCIÓN
      │  ├─ reception_location (VARCHAR)
      │  └─ reception_details (VARCHAR)
      │
      ├─ 👗 DRESS CODE
      │  ├─ dress_code (VARCHAR)
      │  ├─ reserved_colors (VARCHAR)
      │  └─ accent_color (VARCHAR)
      │
      ├─ 🎨 TEMA
      │  ├─ color_theme (VARCHAR)
      │  └─ guest_name (VARCHAR)
      │
      └─ ⏰ AUDIT
         ├─ created_at (TIMESTAMP)
         └─ updated_at (TIMESTAMP)
```

---

## 🔄 Flujo de Datos

```
USUARIO
  ↓
┌─────────────────────────────────┐
│   Panel de Administración       │
│   (localhost:3000/admin)        │
│   ├─ React Component            │
│   ├─ AdminPanel.tsx             │
│   └─ Formulario interactivo     │
└─────────────────────────────────┘
  ↓ [Guardar Cambios]
┌─────────────────────────────────┐
│   POST/PUT /api/invitation      │
│   ├─ Validación de datos        │
│   ├─ JSON serialized            │
│   └─ Headers: application/json  │
└─────────────────────────────────┘
  ↓
┌─────────────────────────────────┐
│   MySQL Database                │
│   ├─ UPDATE invitations SET ... │
│   ├─ WHERE id = ?               │
│   └─ Prepared Statements        │
└─────────────────────────────────┘
  ↓ [Response: success]
┌─────────────────────────────────┐
│   Admin Panel Actualizado       │
│   ├─ Mensaje de éxito           │
│   └─ Fetch nuevos datos         │
└─────────────────────────────────┘
  ↓ [Usuario abre invitación]
┌─────────────────────────────────┐
│   Página Pública                │
│   (localhost:3000)              │
│   ├─ React Component            │
│   ├─ Invitation.tsx             │
│   ├─ Countdown.tsx (timer)      │
│   └─ Galería de fotos           │
└─────────────────────────────────┘
  ↓ [Datos desde BD]
┌─────────────────────────────────┐
│   GET /api/invitation           │
│   ├─ SELECT * FROM invitations  │
│   └─ WHERE id = last            │
└─────────────────────────────────┘
  ↓
┌─────────────────────────────────┐
│   Invitación Renderizada        │
│   ├─ Fotos bonitas              │
│   ├─ Contador en tiempo real    │
│   ├─ Info padres                │
│   └─ Opciones de confirmación   │
└─────────────────────────────────┘
```

---

## 🧩 Estructura de Componentes

```
app/
│
├─ page.tsx
│  └─ Renderiza Invitation component
│
├─ admin/
│  └─ page.tsx
│     └─ Renderiza AdminPanel component
│
├─ components/
│  ├─ Invitation.tsx (NUEVO DISEÑO)
│  │  ├─ Estado: invitation data
│  │  ├─ Imports Countdown
│  │  ├─ Galería de imágenes
│  │  ├─ Secciones múltiples
│  │  └─ Colores dinámicos
│  │
│  ├─ AdminPanel.tsx (REDISEÑADO)
│  │  ├─ Estado: formData
│  │  ├─ 8 Secciones de formulario
│  │  ├─ Manejo de cambios
│  │  └─ Submit a API
│  │
│  └─ Countdown.tsx (NUEVO)
│     ├─ Props: targetDate, targetTime, colorTheme
│     ├─ Estado: timeLeft
│     ├─ useEffect: Intervalo de actualización
│     ├─ Círculos animados
│     └─ SSR compatible
│
├─ api/
│  └─ invitation/
│     ├─ route.ts
│     │  ├─ GET (obtiene última)
│     │  └─ POST (crea nueva)
│     │
│     ├─ [id]/
│     │  └─ route.ts
│     │     ├─ PUT (actualiza)
│     │     └─ DELETE (elimina)
│     │
│     └─ init-db/
│        └─ route.ts
│           └─ GET (inicializa BD)
│
└─ lib/
   └─ db.ts
      ├─ getConnection()
      └─ query()
```

---

## 🎨 Paleta de Colores

```
Púrpura:  #9B7CB8  ████ (Principal recomendado)
Rosa:     #E89BB5  ████ (Elegante, femenino)
Azul:     #6B9BD1  ████ (Clásico, profesional)
Verde:    #76C893  ████ (Fresco, moderno)
Rojo:     #E63946  ████ (Intenso, apasionado)
Amarillo: #F1C40F  ████ (Alegre, luminoso)

Fondo general: #F5F0F8 (Lila muy claro)
Tarjetas: #FFFFFF (Blanco puro)
Texto: #000000 #333333 #666666 (Escala de grises)
```

---

## 📱 Responsividad

```
┌────────────────────────────────────────────┐
│ MÓVIL                                      │
│ (< 640px)                                  │
│                                            │
│ [    Galería Completa    ]                 │
│ [    Título Grande       ]                 │
│ [    Subtítulo           ]                 │
│ [    Contador de 1 columna]                │
│ [    Evento    ....      ]                 │
│ [    Padres    ....      ]                 │
│ [    Recepción ....      ]                 │
│ [    Confirmación        ]                 │
│                                            │
└────────────────────────────────────────────┘

┌────────────────────────────────────────────────────────┐
│ TABLET                                                 │
│ (640px - 1024px)                                       │
│                                                        │
│ [         Galería Full Width            ]              │
│ [         Título y Subtítulo            ]              │
│ [ Contador Col 1 ] [ Contador Col 2 ]  [            ]  │
│ [ Evento | Evento | Evento             ]              │
│ [  Info Padres (multi-col)             ]              │
│ [ Recepción | Confirmación             ]              │
│                                                        │
└────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────┐
│ DESKTOP                                                         │
│ (> 1024px) - Max-width 3xl                                     │
│                                                                 │
│           [         Galería Ancho Completo           ]          │
│           [   Título Grande  Centrado               ]          │
│ [ Sección 1 ]  [ Sección 2 ]  [ Sección 3 ]  [ Info ]         │
│ [ Contador  ]  [ Evento    ]  [ Padres    ]  [ RSVP ]         │
│           [         Recepción                  ]           │
│           [         Confirmaciones             ]           │
│                                                                 │
└─────────────────────────────────────────────────────────────────┘
```

---

## 🔐 Flujo de Seguridad

```
INPUT (Usuario en Admin)
  ↓
VALIDACIÓN (Tipo de dato)
  ↓
JSON STRINGIFY
  ↓
HTTPS/HTTP POST/PUT
  ↓
SERVIDOR NEXT.JS
  ↓
VALIDACIÓN SERVIDOR
  ↓
PREPARED STATEMENT
  ↓
PARAMETRIZACIÓN
  ↓
SQL SEGURO
  ↓
MYSQL (Sin vulnerabilidades)
  ↓
RESPUESTA SUCCESS
```

---

## 📊 Estadísticas

```
Total de Campos: 20
- Campos de texto: 14
- Campos de fecha/hora: 2
- Campos booleanos: 1
- URLs: 3

Total de Componentes React: 3
- Invitation.tsx: 280 líneas
- AdminPanel.tsx: 320 líneas
- Countdown.tsx: 120 líneas

Total de Routes API: 3
- /api/invitation: POST + GET
- /api/invitation/[id]: PUT + DELETE
- /api/init-db: GET

Total de Cambios en BD: +12 campos nuevos
```

---

## 🚀 Deployment

```
CÓDIGO LOCAL
  ↓
GIT PUSH
  ↓
GITHUB/GITLAB
  ↓
VERCEL/HEROKU
  ↓
BUILD
  ↓
DEPLOY
  ↓
URL PÚBLICA
  ↓
COMPARTIR CON INVITADOS
```

---

Este es el mapa completo de tu nueva invitación. ¡Ahora tienes una aplicación profesional! 🎉