const progressElement = document.getElementById("progress");
const progressValueElement = document.getElementById("progress-value");

const calcScrollValue = () => {
  const scrollPosition = document.documentElement.scrollTop;
  const totalHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  
  if (totalHeight > 0) {
    const scrollPercent = Math.round((scrollPosition * 100) / totalHeight);
    
    if (scrollPosition > 100) {
      progressElement.classList.add("active");
    } else {
      progressElement.classList.remove("active");
    }
    
    progressElement.style.background = `conic-gradient(#0d6efd ${scrollPercent}%, #e6e6e6 ${scrollPercent}%)`;
  }
};

progressElement.addEventListener("click", () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
});

window.addEventListener("scroll", calcScrollValue);

window.addEventListener("load", calcScrollValue);