AOS.init({
            duration: 1000,          // Duración de la animación en ms
            once: true,              // Si la animación debe ocurrir solo una vez
            mirror: false,           // Si los elementos deben animarse al desplazarse hacia arriba/abajo
        });

        // Función para verificar si la fuente de Phosphor Icons se ha cargado
        function checkPhosphorIconsLoaded() {
            const testElement = document.createElement('i');
            testElement.className = 'ph-bold ph-check'; // Un icono de prueba
            testElement.style.position = 'absolute';
            testElement.style.left = '-9999px';
            testElement.style.fontFamily = '"Phosphor Icons"'; // Asegúrate de que el nombre de la fuente sea correcto
            document.body.appendChild(testElement);

            // Pequeño retraso para permitir que el navegador aplique los estilos
            setTimeout(() => {
                const isLoaded = testElement.offsetWidth > 0 || testElement.offsetHeight > 0;
                if (isLoaded) {
                    console.log('Phosphor Icons: La fuente parece haberse cargado correctamente. Los iconos deberían ser visibles.');
                    // Eliminar el estilo de depuración si los iconos se cargan
                    const debugStyle = document.getElementById('phosphor-debug-style');
                    if (debugStyle) {
                        debugStyle.remove();
                    }
                } else {
                    console.warn('Phosphor Icons: La fuente NO parece haberse cargado. Verifica la conexión o la URL del CDN.');
                }
                document.body.removeChild(testElement);
            }, 100);
        }

        // Llamar a la función de verificación después de que la página haya cargado
        window.addEventListener('load', checkPhosphorIconsLoaded);


        // Manejo del envío del formulario (ejemplo básico en el cliente)
        document.getElementById('contact-form').addEventListener('submit', function(event) {
            event.preventDefault(); // Prevenir el envío por defecto del formulario

            const formMessage = document.getElementById('form-message');
            formMessage.classList.remove('hidden', 'text-red-500', 'text-green-500');
            formMessage.classList.add('text-brand-dark-blue');
            formMessage.textContent = 'Enviando tu cotización...';
            formMessage.classList.remove('hidden');

            // Simular un envío de formulario asíncrono
            setTimeout(() => {
                const name = document.getElementById('name').value;
                const email = document.getElementById('email').value;
                const phone = document.getElementById('phone').value;
                const service = document.getElementById('service').value;
                const message = document.getElementById('message').value;

                console.log('Formulario enviado:');
                console.log('Nombre:', name);
                console.log('Email:', email);
                console.log('Teléfono:', phone);
                console.log('Servicio:', service);
                console.log('Mensaje:', message);

                // Aquí normalmente enviarías los datos a un servidor (ej. fetch API)
                // fetch('/api/send-quote', {
                //      method: 'POST',
                //      headers: {
                //          'Content-Type': 'application/json',
                //      },
                //      body: JSON.stringify({ name, email, phone, service, message }),
                // })
                // .then(response => response.json())
                // .then(data => {
                //      if (data.success) {
                //          formMessage.textContent = '¡Cotización enviada con éxito! Nos pondremos en contacto pronto.';
                //          formMessage.classList.remove('text-brand-dark-blue');
                //          formMessage.classList.add('text-green-500');
                //          document.getElementById('contact-form').reset(); // Limpiar formulario
                //      } else {
                //          formMessage.textContent = 'Hubo un error al enviar tu cotización. Inténtalo de nuevo.';
                //          formMessage.classList.remove('text-brand-dark-blue');
                //          formMessage.classList.add('text-red-500');
                //      }
                // })
                // .catch(error => {
                //      console.error('Error al enviar el formulario:', error);
                //      formMessage.textContent = 'Hubo un error de conexión. Por favor, inténtalo más tarde.';
                //      formMessage.classList.remove('text-brand-dark-blue');
                //      formMessage.classList.add('text-red-500');
                // });

                // Para este ejemplo, solo mostramos un mensaje de éxito simulado
                formMessage.textContent = '¡Cotización enviada con éxito! Nos pondremos en contacto pronto.';
                formMessage.classList.remove('text-brand-dark-blue');
                formMessage.classList.add('text-green-500');
                document.getElementById('contact-form').reset(); // Limpiar formulario
            }, 2000); // Simula 2 segundos de envío
        });

        // Lógica de la Galería Interactiva
        document.addEventListener('DOMContentLoaded', function() {
            const mainGalleryImage = document.getElementById('main-gallery-image');
            const thumbnails = document.querySelectorAll('.gallery-thumbnail-card');

            thumbnails.forEach(thumbnail => {
                thumbnail.addEventListener('click', function() {
                    // Eliminar la clase 'active' de todas las miniaturas
                    thumbnails.forEach(t => t.classList.remove('active'));

                    // Añadir la clase 'active' a la miniatura clickeada
                    this.classList.add('active');

                    // Actualizar la fuente de la imagen principal
                    const newSrc = this.dataset.src; // Usar data-src para obtener la ruta completa de la imagen
                    mainGalleryImage.src = newSrc;
                    // Manejo de errores para la imagen principal si la URL no carga
                    mainGalleryImage.onerror = function() {
                        this.src = 'https://placehold.co/800x600/07162d/FFFFFF?text=Imagen+No+Disponible';
                    };
                });
            });

            // Establecer la primera miniatura como activa por defecto al cargar la página
            if (thumbnails.length > 0) {
                thumbnails[0].classList.add('active');
            }
        });

        // Floating Agenda Button and Modal Logic
        document.addEventListener('DOMContentLoaded', function() {
            // Renamed for clarity: openAgendaModalDesktop is the fixed one on desktop
            const openAgendaModalDesktopBtn = document.getElementById('openAgendaModalDesktop');
            // New button for mobile header
            const openAgendaModalMobileBtn = document.getElementById('openAgendaModalMobile');

            const agendaModal = document.getElementById('agendaModal');
            const agendaModalContent = document.getElementById('agendaModalContent');
            const closeAgendaModalBtn = document.getElementById('closeAgendaModal');
            const agendaForm = document.getElementById('agenda-form');
            const agendaFormMessage = document.getElementById('agenda-form-message');

            // Function to open the modal
            function openModal() {
                console.log('Open Agenda Modal function called.');
                agendaModal.classList.add('active');
                agendaModalContent.classList.add('active');
            }

            // Event listener for desktop floating button
            if (openAgendaModalDesktopBtn) {
                openAgendaModalDesktopBtn.addEventListener('click', openModal);
            }
            // Event listener for mobile header button
            if (openAgendaModalMobileBtn) {
                openAgendaModalMobileBtn.addEventListener('click', openModal);
            }

            // Function to close the modal
            function closeAgendaModal() {
                console.log('Close Agenda Modal function called.');
                agendaModal.classList.remove('active');
                agendaModalContent.classList.remove('active');
            }

            // Close modal when close button is clicked
            closeAgendaModalBtn.addEventListener('click', closeAgendaModal);

            // Close modal when clicking outside the content
            agendaModal.addEventListener('click', function(event) {
                if (event.target === agendaModal) {
                    closeAgendaModal();
                }
            });

            // Handle agenda form submission
            agendaForm.addEventListener('submit', function(event) {
                event.preventDefault();

                agendaFormMessage.classList.remove('hidden', 'text-red-500', 'text-green-500');
                agendaFormMessage.classList.add('text-brand-dark-blue');
                agendaFormMessage.textContent = 'Enviando tu cita...';
                agendaFormMessage.classList.remove('hidden');

                setTimeout(() => {
                    const firstName = document.getElementById('agenda-first-name').value;
                    const lastName = document.getElementById('agenda-last-name').value;
                    const email = document.getElementById('agenda-email').value;
                    const phone = document.getElementById('agenda-phone').value;
                    const date = document.getElementById('agenda-date').value;
                    const time = document.getElementById('agenda-time').value;
                    const service = document.getElementById('agenda-service').value;
                    const message = document.getElementById('agenda-message').value;

                    console.log('Cita agendada:');
                    console.log('Nombre:', firstName);
                    console.log('Apellido:', lastName);
                    console.log('Email:', email);
                    console.log('Teléfono:', phone);
                    console.log('Fecha:', date);
                    console.log('Hora:', time);
                    console.log('Servicio:', service);
                    console.log('Mensaje:', message);

                    agendaFormMessage.textContent = '¡Cita agendada con éxito! Nos pondremos en contacto pronto.';
                    agendaFormMessage.classList.remove('text-brand-dark-blue');
                    agendaFormMessage.classList.add('text-green-500');
                    agendaForm.reset();
                    // Optionally close the modal after successful submission
                    // closeAgendaModal();
                }, 2000);
            });

            // Mobile Menu Logic
            const openMobileMenuBtn = document.getElementById('openMobileMenu');
            const mobileMenu = document.getElementById('mobileMenu');
            const mobileMenuOverlay = document.getElementById('mobileMenuOverlay');
            const mobileMenuLinks = document.querySelectorAll('.mobile-menu-link');

            openMobileMenuBtn.addEventListener('click', function() {
    mobileMenu.classList.add('active');
    mobileMenuOverlay.classList.add('active');
    document.body.classList.add('menu-open'); // Evita scroll solo cuando el menú está abierto
});

mobileMenuOverlay.addEventListener('click', function() {
    mobileMenu.classList.remove('active');
    mobileMenuOverlay.classList.remove('active');
    document.body.classList.remove('menu-open');
});

mobileMenuLinks.forEach(link => {
    link.addEventListener('click', function() {
        mobileMenu.classList.remove('active');
        mobileMenuOverlay.classList.remove('active');
        document.body.classList.remove('menu-open');


                });
            });
        });