const loader = document.querySelector('.loader');
const menuButton = document.querySelector('.menu-button');
const nav = document.querySelector('.nav');
const year = document.getElementById('year');
const filterButtons = document.querySelectorAll('[data-filter]');
const cards = document.querySelectorAll('.work-card');

window.addEventListener('load', () => {
  window.setTimeout(() => loader?.classList.add('hide'), 520);
});

if (year) {
  year.textContent = new Date().getFullYear();
}

if (menuButton && nav) {
  menuButton.addEventListener('click', () => {
    const expanded = menuButton.getAttribute('aria-expanded') === 'true';
    menuButton.setAttribute('aria-expanded', String(!expanded));
    nav.classList.toggle('active');
  });

  nav.querySelectorAll('a').forEach((link) => {
    link.addEventListener('click', () => {
      menuButton.setAttribute('aria-expanded', 'false');
      nav.classList.remove('active');
    });
  });
}

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('in-view');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.14 });

document.querySelectorAll('.reveal').forEach((el) => observer.observe(el));

filterButtons.forEach((button) => {
  button.addEventListener('click', () => {
    const target = button.dataset.filter;
    filterButtons.forEach((btn) => btn.classList.remove('active'));
    button.classList.add('active');

    cards.forEach((card) => {
      const match = target === 'all' || card.dataset.category === target;
      card.classList.toggle('is-hidden', !match);
    });
  });
});