const steps = {
    parquet: [
        "<span style='color: #FFA02C;'>Préparation de la surface</span> : avant d’installer le parquet stratifié, il est essentiel de préparer soigneusement le sol. Nos équipes veillent à ce que la surface soit propre, sèche et plane pour garantir une installation sans défauts. Cette étape assure une stabilité parfaite du parquet et une finition impeccable.",
        "<span style='color: #FFA02C;'>Pose de la sous-couche</span> : une sous-couche est posée pour isoler le sol et améliorer le confort thermique et acoustique. Elle permet de mieux amortir les bruits de pas et d’apporter un confort supplémentaire sous les pieds, tout en protégeant votre parquet.",
        "<span style='color: #FFA02C;'>Mise en place du parquet</span> : le parquet stratifié est ensuite posé planche par planche, en respectant un alignement rigoureux. Chaque planche s’emboîte facilement grâce au système de clips, garantissant une installation rapide, mais surtout durable.",
        "<span style='color: #FFA02C;'>Découpes et ajustements</span> : pour s'adapter parfaitement à votre espace, des ajustements sont faits aux endroits spécifiques comme autour des portes ou des angles. Ces découpes permettent d’assurer un rendu harmonieux et adapté à chaque pièce.",
        "<span style='color: #FFA02C;'>Pose des plinthes</span> : une fois le parquet installé, nous procédons à la pose des plinthes. Celles-ci viennent non seulement protéger le bas de vos murs, mais également apporter une finition esthétique, en cachant les éventuels espaces entre le sol et le mur.",
        "<span style='color: #FFA02C;'>Nettoyage et finition</span> : après l’installation, un nettoyage minutieux est effectué pour enlever les résidus de découpe ou de poussière, et laisser votre pièce prête à l’usage. Le parquet est vérifié pour s’assurer que chaque détail est parfaitement en place."
    ],
    sisal: [
        "<span style='color: #FFA02C;'>Préparation du sol</span> : avant de poser le revêtement en moquette, il est crucial de bien préparer la surface. Nos équipes s'assurent que le sol soit propre, sec et parfaitement lisse, ce qui permet d'éviter les bosses ou irrégularités qui pourraient altérer le résultat final.",
        "<span style='color: #FFA02C;'>Pose de la sous-couche</span> : une sous-couche est posée pour améliorer le confort et prolonger la durée de vie du revêtement. Elle offre une meilleure isolation thermique et acoustique, tout en garantissant une surface stable pour la moquette.",
        "<span style='color: #FFA02C;'>Découpe et ajustement du revêtement</span> : la moquette est découpé sur mesure pour s’adapter parfaitement à la pièce. Nos artisans prennent en compte les dimensions exactes, ainsi que les contours spécifiques (portes, angles, recoins) pour garantir un ajustement précis.",
        "<span style='color: #FFA02C;'>Encollage ou fixation</span> : selon la méthode de pose choisie (pose collée ou libre), le revêtement est fixé au sol avec une colle spéciale ou installé à l'aide de bandes adhésives. Cette étape garantit que le revêtement reste bien en place et ne bouge pas avec le temps.",
        "<span style='color: #FFA02C;'>Pose des barres de seuil</span> : les barres de seuil sont installées pour séparer le revêtement en moquette des autres types de sols dans les pièces adjacentes, tout en assurant une finition soignée et esthétique.",
        "<span style='color: #FFA02C;'>Finitions et inspection</span> : une fois le revêtement posé, nous effectuons un nettoyage minutieux et vérifions chaque détail pour assurer un résultat impeccable. Le sol est prêt à être utilisé, avec une finition naturelle et durable qui apporte chaleur et caractère à votre intérieur.",
    ],
    carrelage: [
        "<span style='color: #FFA02C;'>Préparation de la surface</span> : avant toute pose, il est essentiel de préparer la surface correctement. Nos experts nettoient et lissent le sol pour garantir une base parfaitement plane. Cette étape, souvent sous-estimée, est cruciale pour assurer la longévité et la stabilité du carrelage.",
        "<span style='color: #FFA02C;'>Préparation du mortier-colle</span> : le mortier-colle, spécialement préparé pour chaque projet, assure une adhérence durable entre le carrelage et la surface. Ce mélange est appliqué avec précision, garantissant un résultat solide et résistant dans le temps.",
        "<span style='color: #FFA02C;'>Traçage des repères</span> : pour que le carrelage soit posé de manière régulière et esthétique, des repères sont tracés avec soin. Cette étape permet d’éviter des erreurs qui pourraient compromettre l’harmonie de votre sol, assurant ainsi un rendu impeccable dès le départ.",
        "<span style='color: #FFA02C;'>Pose du carrelage</span> : chaque carreau est placé avec précision, en respectant l'alignement et les espacements pour un résultat esthétique et professionnel. La qualité de la pose influe directement sur l'apparence et la solidité de votre sol, c'est pourquoi cette étape demande toute notre attention.",
        "<span style='color: #FFA02C;'>Découpes et ajustements</span> : les carreaux doivent parfois être ajustés pour épouser parfaitement les contours de votre pièce, comme autour des murs ou des tuyaux. Ces découpes précises permettent d'obtenir un résultat harmonieux et adapté à votre espace.",
        "<span style='color: #FFA02C;'>Séchage</span> : une fois le carrelage posé, un temps de séchage est nécessaire pour que le mortier-colle adhère correctement. Cela garantit la solidité et la durabilité de votre nouveau sol.",
        "<span style='color: #FFA02C;'>Pose des joints</span> : pour parfaire la pose, nous remplissons les espaces entre les carreaux avec des joints de qualité. En plus de renforcer la structure, les joints apportent une finition soignée et une protection contre l'humidité.",
        "<span style='color: #FFA02C;'>Finitions</span> : après avoir laissé sécher les joints, nous procédons au nettoyage de la surface pour un rendu impeccable. Cette étape finale met en valeur le travail accompli et garantit que vous profitez pleinement de votre nouvel espace."
    ]
};

