// Initialize health metrics with animation
document.addEventListener('DOMContentLoaded', () => {
    const healthCards = document.querySelectorAll('.health-card');
    
    healthCards.forEach((card, index) => {
        card.style.opacity = '0';
        card.style.transform = 'translateY(20px)';
        card.style.transition = `all 0.5s ease ${index * 0.1}s`;
        
        setTimeout(() => {
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        }, 100);
    });

    // Simulate connection status
    const connectionStatus = document.getElementById('connection-status');
    setInterval(() => {
        connectionStatus.classList.toggle('bg-green-900');
        connectionStatus.classList.toggle('bg-gray-800');
        const icon = connectionStatus.querySelector('i');
        icon.classList.toggle('text-green-500');
        icon.classList.toggle('text-gray-500');
    }, 3000);

    // Add click event to cards
    healthCards.forEach(card => {
        card.addEventListener('click', () => {
            const metric = card.getAttribute('data-metric');
            console.log(`Navigating to ${metric} detail view`);
            // In a real app, you would navigate to a detail page here
        });
    });
});