// Mount each scene into its section root, then wire data-deck-active so
// CSS entrance animations re-run on slide change.

(function mountScenes() {
  const scenes = [Scene1, Scene2, Scene3, Scene4, Scene5, SceneKnow, SceneAskAnywhere, Scene6];
  for (let i = 0; i < scenes.length; i++) {
    const el = document.getElementById(`scene-${i + 1}`);
    if (el) ReactDOM.createRoot(el).render(React.createElement(scenes[i]));
  }

  // Tag the active slide with data-deck-active so animations restart on enter.
  const stage = document.querySelector("deck-stage");
  if (!stage) return;

  const sections = Array.from(stage.querySelectorAll(":scope > section"));

  function setActive(idx) {
    for (let i = 0; i < sections.length; i++) {
      const s = sections[i];
      if (i === idx) {
        // Force restart of CSS animations: clear, force reflow, set.
        s.removeAttribute("data-deck-active");
        // eslint-disable-next-line no-unused-expressions
        s.offsetHeight;
        s.setAttribute("data-deck-active", "");
      } else {
        s.removeAttribute("data-deck-active");
      }
    }
  }

  // Initial: slide 0
  setActive(0);

  stage.addEventListener("slidechange", (e) => {
    setActive(e.detail.index);
  });
})();