document.addEventListener('DOMContentLoaded', function () {

  function setupActivationTab() {

    const detailsBtn = document.querySelector(
      'button.tab-trigger[data-target="product-tabs-details"]'
    );

    if (!detailsBtn) return false;

    // منع التكرار
    if (document.querySelector(
      'button.tab-trigger[data-target="product-tabs-activation"]'
    )) return true;

    const tabsWrapper = detailsBtn.parentElement;

    const detailsContent =
      document.querySelector('#product-tabs-details') ||
      document.querySelector('[data-content="product-tabs-details"]');

    if (!detailsContent) return false;

    // حفظ تفاصيل المنتج الأصلية
    const originalDetails = detailsContent.innerHTML;

    // إنشاء زر طريقة التفعيل
    const activationBtn = detailsBtn.cloneNode(true);

    activationBtn.classList.remove('is-active');
    activationBtn.setAttribute(
      'data-target',
      'product-tabs-activation'
    );

    activationBtn.removeAttribute('aria-label');
    activationBtn.innerHTML = '🔗 طريقة التفعيل';

    // وضع طريقة التفعيل بعد التفاصيل
    detailsBtn.insertAdjacentElement(
      'afterend',
      activationBtn
    );

    // محتوى طريقة التفعيل
    const activationHTML = `
      <div dir="rtl" style="
        text-align:right;
        padding:20px;
        line-height:2.8;
        font-size:16px;
        color:#ffffff;
      ">

        <h3 style="
          font-size:18px;
          font-weight:700;
          margin-bottom:15px;
          color:#ffffff;
        ">
          اختر نوع جهازك لمعرفة طريقة التفعيل:
        </h3>

        <div>
          📺 شاشات الأندرويد —
          <a
            href="https://3abryn.com/blog/-/a-1822716099"
            style="color:#ffffff; text-decoration:underline;"
          >
            اضغط هنا
          </a>
        </div>

        <div>
          📺 شاشات LG + Samsung —
          <a
            href="https://3abryn.com/blog/-/a-706326237"
            style="color:#ffffff; text-decoration:underline;"
          >
            اضغط هنا
          </a>
        </div>

        <div>
          📱 جوالات الأندرويد —
          <a
            href="https://3abryn.com/blog/-/a-132566494"
            style="color:#ffffff; text-decoration:underline;"
          >
            اضغط هنا
          </a>
        </div>

        <div>
          📱 جوالات الآيفون —
          <a
            href="https://3abryn.com/blog/-/a-1371794655"
            style="color:#ffffff; text-decoration:underline;"
          >
            اضغط هنا
          </a>
        </div>

        <div>
          💻 نظام Windows + PC —
          <a
            href="https://3abryn.com/blog/-/a-598215640"
            style="color:#ffffff; text-decoration:underline;"
          >
            اضغط هنا
          </a>
        </div>

        <div>
          💻 نظام MacBook + Apple TV —
          <a
            href="https://3abryn.com/blog/-/a-1330792922"
            style="color:#ffffff; text-decoration:underline;"
          >
            اضغط هنا
          </a>
        </div>

      </div>
    `;

    // الضغط على طريقة التفعيل
    activationBtn.addEventListener('click', function (e) {

      e.preventDefault();
      e.stopPropagation();

      tabsWrapper
        .querySelectorAll('.tab-trigger')
        .forEach(btn => btn.classList.remove('is-active'));

      activationBtn.classList.add('is-active');

      detailsContent.innerHTML = activationHTML;
      detailsContent.style.display = '';

    });

    // الضغط على التفاصيل
    detailsBtn.addEventListener('click', function () {

      detailsContent.innerHTML = originalDetails;
      detailsContent.style.display = '';

      activationBtn.classList.remove('is-active');
      detailsBtn.classList.add('is-active');

    }, true);

  }

  if (!setupActivationTab()) {

    const observer = new MutationObserver(function () {

      if (setupActivationTab()) {
        observer.disconnect();
      }

    });

    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  }

});