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";
            });
        });
    });
});