window.Webflow ||= [];
window.Webflow.push(() => {
  //
  /* ****************************************************************************** */
  /* ************************************* MENU *********************************** */
  /* ****************************************************************************** */
  //

  const menu_lottie = document.querySelector('.nav-bar_menu-lottie') as HTMLElement;
  const nav_bar = document.querySelector('.nav-bar') as HTMLDivElement;
  const nav_bar_menu = document.querySelector('.nav-bar_menu') as HTMLDivElement;
  const nav_bar_cta = document.querySelector('.nav-bar_cta-buttons') as HTMLDivElement;
  const nav_links: HTMLElement[] = Array.from(document.querySelectorAll('.nav-bar a:not(.cart_button):not(.heading-style-h4)'));

  menu_lottie.onclick = () => {
    nav_bar.classList.toggle('is-menu-open');
    nav_bar_menu.classList.toggle('hide-tablet');
    nav_bar_cta.classList.toggle('hide-tablet');
  };

  nav_links.forEach(link => {
    link.onclick = () => {
      if (window.matchMedia('(max-width: 991px)').matches && nav_bar.classList.contains('is-menu-open')) {
        menu_lottie.click();
      }
    };
  });

  //
  /* **************************************************************************** */
  /* ************************************ MODALS ******************************** */
  /* **************************************************************************** */
  //

  const modals_buttons: HTMLAnchorElement[] = Array.from(document.querySelectorAll('.button.is-workshop'));

  const modals_backdrop: HTMLElement[] = Array.from(document.querySelectorAll('.home-workshops_modal-wrapper'));

  const modals: HTMLElement[] = Array.from(document.querySelectorAll('.home-workshops_modal'));

  modals_buttons.forEach(button => {
    button.addEventListener('click', () => {
      const parent = button.parentElement;
      const modal_wrapper = parent?.querySelector('.home-workshops_modal-wrapper') as HTMLDivElement;
      const modal = parent?.querySelector('.home-workshops_modal') as HTMLDivElement;

      modal_wrapper.style.display = 'flex';
      modal_wrapper.style.opacity = '1';
      modal.style.opacity = '1';
      document.body.style.overflow = 'hidden';
    });
  });

  modals_backdrop.forEach(backdrop => {
    backdrop.addEventListener('click', () => {
      const modal = backdrop.querySelector('.home-workshops_modal') as HTMLDivElement;

      backdrop.style.opacity = '0';
      modal.style.opacity = '1';
      document.body.style.overflow = 'auto';
      setTimeout(() => {
        backdrop.style.display = 'none';
      }, 300);
    });
    backdrop.addEventListener('mouseover', () => {
      backdrop.style.cursor = 'pointer';
    });
    backdrop.addEventListener('mouseout', () => {
      backdrop.style.cursor = 'auto';
    });
  });

  modals.forEach(modal => {
    modal.addEventListener('click', e => {
      e.stopPropagation();
    });
    modal.addEventListener('mouseover', e => {
      e.stopPropagation();
    });
  });

  //
  /* *************************************************************************** */
  /* ************************************* FAQ ********************************* */
  /* *************************************************************************** */
  //

  const faq_wrappers = Array.from(document.querySelectorAll('.faq_question-wrapper'));

  faq_wrappers.forEach(faq => {
    faq.addEventListener('click', () => {
      if (faq.classList.contains('is-active')) {
        faq.classList.remove('is-active');
        return;
      }

      const active_faq = document.querySelector('.faq_question-wrapper.is-active') as HTMLDivElement;

      if (active_faq) {
        active_faq.click();
        active_faq.classList.remove('is-active');
      }

      faq.classList.add('is-active');
    });
  });
});