<script> 
  document.addEventListener("DOMContentLoaded", () => {
    const tabs = document.querySelectorAll('.tabs-nav');
    const contents = document.querySelectorAll('[data-tab-content]');

    const clear = () => {
      tabs.forEach(t => t.classList.remove('is-active'));
      contents.forEach(c => c.classList.remove('is-active'));
    };

    const activate = slug => {
      const btn = [...tabs].find(t => t.getAttribute('data-tab') === slug);
      const content = [...contents].find(c => c.getAttribute('data-tab-content') === slug);
      if (btn && content) {
        clear();
        btn.classList.add('is-active');
        content.classList.add('is-active');
      }
    };

    // Default: activate first tab (no hash update)
    if (tabs.length && contents.length) {
      activate(tabs[0].getAttribute('data-tab'));
    }

    // Tab click handler
    tabs.forEach(btn =>
      btn.addEventListener('click', e => {
        e.preventDefault();
        const slug = btn.getAttribute('data-tab');
        activate(slug);

        // 🔁 OPTIONAL: Update URL hash on tab click
        history.replaceState(null, null, '#' + slug);
      })
    );

    // ───────────────────────────────────────────────
    // ✅ OPTIONAL: Deep linking & auto-scroll
    // Enables opening a tab via #slug in the URL
    // and scrolls to tab section on load or hash change
    //
    // ⚠️ To use auto-scroll, give your tab section:
    // id="tab-section" 
    // ───────────────────────────────────────────────

    const scrollToTabSection = () => {
      const tabSection = document.getElementById("tab-section");
      if (tabSection) tabSection.scrollIntoView({ behavior: "smooth" });
    };

    // Deep link on load
    const hash = location.hash?.slice(1);
    if (hash) {
      activate(hash);
      scrollToTabSection();
    }

    // Hash change (e.g. clicking a # link in-page)
    window.addEventListener('hashchange', () => {
      const newHash = location.hash?.slice(1);
      if (newHash) {
        activate(newHash);
        scrollToTabSection();
      }
    });

    // ───────────────────────────────────────────────
  });
</script>