document.addEventListener("DOMContentLoaded", function () {
    // Get project name from URL
    const urlParams = new URLSearchParams(window.location.search);
    const projectName = urlParams.get("name");

    // Simulated "database" of projects
    const projects = {
        "mastermind": {
            title: "Projet MasterMind",
            subtitle: "Un projet de création du jeux MasterMind.",
            description: "Le but de ce projet était de réaliser par groupe de 4 personnes sur une durée de 3 mois un jeu de MasterMind en .net Maui.",
            images: ["img/project/scolaire/mastermind_menu.png", "img/project/scolaire/mastermind_game.png", "img/project/scolaire/mastermind_login.png"],
            technologies: ["csharp", "xaml", "json"]
        },
        "dashboards": {
            title: "Projet Dashboards",
            subtitle: "Création de tableaux de bord interactifs.",
            description: "Un projet mettant en avant la visualisation des données avec des graphiques dynamiques.",
            images: ["img/dashboards1.jpg", "img/dashboards2.jpg"],
            technologies: ["react", "nodejs"]
        }
    };

    // Get project data or fallback
    const project = projects[projectName] || {
        title: "Projet Inconnu",
        subtitle: "Désolé, ce projet n'existe pas.",
        description: "Nous n'avons pas trouvé d'informations sur ce projet.",
        images: [],
        technologies: []
    };

    // Update HTML content
    document.getElementById("project-title").innerText = project.title;
    document.getElementById("project-subtitle").innerText = project.subtitle;
    document.getElementById("project-description").innerText = project.description;

    // Update gallery
    const galleryContainer = document.getElementById("project-gallery");
    project.images.forEach(imgSrc => {
        const img = document.createElement("img");
        img.src = imgSrc;
        img.alt = "Image du projet";
        galleryContainer.appendChild(img);
    });

    // Update technologies
    const techContainer = document.getElementById("project-tech-icons");
    project.technologies.forEach(tech => {
        const div = document.createElement("div");
        div.classList.add("tech-box", `${tech}-box`); // Ensure the correct class is added

        const img = document.createElement("img");
        img.src = `icons/${tech}.png`;
        img.alt = tech.toUpperCase();

        const text = document.createElement("span");
        text.innerText = tech.toUpperCase();

        div.appendChild(img);
        div.appendChild(text);
        techContainer.appendChild(div);
    });
    // Fade-in effect when page loads
    document.body.classList.remove("fade-out");
});