com2care_website/static/js/main.js

'use strict';

const SELECTORS = {
  navbar: '#navbar',
  navbarToggle: '#navbarToggle',
  navbarMenu: '#navbarMenu',
  productsNavItem: '#productsNavItem',
  faqItems: '.faq-item',
  faqQuestion: '.faq-question',
  faqAnswer: '.faq-answer',
  fadeInElements: '.fade-in',
};

function initNavbarScroll() {
  const navbar = document.querySelector(SELECTORS.navbar);
  if (!navbar) return;

  const onScroll = () => {
    if (window.scrollY > 20) {
      navbar.classList.add('scrolled');
    } else {
      navbar.classList.remove('scrolled');
    }
  };

  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();
}

function initMobileMenu() {
  const toggle = document.querySelector(SELECTORS.navbarToggle);
  const menu = document.querySelector(SELECTORS.navbarMenu);
  if (!toggle || !menu) return;

  toggle.addEventListener('click', () => {
    const isOpen = menu.classList.toggle('open');
    toggle.classList.toggle('open', isOpen);
    toggle.setAttribute('aria-expanded', String(isOpen));
  });

  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && menu.classList.contains('open')) {
      menu.classList.remove('open');
      toggle.classList.remove('open');
      toggle.setAttribute('aria-expanded', 'false');
      toggle.focus();
    }
  });

  document.addEventListener('click', (e) => {
    if (!menu.contains(e.target) && !toggle.contains(e.target)) {
      menu.classList.remove('open');
      toggle.classList.remove('open');
      toggle.setAttribute('aria-expanded', 'false');
    }
  });
}

function initMegaMenu() {
  const productsItem = document.querySelector(SELECTORS.productsNavItem);
  if (!productsItem) return;

  const trigger = productsItem.querySelector('.nav-link');
  const megamenu = productsItem.querySelector('.megamenu');
  if (!trigger || !megamenu) return;

  productsItem.addEventListener('mouseenter', () => {
    productsItem.classList.add('open');
    trigger.setAttribute('aria-expanded', 'true');
  });

  productsItem.addEventListener('mouseleave', () => {
    productsItem.classList.remove('open');
    trigger.setAttribute('aria-expanded', 'false');
  });

  trigger.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      const isOpen = productsItem.classList.toggle('open');
      trigger.setAttribute('aria-expanded', String(isOpen));
    }
    if (e.key === 'Escape') {
      productsItem.classList.remove('open');
      trigger.setAttribute('aria-expanded', 'false');
    }
  });
}

function initFAQAccordion() {
  const faqItems = document.querySelectorAll(SELECTORS.faqItems);
  faqItems.forEach((item) => {
    const question = item.querySelector(SELECTORS.faqQuestion);
    const answer = item.querySelector(SELECTORS.faqAnswer);
    if (!question || !answer) return;

    question.addEventListener('click', () => {
      const isOpen = item.classList.contains('open');

      faqItems.forEach((other) => {
        if (other !== item) {
          other.classList.remove('open');
          const otherQuestion = other.querySelector(SELECTORS.faqQuestion);
          const otherAnswer = other.querySelector(SELECTORS.faqAnswer);
          if (otherQuestion) otherQuestion.setAttribute('aria-expanded', 'false');
          if (otherAnswer) otherAnswer.hidden = true;
        }
      });

      item.classList.toggle('open', !isOpen);
      question.setAttribute('aria-expanded', String(!isOpen));
      answer.hidden = isOpen;
    });
  });
}

function initIntersectionObserver() {
  const elements = document.querySelectorAll(SELECTORS.fadeInElements);
  if (!elements.length) return;

  if (!('IntersectionObserver' in window)) {
    elements.forEach((el) => el.classList.add('visible'));
    return;
  }

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('visible');
          observer.unobserve(entry.target);
        }
      });
    },
    { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }
  );

  elements.forEach((el, index) => {
    el.style.transitionDelay = `${index * 0.06}s`;
    observer.observe(el);
  });
}

function init() {
  initNavbarScroll();
  initMobileMenu();
  initMegaMenu();
  initFAQAccordion();
  initIntersectionObserver();
}

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', init);
} else {
  init();
}