{{-- Componente Modal Promoción Septiembre --}}
<div id="promoModalOverlay"
    class="fixed inset-0 z-[100] flex items-center justify-center p-3 sm:p-4 bg-black/85 backdrop-blur-sm transition-opacity duration-300 opacity-0 pointer-events-none"
    role="dialog" aria-modal="true" aria-labelledby="promoModalTitle" tabindex="-1">

    <div id="promoModalCard"
        class="relative w-full max-w-lg sm:max-w-xl bg-[#141414] border border-[#f2bb05]/50 rounded-2xl shadow-[0_0_40px_rgba(242,187,5,0.25)] overflow-hidden transform transition-all duration-300 scale-95 flex flex-col">

        {{-- Botón Cerrar (Accesible y con buen área táctil) --}}
        <button id="closePromoModalBtn" type="button" aria-label="Cerrar promoción"
            class="absolute top-3 right-3 z-20 w-10 h-10 rounded-full bg-black/70 hover:bg-[#f2bb05] text-white hover:text-black border border-white/20 hover:border-[#f2bb05] flex items-center justify-center transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-[#f2bb05]">
            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
                stroke-linecap="round" stroke-linejoin="round">
                <line x1="18" y1="6" x2="6" y2="18"></line>
                <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
        </button>

        {{-- Contenedor de la Imagen Promocional --}}
        <div class="relative bg-black flex items-center justify-center overflow-hidden border-b border-white/10">
            <img src="{{ asset('images/promo-septiembre.png') }}"
                alt="Promoción Especial Septiembre: Si estás de cumpleaños en septiembre tienes un 40% de descuento de martes a jueves"
                class="w-full h-auto object-cover max-h-[60vh]">
            <span id="promoModalTitle" class="sr-only">Promoción Especial Cumpleaños en Septiembre</span>
        </div>

        {{-- Acciones y Botones CTA --}}
        <div class="p-4 sm:p-5 bg-gradient-to-b from-[#181818] to-[#0f0f0f] text-center">
            <p class="font-body text-xs text-gray-300 mb-4 tracking-wide">
                ¿Cumples años en septiembre? <span class="text-[#f2bb05] font-semibold">40% OFF</span> para ti y tu
                grupo de martes a jueves.
            </p>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                {{-- Botón WhatsApp --}}
                <a href="https://wa.me/56985855962?text={{ urlencode('¡Hola! Quisiera consultar por la promoción del 40% de descuento por cumpleaños en septiembre.') }}"
                    target="_blank" rel="noopener noreferrer"
                    class="promo-cta-action inline-flex items-center justify-center gap-2.5 px-4 py-3 rounded-xl font-body font-bold text-xs sm:text-sm tracking-wider uppercase bg-[#25D366] hover:bg-[#20bd5a] text-white shadow-lg transition-all duration-200 transform hover:-translate-y-0.5">
                    <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24">
                        <path
                            d="M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766 0-3.18-2.587-5.771-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.299.045-.677.063-1.092-.069-.252-.08-.575-.187-.988-.365-1.739-.751-2.874-2.502-2.961-2.617-.087-.116-.708-.94-.708-1.793s.448-1.273.607-1.446c.159-.173.346-.217.462-.217l.332.007c.106.005.249-.04.39.298.144.347.491 1.2.534 1.287.043.087.072.188.014.304-.058.116-.087.188-.173.289l-.26.304c-.087.086-.177.18-.076.354.101.174.449.741.964 1.201.662.591 1.221.774 1.394.861.174.086.275.072.376-.044.101-.116.433-.506.549-.68.116-.173.231-.145.39-.086s1.011.477 1.184.564.289.13.332.202c.045.072.045.42-.099.825zm-3.423-14.416c-6.627 0-12 5.373-12 12 0 2.159.57 4.188 1.564 5.946l-1.664 6.082 6.221-1.632c1.707.935 3.666 1.468 5.747 1.468 6.627 0 12-5.373 12-12 0-6.627-5.373-12-12-12z" />
                    </svg>
                    <span>Consultar WhatsApp</span>
                </a>

                {{-- Botón Cotizar --}}
                <a href="/cotizar"
                    class="promo-cta-action inline-flex items-center justify-center gap-2 px-4 py-3 rounded-xl font-body font-bold text-xs sm:text-sm tracking-wider uppercase bg-[#f2bb05] hover:bg-[#ffd24d] text-black shadow-lg transition-all duration-200 transform hover:-translate-y-0.5">
                    <span>Cotizar Evento</span>
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"
                        stroke-linecap="round" stroke-linejoin="round">
                        <line x1="5" y1="12" x2="19" y2="12"></line>
                        <polyline points="12 5 19 12 12 19"></polyline>
                    </svg>
                </a>
            </div>

            <p class="font-body text-[11px] text-white-400 mt-3">
                * Válido durante todo septiembre de martes a jueves. No acumulable con otras promociones.
            </p>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const overlay = document.getElementById('promoModalOverlay');
        const card = document.getElementById('promoModalCard');
        const closeBtn = document.getElementById('closePromoModalBtn');
        const ctaActions = document.querySelectorAll('.promo-cta-action');
        const storageKey = 'der_promo_sept_2026_seen';

        function openModal() {
            if (!overlay || !card) return;
            overlay.classList.remove('opacity-0', 'pointer-events-none');
            overlay.classList.add('opacity-100', 'pointer-events-auto');
            card.classList.remove('scale-95');
            card.classList.add('scale-100');
            document.body.style.overflow = 'hidden';
            overlay.focus();
        }

        function closeModal() {
            if (!overlay || !card) return;
            overlay.classList.remove('opacity-100', 'pointer-events-auto');
            overlay.classList.add('opacity-0', 'pointer-events-none');
            card.classList.remove('scale-100');
            card.classList.add('scale-95');
            document.body.style.overflow = '';
            try {
                sessionStorage.setItem(storageKey, '1');
            } catch (e) { }
        }

        // Mostrar el modal tras 1.5s si no fue cerrado en esta sesión
        try {
            if (!sessionStorage.getItem(storageKey)) {
                setTimeout(openModal, 1500);
            }
        } catch (e) {
            setTimeout(openModal, 1500);
        }

        // Eventos para cerrar
        if (closeBtn) closeBtn.addEventListener('click', closeModal);

        // Cerrar al hacer click fuera del contenido (en el overlay)
        if (overlay) {
            overlay.addEventListener('click', (e) => {
                if (e.target === overlay) closeModal();
            });
        }

        // Cerrar con tecla Escape
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && overlay && overlay.classList.contains('opacity-100')) {
                closeModal();
            }
        });

        // Al hacer clic en los CTAs también se marca como visto
        ctaActions.forEach(btn => {
            btn.addEventListener('click', () => {
                try {
                    sessionStorage.setItem(storageKey, '1');
                } catch (e) { }
                document.body.style.overflow = '';
            });
        });
    });
</script>