<?php
/**
 * Template: Elegante (Design-1)
 * 
 * Variables disponibles:
 * - $evento: Array con datos del evento
 * - $invitado: Array con datos del invitado
 * - $config: Array con configuración del template (colores, tipografía, etc.)
 * - $isPreview: Boolean indicando si es vista previa
 * - $admisiones: Array con nombres de acompañantes (si estado es Aceptado)
 * - $tracklist: Array con canciones sugeridas
 * - $token: Token de la invitación
 * - $invitadoId: ID del invitado
 * - $templatePath: Ruta relativa al template
 */

// Función helper para construir rutas de assets
function getAssetPath($path) {
    if (empty($path)) {
        return '';
    }
    
    // Limpiar espacios y barras al inicio/final
    $path = trim($path);
    
    // Si la ruta ya es absoluta (empieza con /), usarla directamente
    if (strpos($path, '/') === 0) {
        if (defined('BASE_URL')) {
            // BASE_URL ya incluye el dominio completo, solo concatenar la ruta
            return BASE_URL . $path;
        }
        // Ruta relativa desde public/invitacion/ hacia assets/ (subir 3 niveles)
        return '../../..' . $path;
    }
    
    // Si la ruta es relativa pero contiene "assets/", construirla correctamente
    if (strpos($path, 'assets/') !== false) {
        if (defined('BASE_URL')) {
            return BASE_URL . '/' . ltrim($path, '/');
        }
        // Ruta relativa desde public/invitacion/ hacia assets/
        return '../../..' . '/' . ltrim($path, '/');
    }
    
    // Si la ruta es relativa sin "assets/", asumir que está en assets/uploads/
    if (defined('BASE_URL')) {
        return BASE_URL . '/assets/uploads/' . ltrim($path, '/');
    }
    // Ruta relativa desde templates/invitacion/default/template-1/ hacia assets/
    return '../../../../assets/uploads/' . ltrim($path, '/');
}

// Obtener datos adicionales del evento
$eventoId = $evento['id'] ?? 0;
$tipoEvento = $evento['tipo_evento'] ?? 'boda';

// Extraer templateId y templateTipo de templatePath si están disponibles
$templateId = 'template-1';
$templateTipo = 'default';
if (!empty($templatePath)) {
    // templatePath es algo como: ../../templates/invitacion/default/template-1
    $parts = explode('/', $templatePath);
    if (count($parts) >= 4) {
        $templateTipo = $parts[count($parts) - 2] ?? 'default';
        $templateId = $parts[count($parts) - 1] ?? 'template-1';
    }
}

// Obtener galería, videos, itinerario, dress code, obsequio
$galeria = obtenerGaleria($eventoId);
$videos = obtenerVideos($eventoId);
$itinerario = obtenerItinerario($eventoId);
$dresscode = obtenerDresscode($eventoId);
$obsequio = obtenerObsequio($eventoId);

// Obtener tipografías personalizadas
$tipografias = obtenerTipografias($eventoId);

// Obtener personalizaciones del template
$personalizaciones = obtenerPersonalizacionesTemplate($eventoId);

// Obtener datos del sobre desde la base de datos
$sobre = obtenerSobre($eventoId);
$sobreDesktop = '';
$sobreMovil = '';
if (!empty($sobre['sobre_principal'])) {
    $sobreDesktop = getAssetPath($sobre['sobre_principal']);
}
if (!empty($sobre['sobre_moviles'])) {
    $sobreMovil = getAssetPath($sobre['sobre_moviles']);
}

// Obtener información adicional
$infoHospedaje = obtenerDetallesAdicionales($eventoId, $tipoEvento, 'hospedaje');
$infoAlimentacion = obtenerDetallesAdicionales($eventoId, $tipoEvento, 'alimentacion');
$infoTransporte = obtenerDetallesAdicionales($eventoId, $tipoEvento, 'transporte');
$infoOtro = obtenerDetallesAdicionales($eventoId, $tipoEvento, 'otro');

// Determinar nombres según tipo de evento para el sobre (solo primer nombre)
$nombresSobre = '';
$fechaSobre = '';
if ($tipoEvento === 'boda') {
    // Extraer solo el primer nombre de cada uno
    $nombreNoviaCompleto = trim($evento['nombre_novia'] ?? '');
    $nombreNovioCompleto = trim($evento['nombre_novio'] ?? '');
    $primerNombreNoviaSobre = $nombreNoviaCompleto ? explode(' ', $nombreNoviaCompleto)[0] : '';
    $primerNombreNovioSobre = $nombreNovioCompleto ? explode(' ', $nombreNovioCompleto)[0] : '';
    $nombresSobre = htmlspecialchars($primerNombreNoviaSobre . ($primerNombreNoviaSobre && $primerNombreNovioSobre ? ' & ' : '') . $primerNombreNovioSobre);
} elseif ($tipoEvento === 'cumpleaños') {
    $nombreCompleto = trim($evento['nombre_homenajeado'] ?? '');
    $nombresSobre = htmlspecialchars($nombreCompleto ? explode(' ', $nombreCompleto)[0] : '');
} elseif ($tipoEvento === 'quinceañera') {
    $nombreCompleto = trim($evento['nombre_quinceanera'] ?? '');
    $nombresSobre = htmlspecialchars($nombreCompleto ? explode(' ', $nombreCompleto)[0] : '');
} elseif (!empty($evento['nombre_evento_social'])) {
    $nombresSobre = htmlspecialchars($evento['nombre_evento_social']);
}

// Formatear fecha para el sobre
if (!empty($evento['fecha_evento'])) {
    $fechaObj = DateTime::createFromFormat('Y-m-d', $evento['fecha_evento']);
    if ($fechaObj) {
        $fechaSobre = $fechaObj->format('d.m.Y');
    }
}

// Determinar nombres según tipo de evento para el título
$tituloEvento = '';
if ($tipoEvento === 'boda') {
    $tituloEvento = htmlspecialchars(($evento['nombre_novia'] ?? '') . ' & ' . ($evento['nombre_novio'] ?? ''));
} elseif ($tipoEvento === 'cumpleaños') {
    $tituloEvento = 'Cumpleaños de ' . htmlspecialchars($evento['nombre_homenajeado'] ?? '');
} elseif ($tipoEvento === 'quinceañera') {
    $tituloEvento = 'Quinceañera de ' . htmlspecialchars($evento['nombre_quinceanera'] ?? '');
} elseif (!empty($evento['nombre_evento_social'])) {
    $tituloEvento = htmlspecialchars($evento['nombre_evento_social']);
}

// Formatear fecha del evento para sección 1
$fechaFormateada = '';
if (!empty($evento['fecha_evento'])) {
    $meses = [
        1 => 'Enero', 2 => 'Febrero', 3 => 'Marzo', 4 => 'Abril',
        5 => 'Mayo', 6 => 'Junio', 7 => 'Julio', 8 => 'Agosto',
        9 => 'Septiembre', 10 => 'Octubre', 11 => 'Noviembre', 12 => 'Diciembre'
    ];
    $fechaObj = DateTime::createFromFormat('Y-m-d', $evento['fecha_evento']);
    if ($fechaObj) {
        $dia = $fechaObj->format('d');
        $mes = (int)$fechaObj->format('m');
        $anio = $fechaObj->format('Y');
        $fechaFormateada = $meses[$mes] . ' ' . $dia . ', ' . $anio;
    }
}

// Obtener nombres de novios para sección 1 (solo primer nombre)
$nombresNoviosSeccion1 = '';
if ($tipoEvento === 'boda' && !empty($evento['nombre_novia']) && !empty($evento['nombre_novio'])) {
    // Extraer solo el primer nombre de cada uno
    $primerNombreNovia = explode(' ', trim($evento['nombre_novia']))[0];
    $primerNombreNovio = explode(' ', trim($evento['nombre_novio']))[0];
    $nombresNoviosSeccion1 = htmlspecialchars($primerNombreNovia) . ' & ' . htmlspecialchars($primerNombreNovio);
} elseif ($tipoEvento === 'boda' && !empty($evento['nombre_novia'])) {
    $primerNombreNovia = explode(' ', trim($evento['nombre_novia']))[0];
    $nombresNoviosSeccion1 = htmlspecialchars($primerNombreNovia);
} elseif ($tipoEvento === 'boda' && !empty($evento['nombre_novio'])) {
    $primerNombreNovio = explode(' ', trim($evento['nombre_novio']))[0];
    $nombresNoviosSeccion1 = htmlspecialchars($primerNombreNovio);
} else {
    $nombresNoviosSeccion1 = 'Nombre Novia & Nombre Novio';
}

// Obtener imagen principal para sección 1
$imagenPrincipal = '';
if (!empty($evento['foto_principal'])) {
    $imagenPrincipal = getAssetPath($evento['foto_principal']);
}

// Obtener video para sección 3 (asignado al invitado o primer video como fallback)
$videoSeccion3 = null;
$primerVideo = null;

// Intentar obtener video asignado al invitado (tanto en preview como en invitación real)
if (!empty($invitadoId) && $invitadoId > 0) {
    $videoAsignado = obtenerVideoPorInvitado($eventoId, $invitadoId);
    if ($videoAsignado && !empty($videoAsignado['archivo'])) {
        $videoSeccion3 = $videoAsignado;
        $primerVideo = getAssetPath($videoAsignado['archivo']);
    }
}

// Si no hay video asignado, usar el primer video como fallback
if (empty($primerVideo) && !empty($videos) && isset($videos[0]) && !empty($videos[0]['archivo'])) {
    $videoSeccion3 = $videos[0];
    $primerVideo = getAssetPath($videos[0]['archivo']);
}

// Obtener primera imagen de galería para sección 5
$primeraImagenGaleria = '';
if (!empty($galeria) && isset($galeria[0]) && !empty($galeria[0]['archivo'])) {
    $primeraImagenGaleria = getAssetPath($galeria[0]['archivo']);
}

// Obtener colores de la configuración
$colorPrincipal = $config['colores']['color_principal'] ?? '#715E32';
$colorSecundario = $config['colores']['color_secundario'] ?? '#A78B49';
$colorTexto = $config['colores']['color_texto'] ?? '#333333';

