const search = document.querySelector("[data-article-search]");
const buttons = [...document.querySelectorAll("[data-category]")];
const cards = [...document.querySelectorAll("[data-article-card]")];
let current = "todos";
let lastScrollY = Math.max(0, document.scrollingElement?.scrollTop || window.scrollY || 0);
let scrollTick = false;

function normalizeText(value){
  return String(value || "").normalize("NFD").replace(/[\u0300-\u036f]/g,"").toLowerCase();
}

function applyFilters(){
  const query = normalizeText(search?.value);
  cards.forEach(card => {
    const matchesCategory = current === "todos" || card.dataset.category === current;
    const matchesQuery = !query || normalizeText(card.textContent).includes(query);
    card.hidden = !(matchesCategory && matchesQuery);
  });
}

buttons.forEach(button => button.addEventListener("click", () => {
  current = button.dataset.category;
  buttons.forEach(item => item.classList.toggle("active", item === button));
  applyFilters();
}));

search?.addEventListener("input", applyFilters);

function handleArticlesNavbar(){
  if(scrollTick) return;
  scrollTick = true;
  requestAnimationFrame(() => {
    const y = Math.max(0, document.scrollingElement?.scrollTop || window.scrollY || 0);
    const delta = y - lastScrollY;
    if(y <= 10 || delta < -3) document.body.classList.remove("articles-nav-hidden");
    else if(delta > 3 && y > 76) document.body.classList.add("articles-nav-hidden");
    lastScrollY = y;
    scrollTick = false;
  });
}

window.addEventListener("scroll", handleArticlesNavbar, {passive:true});