wow = new WOW({
  boxClass:     'wow',      // default
  animateClass: 'animated', // default
  offset:       0,          // default
  mobile:       true,
  live:         true        // default
})
wow.init();

Marquee3k.init();

tippy('.header__gift>img', {
  content: `
  <div class="tooltip" id="tooltip">
        <p>
          Оставьте заявку на сайте в форме ниже, чтобы получить подарок при оказании услуги в июне. Мы позвоним Вам ближе к открытию и запишем на желаемую процедуру
        </p>
      </div>`,
  allowHTML: true,
  theme: 'light',
});

const mobileVersion = document.querySelector('.mobile');
const desktopVersion = document.querySelector('.desktop');


const faqElem = (version = mobileVersion) => version.querySelector('#faq');
const arrowDownElem = document.getElementById('arrow-down');
const statisticElem = document.getElementById('statistic');
const clientBtn = (version = mobileVersion) =>version.querySelector('#clients__card__btn');
const employeeBtn = (version = mobileVersion) =>version.querySelector('#employees__card__btn');

const clientModal = document.getElementById('client_modal');
const clientModalForm =clientModal.querySelector('form');

const employeeModal = document.getElementById('employee_modal');
const employeeModalForm = employeeModal.querySelector('form');

const tooltip = document.getElementById('tooltip');

const faqClickHandler = (event) => {
  const target = event.target;
  const question = target.closest('.faq__block__item__question');
  if (!question) {
    return;
  }

  const item = question.closest('#faq__block__item');
  const answer = item.querySelector('#faq__block__item__answer');

  const isOpened = item.classList.contains('open');

  if (isOpened) {
    answer.style.height = 0;
  } else {
    answer.style.height = answer.scrollHeight + 'px';
  }

  item.classList.toggle('open');

}
const arrowDownClickHandler = () => {
  statisticElem.scrollIntoView({behavior: 'smooth', block: 'nearest'})
}
const clientModalClickHandler = (event) => {
  const target = event.target;

  if (target.closest('.overlay')) {
    clientModal.classList.remove('open');
    document.body.style.overflow = 'auto'
  }
}
const employeeModalClickHandler = (event) => {
  const target = event.target;

  if (target.closest('.overlay')) {
    employeeModal.classList.remove('open');
    document.body.style.overflow = 'auto'
  }
};
const employeeBtnClickHandler = () => {
  employeeModal.classList.add('open');
  document.body.style.overflow = 'hidden'
}
const clientBtnClickHandler = () => {
  clientModal.classList.add('open');
  document.body.style.overflow = 'hidden'
}
const employeeFormSubmitHandler = (event) => {
  employeeModal.classList.remove('open');
  document.body.style.overflow = 'auto'
}
const clientFormSubmitHandler = (event) => {
  console.log('event', event);
  clientModal.classList.remove('open');
  document.body.style.overflow = 'auto'
}


// mobile events
arrowDownElem.addEventListener('click', arrowDownClickHandler)
faqElem().addEventListener('click', faqClickHandler)
employeeBtn().addEventListener('click', employeeBtnClickHandler)
clientBtn().addEventListener('click', clientBtnClickHandler)

// desktop events
faqElem(desktopVersion).addEventListener('click', faqClickHandler)
employeeBtn(desktopVersion).addEventListener('click', employeeBtnClickHandler)
clientBtn(desktopVersion).addEventListener('click', clientBtnClickHandler)

// common events
clientModal.addEventListener('click', clientModalClickHandler)
employeeModal.addEventListener('click', employeeModalClickHandler)

employeeModalForm.addEventListener('submit', employeeFormSubmitHandler)
clientModalForm.addEventListener('submit', clientFormSubmitHandler)