function setupBars(selector) {
  document.querySelectorAll(selector).forEach(el => {
    const fill = el.querySelector('.fill');
    const pct = parseInt(el.dataset.percent) || 0;
    const percentText = el.querySelector('.percent');

    function activate() {
      fill.style.width = pct + '%';
      el.classList.add('active');
      if (percentText) percentText.style.opacity = '1';
    }

    function deactivate() {
      fill.style.width = '0%';
      el.classList.remove('active');
      if (percentText) percentText.style.opacity = '0';
    }

    el.addEventListener('mouseenter', activate);
    el.addEventListener('mouseleave', deactivate);
    el.addEventListener('focus', activate);
    el.addEventListener('blur', deactivate);

    el.addEventListener('click', (e) => {
      if (el.classList.contains('active')) {
        deactivate();
      } else {
        document.querySelectorAll(selector + '.active').forEach(other => {
          if (other !== el) {
            other.classList.remove('active');
            other.querySelector('.fill').style.width = '0%';
            const pt = other.querySelector('.percent');
            if (pt) pt.style.opacity = '0';
          }
        });
        activate();
      }
    });
  });
}

setupBars('.skill');
setupBars('.lang');