window.addEventListener("DOMContentLoaded", (event) => {
	// alert("Hello from frontend.js");
	const focusBulletPoints = document.querySelectorAll(
		".homegrade-blocks-focus-point-bullet"
	);
	focusBulletPoints.forEach((focusPoint) => {
		const focusPointsContainer = focusPoint.parentElement;

		focusPoint.addEventListener("mouseover", (event) => {
			const aleradyHoveredFocusPoint = document.querySelector("[data-hovered]");
			console.log(aleradyHoveredFocusPoint);

			const focusTitle = focusPoint.getAttribute("data-focus-bullet-title");

			const focusPointPopupContainer = document.createElement("div");
			focusPointPopupContainer.className = "focus-point-popup-container";

			const focusPointPopupTitle = document.createElement("h4");
			focusPointPopupTitle.textContent = focusTitle;
			focusPointPopupTitle.className = "focus-point-popup-container__title";

			focusPointPopupContainer.appendChild(focusPointPopupTitle);
			focusPoint.appendChild(focusPointPopupContainer);
			focusPoint.setAttribute("data-hovered", "");
		});

		focusPoint.addEventListener("mouseout", function () {
			const focusPointPopupContainer = focusPoint.querySelector(
				".focus-point-popup-container"
			);
			// focusPoint.removeAttribute("data-hovered");
			focusPointPopupContainer.remove();
			// setTimeout(() => {
			// }, 200);
		});
	});
});