document.addEventListener('DOMContentLoaded', function () {
	const collapsibleButton = document.querySelector(".hamburger-menu");
	const menuContent = document.querySelector(".menu-content");
	collapsibleButton.addEventListener("click", function () {
		menuContent.classList.toggle("active");
		if (menuContent.style.display === "block") {
			menuContent.style.display = "none";
		} else {
			menuContent.style.display = "block";
		}
	});

	initializeCompaniesCarousel();	
	// TODO: useful for news article carousel
	// fetch('../assets/js/carousel-items.json')
	// .then(response => response.json())
	// .then(data => {
	// 	createCarouselItems(data);
	// 	initializeCarousel();
	// })
	// .catch(error => console.error('Error loading JSON:', error));
	}
);

function createCarouselItems(items) {
	const carousel = document.querySelector('#carousel');
	items.forEach(item => {
		const itemDiv = document.createElement('div');
		itemDiv.className = 'carousel-item'

		const link = document.createElement('a');
		link.className = 'carousel-link';
		link.href = item.link;
		link.target = '_blank';
		link.rel = 'noopener noreferrer';
		const linkText = document.createTextNode(item.description);

		link.appendChild(linkText);
		itemDiv.appendChild(link);
		carousel.appendChild(itemDiv);
	});
}

function initializeCarousel() {
	const carousel = document.querySelector('#carousel');
	const items = Array.from(carousel.children);
	const totalItems = items.length;
	const middleIndex = Math.floor(totalItems / 2);
	let currentIndex = -middleIndex;

	function cycleItems() {
		currentIndex = (currentIndex - 1 + totalItems) % totalItems;
		updateCarouselItems();
	}

	function updateCarouselItems() {
		items.forEach((item, index) => {
			let positionIndex = (currentIndex + index + totalItems) % totalItems;
			let offset = positionIndex - middleIndex;
			item.style.transform = `translateY(${offset * 100}%)`;
			item.classList.toggle('active', positionIndex === middleIndex);
			item.style.visibility = 'visible';
		});
	}

	updateCarouselItems();
	setInterval(cycleItems, 7000);
}

function initializeCompaniesCarousel() {
	const slider = document.getElementById('logoSlider');

	slider.innerHTML += slider.innerHTML;

	let offset = 0;
	const speed = 0.5;

	function animate() {
		offset -= speed;
		slider.style.transform = `translateX(${offset}px)`;

		if (Math.abs(offset) >= slider.scrollWidth / 2) {
			offset = 0;
		}
		requestAnimationFrame(animate);
	}

	requestAnimationFrame(animate);
}

document.addEventListener('DOMContentLoaded', function () {
	const footer = document.querySelector('footer');
	const path = window.location.pathname;

	if (!footer) return;

	const borderStyles = {
		'/software.html': '2px solid var(--light-teal)',
		'/blog.html': '2px solid var(--pink)',
	};

	if (path.startsWith('/blog/') && path !== '/blog.html') {
		footer.style.borderTop = '2px solid var(--pink)';
	} else if (borderStyles[path]) {
		footer.style.borderTop = borderStyles[path];
	}


	if (borderStyles[path]) {
		footer.style.borderTop = borderStyles[path];
	}

	// Set hover color
	const hoverColors = {
		'/software.html': 'var(--light-teal)',
		'/blog.html': 'var(--pink)',
	};

	let hoverColor = hoverColors[path];

	if (path.startsWith('/blog/') && path !== '/blog.html') {
		hoverColor = 'var(--pink)';
	}

	if (hoverColor) {
		const style = document.createElement('style');
		style.innerHTML = `
			.footer-links a:hover {
				color: ${hoverColor};
			}
		`;
		document.head.appendChild(style);
	}
});

document.addEventListener('DOMContentLoaded', function () {
	const path = window.location.pathname;
	const workButton = document.querySelector('.work-button');
  
	if (!workButton) return;
  
	let hoverColor;
  
	if (path === '/software.html') {
	  hoverColor = 'var(--light-teal)';
	} else if (path === '/blog.html' || (path.startsWith('/blog/') && path !== '/blog.html')) {
	  hoverColor = 'var(--pink)';
	}
  
	if (hoverColor) {
	  const style = document.createElement('style');
	  style.innerHTML = `
		a.mega-inverted.button.work-button:hover {
		  background-color: ${hoverColor} !important;
		  color: white; !important;
		}
	  `;
	  document.head.appendChild(style);
	}
  });