// dark mode
	document.addEventListener('DOMContentLoaded', () => {
		const html = document.querySelector('html');
		const toggleModeBtns = document.querySelectorAll('.btn-mode');
		const currentMode = localStorage.getItem('mode') || 'light';
	
		function setMode(mode) {
			if (mode === 'dark') {
				html.classList.add('dark');
			} else {
				html.classList.remove('dark');
			}
			localStorage.setItem('mode', mode);
		}
	
		function toggleMode() {
			const newMode = html.classList.contains('dark') ? 'light' : 'dark';
			setMode(newMode);
		}
	
		setMode(currentMode);
		toggleModeBtns.forEach(btn => btn.addEventListener('click', toggleMode));
	});
	
	// repeat
	const parentDivsToRepeat = document.querySelectorAll('[data-repeat]');
	parentDivsToRepeat.forEach((parentDiv) => {
		const repeatCount = parseInt(parentDiv.dataset.repeat);
		for (let i = 1; i < repeatCount; i++) {
			const clonedDiv = parentDiv.cloneNode(true);
			repeatChildren(clonedDiv);
			parentDiv.parentNode.insertBefore(clonedDiv, parentDiv.nextSibling);
		}
	});
	function repeatChildren(parent) {
		const childDivsToRepeat = parent.querySelectorAll('[data-repeat]');
		childDivsToRepeat.forEach((childDiv) => {
			const repeatCount = parseInt(childDiv.dataset.repeat);
			for (let i = 1; i < repeatCount; i++) {
				const clonedDiv = childDiv.cloneNode(true);
				repeatChildren(clonedDiv);
				childDiv.parentNode.insertBefore(clonedDiv, childDiv.nextSibling);
			}
		});
	};

	// toggle box
	function toggleBox(event) {
		event.preventDefault();
		const targetId = this.getAttribute("data-target");
		const target = document.getElementById(targetId);
		const expanded = this.getAttribute("aria-expanded") === "true";
		const buttonsWithSameTarget = document.querySelectorAll(`[data-target="${targetId}"]`);
		buttonsWithSameTarget.forEach((button) => {
			button.setAttribute("aria-expanded", !expanded);
			button.classList.toggle("on");
		});
		target.setAttribute("aria-hidden", expanded);
		target.classList.toggle("show");

		const overlayTargetId = targetId + "-overlay";
		const overlayTarget = document.getElementById(overlayTargetId);
		if (overlayTarget) {
			overlayTarget.classList.toggle("show");
		}

		if (this.classList.contains("btn-viewport")) {
			document.documentElement.classList.toggle("overflow-hidden");
			document.documentElement.classList.toggle("md:overflow-visible");
		}
	}
	const toggleButtons = document.querySelectorAll(".btn-toggle");
	toggleButtons.forEach((button) => {
		button.addEventListener("click", toggleBox);
	});
	function handleEscapeKey(event) {
		if (event.key === "Escape") {
			const btnViewport = document.querySelector(".btn-toggle.btn-viewport.on");
			if (btnViewport) {
				toggleBox.call(btnViewport, event);
			}
		}
	}
	document.addEventListener("keydown", handleEscapeKey);