const sectionName = document.getElementById('section-name');
    const sectionIntro = document.getElementById('section-intro');
    const sectionMenu = document.getElementById('section-menu');
    const sectionFinal = document.getElementById('section-final');

    const userNameInput = document.getElementById('userName');
    const continueBtn = document.getElementById('continueBtn');
    const startBtn = document.getElementById('startBtn');
    const introText = document.getElementById('introText');
    const finalText = document.getElementById('finalText');
    const nameError = document.getElementById('nameError');

    const menuButtons = document.querySelectorAll('.menu-button');
    const backMenuButtons = document.querySelectorAll('.back-menu-btn');
    const accordionContents = document.querySelectorAll('.accordion-content');

    const accessedSteps = new Set();
    const totalSteps = 4;

    continueBtn.addEventListener('click', () => {
      const userName = userNameInput.value.trim();

      if (!userName) {
        nameError.style.display = 'block';
        userNameInput.focus();
        return;
      }

      nameError.style.display = 'none';
      introText.textContent = `Olá, ${userName}!`;
      finalText.textContent = `${userName}!`;
      sectionIntro.classList.remove('hidden');
      sectionIntro.scrollIntoView({ behavior: 'smooth' });
    });

    userNameInput.addEventListener('keydown', (event) => {
      if (event.key === 'Enter') {
        continueBtn.click();
      }
    });

    startBtn.addEventListener('click', () => {
      sectionMenu.classList.remove('hidden');
      sectionMenu.scrollIntoView({ behavior: 'smooth' });
    });

    menuButtons.forEach((button) => {
      button.addEventListener('click', () => {
        const targetId = button.dataset.target;
        const stepKey = button.dataset.key;
        const targetContent = document.getElementById(targetId);

        accordionContents.forEach((content) => {
          if (content !== targetContent) {
            content.classList.remove('open');
          }
        });

        targetContent.classList.toggle('open');
        markStepAsAccessed(button, stepKey);
      });
    });

    backMenuButtons.forEach((button) => {
      button.addEventListener('click', () => {
        accordionContents.forEach((content) => {
          content.classList.remove('open');
        });

        sectionMenu.scrollIntoView({ behavior: 'smooth' });
      });
    });

    function markStepAsAccessed(button, stepKey) {
      accessedSteps.add(stepKey);
      button.classList.add('visited');
      updateProgress();
    }

    function updateProgress() {
      const accessedCount = accessedSteps.size;
      
      if (accessedCount === totalSteps) {
        sectionFinal.classList.remove('hidden');
      }
    }