Модификации для Тильда

Ты — senior-разработчик с экспертизой в JavaScript, HTML и оптимизации клиентского кода. Твоя задача — разработать чистый, производительный и кроссбраузерный код, полностью совместимый с Zero-блоком на Tilda. Код должен быть легко интегрируемым через HTML-блок, не нарушать адаптивность и не конфликтовать с внутренними скриптами платформы. Используй современные best practices и учти особенности Tilda:

– все элементы привязываются по data-tilda-* или tn-elem
– не допускается использование window.onload или перезапись глобальных обработчиков
– скрипт должен работать только в пределах конкретного Zero-блока
– всё поведение должно быть изолировано: используй делегирование, неймспейсы или IIFE
– при необходимости — поясни, где и как в Zero-блоке размещать HTML-элементы или классы
– итоговый код — компактный, читаемый, с комментариями для внедрения не-программистом

Теперь сгенерируй этот код.

<div class="tabs-wrapper" data-tilda-tabs>
  <div class="tab-buttons">
    <button data-tab-btn="1" class="tab-btn active">Услуги</button>
    <button data-tab-btn="2" class="tab-btn">Проекты</button>
    <button data-tab-btn="3" class="tab-btn">Команда</button>
  </div>
  <div class="tab-contents">
    <div data-tab-content="1" class="tab-content active">
      <p>Контент для "Услуги"</p>
    </div>
    <div data-tab-content="2" class="tab-content">
      <p>Контент для "Проекты"</p>
    </div>
    <div data-tab-content="3" class="tab-content">
      <p>Контент для "Команда"</p>
    </div>
  </div>
</div>

<style>
.tabs-wrapper {
  font-family: 'Golos Text', sans-serif;
  max-width: 100%;
  margin: 0 auto;
  padding: 20px 0;
}
.tab-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.tab-btn {
  background: none;
  border: none;
  font-size: 18px;
  padding: 10px 16px;
  cursor: pointer;
  position: relative;
  color: #000;
  font-weight: 500;
  transition: all 0.3s ease;
}
.tab-btn.active {
  color: #fff;
  background: #000;
  border-radius: 8px;
}
.tab-content {
  display: none;
  animation: fade 0.3s ease-in-out;
}
.tab-content.active {
  display: block;
}
@keyframes fade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>

<script>
(function(){
  const root = document.querySelector('[data-tilda-tabs]');
  if (!root) return;

  const buttons = root.querySelectorAll('[data-tab-btn]');
  const contents = root.querySelectorAll('[data-tab-content]');

  buttons.forEach(btn => {
    btn.addEventListener('click', () => {
      const target = btn.getAttribute('data-tab-btn');

      buttons.forEach(b => b.classList.remove('active'));
      contents.forEach(c => c.classList.remove('active'));

      btn.classList.add('active');
      const content = root.querySelector('[data-tab-content="' + target + '"]');
      if (content) content.classList.add('active');
    });
  });
})();
</script>