(function () {
  'use strict';

  const TAB_SECTION_MAP = {
    library:      's-voices',
    source:       's-clone',
    save:         's-clone',
    design:       's-design',
    custom:       's-design',
    getvoices:    's-studio',
    generation:   's-tryout',
    'stt-tts':    's-tryout',
    routing:      's-routing',
    integrations: 's-connect',
    howto:        's-connect',
    settings:     's-settings'
  };

  function updateNavActive(sectionId) {
    document.querySelectorAll('[data-nav-section]').forEach(function (item) {
      item.classList.toggle('active', item.dataset.navSection === sectionId);
    });
  }

  window.navTo = function (sectionId) {
    var el = document.getElementById(sectionId);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    updateNavActive(sectionId);
    // Fire lazy-loader side-effects
    var tabName = Object.keys(TAB_SECTION_MAP).find(function (k) {
      return TAB_SECTION_MAP[k] === sectionId;
    });
    if (tabName) window.switchTab(tabName);
  };

  // Override switchTab — redirect tab switches to scroll-based navigation
  window.switchTab = function (name) {
    if (name === 'library' && typeof loadVoiceLibrary === 'function') loadVoiceLibrary();
    if ((name === 'integrations' || name === 'howto') && typeof renderIntegrationSnippets === 'function') {
      if (typeof loadVoiceLibrary === 'function' && !(window._voices && window._voices.length)) loadVoiceLibrary();
      renderIntegrationSnippets();
    }
    if (name === 'routing' && typeof loadRoutingTab === 'function') loadRoutingTab();
    if (name === 'getvoices' && typeof loadGetVoices === 'function') loadGetVoices();

    var sectionId = TAB_SECTION_MAP[name];
    if (sectionId) {
      var el = document.getElementById(sectionId);
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
      updateNavActive(sectionId);
    }
    return true;
  };

  // IntersectionObserver: highlight sidebar item for the section in view
  var sections = ['s-voices', 's-clone', 's-design', 's-studio', 's-tryout', 's-routing', 's-connect', 's-settings'];
  var io = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) updateNavActive(entry.target.id);
    });
  }, { threshold: 0.15 });

  sections.forEach(function (id) {
    var el = document.getElementById(id);
    if (el) io.observe(el);
  });
})();