window.addEventListener('scroll', e => {
  document.body.style.cssText = `--scrollTop: ${this.scrollY}px`;
})

const currentLang = document.documentElement.lang
const langButton = document.querySelector('.btn-lang');
langButton.textContent = currentLang;

const navbarLeft = document.querySelector('.navbar-left');
const row3 = document.querySelector('.row-logo')
const item3 = document.querySelector('.item-3')
const footerTitle = document.querySelectorAll('.footer-title')
const footerList = document.querySelectorAll('.footer-list li')
const masthead = document.querySelector('.masthead')
const masthead1 = document.querySelector('.masthead-1')
const billingImg = document.querySelector('.billing-img')

if (currentLang === 'ar') {

footerTitle.forEach((footerTitleItem) => {
  footerTitleItem.style.textAlign = 'right';
});

footerList.forEach((footerTitleItem) => {
  footerTitleItem.style.textAlign = 'right';
});

billingImg.style.backgroundImage = "url('/assets/img/extremum/billing-ar.jpg')";

if (window.innerWidth < 992) {
  navbarLeft.style.order = '1';
  row3.style.order = '1';
  masthead1.style.backgroundImage = "url('/assets/img/extremum/jump/jump-mobile-1.webp')";
  masthead.style.backgroundImage = "url('/assets/img/extremum/jump/jump-mobile-ar.jpg')";
} else {
  navbarLeft.style.order = '3';
  row3.style.order = "2"
  masthead1.style.backgroundImage = "url('/assets/img/extremum/jump/jump-1-1-ar.png')";
  masthead.style.backgroundImage = "url('/assets/img/extremum/jump/jump-1-ar.jpg')";
}

if (window.innerWidth < 1200) {
  // item3.style.justifyContent = 'end';
  item3.style.marginRight = '0.25em';
} else {
  item3.style.justifyContent = 'center';
  item3.style.marginRight = '0'
}

} else {
billingImg.style.backgroundImage = "url('/assets/img/extremum/billing.webp')";
item3.style.justifyContent = 'center';
item3.style.marginRight = '0';

if (window.innerWidth < 1200) {
  item3.style.justifyContent = 'left'
}
if (window.innerWidth < 992) {
  masthead1.style.backgroundImage = "url('/assets/img/extremum/jump/jump-mobile-1.webp')";
  masthead.style.backgroundImage = "url('/assets/img/extremum/jump/jump-mobile.jpg')"; 
} else {
  masthead1.style.backgroundImage = "url('/assets/img/extremum/jump/jump-1-1.webp')";
  masthead.style.backgroundImage = "url('/assets/img/extremum/jump/jump-1.jpg')";
}
}
// const supportedLanguages = ["en", "es", "zh", "ru"];
// const languageLinks = document.querySelectorAll(".dropdown-item");
// const storagedLanguage = localStorage.getItem("lang"); 
// const browserLanguage = navigator.language.split("-")[0]; 
// const urlPath = window.location.pathname;

// let language = storagedLanguage || browserLanguage; 

// if (storagedLanguage && !supportedLanguages.includes(storagedLanguage)) {
//     localStorage.removeItem("lang");
//     storagedLanguage = null;
// }

// if (urlPath === '/') {
//     if (storagedLanguage) {
//         window.location.href = `/${storagedLanguage}`;
//     }
// }

// languageLinks.forEach(link => {
//     link.addEventListener("click", event => {
//         // event.preventDefault(); // for test
//         const selectedLanguage = link.dataset.lang;
//         localStorage.setItem("lang", selectedLanguage);
//     });
// });
 
const form = document.getElementById('contactForm');

form.addEventListener('submit', (e) => {
e.preventDefault();

const formData = new FormData(form); 
const name = formData.get('name');
const email = formData.get('email');
const theme = formData.get('theme');
const message = formData.get('message');

const payload = {
  name,
  email,
  theme,
  message
};

fetch('https://h.albato.com/wh/38/1lfuntp/oT9ajpycFR49z10ti6jIRZgvM-1xMYMTB84-JCnUViU/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(payload)
  })
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });
});

const scrollArrows = document.querySelectorAll('.scroll');
let lastScrollTop = window.pageYOffset || document.documentElement.scrollTop

window.addEventListener('scroll', () => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop

  if (scrollTop > lastScrollTop && scrollTop > 20) {
    scrollArrows.forEach((arrow) => {
      arrow.style.transition = 'opacity 0.3s'
      arrow.style.opacity = '0'
    });
  } 
  if (scrollTop === 0) {
    scrollArrows.forEach((arrow) => {
      arrow.style.transition = 'opacity 0.3s'
      arrow.style.opacity = '1'
    })
  }
  lastScrollTop = scrollTop;
})