const steps = {
    crepi: [
        "<span style='color: #FFA02C;'>Ratissage en 3 Passes d'Enduit</span> : Lissage en trois couches pour obtenir une surface parfaitement uniforme.<br><span style='color: #FFA02C;'>Ponçage des Murs</span> : Élimination des imperfections pour une surface lisse.<br><span style='color: #FFA02C;'>Impression + Préparation à l'Enduit</span> : Traitement des petites fissures et irrégularités avant la peinture.<br><span style='color: #FFA02C;'>Première Couche de Peinture</span> : Application de la première couche de peinture blanc velours pour une<br> couverture initiale uniforme.<br><span style='color: #FFA02C;'>Seconde Couche de Peinture</span> : Application de la seconde couche pour une finition parfaite et durable."
        
    ],
    fissure: [
        "<span style='color: #FFA02C;'>Pose de Microlite / Toile</span> : Application d'un revêtement de renforcement pour stabiliser la surface.<br><span style='color: #FFA02C;'>Ratissage en 3 Passes d'Enduit</span> : Lissage en trois couches pour une surface parfaitement uniforme.<br><span style='color: #FFA02C;'>Ponçage des Murs</span> : Nous éliminons les imperfections pour une surface parfaitement lisse.<br><span style='color: #FFA02C;'>Impression + Préparation à l'Enduit</span> : Traitement des petites fissures et irrégularités avant la peinture.<br><span style='color: #FFA02C;'>Première Couche de Peinture</span> : Application de la première couche de peinture blanc velours pour une<br> couverture initiale uniforme.<br><span style='color: #FFA02C;'>Seconde Couche de Peinture</span> : Application de la seconde couche pour une finition parfaite et durable."

        
    ],
    lisse: [
        "<span style='color: #FFA02C;'>Ponçage des Murs</span> : Élimination des imperfections pour une surface lisse.<br><span style='color: #FFA02C;'>Impression + Préparation à l'Enduit</span> : Traitement des petites fissures et irrégularités avant la peinture.<br><span style='color: #FFA02C;'>Première Couche de Peinture</span> : Application de la première couche de peinture blanc velours pour une<br> couverture initiale uniforme.<br><span style='color: #FFA02C;'>Seconde Couche de Peinture</span> : Application de la seconde couche pour une finition parfaite et durable."

        
    ]
};

let currentStep = 0;
let currentMaterial = '';

function showSteps(material) {
    const allImages = document.querySelectorAll(".image");
    allImages.forEach(image => {
        image.classList.remove("selected");
    });

    const selectedImage = document.getElementById(material);
    selectedImage.classList.add("selected");

    currentMaterial = material;
    currentStep = 0; 
    displayStep();

    document.getElementById("steps-container").style.display = "flex";
}

function displayStep() {
    const stepText = document.getElementById("step-text");
    const stepNumber = document.getElementById("step-number");
    const stepsArray = steps[currentMaterial];

    if (currentStep < 0 || currentStep >= stepsArray.length) return; // Évite d'aller hors des limites

    stepText.innerHTML = stepsArray[currentStep]; // Met à jour le texte de l'étape
    stepNumber.innerHTML = currentStep + 1; // Met à jour le numéro de l'étape
}

function changeStep(direction) {
    currentStep += direction; // Change l'étape actuelle
    const stepsArray = steps[currentMaterial];

    if (currentStep < 0) {
        currentStep = 0; // Reste à la première étape
    } else if (currentStep >= stepsArray.length) {
        currentStep = stepsArray.length - 1; // Reste à la dernière étape
    }

    displayStep(); // Met à jour l'affichage
}