Widget:C.Skills

<script>

   (function initSkinsPodiumUI() {
       'use strict';
       const podium = document.querySelector('.skins-podium');
       if (!podium || podium.dataset.wired === '1') return;
       podium.dataset.wired = '1';

       function applyOffsetX() {
           const allSlots = podium.querySelectorAll('.podium-slot');
           allSlots.forEach((slot) => {
               const offsetXAttr = slot.getAttribute('data-offset-x');
               if (offsetXAttr !== null && offsetXAttr !==  && offsetXAttr !== 'undefined') {
                   const numOffset = parseFloat(offsetXAttr);
                   if (!isNaN(numOffset) && numOffset !== 0) {
                       const currentStyle = slot.getAttribute('style') || ;
                       const cleanedStyle = currentStyle
                           .replace(/margin-left\s*:[^;]+;?/gi, )
                           .replace(/transform\s*:[^;]+;?/gi, )
                           .trim();
                       const newMargin = `margin-left: ${numOffset}px`;
                       if (cleanedStyle && cleanedStyle.length > 0) {
                           slot.setAttribute('style', cleanedStyle + (cleanedStyle.endsWith(';') ? ' ' : '; ') + newMargin + ';');
                       } else {
                           slot.setAttribute('style', newMargin + ';');
                       }
                   }
               }
           });
       }

       requestAnimationFrame(() => {
           applyOffsetX();
           setTimeout(applyOffsetX, 50);
           setTimeout(applyOffsetX, 200);
       });

       if (document.readyState === 'loading') {
           document.addEventListener('DOMContentLoaded', () => {
               requestAnimationFrame(applyOffsetX);
           });
       }

       // YouTube integration
       podium.querySelectorAll('.podium-slot[data-youtube]').forEach(slot => {
           if (slot.dataset.youtubeWired === '1') return;
           slot.dataset.youtubeWired = '1';
           const youtube = slot.getAttribute('data-youtube');
           if (!youtube) return;

           slot.addEventListener('click', () => {
               window.open(youtube, '_blank', 'noopener,noreferrer');
           });

           slot.addEventListener('keydown', (e) => {
               if (e.key === 'Enter' || e.key === ' ') {
                   e.preventDefault();
                   window.open(youtube, '_blank', 'noopener,noreferrer');
               }
           });
       });

       // Tooltip i18n
       const tooltipEl = document.createElement('div');
       tooltipEl.className = 'skin-tooltip';
       tooltipEl.style.display = 'none';
       document.body.appendChild(tooltipEl);

       function getLangKey() {
           const raw = (document.documentElement.lang || 'pt').toLowerCase();
           return raw === 'pt-br' ? 'pt' : (raw.split('-')[0] || 'pt');
       }

       podium.querySelectorAll('.podium-slot').forEach(slot => {
           if (slot.dataset.tooltipWired === '1') return;
           slot.dataset.tooltipWired = '1';

           const tooltipRaw = slot.getAttribute('data-skin-tooltip') || ;
           const tooltipI18n = slot.getAttribute('data-skin-tooltip-i18n');

           function showTooltip(e) {
               const lang = getLangKey();
               let text = tooltipRaw;

               if (tooltipI18n) {
                   try {
                       const pack = JSON.parse(tooltipI18n);
                       text = pack[lang] || pack.pt || pack.en || pack.es || pack.pl || tooltipRaw;
                   } catch (e) {
                       // fallback to raw
                   }
               }

               if (!text) return;

               tooltipEl.innerHTML = text;
               tooltipEl.style.display = 'block';
               const rect = slot.getBoundingClientRect();
               tooltipEl.style.left = rect.left + 'px';
               tooltipEl.style.top = (rect.top - tooltipEl.offsetHeight - 10) + 'px';
           }

           function hideTooltip() {
               tooltipEl.style.display = 'none';
           }

           slot.addEventListener('mouseenter', showTooltip);
           slot.addEventListener('mouseleave', hideTooltip);
       });
   })();

</script>