let currentStep = 0;
let currentMaterial = '';

function showSteps(material) {
    // Retire la classe 'selected' de toutes les images
    const allImages = document.querySelectorAll(".image");
    allImages.forEach(image => {
        image.classList.remove("selected");
    });

    // Ajoute la classe 'selected' à l'image cliquée
    const selectedImage = document.getElementById(material);
    selectedImage.classList.add("selected");

    currentMaterial = material; // Met à jour le matériau actuel
    currentStep = 0; // Réinitialise le numéro d'étape
    displayStep(); // Affiche la première étape

    // Rendre le conteneur des étapes visible
    document.getElementById("steps-container").style.display = "flex"; // Afficher le conteneur des étapes
}

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
}


//! Variables pour stocker la position initiale du touch
let touchStartX = 0;
let touchEndX = 0;
const threshold = 50; // Distance minimale pour valider un swipe

// Ajouter les événements tactiles pour la détection du swipe
const stepsContainer = document.getElementById('steps-container');

// Swipe pour le conteneur des étapes
stepsContainer.addEventListener('touchstart', handleTouchStart, false);
stepsContainer.addEventListener('touchmove', handleTouchMove, false);
stepsContainer.addEventListener('touchend', handleTouchEnd, false);

function handleTouchStart(event) {
    touchStartX = event.touches[0].clientX; // Capture la position initiale du toucher
}

function handleTouchMove(event) {
    touchEndX = event.touches[0].clientX; // Capture la position pendant le déplacement du doigt
}

function handleTouchEnd() {
    const deltaX = touchStartX - touchEndX; // Calcul de la différence de déplacement

    if (Math.abs(deltaX) > threshold) { // Si le mouvement dépasse le seuil
        if (deltaX > 0) {
            // Glissement vers la gauche (étape suivante)
            changeStep(1);
        } else {
            // Glissement vers la droite (étape précédente)
            changeStep(-1);
        }
    }
}