document.addEventListener('DOMContentLoaded', function () {
    const contactForm = document.getElementById('contact-form');
    const contactAlert = document.getElementById('contact-alert');

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

            const formData = new FormData(contactForm);
            const button = contactForm.querySelector('button[type="submit"]');
            const originalButtonText = button.innerHTML;

            button.disabled = true;
            button.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Sending...';

            fetch('contact.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    contactAlert.innerHTML = `<div class="alert alert-success alert-dismissible fade show" role="alert">
                        <strong>Success!</strong> ${data.message}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>`;
                    contactForm.reset();
                } else {
                    contactAlert.innerHTML = `<div class="alert alert-danger alert-dismissible fade show" role="alert">
                        <strong>Error!</strong> ${data.message}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>`;
                }
            })
            .catch(error => {
                contactAlert.innerHTML = `<div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <strong>Error!</strong> An unexpected error occurred. Please try again later.
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>`;
            })
            .finally(() => {
                button.disabled = false;
                button.innerHTML = originalButtonText;
            });
        });
    }

    // Activate scrollspy
    var scrollSpy = new bootstrap.ScrollSpy(document.body, {
        target: '#navbar'
    });
});