// Shared JavaScript across all pages
console.log('EduVaud Explorer loaded');
async function fetchTrainings() {
    try {
        const response = await fetch('https://raw.githubusercontent.com/yourusername/eduvaud-data/main/trainings.json');
        if (!response.ok) throw new Error('Network response was not ok');
        return await response.json();
    } catch (error) {
        console.error('Error fetching trainings:', error);
        return []; // Return empty array if fetch fails
    }
}

function renderTrainings(trainings) {
    const container = document.getElementById('trainings-container');
    container.innerHTML = '';
    
    trainings.forEach(training => {
        const card = document.createElement('div');
        card.className = 'training-card bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden transition-all duration-300 hover:shadow-xl';
        
        const tags = training.certification 
            ? `<span class="tag bg-gradient-to-r from-green-400 to-green-600 text-white mr-2">
                <i data-feather="award" class="w-3 h-3 mr-1"></i>Certifié
               </span>` 
            : '';
        
        const typeColors = {
            'formation continue': 'from-blue-400 to-blue-600',
            'CAS': 'from-purple-400 to-purple-600',
            'DAS': 'from-indigo-400 to-indigo-600',
            'modules': 'from-teal-400 to-teal-600'
        };
        
        const typeTag = `
            <span class="tag bg-gradient-to-r ${typeColors[training.type] || 'from-gray-400 to-gray-600'} text-white">
                ${training.type}
            </span>`;
        
        card.innerHTML = `
            <div class="p-6">
                <div class="flex justify-between items-start mb-4">
                    <div>
                        <h3 class="text-xl font-bold mb-2 text-gray-800 group-hover:text-blue-600 transition">${training.title}</h3>
                        <p class="text-gray-500 mb-3 flex items-center">
                            <i data-feather="home" class="w-4 h-4 mr-1"></i>
                            ${training.provider}
                        </p>
                    </div>
                    <div class="flex gap-2">
                        ${tags}
                        ${typeTag}
                    </div>
                </div>
                
                <p class="text-gray-700 mb-4 line-clamp-2">${training.description}</p>
                
                <div class="flex flex-wrap gap-2 mb-4">
                    ${training.skills_focus.map(skill => 
                        `<span class="tag bg-indigo-100 text-indigo-800 border border-indigo-200">
                            <i data-feather="check-circle" class="w-3 h-3 mr-1"></i>${skill}
                        </span>`
                    ).join('')}
                </div>
                
                <div class="flex flex-wrap gap-4 mb-4 text-sm">
                    <span class="flex items-center text-gray-600 bg-gray-50 px-3 py-1 rounded-full">
                        <i data-feather="users" class="w-4 h-4 mr-1 text-gray-500"></i> 
                        ${training.target_audience.join(', ')}
                    </span>
                    <span class="flex items-center text-gray-600 bg-gray-50 px-3 py-1 rounded-full">
                        <i data-feather="map-pin" class="w-4 h-4 mr-1 text-gray-500"></i> 
                        ${training.location}
                    </span>
                    <span class="flex items-center text-gray-600 bg-gray-50 px-3 py-1 rounded-full">
                        <i data-feather="clock" class="w-4 h-4 mr-1 text-gray-500"></i> 
                        ${training.duration || 'Variable'}
                    </span>
                </div>
                
                <div class="flex justify-between items-center">
                    <span class="text-gray-500 text-sm">
                        ${training.start_date ? `Début: ${new Date(training.start_date).toLocaleDateString()}` : 'Dates flexibles'}
                    </span>
                    <a href="formation.html?id=${training.id}" class="btn-primary">
                        En savoir plus <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
                    </a>
                </div>
            </div>
        `;
container.appendChild(card);
    });
    
    feather.replace();
}

// Filter functionality
document.querySelectorAll('.filter-select').forEach(select => {
    select.addEventListener('change', function() {
        // Implement filter logic here
        console.log('Filter changed:', this.value);
    });
});