---
// Reading Progress Bar Component
---

<div id="reading-progress" class="fixed top-0 left-0 h-1 bg-[var(--primary)] z-[100] transition-all duration-150" style="width: 0%"></div>

<script is:inline>
  (function() {
    function updateProgress() {
      const progressBar = document.getElementById('reading-progress');
      if (!progressBar) return;

      const content = document.querySelector('.article-content');
      if (!content) {
        progressBar.style.width = '0%';
        return;
      }

      const scrollTop = window.scrollY || document.documentElement.scrollTop;
      const contentTop = content.offsetTop;
      const contentHeight = content.offsetHeight;
      const windowHeight = window.innerHeight;

      // Calculate reading progress
      const scrollableDistance = contentHeight - windowHeight + contentTop;
      const currentScroll = scrollTop - contentTop;
      
      let progress = 0;
      if (currentScroll > 0) {
        progress = Math.min(100, Math.max(0, (currentScroll / scrollableDistance) * 100));
      }

      progressBar.style.width = progress + '%';
    }

    // Update on scroll
    window.addEventListener('scroll', updateProgress, { passive: true });
    
    // Update on resize
    window.addEventListener('resize', updateProgress);
    
    // Initial update
    updateProgress();
  })();
</script>
