document.addEventListener('DOMContentLoaded', function() {
    // Initialize feather icons
    if (typeof feather !== 'undefined') {
        feather.replace();
    }
    
    // Smooth page transitions
    document.body.style.opacity = '0';
    setTimeout(() => {
        document.body.style.transition = 'opacity 0.3s ease-in';
        document.body.style.opacity = '1';
    }, 50);

    // Handle all button clicks
    document.addEventListener('click', function(e) {
        if (e.target.closest('button') || e.target.closest('a')) {
            e.preventDefault();
            const href = e.target.closest('a')?.getAttribute('href');
            if (href && href !== '#') {
                window.location.href = href;
            } else {
                alert('This feature is coming soon!');
            }
        }
    });

    // Initialize map on tracking pages
    if (document.getElementById('map') && typeof L !== 'undefined') {
        const map = L.map('map').setView([51.505, -0.09], 13);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
        
        const markers = {};
        const devices = [
            { id: 'dev-001', name: 'Device 1', lat: 51.505, lng: -0.09, battery: 85 },
            { id: 'dev-002', name: 'Device 2', lat: 51.51, lng: -0.1, battery: 72 },
            { id: 'dev-003', name: 'Device 3', lat: 51.515, lng: -0.08, battery: 43 }
        ];

        devices.forEach(device => {
            markers[device.id] = L.marker([device.lat, device.lng])
                .addTo(map)
                .bindPopup(`<b>${device.name}</b><br>Battery: ${device.battery}%`);
        });
    }
});