script.js

document.addEventListener('DOMContentLoaded', function() {
    // Modal functionality
    const callbackBtn = document.getElementById('callbackBtn');
    const callbackModal = document.getElementById('callbackModal');
    const closeModal = document.getElementById('closeModal');
    const callbackForm = document.getElementById('callbackForm');
    
    // Mobile sticky footer bar
    const stickyFooterBar = document.createElement('div');
    stickyFooterBar.className = 'sticky-footer-bar';
    stickyFooterBar.innerHTML = `
        <a href="tel:+1234567890" class="call-btn" data-tracking="sticky_bar_click">
            <i data-feather="phone" class="mr-1"></i> Call Now
        </a>
        <button id="stickyQuoteBtn" class="quote-btn">
            <i data-feather="message-square" class="mr-1"></i> Free Quote
        </button>
    `;
    
    // Add sticky footer bar to body
    document.body.appendChild(stickyFooterBar);
    
    // Initialize Feather icons in sticky bar
    feather.replace();
    
    // Modal open/close
    callbackBtn.addEventListener('click', function() {
        callbackModal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
        trackEvent('cta_click_secondary', { variant: 'A' });
    });
    
    closeModal.addEventListener('click', function() {
        callbackModal.classList.add('hidden');
        document.body.style.overflow = 'auto';
    });
    
    // Close modal when clicking outside
    callbackModal.addEventListener('click', function(e) {
        if (e.target === callbackModal) {
            callbackModal.classList.add('hidden');
            document.body.style.overflow = 'auto';
        }
    });
    
    // Sticky bar quote button
    document.getElementById('stickyQuoteBtn').addEventListener('click', function() {
        callbackModal.classList.remove('hidden');
        document.body.style.overflow = 'hidden';
        trackEvent('sticky_bar_click', { variant: 'A' });
    });
    
    // Form submission
    callbackForm.addEventListener('submit', function(e) {
        e.preventDefault();
        // In a real implementation, you would submit the form data here
        alert('Thank you! We will call you within 5 minutes.');
        callbackModal.classList.add('hidden');
        document.body.style.overflow = 'auto';
        trackEvent('form_submit', { variant: 'A' });
    });
    
    // Track CTA clicks
    document.querySelectorAll('[data-tracking]').forEach(element => {
        element.addEventListener('click', function() {
            const event = this.getAttribute('data-tracking');
            const variant = this.getAttribute('data-variant') || 'A';
            trackEvent(event, { variant });
        });
    });
    
    // Form validation
    const formInputs = callbackForm.querySelectorAll('input');
    formInputs.forEach(input => {
        input.addEventListener('blur', function() {
            validateField(this);
        });
    });
    
    // Initialize Feather icons
    feather.replace();
    
    // Track page view
    trackEvent('page_view', { variant: 'A' });
});

function validateField(field) {
    if (field.hasAttribute('required') && !field.value.trim()) {
        showError(field, 'This field is required');
        return false;
    }
    
    if (field.type === 'tel' && !isValidPhone(field.value)) {
        showError(field, 'Please enter a valid phone number');
        return false;
    }
    
    clearError(field);
    return true;
}

function showError(field, message) {
    clearError(field);
    field.classList.add('input-error');
    const errorElement = document.createElement('div');
    errorElement.className = 'error-message';
    errorElement.textContent = message;
    field.parentNode.appendChild(errorElement);
}

function clearError(field) {
    field.classList.remove('input-error');
    const errorElement = field.parentNode.querySelector('.error-message');
    if (errorElement) {
        errorElement.remove();
    }
}

function isValidPhone(phone) {
    const phoneRegex = /^[0-9]{10}$/;
    return phoneRegex.test(phone);
}

function trackEvent(event, data) {
    // In a real implementation, this would send data to your analytics platform
    console.log('Event tracked:', event, data);
    
    // Example implementation with Google Analytics:
    // if (typeof gtag !== 'undefined') {
    //     gtag('event', event, data);
    // }
}