document.addEventListener('DOMContentLoaded', function() {
  console.log("🦶🦶🦶🦶🦶 FOOTNOTES LOADED 🦶🦶🦶🦶🦶🦶")

  const footnoteRefs = document.querySelectorAll('.footref')

  footnoteRefs.forEach(ref => {
    const footnoteId = ref.href.split('#')[1]
    ref.setAttribute('data-footnote-id', footnoteId)
    ref.href = 'javascript:void(0)';

    ref.addEventListener('mouseenter', function() {
      // Find footnote element
      const footnoteId = this.getAttribute('data-footnote-id')

      const footnoteElement = document.getElementById(footnoteId).parentElement.nextElementSibling.children[0]

      if (footnoteElement) {
        // Create tooltip container
        const tooltip = document.createElement('div');
        tooltip.className = 'footnote-tooltip'
        tooltip.innerHTML = footnoteElement.innerHTML

        // Position tooltip
        const rect = this.getBoundingClientRect();
        tooltip.style.position = 'absolute'
        tooltip.style.top = (rect.bottom + window.scrollY + 5) + 'px'
        tooltip.style.left = rect.left + 'px'

        // Add to page
        document.body.appendChild(tooltip)

        // Store reference for cleanup
        this._tooltip = tooltip
      }
    });

    ref.addEventListener('mouseleave', function() {
      // Remove tooltip
      if (this._tooltip) {
        this._tooltip.remove()
        this._tooltip = null
      }
    });
  });

  // Hide footnotes section
  document.querySelector("#footnotes").style.display='none'
});