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;');

// === SIDEBAR TOC - ScrollSpy ===

// Table of Contents - ScrollSpy
function updateActiveSection() {
    const tocLinks = document.querySelectorAll('.toc-container a');
    if (!tocLinks.length) return;

    const navbar = document.querySelector('.navbar');
    const navbarHeight = navbar ? navbar.offsetHeight : 0;

    const sectionIds = Array.from(tocLinks).map(link => {
        const href = link.getAttribute('href');
        return href ? href.substring(1) : null;
    }).filter(id => id !== null);

    const sections = sectionIds.map(id => document.getElementById(id)).filter(el => el !== null);
    const scrollPosition = window.scrollY + navbarHeight + 100;

    let activeSection = null;

    for (let i = 0; i < sections.length; i++) {
        const section = sections[i];
        const sectionTop = section.offsetTop;

        if (scrollPosition >= sectionTop) {
            activeSection = section.getAttribute('id');
        } else {
            break;
        }
    }

    tocLinks.forEach(link => {
        link.classList.remove('active');
        const href = link.getAttribute('href');
        if (href === '#' + activeSection) {
            link.classList.add('active');
        }
    });
}

// Smooth scroll for TOC links
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.toc-container a').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);

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

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

    updateActiveSection();
});

window.addEventListener('scroll', updateActiveSection);