document.addEventListener("DOMContentLoaded", function () {
    let sections = document.querySelectorAll(".sections");

    sections.forEach((section) => {
        let tabs = section.querySelectorAll(".section-tab");
        let contents = section.querySelectorAll(".section-content");

        let active_tab = "";

        tabs.forEach((tab) => {
            let tab_id = tab.dataset.name;

            if (tab.classList.contains("active")) {
                active_tab = tab_id;
            }

            tab.addEventListener("click", () => {
                if (tab_id != active_tab) {
                    tabs.forEach((el) => {
                        el.classList.toggle("active", el === tab);
                    });

                    contents.forEach((el) => {
                        el.classList.toggle("active", (el.dataset.name === tab_id));
                    });
                }
                active_tab = tab_id;
            });
        });
    });
});