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 status = document.getElementById('form-status');

            // Basic client-side validation
            const name = formData.get('name');
            const email = formData.get('email');
            const message = formData.get('message');

            if (!name || !email || !message) {
                status.innerHTML = '<div class="alert alert-danger">Please fill out all fields.</div>';
                return;
            }

            fetch('contact.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    status.innerHTML = `<div class="alert alert-success">${data.message}</div>`;
                    form.reset();
                } else {
                    status.innerHTML = `<div class="alert alert-danger">${data.message}</div>`;
                }
            })
            .catch(error => {
                status.innerHTML = '<div class="alert alert-danger">An error occurred. Please try again.</div>';
                console.error('Error:', error);
            });
        });
    }

    // Fetch and display cyclone data
    const cycloneDataContainer = document.getElementById('cyclone-data');
    if (cycloneDataContainer) {
        fetch('api/cyclone.php')
            .then(response => response.json())
            .then(data => {
                if (data && data.length > 0) {
                    let html = '';
                    data.forEach(alert => {
                        html += `
                            <div class="col-md-6 mb-4">
                                <div class="card h-100">
                                    <div class="card-body d-flex flex-column">
                                        <h5 class="card-title">${alert.headline}</h5>
                                        <p class="card-text">${alert.description.substring(0, 150)}...</p>
                                        <a href="${alert.link}" target="_blank" rel="noopener noreferrer" class="btn btn-primary btn-sm mt-auto">Read More</a>
                                    </div>
                                </div>
                            </div>
                        `;
                    });
                    cycloneDataContainer.innerHTML = html;
                } else {
                    cycloneDataContainer.innerHTML = '<div class="col-12"><p>No active severe weather alerts from the SPC at the moment.</p></div>';
                }
            })
            .catch(error => {
                cycloneDataContainer.innerHTML = '<p>Could not load cyclone data. Please try again later.</p>';
                console.error('Error fetching cyclone data:', error);
            });
    }
});