// Obtener nombre del invitado
$nombreInvitado = htmlspecialchars(($invitado['nombre_cortesia'] ?? '') . ' ' . ($invitado['nombre_invitado'] ?? ''));
$numeroAdmisiones = $invitado['numero_admisiones'] ?? 1;

// Función helper para formatear nombres (solo primer nombre y primer apellido)
function formatearNombreCorto($nombreCompleto) {
    if (empty($nombreCompleto)) {
        return '';
    }
    
    // Limpiar espacios extra
    $nombreCompleto = trim($nombreCompleto);
    
    // Dividir por espacios
    $partes = explode(' ', $nombreCompleto);
    
    // Filtrar partes vacías
    $partes = array_filter($partes, function($parte) {
        return !empty(trim($parte));
    });
    
    // Reindexar array
    $partes = array_values($partes);
    
    // Si solo hay una parte, devolverla
    if (count($partes) === 1) {
        return $partes[0];
    }
    
    // Si hay dos o más partes, tomar primera y segunda
    // (primer nombre y primer apellido)
    return $partes[0] . ' ' . $partes[1];
}

// Obtener padres de novia y novio (formateados con solo primer nombre y primer apellido)
$padresNovia = '';
if (!empty($evento['padre_novia']) || !empty($evento['madre_novia'])) {
    $padreNoviaFormateado = formatearNombreCorto($evento['padre_novia'] ?? '');
    $madreNoviaFormateado = formatearNombreCorto($evento['madre_novia'] ?? '');
    
    if ($padreNoviaFormateado && $madreNoviaFormateado) {
        $padresNovia = $padreNoviaFormateado . ' & ' . $madreNoviaFormateado;
    } elseif ($padreNoviaFormateado) {
        $padresNovia = $padreNoviaFormateado;
    } elseif ($madreNoviaFormateado) {
        $padresNovia = $madreNoviaFormateado;
    }
}

$padresNovio = '';
if (!empty($evento['padre_novio']) || !empty($evento['madre_novio'])) {
    $padreNovioFormateado = formatearNombreCorto($evento['padre_novio'] ?? '');
    $madreNovioFormateado = formatearNombreCorto($evento['madre_novio'] ?? '');
    
    if ($padreNovioFormateado && $madreNovioFormateado) {
        $padresNovio = $padreNovioFormateado . ' & ' . $madreNovioFormateado;
    } elseif ($padreNovioFormateado) {
        $padresNovio = $padreNovioFormateado;
    } elseif ($madreNovioFormateado) {
        $padresNovio = $madreNovioFormateado;
    }
}

// Obtener datos del obsequio
$bancoObsequio = $obsequio['banco'] ?? '';
$cuentaObsequio = $obsequio['numero_cuenta'] ?? '';
$titularObsequio = $obsequio['titular'] ?? '';
$tipoCuentaObsequio = $obsequio['tipo_cuenta'] ?? '';

// Obtener colores reservados del dress code desde la nueva tabla
$coloresReservadosDB = obtenerColoresReservadosDressCode($eventoId);
$coloresDressCode = [];
if (!empty($coloresReservadosDB)) {
    foreach ($coloresReservadosDB as $colorItem) {
        $coloresDressCode[] = $colorItem['color'];
    }
}
// Si no hay colores configurados, usar colores por defecto
if (empty($coloresDressCode)) {
    $coloresDressCode = ['#715E32', '#A78B49', '#C5AF7C'];
}

// Obtener items del dress code (imágenes y links de Pinterest)
$itemsDressCode = [];
if (!empty($dresscode)) {
    foreach ($dresscode as $item) {
        if (!empty($item['valor']) && ($item['activo'] ?? 1)) {
            $itemsDressCode[] = [
                'tipo' => $item['tipo'] ?? 'imagen',
                'valor' => $item['valor'],
                'nombre' => $item['nombre_opcion'] ?? ''
            ];
        }
    }
}

// Para compatibilidad, mantener array de solo imágenes
$imagenesDressCode = [];
foreach ($itemsDressCode as $item) {
    if ($item['tipo'] === 'imagen' && !empty($item['valor'])) {
        $imagenesDressCode[] = getAssetPath($item['valor']);
    }
}

// Obtener imágenes para slider de confirmación (sección 8)
$imagenesSlider = [];
if (!empty($galeria)) {
    foreach ($galeria as $item) {
        if (!empty($item['archivo'])) {
            $imagenesSlider[] = getAssetPath($item['archivo']);
        }
    }
}
// Si no hay imágenes en galería, usar imagen principal
if (empty($imagenesSlider) && !empty($imagenPrincipal)) {
    $imagenesSlider[] = $imagenPrincipal;
}

// Formatear fecha y hora para Google Calendar
$fechaHoraGoogleCalendar = '';
$fechaFinGoogleCalendar = '';
if (!empty($evento['fecha_evento']) && !empty($evento['hora_evento'])) {
    $fechaHoraObj = DateTime::createFromFormat('Y-m-d H:i:s', $evento['fecha_evento'] . ' ' . $evento['hora_evento']);
    if ($fechaHoraObj) {
        $fechaHoraGoogleCalendar = $fechaHoraObj->format('Ymd\THis');
        // Agregar 4 horas para la hora de fin
        $fechaHoraObj->modify('+4 hours');
        $fechaFinGoogleCalendar = $fechaHoraObj->format('Ymd\THis');
    }
}

