let state = "problem"; // problem | steps | done

function showProblem() {
  const problemEl = document.getElementById("problem");
  const stepsEl = document.getElementById("steps");

  problemEl.innerHTML = `\\(${problemData.problem}\\)`;
  stepsEl.innerHTML = "";

  MathJax.typesetPromise();
}

function startSequence() {
  setTimeout(() => {
    showNextStep();
  }, 3000); // thinking time
}

function showNextStep() {
  const stepsEl = document.getElementById("steps");

  if (stepIndex >= problemData.steps.length) {
    // finished → request next problem
    setTimeout(() => {
      requestNextProblem();
    }, 3000);

    return;
  }

  const s = problemData.steps[stepIndex];

  const html = `
    <div class="step">
      <div>\\(${s.before}\\)</div>
      <div>${s.step}</div>
      <div>\\(${s.after}\\)</div>
    </div>
    <hr/>
  `;

  stepsEl.innerHTML += html;

  MathJax.typesetPromise();

  stepIndex++;

  setTimeout(showNextStep, 2000); // time between steps
}