roi-theme/wp-content/themes/apus-theme/assets/js/main.js

/**
 * APU MÉXICO - MAIN JAVASCRIPT
 */

// Navbar scroll effect
window.addEventListener('scroll', function() {
    const navbar = document.querySelector('.navbar');
    if (navbar) {
        if (window.scrollY > 50) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
    }
});

/**
 * TOC (Table of Contents) - Handled by toc.js
 * No duplicate code needed here - toc.js provides:
 * - ScrollSpy with IntersectionObserver
 * - Smooth scroll with prefers-reduced-motion support
 * - Toggle functionality
 * - localStorage state
 */

// A/B Testing for CTA sections
document.addEventListener('DOMContentLoaded', function() {
    const ctaVariant = Math.random() < 0.5 ? 'A' : 'B';

    if (ctaVariant === 'A') {
        const variantA = document.querySelector('.cta-variant-a');
        if (variantA) variantA.style.display = 'block';
    } else {
        const variantB = document.querySelector('.cta-variant-b');
        if (variantB) variantB.style.display = 'block';
    }

    document.querySelectorAll('.cta-button').forEach(button => {
        button.addEventListener('click', function() {
            const variant = this.getAttribute('data-cta-variant');
            console.log('CTA clicked - Variant: ' + variant);

            if (typeof gtag !== 'undefined') {
                gtag('event', 'cta_click', {
                    'event_category': 'CTA',
                    'event_label': 'Variant_' + variant,
                    'value': variant
                });
            }
        });
    });
});

// Contact Modal - Dynamic Loading
function loadContactModal() {
    const modalContainer = document.getElementById('modalContainer');
    if (!modalContainer) return;

    // Use theme URL from localized script
    const modalUrl = (typeof apusTheme !== 'undefined' && apusTheme.themeUrl)
        ? apusTheme.themeUrl + '/modal-contact.html'
        : '/wp-content/themes/apus-theme/modal-contact.html';

    fetch(modalUrl)
        .then(response => response.text())
        .then(html => {
            modalContainer.innerHTML = html;
            initContactForm();
        })
        .catch(error => {
            console.error('Error loading modal:', error);
        });
}

document.addEventListener('DOMContentLoaded', loadContactModal);

// Contact Form - Webhook Submission
function initContactForm() {
    const form = document.getElementById('contactForm');
    if (!form) return;

    form.addEventListener('submit', function(e) {
        e.preventDefault();

        const WEBHOOK_URL = 'https://tu-webhook.com/contacto';

        const formData = {
            fullName: document.getElementById('fullName').value,
            company: document.getElementById('company').value,
            whatsapp: document.getElementById('whatsapp').value,
            email: document.getElementById('email').value,
            comments: document.getElementById('comments').value,
            timestamp: new Date().toISOString(),
            source: 'APU Website - Modal'
        };

        if (!formData.fullName || !formData.whatsapp || !formData.email) {
            showFormMessage('Por favor completa todos los campos requeridos', 'danger');
            return;
        }

        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(formData.email)) {
            showFormMessage('Por favor ingresa un correo electrónico válido', 'danger');
            return;
        }

        const submitButton = form.querySelector('button[type="submit"]');
        const originalText = submitButton.innerHTML;
        submitButton.disabled = true;
        submitButton.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Enviando...';

        fetch(WEBHOOK_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(formData)
        })
        .then(response => {
            if (!response.ok) throw new Error('Error en el envío');
            return response.json();
        })
        .then(data => {
            showFormMessage('¡Mensaje enviado exitosamente!', 'success');
            form.reset();

            if (typeof gtag !== 'undefined') {
                gtag('event', 'form_submission', {
                    'event_category': 'Contact Form',
                    'event_label': 'Form Submitted'
                });
            }

            setTimeout(() => {
                const modal = bootstrap.Modal.getInstance(document.getElementById('contactModal'));
                if (modal) modal.hide();
            }, 2000);
        })
        .catch(error => {
            showFormMessage('Error al enviar el mensaje', 'danger');
        })
        .finally(() => {
            submitButton.disabled = false;
            submitButton.innerHTML = originalText;
        });
    });
}

function showFormMessage(message, type) {
    const messageDiv = document.getElementById('formMessage');
    if (!messageDiv) return;

    messageDiv.textContent = message;
    messageDiv.className = `mt-3 alert alert-${type}`;
    messageDiv.style.display = 'block';

    setTimeout(() => {
        messageDiv.style.display = 'none';
    }, 5000);
}

// Footer Contact Form
document.addEventListener('DOMContentLoaded', function() {
    const footerForm = document.getElementById('footerContactForm');
    if (!footerForm) return;

    footerForm.addEventListener('submit', function(e) {
        e.preventDefault();

        const WEBHOOK_URL = 'https://tu-webhook.com/contacto';

        const formData = {
            fullName: document.getElementById('footerFullName').value,
            company: document.getElementById('footerCompany').value,
            whatsapp: document.getElementById('footerWhatsapp').value,
            email: document.getElementById('footerEmail').value,
            comments: document.getElementById('footerComments').value,
            timestamp: new Date().toISOString(),
            source: 'APU Website - Footer'
        };

        if (!formData.fullName || !formData.whatsapp || !formData.email) {
            showFooterFormMessage('Por favor completa todos los campos requeridos', 'danger');
            return;
        }

        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(formData.email)) {
            showFooterFormMessage('Por favor ingresa un correo válido', 'danger');
            return;
        }

        const submitButton = footerForm.querySelector('button[type="submit"]');
        const originalText = submitButton.innerHTML;
        submitButton.disabled = true;
        submitButton.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Enviando...';

        fetch(WEBHOOK_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(formData)
        })
        .then(response => {
            if (!response.ok) throw new Error('Error en el envío');
            return response.json();
        })
        .then(data => {
            showFooterFormMessage('¡Mensaje enviado exitosamente!', 'success');
            footerForm.reset();

            if (typeof gtag !== 'undefined') {
                gtag('event', 'form_submission', {
                    'event_category': 'Footer Form',
                    'event_label': 'Form Submitted'
                });
            }
        })
        .catch(error => {
            showFooterFormMessage('Error al enviar el mensaje', 'danger');
        })
        .finally(() => {
            submitButton.disabled = false;
            submitButton.innerHTML = originalText;
        });
    });
});

function showFooterFormMessage(message, type) {
    const messageDiv = document.getElementById('footerFormMessage');
    if (!messageDiv) return;

    messageDiv.textContent = message;
    messageDiv.className = `col-12 mt-2 alert alert-${type}`;
    messageDiv.style.display = 'block';

    setTimeout(() => {
        messageDiv.style.display = 'none';
    }, 5000);
}

// Smooth scroll for all anchor links
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            const href = this.getAttribute('href');

            if (href === '#' || this.getAttribute('data-bs-toggle') === 'modal') {
                return;
            }

            const targetElement = document.querySelector(href);
            if (!targetElement) return;

            e.preventDefault();

            const navbar = document.querySelector('.navbar');
            const navbarHeight = navbar ? navbar.offsetHeight : 0;
            const offsetTop = targetElement.offsetTop - navbarHeight - 20;

            window.scrollTo({
                top: offsetTop,
                behavior: 'smooth'
            });
        });
    });
});

console.log('%c APU México ', 'background: #1e3a5f; color: #FF8600; font-size: 16px; font-weight: bold; padding: 10px;');