async function loadComponent(id, file) {
	const el = document.getElementById(id);
	if (!el) return;
	const res = await fetch(file);
	const html = await res.text();
	el.innerHTML = html;
}

async function initComponents() {
	console.log("init");
	await Promise.all([
		loadComponent("topbar-placeholder", "components/topbar.html"),
		loadComponent("navbar-placeholder", "components/navbar.html"),
		loadComponent("footer-placeholder", "components/footer.html"),
		loadComponent("toast-placeholder", "components/toast.html"),
	]);

	// ✅ DOM is fully ready now — safe to run these
	setActiveNavLink();
	updateCartCount();

	// ✅ Tell cart.js it can now render
	document.dispatchEvent(new Event("components:ready"));

	const menuToggle = document.getElementById("menu-toggle");
	const mobileMenu = document.getElementById("mobile-menu");

	if (!menuToggle || !mobileMenu) return;

	menuToggle.addEventListener("click", () => {
		mobileMenu.classList.toggle("active");
	});
}

function setActiveNavLink() {
	const page = window.location.pathname.split("/").pop() || "index.html";
	document.querySelectorAll(".nav-links a").forEach((a) => {
		a.parentElement.classList.toggle("active", a.getAttribute("href") === page);
	});
}

function updateCartCount() {
	const cart = JSON.parse(localStorage.getItem("cart")) || [];
	const total = cart.reduce((s, i) => s + i.quantity, 0);
	const el = document.getElementById("nav-cart-count");
	if (el) el.textContent = total;
}

initComponents();