// CDJ-900NXS Mods — small helpers: theme toggle, before/after slider, docs TOC highlight.
(function () {
  var root = document.documentElement;

  function storedTheme() {
    try { return localStorage.getItem('theme'); } catch (e) { return null; }
  }
  var t = storedTheme();
  if (t === 'light' || t === 'dark') root.setAttribute('data-theme', t);

  document.addEventListener('DOMContentLoaded', function () {
    var btn = document.querySelector('.theme-btn');
    function label() {
      if (btn) btn.textContent = root.getAttribute('data-theme') === 'light' ? '☾' : '☀';
    }
    label();
    if (btn) btn.addEventListener('click', function () {
      var next = root.getAttribute('data-theme') === 'light' ? 'dark' : 'light';
      root.setAttribute('data-theme', next);
      try { localStorage.setItem('theme', next); } catch (e) { /* private mode */ }
      label();
    });

    // before / after
    document.querySelectorAll('.compare').forEach(function (box) {
      var range = box.querySelector('input[type="range"]');
      if (!range) return;
      function set() { box.style.setProperty('--pos', range.value + '%'); }
      range.addEventListener('input', set);
      set();
    });

    // docs: highlight the section in view
    var links = Array.prototype.slice.call(document.querySelectorAll('.toc a[href^="#"]'));
    if (links.length && 'IntersectionObserver' in window) {
      var byId = {};
      links.forEach(function (a) { byId[a.getAttribute('href').slice(1)] = a; });
      var obs = new IntersectionObserver(function (entries) {
        entries.forEach(function (e) {
          if (e.isIntersecting && byId[e.target.id]) {
            links.forEach(function (a) { a.classList.remove('active'); });
            byId[e.target.id].classList.add('active');
          }
        });
      }, { rootMargin: '-80px 0px -70% 0px' });
      Object.keys(byId).forEach(function (id) {
        var el = document.getElementById(id);
        if (el) obs.observe(el);
      });
    }
  });
})();