(function () {
document.addEventListener("DOMContentLoaded", () => {
    // ===== Features Block =====
    const items = document.querySelectorAll(".features-block__description");
    const images = document.querySelectorAll(".features-block__img");

    const resetFeatures = () => {
        items.forEach(item => {
            item.classList.remove("active");
            const decor = item.querySelector(".features-block__decor");
            if (decor) decor.style.height = "24px";
        });
        images.forEach(img => img.classList.remove("active"));
    };

    const activateFeature = (item, index) => {
        item.classList.add("active");
        const decor = item.querySelector(".features-block__decor");
        const text = item.querySelector(".features-block__text");
        if (decor && text) decor.style.height = `${text.scrollHeight}px`;
        images.forEach(img => img.classList.remove("active"));
        if (images[index]) images[index].classList.add("active");
    };

    items.forEach((item, index) => {
        item.addEventListener("click", () => {
            resetFeatures();
            activateFeature(item, index);
        });
    });

    const defaultIndex = [...items].findIndex(i => i.classList.contains("active"));
    if (defaultIndex >= 0) activateFeature(items[defaultIndex], defaultIndex);

    // ===== Modal =====
    const modal = document.getElementById("imageModal");
    const modalImg = document.getElementById("modalImg");
    const closeBtn = modal?.querySelector(".modal__close");
    const imagesContainer = document.querySelector(".features-block__right");

    const openModal = () => {
        const visibleImg = document.querySelector(".features-block__img.active");
        if (!visibleImg) return;
        modalImg.src = visibleImg.dataset.full || visibleImg.src;
        modal.classList.add("show");
        modal.style.display = "flex";
    };

    const closeModal = () => {
        modal.classList.remove("show");
        setTimeout(() => {
            modal.style.display = "none";
            modalImg.src = "";
        }, 300);
    };

    imagesContainer?.addEventListener("click", openModal);
    closeBtn?.addEventListener("click", closeModal);
    modal?.addEventListener("click", e => { if (e.target === modal) closeModal(); });

    // ===== Tabs =====
    window.switchTab = (tab) => {
        const importTab = document.getElementById("importTab");
        const exportTab = document.getElementById("exportTab");
        const importContent = document.getElementById("importContent");
        const exportContent = document.getElementById("exportContent");

        const isImport = tab === "import";
        importTab?.classList.toggle("active", isImport);
        exportTab?.classList.toggle("active", !isImport);
        importContent?.classList.toggle("active", isImport);
        exportContent?.classList.toggle("active", !isImport);
    };

    // ===== Floating Licenses =====
    const showFloating = document.querySelectorAll(".show-floating");
    const floatingLicenses = document.querySelectorAll(".floating-license");
    const aboutLicenses = document.querySelectorAll(".more-about-license");
    const knowMore = document.querySelectorAll(".know-more");
    const wrappers = document.querySelectorAll(".wrapper");

    showFloating.forEach((btn, i) => {
        btn.addEventListener("click", () => {
            const fl = floatingLicenses[i];
            if (!fl) return;
            if (fl.offsetHeight === 0) {
                fl.classList.add("partially-opened");
            } else {
                fl.classList.remove("partially-opened", "fully-opened");
                wrappers[i * 2 + 1]?.classList.remove("is-open");
            }
        });
    });

    const toggleLicense = (i) => {
        const wrapper = wrappers[i];
        const about = aboutLicenses[i];
        if (!wrapper || !about) return;

        const fl = floatingLicenses[Math.floor((i - 1) / 2)];
        const isClosed = getComputedStyle(about).height === "0px";

        wrapper.classList.toggle("is-open", isClosed);
        if (i % 2 !== 0 && fl) {
            fl.classList.toggle("fully-opened", isClosed);
        }
    };

    knowMore.forEach((btn, i) => {
        btn.addEventListener("click", () => toggleLicense(i));
    });

    // ===== Price & Links =====
    const radios = document.querySelectorAll("input[type=radio][name=radio]");
    const priceEls = document.querySelectorAll(".price");
    const periodEls = document.querySelectorAll(".period");
    const buttons = document.querySelectorAll(".table-button");

    const prices = {
        "one-year": [
            "77",
            "154",
            "154",
            "310",
        ],
        "lifetime": [
            "189",
            "383",
            "383",
            "772",
        ],
        "three-month": [
            "30",
            "61",
            "76",
            "121",
        ],
    };

    const periods = {
        "one-year": " / year",
        "lifetime": " for life",
        "three-month": " / three months",
    };

    const linkIds = {
        "one-year": ["94989","94994","94990","94995"],
        "lifetime": ["94985","94987","94986","94988"],
        "three-month": ["94992","94996","94993","94997"],
    };

    const updatePricesAndLinks = (plan) => {
        if (!prices[plan]) return;
        priceEls.forEach((el, i) => el.innerHTML = prices[plan][i] || "");
        periodEls.forEach(el => el.textContent = periods[plan] || "");
        buttons.forEach((btn, i) => {
            btn.href = `https://store.payproglobal.com/checkout?products[1][id]=${linkIds[plan][i]}&_gl=1`;
        });
    };

    radios.forEach(radio => {
        if (radio.checked) updatePricesAndLinks(radio.id);
        radio.addEventListener("change", () => {
            if (radio.checked) updatePricesAndLinks(radio.id);
        });
    });
});
}());