// Javascript is active
document.documentElement.classList.add('js');

// Add class when scrolling in the page
const header = document.getElementById("site-header");
const intercept = document.createElement("div");

intercept.setAttribute("data-observer-intercept", "");
header.before(intercept);

const observer = new IntersectionObserver(([entry]) => {
  header.classList.toggle("scroll", !entry.isIntersecting);
});

observer.observe(intercept);

// Update navigation according to page scroll
const options = {
    rootMargin: '0px 0px -60% 0px'
};
const sectionObserver = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    const id = entry.target.getAttribute("id");
    if (entry.isIntersecting) {
      document.querySelectorAll('[aria-current="page"]').forEach((z) => {
        z.removeAttribute('aria-current', 'page')
      });
      const target = document.querySelector(`a[href="#${id}"]`);
      if (target) {
        document.querySelector(`a[href="#${id}"]`).setAttribute('aria-current', 'page');
      }
    }
  });
},options);

document.querySelectorAll('section').forEach(function(section, i) {
  sectionObserver.observe(section);
});

// Random accent font & color
const random = (min, max) => {
    return Math.floor(Math.random() * (max-min+1) + min);
}

function randomFont() {
  let randomNumber = random(1, 3);
  document.documentElement.style.setProperty("--accent-font", `var(--accent-font-${randomNumber})`);
}

randomFont();