document.addEventListener('DOMContentLoaded', function () {
	let SwiperFacts = new Swiper('.facts__slider', {
		slidesPerView: "auto",
		spaceBetween: 20,
		speed: 800,
		mousewheel: {
			forceToAxis: true,
		},


		navigation: {
			prevEl: '.facts__prev',
			nextEl: '.facts__next'
		},
		breakpoints: {
			0: {
				spaceBetween: 10,
			},
			571: {
				spaceBetween: 20,
			}
		},
	});

	let SwiperTeam = new Swiper('.team__slider', {
		slidesPerView: "auto",
		spaceBetween: 20,
		speed: 800,
		mousewheel: {
			forceToAxis: true,
		},


		navigation: {
			prevEl: '.team__prev',
			nextEl: '.team__next'
		},
		breakpoints: {
			0: {
				spaceBetween: 10,
			},
			571: {
				spaceBetween: 20,
			}
		},
	});


	// header
	document.querySelectorAll('.header').forEach(header => {
		let btn = header.querySelector('.header__menu-btn')
		let navLinksArr = header.querySelectorAll('.nav__link')

		btn.addEventListener('click', (e) => {
			document.body.classList.toggle('header-open')
		})

		navLinksArr.forEach(navLink => {
			navLink.addEventListener('click', (e) => {
				console.log(1);

				document.body.classList.remove('header-open')
			})
		})

		let lastScroll = 0;
		document.addEventListener('scroll', (e) => {
			let currentScroll = window.scrollY;
			if (window.scrollY > 0) {
				header.classList.add('header_bg')
				if (currentScroll > lastScroll) {
					header.classList.add('header_hide')
				} else {
					header.classList.remove('header_hide')
				}
			} else {
				header.classList.remove('header_bg')
			}

			lastScroll = currentScroll;
		})
	})




	// security
	document.querySelectorAll('.security').forEach(wrapper => {
		let cardsArr = wrapper.querySelectorAll('.security__card')

		cardsArr.forEach(card => {
			card.addEventListener('click', (e) => {
				card.classList.toggle('security__card_active')
			})
		})
	})


	// projects
	if (window.innerWidth > 570) {
		document.querySelectorAll('.projects').forEach(wrapper => {
			let cardsArr = wrapper.querySelectorAll('.projects__card')

			let topPosition = 'top'

			if (window.innerWidth < 570) {
				topPosition = '40px'
			}

			let tl = gsap.timeline({
				scrollTrigger: {
					trigger: wrapper,
					start: topPosition + " top",
					end: "+=" + (window.innerHeight * cardsArr.length),
					scrub: true,
					markers: false,
					pin: true,
				}
			});

			cardsArr.forEach((card, index) => {
				if (cardsArr[index + 1]) {
					tl.fromTo(card, {
						yPercent: 0,
					}, {
						yPercent: 120,
					}, index)
					tl.fromTo(cardsArr[index + 1], {
						yPercent: 120,
					}, {
						yPercent: 0,
					}, index)
				}
			})
		})
	}


	// work
	document.querySelectorAll('.work').forEach(wrapper => {
		let leftText = wrapper.querySelector('.work__title span')
		let rightText = wrapper.querySelector('.work__title span:nth-child(2)')

		let tl = gsap.timeline({
			scrollTrigger: {
				trigger: wrapper,
				start: "top bottom",
				end: "top 20%",
				scrub: true,
				markers: false,
				pin: false,
			}
		});

		tl.fromTo(leftText, {
			xPercent: -200,
		}, {
			xPercent: 0,
		}, 0)
		tl.fromTo(rightText, {
			xPercent: 200,
		}, {
			xPercent: 0,
		}, 0)
	})


	// anchor
	document.querySelectorAll('.anchor').forEach((anchor => {
		anchor.addEventListener('click', (e) => {
			e.preventDefault()
			let blockPosition = document.querySelector(anchor.hash).getBoundingClientRect()

			window.scrollBy({
				top: blockPosition.top,
				left: 0,
				behavior: 'smooth'
			});
		})
	}))


	// fancybox defaults
	Fancybox.bind('[data-fancybox]', {
		Thumbs: false,
	});


	// copy btn
	document.querySelectorAll('.copy-btn').forEach(btn => {
		let text = btn.getAttribute('href');

		btn.addEventListener('click', (e) => {
			e.preventDefault()
			navigator.clipboard.writeText(text).then(function () {
				// wrapper.classList.add('social_copied')
				// setTimeout(() => {
				// 	wrapper.classList.remove('social_copied')
				// }, 1500)
			}, function (err) {
				console.error('Could not copy text: ', err);
			});
		})
	})
});