document.addEventListener('DOMContentLoaded', function () {
    const contactForm = document.getElementById('contactForm');
    if (contactForm) {
        contactForm.addEventListener('submit', function (e) {
            e.preventDefault();
            const form = e.target;
            const formData = new FormData(form);
            const alertContainer = document.getElementById('form-alerts');
            
            alertContainer.innerHTML = '';

            fetch('contact.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showAlert('success', 'Message sent successfully! We will get back to you shortly.');
                    form.reset();
                } else {
                    showAlert('danger', 'An error occurred: ' + (data.error || 'Please try again.'));
                }
            })
            .catch(error => {
                showAlert('danger', 'A network error occurred. Please try again.');
                console.error('Error:', error);
            });
        });
    }

    function showAlert(type, message) {
        const alertContainer = document.getElementById('form-alerts');
        const wrapper = document.createElement('div');
        wrapper.innerHTML = [
            `<div class="alert alert-${type} alert-dismissible" role="alert">`,
            `   <div>${message}</div>`,
            '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
            '</div>'
        ].join('');
        alertContainer.append(wrapper);
    }
});