Widget:GuildAssets

<style>

   .utab {
       font-family: "Segoe UI", Arial, sans-serif;
       color: #e2ecff;
       padding: 12px 0 0;
       width: 100%;
       min-width: 0;
       overflow: hidden;
       box-sizing: border-box;
   }

   .utab__section {
       display: none;
   }

   .utab__levels {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       margin-bottom: 16px;
   }

   .utab__levelBtn {
       border: 1px solid #274a74;
       background: #13243a;
       padding: 6px 12px;
       border-radius: 10px;
       font-weight: 600;
       color: #cfe1ff;
       cursor: pointer;
       transition: all 0.2s ease;
   }

   .utab__levelBtn:hover {
       border-color: #4a86d8;
       color: #ffffff;
   }

   .utab__levelBtn.is-active {
       background: #2e7dd7;
       border-color: #2e7dd7;
       color: #ffffff;
   }

   .utab__levelBtn:focus-visible {
       outline: 2px solid rgba(46, 125, 215, 0.4);
       outline-offset: 2px;
   }

   .utab__display {
       display: flex;
       gap: 18px;
       align-items: start;
   }

   .utab__display.is-image-empty .utab__image {
       display: none;
   }

   .utab__display.is-fading {
       animation: utabFade 0.25s ease;
   }

   .utab__image {
       border-radius: 12px;
       border: 1px solid #203c5f;
       background: #0b1422;
       padding: 10px;
       flex-shrink: 0;
       max-width: 50%;
   }

   .utab__image img {
       display: block;
       height: auto;
       max-width: 100%;
       border-radius: 8px;
   }

   .utab__image.is-empty {
       display: none;
   }

   .utab__stats {
       display: flex;
       flex-direction: column;
       gap: 10px;
       color: #dbe7ff;
       font-size: 14px;
       flex: 1;
       min-width: 0;
   }

   .utab__stat {
       background: #13243a;
       border: 1px solid #274a74;
       border-radius: 10px;
       padding: 10px 12px;
   }

   .utab__statTitle {
       font-weight: 700;
       color: #8bb8ff;
   }

   .utab__statList {
       margin: 6px 0 0;
       padding-left: 18px;
       display: grid;
       gap: 2px;
       list-style: disc;
       list-style-position: outside;
   }

   .utab__statList li {
       display: list-item;
       text-align: left;
   }

   .utab__descContent {
       margin-top: 6px;
       line-height: 1.5;
   }

   .utab__descContent ul,
   .utab__descContent ol {
       margin: 4px 0;
       padding-left: 18px;
   }

   .utab__descContent li {
       display: list-item;
   }

   .utab__descContent p {
       margin: 4px 0;
   }

   .utab__costRow {
       position: relative;
   }

   .utab__costBerry,
   .utab__costGems,
   .utab__costPoints {
       display: inline-flex;
       align-items: center;
       gap: 6px;
       font-weight: 700;
       line-height: 1.1;
       font-size: 15px;
   }

   .utab__costBerry {
       color: #ffd166;
   }

   .utab__costGems {
       color: #57d889;
   }

   .utab__costPoints {
       color: #a6b0bf;
   }

   @keyframes utabFade {
       from {
           opacity: 0;
           transform: translateY(4px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @media (max-width: 600px) {
       .utab__display {
           flex-direction: column;
       }

       .utab__image {
           max-width: 100%;
       }
   }

</style>

<script>

   (function () {
       function handleArrowNavigation(event, buttons, activate) {
           var keys = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"];
           if (keys.indexOf(event.key) === -1) return;
           event.preventDefault();
           var currentIndex = buttons.indexOf(document.activeElement);
           if (currentIndex === -1) return;
           var nextIndex = currentIndex;
           if (event.key === "Home") nextIndex = 0;
           else if (event.key === "End") nextIndex = buttons.length - 1;
           else if (event.key === "ArrowLeft" || event.key === "ArrowUp") nextIndex = (currentIndex - 1 + buttons.length) % buttons.length;
           else if (event.key === "ArrowRight" || event.key === "ArrowDown") nextIndex = (currentIndex + 1) % buttons.length;
           activate(nextIndex, true);
       }

       function triggerFade(element) {
           element.classList.remove("is-fading");
           element.offsetWidth;
           element.classList.add("is-fading");
       }

       var upgradeCosts = [
           { level: 1, berries: "50.000", gems: "10", points: "400" },
           { level: 2, berries: "250.000", gems: "10", points: "1.500" },
           { level: 3, berries: "400.000", gems: "20", points: "3.000" },
           { level: 4, berries: "1.000.000", gems: "50", points: "12.500" },
           { level: 5, berries: "1.800.000", gems: "90", points: "28.000" }
       ];

       function buildLevelUI(utab) {
           var section = utab.querySelector(".utab__section");
           if (!section) return;
           var levelElements = [].slice.call(section.querySelectorAll(".utab__level"));
           if (!levelElements.length) return;
           var label = section.getAttribute("data-tab") || "Níveis";

           // Descrição compartilhada (vem do editor, já parseada server-side)
           var descEl = section.querySelector(".utab__desc");
           var descHtml = descEl ? descEl.innerHTML.trim() : "";

           // Dados por nível (só imagem)
           var levels = levelElements.map(function (el, i) {
               var num = el.getAttribute("data-level") || String(i + 1);
               var img = el.querySelector(".utab__mediaImage");
               return { level: num, imageHtml: img ? img.innerHTML.trim() : "" };
           });

           // Monta UI fora do section
           var nav = document.createElement("div");
           nav.className = "utab__levels";
           nav.setAttribute("role", "tablist");
           nav.setAttribute("aria-label", "Níveis de " + label);

           var display = document.createElement("div");
           display.className = "utab__display";
           var imageWrap = document.createElement("div");
           imageWrap.className = "utab__image";
           var stats = document.createElement("div");
           stats.className = "utab__stats";
           display.appendChild(imageWrap);
           display.appendChild(stats);

           utab.appendChild(nav);
           utab.appendChild(display);

           var buttons = levels.map(function (level) {
               var btn = document.createElement("button");
               btn.type = "button";
               btn.className = "utab__levelBtn";
               btn.textContent = "Nv " + level.level;
               btn.setAttribute("role", "tab");
               btn.setAttribute("aria-selected", "false");
               btn.setAttribute("tabindex", "-1");
               nav.appendChild(btn);
               return btn;
           });

           buttons.forEach(function (btn, index) {
               btn.addEventListener("click", function () { activateLevel(index, true); });
               btn.addEventListener("keydown", function (e) { handleArrowNavigation(e, buttons, activateLevel); });
           });

           function activateLevel(index, shouldFocus) {
               if (!levels.length) return;
               var safe = Math.max(0, Math.min(index, levels.length - 1));
               var current = levels[safe];

               buttons.forEach(function (btn, i) {
                   var active = i === safe;
                   btn.classList.toggle("is-active", active);
                   btn.setAttribute("aria-selected", active ? "true" : "false");
                   btn.setAttribute("tabindex", active ? "0" : "-1");
               });

               // Imagem
               if (current.imageHtml) {
                   imageWrap.innerHTML = current.imageHtml;
                   imageWrap.classList.remove("is-empty");
                   display.classList.remove("is-image-empty");
               } else {
                   imageWrap.innerHTML = "";
                   imageWrap.classList.add("is-empty");
                   display.classList.add("is-image-empty");
               }

               // Custo (muda por nível)
               var levelNum = parseInt(current.level, 10);
               var cost = upgradeCosts.filter(function (c) { return c.level === levelNum; })[0];
               var costHtml = cost

 ? '

Custo do upgrade

' + '
• ' + cost.berries + ' berries
' + (cost.gems ? '
• ' + cost.gems + ' gemas
' : ) + '
• ' + cost.points + ' pontos
' + '

'

                   : "";

               // Descrição (fixa, compartilhada entre níveis)
               var infoHtml = descHtml

 ? '

Informações

' + descHtml + '

'

                   : "";

               stats.innerHTML = infoHtml + costHtml;
               triggerFade(display);

               if (shouldFocus) buttons[safe].focus();
           }

           activateLevel(0, false);
       }

       function initWidgets() {
           [].slice.call(document.querySelectorAll(".utab")).forEach(buildLevelUI);
       }

       if (document.readyState === "loading") {
           document.addEventListener("DOMContentLoaded", initWidgets);
       } else {
           initWidgets();
       }
   })();

</script>