/**
 * Blog Over Tabbed Magazine — Tab Switcher
 *
 * Lightweight vanilla JS, no jQuery dependency.
 * Handles tab navigation for the front page tabbed magazine section.
 *
 * @package Blog_Over
 */
(function () {
    'use strict';

    /**
     * Initialize all tabbed magazine instances on the page.
     */
    function initTabbedMagazine() {
        var sections = document.querySelectorAll('.blog-over-tabbed-magazine');
        if (!sections.length) return;

        sections.forEach(function (section) {
            var navBtns = section.querySelectorAll('.blog-over-tabbed-nav-btn');
            var panels  = section.querySelectorAll('.blog-over-tabbed-panel');

            if (!navBtns.length || !panels.length) return;

            navBtns.forEach(function (btn) {
                btn.addEventListener('click', function () {
                    // De-activate all
                    navBtns.forEach(function (b) {
                        b.classList.remove('active');
                        b.setAttribute('aria-selected', 'false');
                    });
                    panels.forEach(function (p) {
                        p.classList.remove('active');
                        p.setAttribute('hidden', '');
                    });

                    // Activate clicked tab
                    btn.classList.add('active');
                    btn.setAttribute('aria-selected', 'true');

                    var targetId = btn.getAttribute('data-tab');
                    var targetPanel = section.querySelector('#' + targetId);
                    if (targetPanel) {
                        targetPanel.classList.add('active');
                        targetPanel.removeAttribute('hidden');
                    }
                });
            });

            // Ensure first tab is active on load
            if (navBtns[0] && !section.querySelector('.blog-over-tabbed-nav-btn.active')) {
                navBtns[0].click();
            }
        });
    }

    // Run when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initTabbedMagazine);
    } else {
        initTabbedMagazine();
    }
})();
