// --- LOGIQUE DE L'APPLICATION ---

const grid = document.getElementById('artisansGrid');
const searchInput = document.getElementById('searchInput');
const categoryFilter = document.getElementById('categoryFilter');
const modal = document.getElementById('artisanModal');
const closeModalBtn = document.getElementById('closeModal');

// Fonction pour afficher les artisans
function displayArtisans(filteredArtisans) {
grid.innerHTML = ''; // Vide la grille
filteredArtisans.forEach(artisan => {
const card = document.createElement('div');
card.className = 'bg-white rounded-lg shadow-md overflow-hidden cursor-pointer group';
card.dataset.id = artisan.id;

card.innerHTML = `

${artisan.name}

${artisan.craft}

`;
card.addEventListener('click', () => openModal(artisan));
grid.appendChild(card);
});
}

// Fonction pour filtrer et afficher
function filterAndDisplay() {
const searchTerm = searchInput.value.toLowerCase();
const selectedCategory = categoryFilter.value;

let filtered = artisans.filter(artisan => {
const nameMatch = artisan.name.toLowerCase().includes(searchTerm) || artisan.artisan.toLowerCase().includes(searchTerm);
const craftMatch = artisan.craft.toLowerCase().includes(searchTerm);
const categoryMatch = selectedCategory === 'all' || artisan.craft === selectedCategory;
return (nameMatch || craftMatch) && categoryMatch;
});

displayArtisans(filtered);
}

// Fonction pour ouvrir la modale
function openModal(artisan) {
document.getElementById('modalTitle').textContent = artisan.name;
const modalBody = document.getElementById('modalBody');

// --- Galerie d'images ---
let galleryHtml = `

${artisan.images.map((img, index) => ``).join('')}

`;

// --- Contenu de la modale ---
modalBody.innerHTML = `
${galleryHtml}

`;
modal.classList.remove('hidden');
modal.classList.add('flex');
document.body.style.overflow = 'hidden'; // Empêche le défilement de l'arrière-plan

// Logique de la galerie
const modalImage = document.getElementById('modalImage');
document.querySelectorAll('.gallery-dot').forEach(dot => {
dot.addEventListener('click', (e) => {
const index = e.target.dataset.index;
modalImage.src = artisan.images[index];
document.querySelectorAll('.gallery-dot').forEach(d => d.classList.replace('bg-white', 'bg-white/50'));
e.target.classList.replace('bg-white/50', 'bg-white');
});
});
}

// Fonction pour fermer la modale
function closeModal() {
modal.classList.add('hidden');
modal.classList.remove('flex');
document.body.style.overflow = 'auto';
}

// Initialisation
document.addEventListener('DOMContentLoaded', () => {
// Peupler les catégories de métiers
const categories = [...new Set(artisans.map(a => a.craft))];
categories.sort().forEach(cat => {
const option = document.createElement('option');
option.value = cat;
option.textContent = cat;
categoryFilter.appendChild(option);
});

// Affichage initial
displayArtisans(artisans);

// Ajout des écouteurs d'événements
searchInput.addEventListener('input', filterAndDisplay);
categoryFilter.addEventListener('change', filterAndDisplay);
closeModalBtn.addEventListener('click', closeModal);
modal.addEventListener('click', (e) => {
// Ferme la modale si on clique sur le fond sombre
if (e.target === modal) {
closeModal();
}
});
});