document.addEventListener("DOMContentLoaded", function () {
    const billingButtons = document.querySelectorAll(
        ".homepage-billing-button"
    );

    const priceValues = document.querySelectorAll(
        ".homepage-price-value"
    );

    const pricePeriods = document.querySelectorAll(
        ".homepage-price-period"
    );

    billingButtons.forEach(function (button) {
        button.addEventListener("click", function () {
            const billing = button.dataset.billing;

            billingButtons.forEach(function (item) {
                item.classList.remove("active");
            });

            button.classList.add("active");

            priceValues.forEach(function (price) {
                price.textContent =
                    billing === "yearly"
                        ? price.dataset.yearly
                        : price.dataset.monthly;
            });

            pricePeriods.forEach(function (period) {
                period.textContent =
                    billing === "yearly"
                        ? "/ year"
                        : "/ month";
            });
        });
    });
});


document.addEventListener("DOMContentLoaded", function () {
    const buttons = document.querySelectorAll(
        ".spa-billing-button"
    );

    const values = document.querySelectorAll(
        ".spa-price-value"
    );

    const periods = document.querySelectorAll(
        ".spa-price-period"
    );

    buttons.forEach(function (button) {
        button.addEventListener("click", function () {
            const billing = button.dataset.spaBilling;

            buttons.forEach(function (item) {
                item.classList.remove("active");
            });

            button.classList.add("active");

            values.forEach(function (value) {
                value.textContent =
                    billing === "yearly"
                        ? value.dataset.yearly
                        : value.dataset.monthly;
            });

            periods.forEach(function (period) {
                period.textContent =
                    billing === "yearly"
                        ? "/ year"
                        : "/ month";
            });
        });
    });
});


document.addEventListener("DOMContentLoaded", function () {
    const showcaseItems = document.querySelectorAll(".spa-item");
    const previewImage = document.getElementById("spaPreview");
    const previewTitle = document.getElementById("previewTitle");
    const previewText = document.getElementById("previewText");

    if (
        !showcaseItems.length ||
        !previewImage ||
        !previewTitle ||
        !previewText
    ) {
        return;
    }

    const imageBasePath = "/experience/assets/images/spa/";

    showcaseItems.forEach(function (item) {
        item.addEventListener("click", function () {
            const imageName = item.dataset.image;
            const title = item.dataset.title;
            const text = item.dataset.text;

            if (!imageName) {
                return;
            }

            showcaseItems.forEach(function (menuItem) {
                menuItem.classList.remove("active");
            });

            item.classList.add("active");
            previewImage.classList.add("is-changing");

            window.setTimeout(function () {
                previewImage.src = imageBasePath + imageName;
                previewImage.alt = title || "HYRO ONE SPA";
                previewTitle.textContent = title || "";
                previewText.textContent = text || "";
            }, 180);
        });
    });

    previewImage.addEventListener("load", function () {
        previewImage.classList.remove("is-changing");
    });

    previewImage.addEventListener("error", function () {
        previewImage.classList.remove("is-changing");
        previewTitle.textContent = "Screenshot unavailable";
        previewText.textContent =
            "Please confirm that the screenshot file exists in the SPA images folder.";
    });
});