/* Scoped to: clothing-template-category-tab */
(function() {
  'use strict';
  var componentRoots = document.querySelectorAll('[data-component-slug="clothing-template-category-tab"]');
  componentRoots.forEach(function(componentRoot) {
    // Helper to query within component, with fallback to document for sibling elements
    var $ = function(sel) { 
      return componentRoot.querySelector(sel) || document.querySelector('[data-component-slug="clothing-template-category-tab"] ~ ' + sel) || document.querySelector(sel);
    };
    var $$ = function(sel) { 
      var results = componentRoot.querySelectorAll(sel);
      return results.length ? results : document.querySelectorAll(sel);
    };
    // Original component JS runs in this scope
    (function () { const tabs = document.querySelectorAll(".tab-btn"); const imageContainer = document.getElementById("tabImage"); const titleEl = document.getElementById("tabTitle"); const descEl = document.getElementById("tabDesc"); const featuresEl = document.getElementById("tabFeatures"); const ctaEl = document.getElementById("tabCta"); function updateContent(key) { const content = document.querySelector(`[data-tab-content="${key}"]`); if (!content) return; const animatedElements = document.querySelectorAll(".tab-content-animated"); animatedElements.forEach((el) => (el.style.opacity = "0")); setTimeout(() => { const newImg = content.querySelector('[data-content="image"]'); if (newImg && imageContainer) { const img = imageContainer.querySelector("img"); if (img) img.src = newImg.src; } const newTitle = content.querySelector('[data-content="title"]'); if (newTitle && titleEl) { titleEl.innerHTML = newTitle.outerHTML; } const newDesc = content.querySelector('[data-content="desc"]'); if (newDesc && descEl) { descEl.innerHTML = newDesc.outerHTML; } const featureItems = featuresEl.querySelectorAll("span[data-node]"); for (let i = 1; i <= 8; i++) { const newFeature = content.querySelector(`[data-content="feature_${i}"]`); if (newFeature && featureItems[i - 1]) { featureItems[i - 1].outerHTML = newFeature.outerHTML; } } const newBtnLink = content.querySelector('[data-content="btn_link"]'); const newBtnText = content.querySelector('[data-content="btn_text"]'); if (newBtnLink && ctaEl) { ctaEl.href = newBtnLink.href; } if (newBtnText && ctaEl) { const btnSpan = ctaEl.querySelector("span"); if (btnSpan) btnSpan.outerHTML = newBtnText.outerHTML; } animatedElements.forEach((el) => (el.style.opacity = "1")); }, 200); } tabs.forEach((tab) => { tab.addEventListener("click", () => { tabs.forEach((t) => { t.classList.remove("bg-[#010609]", "text-white"); t.classList.add("bg-transparent"); }); tab.classList.remove("bg-transparent"); tab.classList.add("bg-[#010609]", "text-white"); const key = tab.getAttribute("data-tab"); updateContent(key); }); }); })();
  });
})();