// URL de Google Maps
$urlGoogleMaps = 'https://www.google.com/maps';
if (!empty($evento['direccion_evento'])) {
    $coords = explode(',', $evento['direccion_evento']);
    if (count($coords) === 2 && is_numeric(trim($coords[0])) && is_numeric(trim($coords[1]))) {
        $lat = trim($coords[0]);
        $lng = trim($coords[1]);
        $urlGoogleMaps = "https://www.google.com/maps?q={$lat},{$lng}";
    }
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invitación - <?php echo $tituloEvento; ?></title>
    <link rel="stylesheet" href="<?php echo htmlspecialchars($templatePath); ?>/template.css">
    <!-- Fuentes personalizadas -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        <?php
        // Fuentes personalizadas: @font-face para archivos subidos
        $fontKeys = ['letra_cursiva_1', 'letra_cursiva_2', 'letra_sans_1', 'letra_sans_2', 'letra_sans_3'];
        foreach ($fontKeys as $key):
            $archivo = $tipografias[$key . '_archivo'] ?? null;
            $nombre = $tipografias[$key . '_nombre'] ?? '';
            if (!empty($archivo) && !empty($nombre)):
                $fontUrl = getAssetPath($archivo);
                $ext = strtolower(pathinfo($archivo, PATHINFO_EXTENSION));
                $format = ($ext === 'ttf') ? 'truetype' : (($ext === 'otf') ? 'opentype' : (($ext === 'woff2') ? 'woff2' : 'woff'));
        ?>
        @font-face {
            font-family: '<?php echo addslashes($nombre); ?>';
            src: url('<?php echo htmlspecialchars($fontUrl); ?>') format('<?php echo $format; ?>');
            font-weight: 100 900;
            font-style: normal;
            font-display: swap;
        }
        <?php endif; endforeach; ?>
        :root {
            /* Imágenes del sobre desde la base de datos (eventos_sobre) */
            <?php if (!empty($sobreDesktop)): ?>
            --imagen-sobre-desktop: url('<?php echo htmlspecialchars($sobreDesktop); ?>');
            <?php else: ?>
            --imagen-sobre-desktop: url('../../../../assets/images/sobre-desktop.jpg');
            <?php endif; ?>
            <?php if (!empty($sobreMovil)): ?>
            --imagen-sobre-movil: url('<?php echo htmlspecialchars($sobreMovil); ?>');
            <?php else: ?>
            --imagen-sobre-movil: url('../../../../assets/images/sobre-movil.jpg');
            <?php endif; ?>
            <?php
            // Override tipografía si hay personalización
            if (!empty($tipografias['letra_sans_1_nombre'])) {
                echo "--letra-sans-1: '" . addslashes($tipografias['letra_sans_1_nombre']) . "', sans-serif;\n            ";
            }
            if (!empty($tipografias['letra_sans_2_nombre'])) {
                echo "--letra-sans-2: '" . addslashes($tipografias['letra_sans_2_nombre']) . "', sans-serif;\n            ";
            }
            if (!empty($tipografias['letra_sans_3_nombre'])) {
                echo "--letra-sans-3: '" . addslashes($tipografias['letra_sans_3_nombre']) . "', sans-serif;\n            ";
            }
            if (!empty($tipografias['letra_cursiva_1_nombre'])) {
                echo "--letra-cursiva-1: '" . addslashes($tipografias['letra_cursiva_1_nombre']) . "', cursive;\n            ";
            }
            if (!empty($tipografias['letra_cursiva_2_nombre'])) {
                echo "--letra-cursiva-2: '" . addslashes($tipografias['letra_cursiva_2_nombre']) . "', cursive;\n            ";
            }
            ?>
        }
    </style>
</head>
<body>
    <?php if ($isPreview): ?>
        <div class="preview-banner">
            👁️ Vista Previa - <a href="<?php echo BASE_URL . ADMIN_PATH; ?>/index.php">Volver al Dashboard</a>
        </div>
    <?php endif; ?>
    
    <!-- Sobre (Envelope) - Se muestra primero -->
    <div id="envelope-overlay" class="envelope-overlay" style="display: <?php echo $isPreview ? 'none' : 'flex'; ?>">
        <div class="envelope-container">
            <!-- Imagen del sobre para desktop - usa variable CSS desde la base de datos -->
            <div class="envelope-image-wrapper envelope-desktop"></div>
            
            <!-- Imagen del sobre para móviles - usa variable CSS desde la base de datos -->
            <div class="envelope-image-wrapper envelope-mobile"></div>
            
            <!-- Nombres de los novios (arriba) -->
            <?php if (!empty($nombresSobre)): ?>
                <div class="envelope-names"><?php echo $nombresSobre; ?></div>
            <?php endif; ?>
            
            <!-- Fecha del evento (abajo) -->
            <?php if (!empty($fechaSobre)): ?>
                <div class="envelope-date"><?php echo $fechaSobre; ?></div>
            <?php endif; ?>
            
            <!-- Instrucción para abrir -->
            <div class="envelope-instruction">Clic para abrir</div>
        </div>
    </div>
    
    <!-- Contenido de la invitación (oculto hasta que se abra el sobre) -->
    <div class="template-container" id="template-content" style="display: block;">
        <!-- Sección 1: Encabezado con imagen de fondo -->
        <?php 
        // Usar imagen personalizada si existe, sino usar la imagen principal
        $imagenFondoSeccion1 = $imagenPrincipal;
        if (!empty($personalizaciones['section-1']['background-image']['valor'])) {
            $imagenFondoSeccion1 = getAssetPath($personalizaciones['section-1']['background-image']['valor']);
        }
        ?>
        <section class="section-1" id="section-1">
            <!-- Imagen de fondo -->
            <?php if (!empty($imagenFondoSeccion1)): ?>
                <div class="section-1-background" style="background-image: url('<?php echo htmlspecialchars($imagenFondoSeccion1); ?>');"></div>
            <?php else: ?>
                <div class="section-1-background"></div>
            <?php endif; ?>
            
            <!-- Overlay oscuro para legibilidad del texto -->
            <div class="section-1-overlay"></div>
            
            <!-- Contenido de la sección -->
            <div class="section-1-content">
                <!-- Nombres de los novios -->
                <h1 class="section-1-nombres"><?php echo $nombresNoviosSeccion1; ?></h1>
                
                <!-- Fecha del evento -->
                <p class="section-1-fecha" id="section-1-fecha"><?php echo $fechaFormateada ?: 'Fecha del evento'; ?></p>
                
                <!-- Conteo regresivo -->
                <div class="section-1-countdown" id="section-1-countdown">
                    <div class="countdown-item">
                        <span class="countdown-number" id="countdown-days">00</span>
                        <span class="countdown-label">Días</span>
                    </div>
                    <span class="countdown-separator">:</span>
                    <div class="countdown-item">
                        <span class="countdown-number" id="countdown-hours">00</span>
                        <span class="countdown-label">Horas</span>
                    </div>
                    <span class="countdown-separator">:</span>
                    <div class="countdown-item">
                        <span class="countdown-number" id="countdown-minutes">00</span>
                        <span class="countdown-label">Minutos</span>
                    </div>
                    <span class="countdown-separator">:</span>
                    <div class="countdown-item">
                        <span class="countdown-number" id="countdown-seconds">00</span>
                        <span class="countdown-label">Segundos</span>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Espaciador para visualizar el efecto de acuarela -->
        <div class="section-1-spacer"></div>
        
        <!-- Sección 2: Invitación -->
        <?php
        // Textos personalizados de la sección 2
        $textoTituloSeccion2 = $personalizaciones['section-2']['titulo-principal']['valor'] ?? 'JUNTOS CON NUESTRAS FAMILIAS';
        $textoSubtituloSeccion2 = $personalizaciones['section-2']['subtitulo']['valor'] ?? 'nos encantaría que nos acompañaras en este momento tan especial.';
        $textoMensajeSeccion2 = $personalizaciones['section-2']['mensaje']['valor'] ?? '';
        ?>
        <section class="section-2" id="section-2">
            <div class="section-2-container">
                <!-- Contenedor de texto principal -->
                <div class="section-2-text-container">
                    <p class="section-2-text-top"><?php echo htmlspecialchars($textoTituloSeccion2); ?></p>
                    <p class="section-2-text-bottom"><?php echo htmlspecialchars($textoSubtituloSeccion2); ?></p>
                    <?php if (!empty($textoMensajeSeccion2)): ?>
                        <p class="section-2-text-message" style="margin-top: 15px; font-style: italic; opacity: 0.9;"><?php echo htmlspecialchars($textoMensajeSeccion2); ?></p>
                    <?php endif; ?>
                </div>
                
                <!-- Contenedor dividido en dos columnas -->
                <div class="section-2-parents-container">
                    <!-- Columna izquierda: Padres de la Novia -->
                    <div class="section-2-parents-column">
                        <p class="section-2-parents-label">PADRES DE LA NOVIA</p>
                        <p class="section-2-parents-names" id="section-2-bride-parents"><?php echo htmlspecialchars($padresNovia ?: 'Padres de la Novia'); ?></p>
                    </div>
                    
                    <!-- Divisor vertical -->
                    <div class="section-2-divider"></div>
                    
                    <!-- Columna derecha: Padres del Novio -->
                    <div class="section-2-parents-column">
                        <p class="section-2-parents-label">PADRES DEL NOVIO</p>
                        <p class="section-2-parents-names" id="section-2-groom-parents"><?php echo htmlspecialchars($padresNovio ?: 'Padres del Novio'); ?></p>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Sección 3: Video Personalizado -->
        <section class="section-3" id="section-3">
            <div class="section-3-container" id="section-3-container">
                <!-- Video principal -->
                <video 
                    src="<?php echo htmlspecialchars($primerVideo ?: ''); ?>" 
                    class="section-3-video"
                    id="section-3-video"
                    preload="auto"
                    muted
                    playsinline
                    loop>
                </video>
                
                <!-- Overlay de color -->
                <div class="section-3-overlay"></div>
                
                <!-- Cover con texto y botón de play -->
                <div class="section-3-cover" id="section-3-cover">
                    <p class="section-3-cover-texto">Video Personalizado</p>
                    <button class="section-3-play-button" id="section-3-play-button" aria-label="Reproducir video">
                        <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="40" cy="40" r="40" fill="rgba(255, 255, 255, 0.9)"/>
                            <path d="M32 24L32 56L56 40L32 24Z" fill="#715E32"/>
                        </svg>
                    </button>
                </div>
                
                <!-- Overlay oscuro para efecto de enfoque al reproducir -->
                <div class="section-3-focus-overlay" id="section-3-focus-overlay">
                    <!-- Botón de cerrar -->
                    <button class="section-3-close-button" id="section-3-close-button" aria-label="Cerrar video">
                        <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="20" cy="20" r="20" fill="rgba(255, 255, 255, 0.9)"/>
                            <path d="M14 14L26 26M26 14L14 26" stroke="#715E32" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                    </button>
                </div>
            </div>
        </section>
        
        <!-- Sección 4: Itinerario -->
        <section class="section-4" id="section-4">
            <div class="section-4-container" id="section-4-container">
                <?php if (!empty($itinerario)): ?>
                    <?php foreach ($itinerario as $index => $item): ?>
                        <?php
                        // Formatear fecha
                        $fechaItem = '';
                        if (!empty($item['fecha'])) {
                            $fechaObj = DateTime::createFromFormat('Y-m-d', $item['fecha']);
                            if ($fechaObj) {
                                $fechaItem = $fechaObj->format('d/m/Y');
                            }
                        }
                        // Formatear hora
                        $horaItem = '';
                        if (!empty($item['hora'])) {
                            $horaObj = DateTime::createFromFormat('H:i:s', $item['hora']);
                            if ($horaObj) {
                                $horaItem = $horaObj->format('H\hi');
                            }
                        }
                        ?>
                        <div class="section-4-item">
                            <div class="section-4-left">
                                <p class="section-4-date" id="section-4-date-<?php echo $index + 1; ?>"><?php echo $fechaItem ?: 'Fecha'; ?></p>
                                <p class="section-4-time" id="section-4-time-<?php echo $index + 1; ?>"><?php echo $horaItem ?: '00:00'; ?></p>
                            </div>
                            <div class="section-4-divider"></div>
                            <div class="section-4-right">
                                <h3 class="section-4-title" id="section-4-title-<?php echo $index + 1; ?>"><?php echo htmlspecialchars($item['nombre'] ?? 'Evento'); ?></h3>
                                <p class="section-4-subtitle" id="section-4-subtitle-<?php echo $index + 1; ?>"><?php echo htmlspecialchars($item['descripcion'] ?? 'Lugar'); ?></p>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <!-- Item de ejemplo cuando no hay itinerario -->
                    <div class="section-4-item">
                        <div class="section-4-left">
                            <p class="section-4-date">Fecha</p>
                            <p class="section-4-time">00:00</p>
                        </div>
                        <div class="section-4-divider"></div>
                        <div class="section-4-right">
                            <h3 class="section-4-title">Evento</h3>
                            <p class="section-4-subtitle">Lugar</p>
                        </div>
                    </div>
                <?php endif; ?>
                
                <!-- Botón Google Calendar -->
                <div class="section-4-calendar-button-container">
                    <?php
                    $tituloCalendar = urlencode($tituloEvento ?: 'Evento');
                    $detallesCalendar = urlencode('¡Únete a celebrar con nosotros!');
                    
                    // Construir ubicación: usar lugar_evento y coordenadas si están disponibles
                    $lugarTexto = $evento['lugar_evento'] ?? '';
                    $ubicacionCalendar = $lugarTexto;
                    
                    // Si hay coordenadas en direccion_evento, agregarlas para mayor precisión
                    if (!empty($evento['direccion_evento'])) {
                        $coordsCalendar = explode(',', $evento['direccion_evento']);
                        if (count($coordsCalendar) === 2 && is_numeric(trim($coordsCalendar[0])) && is_numeric(trim($coordsCalendar[1]))) {
                            $latCalendar = trim($coordsCalendar[0]);
                            $lngCalendar = trim($coordsCalendar[1]);
                            // Si hay nombre del lugar, agregarlo junto con las coordenadas
                            if (!empty($lugarTexto)) {
                                $ubicacionCalendar = $lugarTexto . ' (' . $latCalendar . ',' . $lngCalendar . ')';
                            } else {
                                $ubicacionCalendar = $latCalendar . ',' . $lngCalendar;
                            }
                        }
                    }
                    
                    $lugarCalendar = urlencode($ubicacionCalendar);
                    $fechaInicio = $fechaHoraGoogleCalendar ?: date('Ymd\THis');
                    $fechaFin = $fechaFinGoogleCalendar ?: date('Ymd\THis', strtotime('+4 hours'));
                    $urlCalendar = "https://www.google.com/calendar/render?action=TEMPLATE&text={$tituloCalendar}&details={$detallesCalendar}&location={$lugarCalendar}&dates={$fechaInicio}/{$fechaFin}";
                    ?>
                    <a href="<?php echo $urlCalendar; ?>" 
                       target="_blank" 
                       rel="noopener noreferrer" 
                       class="section-4-calendar-button" 
                       id="section-4-calendar-button">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="section-4-calendar-icon">
                            <path d="M19 4H5C3.89 4 3 4.9 3 6V20C3 21.1 3.89 22 5 22H19C20.1 22 21 21.1 21 20V6C21 4.9 20.1 4 19 4ZM19 20H5V9H19V20ZM7 11H9V13H7V11ZM11 11H13V13H11V11ZM15 11H17V13H15V11ZM7 15H9V17H7V15ZM11 15H13V17H11V15ZM15 15H17V17H15V15Z" fill="currentColor"/>
                        </svg>
                        <span>Agrégalo a tu Google Calendar</span>
                    </a>
                </div>
            </div>
        </section>
        
        <!-- Sección 5: Imagen 16:9 -->
        <?php
        // Usar imagen personalizada si existe, sino usar la primera imagen de la galería
        $imagenSeccion5 = $primeraImagenGaleria;
        if (!empty($personalizaciones['section-5']['imagen']['valor'])) {
            $imagenSeccion5 = getAssetPath($personalizaciones['section-5']['imagen']['valor']);
        }
        ?>
        <section class="section-5" id="section-5">
            <div class="section-5-container" id="section-5-container">
                <img src="<?php echo htmlspecialchars($imagenSeccion5 ?: ''); ?>" alt="Imagen" class="section-5-image" id="section-5-image">
            </div>
        </section>
        
        <!-- Sección 6: Dress Code -->
        <?php
        // Textos personalizados de la sección 6
        $tituloSeccion6 = $personalizaciones['section-6']['titulo']['valor'] ?? 'DressCode';
        $subtituloSeccion6 = $personalizaciones['section-6']['subtitulo']['valor'] ?? 'Inspírate en estas ideas de vestimenta.';
        $textoColoresSeccion6 = $personalizaciones['section-6']['texto-colores']['valor'] ?? 'Estos colores están reservados para los novios; evita usarlos.';
        ?>
        <section class="section-6" id="section-6">
            <div class="section-6-container" id="section-6-container">
                <!-- Título -->
                <h2 class="section-6-title" id="section-6-title"><?php echo htmlspecialchars($tituloSeccion6); ?></h2>
                
                <!-- Subtítulo -->
                <p class="section-6-subtitle" id="section-6-subtitle"><?php echo htmlspecialchars($subtituloSeccion6); ?></p>
                
                <!-- Aviso de colores reservados -->
                <div class="section-6-colors-warning">
                    <p class="section-6-warning-text" id="section-6-warning-text"><?php echo htmlspecialchars($textoColoresSeccion6); ?></p>
                    <div class="section-6-colors-container">
                        <?php if (!empty($coloresDressCode)): ?>
                            <?php foreach (array_slice($coloresDressCode, 0, 3) as $color): ?>
                                <div class="section-6-color-circle" style="background-color: <?php echo htmlspecialchars($color); ?>;"></div>
                            <?php endforeach; ?>
                        <?php else: ?>
                            <div class="section-6-color-circle" style="background-color: #715E32;"></div>
                            <div class="section-6-color-circle" style="background-color: #A78B49;"></div>
                            <div class="section-6-color-circle" style="background-color: #C5AF7C;"></div>
                        <?php endif; ?>
                    </div>
                </div>
                
                <!-- Galería de imágenes y Pinterest -->
                <div class="section-6-gallery" id="section-6-gallery">
                    <?php if (!empty($itemsDressCode)): ?>
                        <?php foreach ($itemsDressCode as $index => $item): ?>
                            <?php if ($item['tipo'] === 'imagen' && !empty($item['valor'])): ?>
                                <!-- Imagen subida -->
                                <div class="section-6-gallery-item">
                                    <img src="<?php echo htmlspecialchars(getAssetPath($item['valor'])); ?>" alt="<?php echo htmlspecialchars($item['nombre'] ?: 'Dress Code ' . ($index + 1)); ?>" class="section-6-gallery-image">
                                </div>
                            <?php elseif ($item['tipo'] === 'link_pinterest' && !empty($item['valor'])): ?>
                                <!-- Pinterest Pin Embed -->
                                <div class="section-6-gallery-item section-6-pinterest-item">
                                    <a data-pin-do="embedPin" 
                                       data-pin-width="medium"
                                       href="<?php echo htmlspecialchars($item['valor']); ?>">
                                    </a>
                                    <noscript>
                                        <a href="<?php echo htmlspecialchars($item['valor']); ?>" 
                                           target="_blank" 
                                           rel="noopener noreferrer"
                                           class="section-6-pinterest-fallback">
                                            <?php echo htmlspecialchars($item['nombre'] ?: 'Ver en Pinterest'); ?>
                                        </a>
                                    </noscript>
                                </div>
                            <?php endif; ?>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <!-- Placeholder cuando no hay imágenes -->
                        <div class="section-6-gallery-item">
                            <div style="width: 100%; height: 250px; background: var(--color-bg-secondary, #DED2B5); display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary, #715E32);">Imagen Dress Code</div>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </section>
        
        <!-- Sección 7: Ubicación -->
        <?php
        // Textos personalizados de la sección 7
        $tituloSeccion7 = $personalizaciones['section-7']['titulo']['valor'] ?? 'Ubicación';
        $subtituloSeccion7 = $personalizaciones['section-7']['subtitulo']['valor'] ?? 'Descubre cómo llegar a nuestro "Sí acepto"';
        $textoBotonSeccion7 = $personalizaciones['section-7']['texto-boton']['valor'] ?? 'Mira en Google Maps';
        
        // Imagen del mapa de referencia
        $mapaReferencia = '';
        if (!empty($evento['mapa_referencia'])) {
            $mapaReferencia = getAssetPath($evento['mapa_referencia']);
        }
        ?>
        <section class="section-7" id="section-7">
            <div class="section-7-container" id="section-7-container">
                <!-- Título -->
                <h2 class="section-7-title" id="section-7-title"><?php echo htmlspecialchars($tituloSeccion7); ?></h2>
                
                <!-- Subtítulo -->
                <p class="section-7-subtitle" id="section-7-subtitle"><?php echo htmlspecialchars($subtituloSeccion7); ?></p>
                
                <?php if (!empty($mapaReferencia)): ?>
                <!-- Imagen del mapa de referencia -->
                <div class="section-7-map-image-container">
                    <img src="<?php echo htmlspecialchars($mapaReferencia); ?>" 
                         alt="Mapa de ubicación" 
                         class="section-7-map-image" 
                         id="section-7-map-image">
                </div>
                <?php endif; ?>
                
                <!-- Botón Google Maps -->
                <div class="section-7-button-container">
                    <a href="<?php echo htmlspecialchars($urlGoogleMaps ?: '#'); ?>" 
                       target="_blank" 
                       rel="noopener noreferrer" 
                       class="section-7-maps-button" 
                       id="section-7-maps-button">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="section-7-maps-icon">
                            <path d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z" fill="currentColor"/>
                        </svg>
                        <span><?php echo htmlspecialchars($textoBotonSeccion7); ?></span>
                    </a>
                </div>
            </div>
        </section>
        
        <!-- Sección 8: Confirmación de Asistencia -->
        <section class="section-8" id="section-8">
            <div class="section-8-container" id="section-8-container">
                <!-- Columna izquierda: Slider de fotos -->
                <div class="section-8-left">
                    <div class="section-8-slider" id="section-8-slider">
                        <?php if (!empty($imagenesSlider)): ?>
                            <?php foreach ($imagenesSlider as $index => $imagen): ?>
                                <div class="section-8-slide <?php echo $index === 0 ? 'active' : ''; ?>">
                                    <img src="<?php echo htmlspecialchars($imagen); ?>" alt="Foto <?php echo $index + 1; ?>" class="section-8-slide-image">
                                </div>
                            <?php endforeach; ?>
                        <?php else: ?>
                            <!-- Placeholder cuando no hay imágenes -->
                            <div class="section-8-slide active">
                                <div style="width: 100%; height: 100%; background: #DED2B5; display: flex; align-items: center; justify-content: center; color: #715E32;">Imagen</div>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
                
                <!-- Columna derecha: Formulario de confirmación -->
                <div class="section-8-right">
                    <div class="section-8-form-container">
                        <h3 class="section-8-guest-name" id="section-8-guest-name"><?php echo htmlspecialchars($nombreInvitado); ?></h3>
                        <p class="section-8-confirm-text" id="section-8-confirm-text">Confirme su asistencia</p>
                        <p class="section-8-admissions" id="section-8-admissions">No. de Admisiones: <span id="section-8-admissions-number"><?php echo $numeroAdmisiones; ?></span></p>
                        
                        <?php if ($invitado['estado'] === 'Pendiente'): ?>
                            <div class="section-8-buttons">
                                <button class="section-8-button section-8-button-yes" id="section-8-button-yes">Si asistiré</button>
                                <button class="section-8-button section-8-button-no" id="section-8-button-no">No asistiré</button>
                            </div>
                        <?php else: ?>
                            <div class="section-8-buttons">
                                <p style="color: var(--section-8-text-color, #715E32); font-weight: 600;">
                                    Estado: <?php echo htmlspecialchars($invitado['estado']); ?>
                                </p>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- Modal Confirmar Asistencia -->
        <div class="section-8-modal" id="section-8-modal-yes">
            <div class="section-8-modal-overlay"></div>
            <div class="section-8-modal-content">
                <h3 class="section-8-modal-title">Confirma tu asistencia</h3>
                <p class="section-8-modal-text">Gracias por ser parte de nuestras vidas</p>
                <div class="section-8-modal-buttons">
                    <button class="section-8-modal-button section-8-modal-button-confirm" id="section-8-confirm-yes">Confirmar asistencia</button>
                    <button class="section-8-modal-button section-8-modal-button-cancel" id="section-8-cancel-yes">Cancelar</button>
                </div>
            </div>
        </div>
        
        <!-- Modal No Asistiré -->
        <div class="section-8-modal" id="section-8-modal-no">
            <div class="section-8-modal-overlay"></div>
            <div class="section-8-modal-content">
                <h3 class="section-8-modal-title">Gracias por tu respuesta</h3>
                <p class="section-8-modal-text">Lamentamos no poder contar contigo, déjanos un mensaje</p>
                <textarea class="section-8-modal-textarea" id="section-8-modal-comment" placeholder="Comentario (Opcional)"></textarea>
                <div class="section-8-modal-buttons">
                    <button class="section-8-modal-button section-8-modal-button-confirm" id="section-8-confirm-no">Confirmar inasistencia</button>
                    <button class="section-8-modal-button section-8-modal-button-cancel" id="section-8-cancel-no">Cancelar</button>
                </div>
            </div>
        </div>
        
        <!-- Sección 9: Obsequio -->
        <?php
        // Obtener obsequios del evento
        $obsequiosEvento = obtenerObsequios($eventoId);
        $cuentasBancariasTemplate = array_filter($obsequiosEvento, fn($o) => $o['tipo'] === 'transferencia');
        $sobreCerradoTemplate = array_filter($obsequiosEvento, fn($o) => $o['tipo'] === 'sobre_cerrado');
        $sobreCerradoData = !empty($sobreCerradoTemplate) ? array_values($sobreCerradoTemplate)[0] : null;
        
        // Textos personalizados de la sección 9
        $tituloSeccion9 = $personalizaciones['section-9']['titulo']['valor'] ?? 'Agradecemos tu obsequio';
        ?>
        <section class="section-9" id="section-9">
        <div class="section-9-container" id="section-9-container">
            <!-- Título -->
            <h2 class="section-9-title" id="section-9-title"><?php echo htmlspecialchars($tituloSeccion9); ?></h2>
            
            <!-- Contenedores de opciones -->
            <div class="section-9-options">
                <?php if (!empty($cuentasBancariasTemplate)): ?>
                <?php foreach ($cuentasBancariasTemplate as $index => $cuenta): ?>
                <!-- Cuenta Bancaria: <?php echo htmlspecialchars($cuenta['banco']); ?> -->
                <div class="section-9-option-card section-9-bank-card">
                    <div class="section-9-icon-container">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="section-9-icon">
                            <path d="M20 4H4C2.89 4 2.01 4.89 2.01 6L2 18C2 19.11 2.89 20 4 20H20C21.11 20 22 19.11 22 18V6C22 4.89 21.11 4 20 4ZM20 18H4V12H20V18ZM20 8H4V6H20V8Z" fill="currentColor"/>
                        </svg>
                    </div>
                    <h3 class="section-9-option-title">Transferencia Bancaria</h3>
                    <div class="section-9-option-content">
                        <p class="section-9-bank-info">
                            <span class="section-9-label">Banco:</span>
                            <span class="section-9-value"><?php echo htmlspecialchars($cuenta['banco']); ?></span>
                        </p>
                        <?php if (!empty($cuenta['tipo_cuenta'])): ?>
                        <p class="section-9-bank-info">
                            <span class="section-9-label">Tipo:</span>
                            <span class="section-9-value"><?php echo htmlspecialchars(ucfirst($cuenta['tipo_cuenta'])); ?></span>
                        </p>
                        <?php endif; ?>
                        <p class="section-9-bank-info">
                            <span class="section-9-label">Cuenta:</span>
                            <span class="section-9-value"><?php echo htmlspecialchars($cuenta['numero_cuenta']); ?></span>
                        </p>
                        <p class="section-9-bank-info">
                            <span class="section-9-label">Titular:</span>
                            <span class="section-9-value"><?php echo htmlspecialchars($cuenta['titular']); ?></span>
                        </p>
                        <?php if (!empty($cuenta['cedula'])): ?>
                        <p class="section-9-bank-info">
                            <span class="section-9-label">Cédula:</span>
                            <span class="section-9-value"><?php echo htmlspecialchars($cuenta['cedula']); ?></span>
                        </p>
                        <?php endif; ?>
                        <?php if (!empty($cuenta['correo'])): ?>
                        <p class="section-9-bank-info">
                            <span class="section-9-label">Correo:</span>
                            <span class="section-9-value"><?php echo htmlspecialchars($cuenta['correo']); ?></span>
                        </p>
                        <?php endif; ?>
                    </div>
                </div>
                <?php endforeach; ?>
                <?php endif; ?>
                
                <?php if (!empty($sobreCerradoData)): ?>
                <!-- Opción: Sobre cerrado -->
                <div class="section-9-option-card section-9-envelope-card">
                    <div class="section-9-icon-container">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="section-9-icon">
                            <path d="M20 4H4C2.9 4 2 4.9 2 6V18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4ZM20 8L12 13L4 8V6L12 11L20 6V8Z" fill="currentColor"/>
                        </svg>
                    </div>
                    <h3 class="section-9-option-title">Sobre cerrado</h3>
                    <div class="section-9-option-content">
                        <p class="section-9-envelope-text"><?php echo htmlspecialchars($sobreCerradoData['indicaciones'] ?: 'Puedes entregar tu obsequio en un sobre cerrado el día del evento.'); ?></p>
                    </div>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </section>
    
    <!-- Sección 10: Playlist Musical -->
    <?php
    // Textos personalizados de la sección 10
    $tituloSeccion10 = $personalizaciones['section-10']['titulo']['valor'] ?? 'Hagamos de esta noche, la mejor';
    $subtituloSeccion10 = $personalizaciones['section-10']['subtitulo']['valor'] ?? 'Qué música te gustaría que no falte';
    ?>
    <section class="section-10" id="section-10">
        <div class="section-10-container" id="section-10-container">
            <!-- Título -->
            <h2 class="section-10-title" id="section-10-title"><?php echo htmlspecialchars($tituloSeccion10); ?></h2>
            
            <!-- Subtítulo -->
            <p class="section-10-subtitle" id="section-10-subtitle"><?php echo htmlspecialchars($subtituloSeccion10); ?></p>
            
            <!-- Formulario de agregar canción -->
            <div class="section-10-form">
                <div class="section-10-form-row">
                    <div class="section-10-input-group">
                        <label for="section-10-song-artist" class="section-10-label">Autor/Artista/Cantante</label>
                        <input type="text" 
                               id="section-10-song-artist" 
                               class="section-10-input" 
                               placeholder="Ej: The Beatles">
                    </div>
                    <div class="section-10-input-group">
                        <label for="section-10-song-title" class="section-10-label">Título</label>
                        <input type="text" 
                               id="section-10-song-title" 
                               class="section-10-input" 
                               placeholder="Ej: Hey Jude">
                    </div>
                </div>
                <button class="section-10-add-button" id="section-10-add-button">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="section-10-add-icon">
                        <path d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z" fill="currentColor"/>
                    </svg>
                    <span>Agregar canción</span>
                </button>
            </div>
            
            <!-- Lista de playlist -->
            <div class="section-10-playlist" id="section-10-playlist">
                <div class="section-10-playlist-header">
                    <h3 class="section-10-playlist-title">Tu playlist</h3>
                    <p class="section-10-playlist-subtitle" id="section-10-playlist-count">0 canciones</p>
                </div>
                <div class="section-10-playlist-items" id="section-10-playlist-items">
                    <!-- Las canciones se agregarán aquí dinámicamente -->
                    <div class="section-10-playlist-empty" id="section-10-playlist-empty">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="section-10-empty-icon">
                            <path d="M12 3V13.55C11.41 13.21 10.73 13 10 13C7.79 13 6 14.79 6 17C6 19.21 7.79 21 10 21C12.21 21 14 19.21 14 17V7H18V5H12Z" fill="currentColor"/>
                        </svg>
                        <p>No hay canciones aún. ¡Agrega la primera!</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Sección 11: Información Adicional -->
    <?php
    // Obtener detalles adicionales de las tablas
    $detallesHospedaje = obtenerDetallesAdicionales($eventoId, $tipoEvento, 'hospedaje');
    $detallesAlimentacion = obtenerDetallesAdicionales($eventoId, $tipoEvento, 'alimentacion');
    $detallesTransporte = obtenerDetallesAdicionales($eventoId, $tipoEvento, 'transporte');
    $detallesOtro = obtenerDetallesAdicionales($eventoId, $tipoEvento, 'otro');
    $detallesPdf = obtenerDetallesAdicionales($eventoId, $tipoEvento, 'pdf');
    
    // Determinar qué tabs tienen contenido
    $tieneHospedaje = !empty($detallesHospedaje);
    $tieneAlimentacion = !empty($detallesAlimentacion);
    $tieneTransporte = !empty($detallesTransporte);
    $tieneOtro = !empty($detallesOtro);
    $tienePdf = !empty($detallesPdf);
    
    // Determinar el primer tab activo
    $primerTabActivo = $tieneHospedaje ? 'hospedaje' : ($tieneAlimentacion ? 'alimentacion' : ($tieneTransporte ? 'transporte' : ($tienePdf ? 'pdf' : ($tieneOtro ? 'otro' : 'hospedaje'))));
    
    // Textos personalizados de la sección 11
    $tituloSeccion11 = $personalizaciones['section-11']['titulo']['valor'] ?? 'Información Adicional';
    ?>
    <section class="section-11" id="section-11">
        <div class="section-11-container" id="section-11-container">
            <!-- Título -->
            <h2 class="section-11-title" id="section-11-title"><?php echo htmlspecialchars($tituloSeccion11); ?></h2>
            
            <!-- Tabs -->
            <div class="section-11-tabs">
                <div class="section-11-tabs-header">
                    <?php if ($tieneHospedaje): ?>
                    <button class="section-11-tab-button <?php echo $primerTabActivo === 'hospedaje' ? 'active' : ''; ?>" data-tab="hospedaje" id="section-11-tab-hospedaje">
                        Hospedaje
                    </button>
                    <?php endif; ?>
                    <?php if ($tieneAlimentacion): ?>
                    <button class="section-11-tab-button <?php echo $primerTabActivo === 'alimentacion' ? 'active' : ''; ?>" data-tab="alimentacion" id="section-11-tab-alimentacion">
                        Alimentación
                    </button>
                    <?php endif; ?>
                    <?php if ($tieneTransporte): ?>
                    <button class="section-11-tab-button <?php echo $primerTabActivo === 'transporte' ? 'active' : ''; ?>" data-tab="transporte" id="section-11-tab-transporte">
                        Transporte
                    </button>
                    <?php endif; ?>
                    <?php if ($tienePdf): ?>
                    <button class="section-11-tab-button <?php echo $primerTabActivo === 'pdf' ? 'active' : ''; ?>" data-tab="pdf" id="section-11-tab-pdf">
                        Documentos
                    </button>
                    <?php endif; ?>
                    <?php if ($tieneOtro): ?>
                    <button class="section-11-tab-button <?php echo $primerTabActivo === 'otro' ? 'active' : ''; ?>" data-tab="otro" id="section-11-tab-otro">
                        Otro
                    </button>
                    <?php endif; ?>
                </div>
                
                <!-- Contenido de las tabs -->
                <div class="section-11-tabs-content">
                    <?php if ($tieneHospedaje): ?>
                    <!-- Tab Hospedaje -->
                    <div class="section-11-tab-panel <?php echo $primerTabActivo === 'hospedaje' ? 'active' : ''; ?>" id="section-11-panel-hospedaje">
                        <div class="section-11-tab-content">
                            <?php foreach ($detallesHospedaje as $hotel): ?>
                            <div class="section-11-hotel-card">
                                <h3 class="section-11-hotel-name"><?php echo htmlspecialchars($hotel['nombre_hotel']); ?></h3>
                                <p class="section-11-hotel-location">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z" fill="currentColor"/>
                                    </svg>
                                    <?php echo htmlspecialchars($hotel['ubicacion_referencial']); ?>
                                </p>
                                <?php if (!empty($hotel['distancia_metros'])): ?>
                                <p class="section-11-hotel-distance">
                                    <?php 
                                    $distancia = $hotel['distancia_metros'];
                                    if ($distancia >= 1000) {
                                        echo number_format($distancia / 1000, 1) . ' km del evento';
                                    } else {
                                        echo $distancia . ' m del evento';
                                    }
                                    ?>
                                </p>
                                <?php endif; ?>
                                <?php if (!empty($hotel['botones'])): ?>
                                <div class="section-11-hotel-buttons">
                                    <?php foreach ($hotel['botones'] as $boton): ?>
                                    <a href="<?php echo htmlspecialchars($boton['tipo_valor'] === 'pdf' ? getAssetPath($boton['valor']) : $boton['valor']); ?>" 
                                       target="_blank" 
                                       rel="noopener noreferrer" 
                                       class="section-11-hotel-button">
                                        <?php if ($boton['tipo_valor'] === 'pdf'): ?>
                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM6 20V4H13V9H18V20H6Z" fill="currentColor"/>
                                        </svg>
                                        <?php else: ?>
                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M19 19H5V5H12V3H5C3.89 3 3 3.9 3 5V19C3 20.1 3.89 21 5 21H19C20.1 21 21 20.1 21 19V12H19V19ZM14 3V5H17.59L7.76 14.83L9.17 16.24L19 6.41V10H21V3H14Z" fill="currentColor"/>
                                        </svg>
                                        <?php endif; ?>
                                        <?php echo htmlspecialchars($boton['nombre_link']); ?>
                                    </a>
                                    <?php endforeach; ?>
                                </div>
                                <?php endif; ?>
                            </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    <?php endif; ?>
                    
                    <?php if ($tieneAlimentacion): ?>
                    <!-- Tab Alimentación -->
                    <div class="section-11-tab-panel <?php echo $primerTabActivo === 'alimentacion' ? 'active' : ''; ?>" id="section-11-panel-alimentacion">
                        <div class="section-11-tab-content">
                            <?php foreach ($detallesAlimentacion as $restaurante): ?>
                            <div class="section-11-restaurant-card">
                                <h3 class="section-11-restaurant-name"><?php echo htmlspecialchars($restaurante['nombre_restaurante']); ?></h3>
                                <p class="section-11-restaurant-address">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z" fill="currentColor"/>
                                    </svg>
                                    <?php echo htmlspecialchars($restaurante['direccion']); ?>
                                </p>
                                <?php if (!empty($restaurante['whatsapp_reservar'])): ?>
                                <a href="https://wa.me/<?php echo preg_replace('/[^0-9]/', '', $restaurante['whatsapp_reservar']); ?>" 
                                   target="_blank" 
                                   rel="noopener noreferrer" 
                                   class="section-11-restaurant-whatsapp">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" fill="currentColor"/>
                                    </svg>
                                    Reservar por WhatsApp
                                </a>
                                <?php endif; ?>
                            </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    <?php endif; ?>
                    
                    <?php if ($tieneTransporte): ?>
                    <!-- Tab Transporte -->
                    <div class="section-11-tab-panel <?php echo $primerTabActivo === 'transporte' ? 'active' : ''; ?>" id="section-11-panel-transporte">
                        <div class="section-11-tab-content">
                            <?php foreach ($detallesTransporte as $transporte): ?>
                            <div class="section-11-transport-card">
                                <h3 class="section-11-transport-name"><?php echo htmlspecialchars($transporte['nombre']); ?></h3>
                                <?php if (!empty($transporte['descripcion'])): ?>
                                <p class="section-11-transport-description"><?php echo nl2br(htmlspecialchars($transporte['descripcion'])); ?></p>
                                <?php endif; ?>
                                <?php if (!empty($transporte['contacto'])): ?>
                                <p class="section-11-transport-contact">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M6.62 10.79C8.06 13.62 10.38 15.94 13.21 17.38L15.41 15.18C15.69 14.9 16.08 14.82 16.43 14.93C17.55 15.3 18.75 15.5 20 15.5C20.55 15.5 21 15.95 21 16.5V20C21 20.55 20.55 21 20 21C10.61 21 3 13.39 3 4C3 3.45 3.45 3 4 3H7.5C8.05 3 8.5 3.45 8.5 4C8.5 5.25 8.7 6.45 9.07 7.57C9.18 7.92 9.1 8.31 8.82 8.59L6.62 10.79Z" fill="currentColor"/>
                                    </svg>
                                    <?php echo htmlspecialchars($transporte['contacto']); ?>
                                </p>
                                <?php endif; ?>
                            </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    <?php endif; ?>
                    
                    <?php if ($tienePdf): ?>
                    <!-- Tab Documentos/PDF -->
                    <div class="section-11-tab-panel <?php echo $primerTabActivo === 'pdf' ? 'active' : ''; ?>" id="section-11-panel-pdf">
                        <div class="section-11-tab-content">
                            <?php foreach ($detallesPdf as $pdf): ?>
                            <div class="section-11-pdf-card">
                                <div class="section-11-pdf-icon">
                                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM6 20V4H13V9H18V20H6Z" fill="currentColor"/>
                                        <path d="M8.5 15.5V17H10V15.5H8.5ZM10.5 13.5H9V15H10.5V13.5ZM12.5 13.5H11V15H12.5V13.5ZM14.5 15.5V17H16V15.5H14.5ZM14.5 13.5H13V15H14.5V13.5Z" fill="currentColor"/>
                                    </svg>
                                </div>
                                <h3 class="section-11-pdf-title"><?php echo htmlspecialchars($pdf['titulo']); ?></h3>
                                <?php if (!empty($pdf['archivo'])): ?>
                                <a href="<?php echo getAssetPath($pdf['archivo']); ?>" 
                                   target="_blank" 
                                   rel="noopener noreferrer" 
                                   class="section-11-pdf-button">
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M19 9H15V3H9V9H5L12 16L19 9ZM5 18V20H19V18H5Z" fill="currentColor"/>
                                    </svg>
                                    Descargar PDF
                                </a>
                                <?php endif; ?>
                            </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    <?php endif; ?>
                    
                    <?php if ($tieneOtro): ?>
                    <!-- Tab Otro -->
                    <div class="section-11-tab-panel <?php echo $primerTabActivo === 'otro' ? 'active' : ''; ?>" id="section-11-panel-otro">
                        <div class="section-11-tab-content">
                            <?php foreach ($detallesOtro as $otro): ?>
                            <div class="section-11-other-card">
                                <h3 class="section-11-other-title"><?php echo htmlspecialchars($otro['titulo']); ?></h3>
                                <?php if (!empty($otro['contenido'])): ?>
                                <p class="section-11-other-content"><?php echo nl2br(htmlspecialchars($otro['contenido'])); ?></p>
                                <?php endif; ?>
                            </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Footer -->
    <?php
    // Obtener primeros nombres de novia y novio
    $primerNombreNovia = isset($evento['nombre_novia']) ? explode(' ', trim($evento['nombre_novia']))[0] : 'Novia';
    $primerNombreNovio = isset($evento['nombre_novio']) ? explode(' ', trim($evento['nombre_novio']))[0] : 'Novio';
    $nombresFooterDefault = $primerNombreNovia . ' & ' . $primerNombreNovio;
    
    // Texto personalizado del footer (si existe)
    $nombresFooter = $personalizaciones['footer']['nombres']['valor'] ?? $nombresFooterDefault;
    ?>
    <footer class="section-footer" id="section-footer">
        <div class="section-footer-container" id="section-footer-container">
            <h2 class="section-footer-names" id="section-footer-names"><?php echo htmlspecialchars($nombresFooter); ?></h2>
            <p class="section-footer-copyright" id="section-footer-copyright">
                <?php echo date('Y'); ?> © Copyright. Todos los derechos reservados | Sistema de Invitaciones Digitales desarrollado por 
                <a href="https://ritmocreativo.com" target="_blank" rel="noopener noreferrer" class="section-footer-link">Ritmo Creativo Ec</a>
            </p>
        </div>
    </footer>
    </div>
    
    <?php if (!$isPreview): ?>
        <!-- Incluir modales y scripts compartidos -->
        <?php 
        // Variables necesarias para template-modals.php
        $templateModalsPath = __DIR__ . '/../../../../public/invitacion/template-modals.php';
        if (file_exists($templateModalsPath)) {
            include $templateModalsPath;
        }
        ?>
    <?php endif; ?>
    
    <script>
        // Animación de zoom + fade para mostrar el contenido
        document.addEventListener('DOMContentLoaded', function() {
            const envelopeOverlay = document.getElementById('envelope-overlay');
            const templateContent = document.getElementById('template-content');
            
            // ============================================
            // SECCIÓN 1: Detección de orientación y conteo regresivo
            // ============================================
            
            function initSection1() {
                const section1 = document.getElementById('section-1');
                const section1Background = section1 ? section1.querySelector('.section-1-background') : null;
                
                if (!section1 || !section1Background) return;
                
                // Función para detectar relación de aspecto de la imagen
                function detectarRelacionAspectoSection1() {
                    const img = new Image();
                    img.onload = function() {
                        const width = this.width;
                        const height = this.height;
                        const aspectRatio = width / height;
                        
                        // Si es aproximadamente vertical (9:16 o similar, aspectRatio < 1)
                        if (aspectRatio < 1) {
                            section1.classList.add('portrait');
                            section1.classList.remove('landscape');
                        } else {
                            // Si es horizontal (16:9 o similar, aspectRatio >= 1)
                            section1.classList.add('landscape');
                            section1.classList.remove('portrait');
                        }
                    };
                    
                    img.onerror = function() {
                        // Si hay error, usar landscape por defecto
                        section1.classList.add('landscape');
                        section1.classList.remove('portrait');
                    };
                    
                    // Obtener URL de la imagen de fondo
                    const bgImage = window.getComputedStyle(section1Background).backgroundImage;
                    const urlMatch = bgImage.match(/url\(['"]?([^'"]+)['"]?\)/);
                    if (urlMatch && urlMatch[1]) {
                        img.src = urlMatch[1];
                    } else {
                        section1.classList.add('landscape');
                        section1.classList.remove('portrait');
                    }
                }
                
                // Detectar relación de aspecto
                detectarRelacionAspectoSection1();
                
                // Conteo regresivo
                <?php if (!empty($evento['fecha_evento']) && !empty($evento['hora_evento'])): ?>
                    function initCountdown() {
                        const targetDate = new Date('<?php echo $evento['fecha_evento']; ?>T<?php echo $evento['hora_evento']; ?>').getTime();
                        const countdownDays = document.getElementById('countdown-days');
                        const countdownHours = document.getElementById('countdown-hours');
                        const countdownMinutes = document.getElementById('countdown-minutes');
                        const countdownSeconds = document.getElementById('countdown-seconds');
                        
                        if (!countdownDays || !countdownHours || !countdownMinutes || !countdownSeconds) return;
                        
                        function updateCountdown() {
                            const now = new Date().getTime();
                            const distance = targetDate - now;
                            
                            if (distance < 0) {
                                // Si la fecha ya pasó, mostrar ceros
                                countdownDays.textContent = '00';
                                countdownHours.textContent = '00';
                                countdownMinutes.textContent = '00';
                                countdownSeconds.textContent = '00';
                                return;
                            }
                            
                            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
                            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                            const seconds = Math.floor((distance % (1000 * 60)) / 1000);
                            
                            countdownDays.textContent = String(days).padStart(2, '0');
                            countdownHours.textContent = String(hours).padStart(2, '0');
                            countdownMinutes.textContent = String(minutes).padStart(2, '0');
                            countdownSeconds.textContent = String(seconds).padStart(2, '0');
                        }
                        
                        // Actualizar inmediatamente
                        updateCountdown();
                        
                        // Actualizar cada segundo
                        setInterval(updateCountdown, 1000);
                    }
                    
                    // Inicializar conteo regresivo
                    initCountdown();
                <?php endif; ?>
            }
            
            // Inicializar sección 1
            initSection1();
            
            // Re-inicializar cuando se abre el sobre
            if (envelopeOverlay) {
                envelopeOverlay.addEventListener('click', function() {
                    setTimeout(function() {
                        if (templateContent && templateContent.classList.contains('show')) {
                            initSection1();
                        }
                    }, 1200);
                });
            }
            
            if (!envelopeOverlay || !templateContent) return;
            
            // Si es preview, mostrar directamente sin sobre
            <?php if ($isPreview): ?>
                envelopeOverlay.style.display = 'none';
                templateContent.style.display = 'block';
            <?php else: ?>
                // Abrir sobre al hacer clic
                envelopeOverlay.addEventListener('click', function() {
                    // Animación de zoom + fade
                    setTimeout(function() {
                        envelopeOverlay.style.transition = 'transform 1.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 1s ease-out';
                        envelopeOverlay.style.transform = 'scale(1.5)';
                        envelopeOverlay.style.opacity = '0';
                        
                        setTimeout(function() {
                            envelopeOverlay.style.display = 'none';
                            // Mostrar contenido de la invitación
                            templateContent.classList.add('show');
                            // Scroll suave al inicio
                            window.scrollTo({ top: 0, behavior: 'smooth' });
                        }, 1200);
                    }, 100);
                });
            <?php endif; ?>
            
            // ============================================
            // SECCIÓN 3: Video Personalizado
            // ============================================
            
            function initSection3() {
                console.log('=== Inicializando Sección 3 ===');
                
                const section3Container = document.getElementById('section-3-container');
                const section3Video = document.getElementById('section-3-video');
                const section3Cover = document.getElementById('section-3-cover');
                const section3PlayButton = document.getElementById('section-3-play-button');
                const section3FocusOverlay = document.getElementById('section-3-focus-overlay');
                const section3CloseButton = document.getElementById('section-3-close-button');
                
                if (!section3Container || !section3Video || !section3Cover || !section3PlayButton || !section3FocusOverlay || !section3CloseButton) {
                    console.error('Elementos de sección 3 no encontrados');
                    return;
                }
                
                // Función para reproducir video con efecto de enfoque
                function playVideo() {
                    try {
                        // Activar overlay de enfoque primero
                        section3FocusOverlay.classList.add('active');
                        
                        // Agregar clase playing al video
                        section3Video.classList.add('playing');
                        
                        // Forzar reflow para aplicar estilos inmediatamente
                        void section3Video.offsetHeight;
                        
                        // Ocultar cover
                        section3Cover.classList.add('hidden');
                        
                        // Quitar muted para que tenga sonido
                        section3Video.muted = false;
                        
                        // Intentar reproducir
                        const playPromise = section3Video.play();
                        
                        if (playPromise !== undefined) {
                            playPromise.then(function() {
                                console.log('✓ Video sección 3 reproduciéndose correctamente');
                            }).catch(function(error) {
                                console.error('✗ Error al reproducir video:', error);
                                // Si falla, intentar con muted primero
                                section3Video.muted = true;
                                section3Video.play().then(function() {
                                    setTimeout(function() {
                                        section3Video.muted = false;
                                    }, 200);
                                }).catch(function(err) {
                                    console.error('✗ Error incluso con muted:', err);
                                    pauseVideo();
                                });
                            });
                        }
                    } catch (error) {
                        console.error('✗ Error en playVideo:', error);
                        pauseVideo();
                    }
                }
                
                // Función para pausar video y salir del modo focus
                function pauseVideo() {
                    section3Video.pause();
                    section3Video.currentTime = 0;
                    
                    // Restaurar muted
                    section3Video.muted = true;
                    
                    // Remover clase playing
                    section3Video.classList.remove('playing');
                    
                    // Desactivar overlay de enfoque
                    section3FocusOverlay.classList.remove('active');
                    
                    // Mostrar cover
                    section3Cover.classList.remove('hidden');
                }
                
                // Event listeners
                section3PlayButton.addEventListener('click', function(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    playVideo();
                });
                
                section3Cover.addEventListener('click', function(e) {
                    if (e.target.closest('.section-3-play-button')) {
                        return;
                    }
                    if (e.target === section3Cover) {
                        e.preventDefault();
                        playVideo();
                    }
                });
                
                // Botón de cerrar
                section3CloseButton.addEventListener('click', function(e) {
                    e.stopPropagation();
                    e.preventDefault();
                    pauseVideo();
                });
                
                // Cerrar modo focus al hacer clic en el overlay
                section3FocusOverlay.addEventListener('click', function(e) {
                    if (e.target === section3CloseButton || e.target.closest('.section-3-close-button')) {
                        return;
                    }
                    if (e.target === section3Video || e.target.closest('video')) {
                        return;
                    }
                    if (e.target === section3FocusOverlay) {
                        pauseVideo();
                    }
                });
                
                // Cerrar modo focus con tecla Escape
                document.addEventListener('keydown', function(e) {
                    if (e.key === 'Escape' && section3Video.classList.contains('playing')) {
                        pauseVideo();
                    }
                });
                
                console.log('✓ Sección 3 inicializada correctamente');
            }
            
            // Inicializar sección 3 después de un delay
            setTimeout(function() {
                initSection3();
            }, 1000);
            
            // También inicializar cuando se abre el sobre
            if (envelopeOverlay) {
                envelopeOverlay.addEventListener('click', function() {
                    setTimeout(function() {
                        if (templateContent && templateContent.classList.contains('show')) {
                            initSection3();
                        }
                    }, 1500);
                });
            }
            
            // ============================================
            // SECCIÓN 8: Confirmación de Asistencia
            // ============================================
            
            function initSection8() {
                // Slider automático
                const slider = document.getElementById('section-8-slider');
                const slides = slider ? slider.querySelectorAll('.section-8-slide') : [];
                let currentSlide = 0;
                
                if (slides.length === 0) return;
                
                function nextSlide() {
                    slides[currentSlide].classList.remove('active');
                    currentSlide = (currentSlide + 1) % slides.length;
                    slides[currentSlide].classList.add('active');
                }
                
                // Cambiar slide cada 4 segundos
                if (slides.length > 1) {
                    setInterval(nextSlide, 4000);
                }
                
                // Modales
                const modalYes = document.getElementById('section-8-modal-yes');
                const modalNo = document.getElementById('section-8-modal-no');
                const buttonYes = document.getElementById('section-8-button-yes');
                const buttonNo = document.getElementById('section-8-button-no');
                const confirmYes = document.getElementById('section-8-confirm-yes');
                const cancelYes = document.getElementById('section-8-cancel-yes');
                const confirmNo = document.getElementById('section-8-confirm-no');
                const cancelNo = document.getElementById('section-8-cancel-no');
                
                // Abrir modal "Si asistiré"
                if (buttonYes && modalYes) {
                    buttonYes.addEventListener('click', function() {
                        modalYes.classList.add('active');
                    });
                }
                
                // Abrir modal "No asistiré"
                if (buttonNo && modalNo) {
                    buttonNo.addEventListener('click', function() {
                        modalNo.classList.add('active');
                    });
                }
                
                // Cerrar modal "Si asistiré"
                if (cancelYes && modalYes) {
                    cancelYes.addEventListener('click', function() {
                        modalYes.classList.remove('active');
                    });
                }
                
                if (confirmYes && modalYes) {
                    confirmYes.addEventListener('click', function() {
                        // Usar función del template-modals.php si existe
                        if (typeof abrirModalAceptar === 'function') {
                            abrirModalAceptar();
                        }
                        modalYes.classList.remove('active');
                    });
                }
                
                // Cerrar modal "No asistiré"
                if (cancelNo && modalNo) {
                    cancelNo.addEventListener('click', function() {
                        modalNo.classList.remove('active');
                    });
                }
                
                if (confirmNo && modalNo) {
                    confirmNo.addEventListener('click', function() {
                        const comment = document.getElementById('section-8-modal-comment');
                        // Usar función del template-modals.php si existe
                        if (typeof abrirModalRechazar === 'function') {
                            abrirModalRechazar();
                        }
                        modalNo.classList.remove('active');
                        if (comment) comment.value = '';
                    });
                }
                
                // Cerrar modales al hacer clic en el overlay
                if (modalYes) {
                    const overlayYes = modalYes.querySelector('.section-8-modal-overlay');
                    if (overlayYes) {
                        overlayYes.addEventListener('click', function() {
                            modalYes.classList.remove('active');
                        });
                    }
                }
                
                if (modalNo) {
                    const overlayNo = modalNo.querySelector('.section-8-modal-overlay');
                    if (overlayNo) {
                        overlayNo.addEventListener('click', function() {
                            modalNo.classList.remove('active');
                        });
                    }
                }
                
                // Cerrar modales con tecla Escape
                document.addEventListener('keydown', function(e) {
                    if (e.key === 'Escape') {
                        if (modalYes && modalYes.classList.contains('active')) {
                            modalYes.classList.remove('active');
                        }
                        if (modalNo && modalNo.classList.contains('active')) {
                            modalNo.classList.remove('active');
                        }
                    }
                });
            }
            
            // Inicializar sección 8
            setTimeout(function() {
                initSection8();
            }, 1000);
            
            // También inicializar cuando se abre el sobre
            if (envelopeOverlay) {
                envelopeOverlay.addEventListener('click', function() {
                    setTimeout(function() {
                        if (templateContent && templateContent.classList.contains('show')) {
                            initSection8();
                        }
                    }, 2000);
                });
            }
            
            // ============================================
            // SECCIÓN 10: Playlist Musical
            // ============================================
            
            function initSection10() {
                const addButton = document.getElementById('section-10-add-button');
                const artistInput = document.getElementById('section-10-song-artist');
                const titleInput = document.getElementById('section-10-song-title');
                const playlistItems = document.getElementById('section-10-playlist-items');
                const playlistEmpty = document.getElementById('section-10-playlist-empty');
                const playlistCount = document.getElementById('section-10-playlist-count');
                
                if (!addButton || !artistInput || !titleInput || !playlistItems) return;
                
                // Cargar canciones existentes desde PHP
                let songs = [];
                <?php if (!empty($tracklist)): ?>
                    songs = <?php echo json_encode(array_map(function($cancion) {
                        return [
                            'id' => $cancion['id'],
                            'artist' => $cancion['autor'] ?? '',
                            'title' => $cancion['nombre_cancion'] ?? ''
                        ];
                    }, $tracklist)); ?>;
                <?php endif; ?>
                
                function updatePlaylistCount() {
                    const count = songs.length;
                    if (playlistCount) {
                        playlistCount.textContent = count + (count === 1 ? ' canción' : ' canciones');
                    }
                }
                
                function addSong(artist, title, songId = null) {
                    if (!artist.trim() || !title.trim()) {
                        alert('Por favor completa ambos campos');
                        return;
                    }
                    
                    const song = {
                        id: songId || Date.now(),
                        artist: artist.trim(),
                        title: title.trim()
                    };
                    
                    // Si no tiene ID, agregar al servidor
                    if (!songId) {
                        // Llamar a API para agregar canción
                        fetch('../api/tracklist.php', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify({
                                token: '<?php echo htmlspecialchars($token); ?>',
                                invitado_id: <?php echo $invitadoId; ?>,
                                autor: song.artist,
                                nombre_cancion: song.title
                            })
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success && data.cancion) {
                                song.id = data.cancion.id;
                            }
                        })
                        .catch(error => {
                            console.error('Error al agregar canción:', error);
                        });
                    }
                    
                    songs.push(song);
                    renderPlaylist();
                    updatePlaylistCount();
                    
                    // Limpiar inputs
                    if (artistInput) artistInput.value = '';
                    if (titleInput) titleInput.value = '';
                    if (artistInput) artistInput.focus();
                }
                
                function removeSong(id) {
                    // Llamar a API para eliminar canción
                    fetch('../api/tracklist.php', {
                        method: 'DELETE',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({
                            token: '<?php echo htmlspecialchars($token); ?>',
                            invitado_id: <?php echo $invitadoId; ?>,
                            cancion_id: id
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            songs = songs.filter(song => song.id !== id);
                            renderPlaylist();
                            updatePlaylistCount();
                        }
                    })
                    .catch(error => {
                        console.error('Error al eliminar canción:', error);
                    });
                }
                
                function renderPlaylist() {
                    if (!playlistItems) return;
                    
                    // Ocultar mensaje vacío si hay canciones
                    if (playlistEmpty) {
                        playlistEmpty.style.display = songs.length === 0 ? 'flex' : 'none';
                    }
                    
                    // Limpiar lista
                    playlistItems.innerHTML = '';
                    
                    // Agregar canciones
                    songs.forEach(function(song, index) {
                        const songItem = document.createElement('div');
                        songItem.className = 'section-10-playlist-item';
                        songItem.innerHTML = `
                            <div class="section-10-playlist-item-number">${index + 1}</div>
                            <div class="section-10-playlist-item-content">
                                <div class="section-10-playlist-item-title">${song.title}</div>
                                <div class="section-10-playlist-item-artist">${song.artist}</div>
                            </div>
                            <button class="section-10-playlist-item-remove" data-id="${song.id}" aria-label="Eliminar canción">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z" fill="currentColor"/>
                                </svg>
                            </button>
                        `;
                        
                        // Agregar evento de eliminar
                        const removeBtn = songItem.querySelector('.section-10-playlist-item-remove');
                        if (removeBtn) {
                            removeBtn.addEventListener('click', function() {
                                removeSong(song.id);
                            });
                        }
                        
                        playlistItems.appendChild(songItem);
                    });
                }
                
                // Event listener para agregar canción
                if (addButton) {
                    addButton.addEventListener('click', function() {
                        const artist = artistInput ? artistInput.value : '';
                        const title = titleInput ? titleInput.value : '';
                        addSong(artist, title);
                    });
                }
                
                // Agregar canción con Enter
                if (titleInput) {
                    titleInput.addEventListener('keypress', function(e) {
                        if (e.key === 'Enter') {
                            const artist = artistInput ? artistInput.value : '';
                            const title = titleInput ? titleInput.value : '';
                            addSong(artist, title);
                        }
                    });
                }
                
                if (artistInput) {
                    artistInput.addEventListener('keypress', function(e) {
                        if (e.key === 'Enter') {
                            if (titleInput) titleInput.focus();
                        }
                    });
                }
                
                // Inicializar contador y renderizar
                updatePlaylistCount();
                renderPlaylist();
            }
            
            // Inicializar sección 10
            setTimeout(function() {
                initSection10();
            }, 1000);
            
            // También inicializar cuando se abre el sobre
            if (envelopeOverlay) {
                envelopeOverlay.addEventListener('click', function() {
                    setTimeout(function() {
                        if (templateContent && templateContent.classList.contains('show')) {
                            initSection10();
                        }
                    }, 2500);
                });
            }
            
            // ============================================
            // SECCIÓN 11: Información Adicional (Tabs)
            // ============================================
            
            function initSection11() {
                const tabButtons = document.querySelectorAll('.section-11-tab-button');
                const tabPanels = document.querySelectorAll('.section-11-tab-panel');
                
                function switchTab(tabName) {
                    // Remover clase active de todos los botones y paneles
                    tabButtons.forEach(function(button) {
                        button.classList.remove('active');
                    });
                    
                    tabPanels.forEach(function(panel) {
                        panel.classList.remove('active');
                    });
                    
                    // Agregar clase active al botón y panel correspondiente
                    const activeButton = document.querySelector(`[data-tab="${tabName}"]`);
                    const activePanel = document.getElementById(`section-11-panel-${tabName}`);
                    
                    if (activeButton) {
                        activeButton.classList.add('active');
                    }
                    
                    if (activePanel) {
                        activePanel.classList.add('active');
                    }
                }
                
                // Agregar event listeners a los botones
                tabButtons.forEach(function(button) {
                    button.addEventListener('click', function() {
                        const tabName = this.getAttribute('data-tab');
                        if (tabName) {
                            switchTab(tabName);
                        }
                    });
                });
            }
            
            // Inicializar sección 11
            setTimeout(function() {
                initSection11();
            }, 1000);
            
            // También inicializar cuando se abre el sobre
            if (envelopeOverlay) {
                envelopeOverlay.addEventListener('click', function() {
                    setTimeout(function() {
                        if (templateContent && templateContent.classList.contains('show')) {
                            initSection11();
                        }
                    }, 3000);
                });
            }
            
        });
    </script>
    
    <!-- Pinterest Widget Script -->
    <?php if (!empty($itemsDressCode)): ?>
        <?php 
        $tienePinterest = false;
        foreach ($itemsDressCode as $item) {
            if ($item['tipo'] === 'link_pinterest') {
                $tienePinterest = true;
                break;
            }
        }
        ?>
        <?php if ($tienePinterest): ?>
            <script async defer src="//assets.pinterest.com/js/pinit.js"></script>
        <?php endif; ?>
    <?php endif; ?>
</body>
</html>
