import Swiper from "swiper";
import { Navigation, Pagination } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import MicroModal from "micromodal";

const button = document.querySelector("button");

if (button) {
	button.addEventListener("click", () => {
		alert("Button clicked!");
	});
}

// Tabs functionality
document.addEventListener("DOMContentLoaded", () => {
	const tabButtons = document.querySelectorAll(".tab-button");
	const tabPanes = document.querySelectorAll(".tab-pane");

	tabButtons.forEach((button) => {
		button.addEventListener("click", () => {
			const targetTab = button.dataset.tab;

			tabButtons.forEach((btn) => btn.classList.remove("active"));
			button.classList.add("active");

			tabPanes.forEach((pane) => {
				if (pane.id === targetTab) {
					pane.classList.add("active");
				} else {
					pane.classList.remove("active");
				}
			});
		});
	});

	// Initialize first tab as active
	if (tabButtons.length > 0) {
		tabButtons[0].click();
	}
});

// Swiper initialization
const _swiper = new Swiper(".swiper", {
	modules: [Navigation, Pagination],
	loop: true,
	pagination: {
		el: ".swiper-pagination",
		clickable: true,
	},
	navigation: {
		nextEl: ".swiper-button-next",
		prevEl: ".swiper-button-prev",
	},
});

// Micromodal initialization
MicroModal.init();
