// Initialize tooltips
document.addEventListener('DOMContentLoaded', () => {
    // Initialize tooltips
    const tooltipTriggers = document.querySelectorAll('[data-tooltip]');
    
    // Initialize platform selector
    const platformSelectors = document.querySelectorAll('.platform-selector');
    platformSelectors.forEach(selector => {
        selector.addEventListener('click', (e) => {
            if (e.target.classList.contains('platform-option')) {
                const platform = e.target.dataset.platform;
                selector.querySelectorAll('.platform-option').forEach(opt => {
                    opt.classList.remove('bg-primary-500', 'text-white');
                    opt.classList.add('bg-secondary-400', 'text-gray-300');
                });
                e.target.classList.add('bg-primary-500', 'text-white');
                e.target.classList.remove('bg-secondary-400', 'text-gray-300');
                
                // Here you would typically load data for the selected platform
                console.log(`Platform changed to: ${platform}`);
            }
        });
    });
tooltipTriggers.forEach(trigger => {
        trigger.addEventListener('mouseenter', () => {
            const tooltip = document.createElement('div');
            tooltip.className = 'absolute bg-secondary-500 text-white px-2 py-1 rounded text-xs whitespace-nowrap z-50';
            tooltip.textContent = trigger.dataset.tooltip;
            
            const rect = trigger.getBoundingClientRect();
            tooltip.style.top = `${rect.top - 30}px`;
            tooltip.style.left = `${rect.left + (rect.width / 2)}px`;
            tooltip.style.transform = 'translateX(-50%)';
            
            document.body.appendChild(tooltip);
            trigger._tooltip = tooltip;
        });
        
        trigger.addEventListener('mouseleave', () => {
            if (trigger._tooltip) {
                trigger._tooltip.remove();
            }
        });
    });
});