document.addEventListener('DOMContentLoaded', function () {

    // --- Initialize Map ---
    const map = L.map('map').setView([20, 0], 2);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    const cities = [
        { name: 'Sydney', coords: [-33.8688, 151.2093] },
        { name: 'Ashgabat', coords: [37.9601, 58.3261] },
        { name: 'Tbilisi', coords: [41.7151, 44.8271] },
        { name: 'Vilnius', coords: [54.6872, 25.2797] },
        { name: 'Helsinki', coords: [60.1699, 24.9384] },
        { name: 'Warsaw', coords: [52.2297, 21.0122] },
        { name: 'Dublin', coords: [53.3498, -6.2603] },
        { name: 'New York', coords: [40.7128, -74.0060] },
        { name: 'Dallas', coords: [32.7767, -96.7970] },
        { name: 'San Francisco', coords: [37.7749, -122.4194] }
    ];

    const icon = L.divIcon({
        className: 'custom-div-icon',
        html: "<div style='background-color:#BB86FC;' class='marker-pin'></div><i class='material-icons'></i>",
        iconSize: [30, 42],
        iconAnchor: [15, 42]
    });

    cities.forEach(city => {
        L.marker(city.coords, { 
            icon: L.divIcon({
                html: `<div style="background-color: #BB86FC; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff;"></div>`,
                className: 'custom-marker',
                iconSize: [16, 16],
                iconAnchor: [8, 8]
            })
        }).addTo(map)
            .bindPopup(`<b>${city.name}</b>`);
    });

    // --- Contact Form Handling ---
    const contactForm = document.getElementById('contactForm');
    contactForm.addEventListener('submit', function (e) {
        e.preventDefault();

        const name = document.getElementById('name').value.trim();
        const email = document.getElementById('email').value.trim();
        const message = document.getElementById('message').value.trim();

        if (!name || !email || !message) {
            showToast('Please fill out all fields.', 'danger');
            return;
        }

        const formData = new FormData(this);

        fetch('contact_handler.php', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showToast(data.message, 'success');
                contactForm.reset();
            } else {
                showToast(data.message, 'danger');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('An unexpected error occurred. Please try again.', 'danger');
        });
    });

    // --- Toast Notification Function ---
    function showToast(message, type = 'success') {
        const toastContainer = document.getElementById('toast-container');
        
        const toastId = 'toast-' + Math.random().toString(36).substr(2, 9);

        const toastHTML = `
            <div id="${toastId}" class="toast align-items-center text-white bg-${type} border-0" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="d-flex">
                    <div class="toast-body">
                        ${message}
                    </div>
                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
            </div>
        `;

        toastContainer.insertAdjacentHTML('beforeend', toastHTML);
        
        const toastElement = document.getElementById(toastId);
        const toast = new bootstrap.Toast(toastElement, { delay: 5000 });
        toast.show();

        toastElement.addEventListener('hidden.bs.toast', function () {
            toastElement.remove();
        });
    }
});