const header = document.querySelector('[data-header]');
const menuToggle = document.querySelector('.menu-toggle');
const navigation = document.querySelector('.primary-nav');
const filters = document.querySelectorAll('[data-filter]');
const products = document.querySelectorAll('[data-category]');
const heroCarousel = document.querySelector('[data-hero-carousel]');
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

const closeMenu = () => {
  menuToggle?.setAttribute('aria-expanded', 'false');
  navigation?.classList.remove('is-open');
  document.body.classList.remove('menu-open');
};

menuToggle?.addEventListener('click', () => {
  const willOpen = menuToggle.getAttribute('aria-expanded') !== 'true';
  menuToggle.setAttribute('aria-expanded', String(willOpen));
  navigation?.classList.toggle('is-open', willOpen);
  document.body.classList.toggle('menu-open', willOpen);
});

navigation?.querySelectorAll('a').forEach((link) => link.addEventListener('click', closeMenu));

window.addEventListener('scroll', () => {
  header?.classList.toggle('is-scrolled', window.scrollY > 18);
}, { passive: true });

if (heroCarousel) {
  const slides = Array.from(heroCarousel.querySelectorAll('[data-hero-slide]'));
  const dots = Array.from(heroCarousel.querySelectorAll('[data-hero-dot]'));
  const previousButton = heroCarousel.querySelector('[data-hero-prev]');
  const nextButton = heroCarousel.querySelector('[data-hero-next]');
  const currentLabel = heroCarousel.querySelector('[data-hero-current]');
  const autoAdvanceDelay = 6500;
  let activeIndex = 0;
  let autoAdvanceTimer;
  let pointerStartX;

  const stopAutoAdvance = () => {
    window.clearInterval(autoAdvanceTimer);
    autoAdvanceTimer = undefined;
  };

  const showSlide = (requestedIndex) => {
    if (!slides.length) return;
    activeIndex = (requestedIndex + slides.length) % slides.length;

    slides.forEach((slide, index) => {
      const isActive = index === activeIndex;
      slide.classList.toggle('is-active', isActive);
      slide.setAttribute('aria-hidden', String(!isActive));
      slide.toggleAttribute('inert', !isActive);
    });

    dots.forEach((dot, index) => {
      const isActive = index === activeIndex;
      dot.classList.toggle('is-active', isActive);
      if (isActive) dot.setAttribute('aria-current', 'true');
      else dot.removeAttribute('aria-current');
    });

    if (currentLabel) currentLabel.textContent = String(activeIndex + 1).padStart(2, '0');
  };

  const startAutoAdvance = () => {
    stopAutoAdvance();
    if (prefersReducedMotion || slides.length < 2 || document.hidden) return;
    autoAdvanceTimer = window.setInterval(() => showSlide(activeIndex + 1), autoAdvanceDelay);
  };

  const selectSlide = (index) => {
    showSlide(index);
    startAutoAdvance();
  };

  previousButton?.addEventListener('click', () => selectSlide(activeIndex - 1));
  nextButton?.addEventListener('click', () => selectSlide(activeIndex + 1));
  dots.forEach((dot, index) => dot.addEventListener('click', () => selectSlide(index)));

  heroCarousel.addEventListener('keydown', (event) => {
    if (event.key === 'ArrowLeft') {
      event.preventDefault();
      selectSlide(activeIndex - 1);
    }
    if (event.key === 'ArrowRight') {
      event.preventDefault();
      selectSlide(activeIndex + 1);
    }
  });

  heroCarousel.addEventListener('pointerdown', (event) => {
    if (event.pointerType === 'touch' || event.pointerType === 'pen') pointerStartX = event.clientX;
  }, { passive: true });

  heroCarousel.addEventListener('pointerup', (event) => {
    if (pointerStartX === undefined) return;
    const distance = event.clientX - pointerStartX;
    pointerStartX = undefined;
    if (Math.abs(distance) < 48) return;
    selectSlide(activeIndex + (distance < 0 ? 1 : -1));
  }, { passive: true });

  heroCarousel.addEventListener('mouseenter', stopAutoAdvance);
  heroCarousel.addEventListener('mouseleave', startAutoAdvance);
  heroCarousel.addEventListener('focusin', stopAutoAdvance);
  heroCarousel.addEventListener('focusout', (event) => {
    if (!heroCarousel.contains(event.relatedTarget)) startAutoAdvance();
  });

  document.addEventListener('visibilitychange', () => {
    if (document.hidden) stopAutoAdvance();
    else startAutoAdvance();
  });

  showSlide(0);
  startAutoAdvance();
}

filters.forEach((filter) => {
  filter.addEventListener('click', () => {
    const value = filter.dataset.filter;
    filters.forEach((item) => item.classList.toggle('is-active', item === filter));
    products.forEach((product) => {
      product.hidden = value !== 'all' && product.dataset.category !== value;
    });
  });
});

if (prefersReducedMotion || !('IntersectionObserver' in window)) {
  document.querySelectorAll('.reveal').forEach((item) => item.classList.add('is-visible'));
} else {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-visible');
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.12, rootMargin: '0px 0px -40px' });

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

document.querySelectorAll('[data-year]').forEach((item) => {
  item.textContent = String(new Date().getFullYear());
});