document.addEventListener('DOMContentLoaded', () => {
  const header = document.getElementById('header');
  const menuToggle = document.getElementById('menuToggle');
  const navMenu = document.getElementById('navMenu');
  const dropdown = document.querySelector('.nav-dropdown');
  const dropdownToggle = document.querySelector('.dropdown-toggle');
  const faqItems = document.querySelectorAll('.faq-item');

  /* HEADER SCROLL */
  if (header) {
    window.addEventListener('scroll', () => {
      header.classList.toggle('scrolled', window.scrollY > 10);
    });
  }

  /* CLOSE FUNCTIONS */
  function closeMenu() {
    if (!menuToggle || !navMenu) return;

    const menuIcon = menuToggle.querySelector('i');

    navMenu.classList.remove('active');
    document.body.classList.remove('menu-open');

    if (menuIcon) {
      menuIcon.classList.remove('fa-xmark');
      menuIcon.classList.add('fa-bars');
    }
  }

  function closeDropdown() {
    if (!dropdown) return;
    dropdown.classList.remove('active');
  }

  function closeFaq() {
    faqItems.forEach(item => item.classList.remove('active'));
  }

  /* HAMBURGER */
  if (menuToggle && navMenu) {
    const menuIcon = menuToggle.querySelector('i');

    menuToggle.addEventListener('click', (e) => {
      e.stopPropagation();

      navMenu.classList.toggle('active');
      document.body.classList.toggle('menu-open');

      if (menuIcon) {
        menuIcon.classList.toggle('fa-bars');
        menuIcon.classList.toggle('fa-xmark');
      }
    });

    navMenu.addEventListener('click', (e) => {
      e.stopPropagation();
    });

    document.querySelectorAll('.nav-menu a').forEach(link => {
      link.addEventListener('click', () => {
        closeMenu();
        closeDropdown();
      });
    });
  }

  /* DROPDOWN LAYANAN */
  if (dropdown && dropdownToggle) {
    dropdownToggle.addEventListener('click', (e) => {
      e.stopPropagation();

      dropdown.classList.toggle('active');
    });
  }

  /* FAQ */
  if (faqItems.length) {
    faqItems.forEach(item => {
      const question = item.querySelector('.faq-question');

      if (!question) return;

      question.addEventListener('click', (e) => {
        e.stopPropagation();

        faqItems.forEach(faq => {
          if (faq !== item) {
            faq.classList.remove('active');
          }
        });

        item.classList.toggle('active');
      });
    });
  }

  /* AUTO CLOSE SAAT KLIK AREA LAIN */
  document.addEventListener('click', () => {
    closeMenu();
    closeDropdown();
    closeFaq();
  });
});