// عالم Hanaya
const link1 = document.querySelector('.main-menu a[aria-label="عالم Hanaya"]');
link1.innerHTML = '';
const arabicSpan1 = document.createElement('span');
arabicSpan1.textContent = 'عالم ';
arabicSpan1.setAttribute('style', 'font-family: JF !important;');
const englishSpan1 = document.createElement('span');
englishSpan1.textContent = 'Hanaya';
englishSpan1.setAttribute('style', 'font-family: BISN !important;');
link1.appendChild(arabicSpan1);
link1.appendChild(document.createTextNode('\u00A0'));
link1.appendChild(englishSpan1);

// بوتيك hanaya
const link2 = document.querySelector('.main-menu a[aria-label="بوتيك Hanaya"]');
link2.innerHTML = '';
const arabicSpan2 = document.createElement('span');
arabicSpan2.textContent = 'بوتيك ';
arabicSpan2.setAttribute('style', 'font-family: JF !important;');
const englishSpan2 = document.createElement('span');
englishSpan2.textContent = 'Hanaya';
englishSpan2.setAttribute('style', 'font-family: BISN !important;');
link2.appendChild(arabicSpan2);
link2.appendChild(document.createTextNode('\u00A0'));
link2.appendChild(englishSpan2);

// مجموعة bonds
const link3 = document.querySelector('.sub-menu a[aria-label="مجموعة Bonds"]');
link3.innerHTML = '';
const arabicSpan3 = document.createElement('span');
arabicSpan3.textContent = 'مجموعة ';
arabicSpan3.setAttribute('style', 'font-family: JF !important;');
const englishSpan3 = document.createElement('span');
englishSpan3.textContent = 'Bonds';
englishSpan3.setAttribute('style', 'font-family: BISN !important;');
link3.appendChild(arabicSpan3);
link3.appendChild(document.createTextNode('\u00A0'));
link3.appendChild(englishSpan3);



document.addEventListener('DOMContentLoaded', function() {
  const el = document.querySelector('.topnav-link-item:first-child span.sicon-phone');
  if (el) el.classList.replace('sicon-phone', 'sicon-whatsapp');
});


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


// // Create the tab nav item
// const navList = document.querySelector('body.product-single:has(.product-65751816) .more-info-tabs__nav.nav');
// const specTab = document.createElement('li');
// specTab.className = 'more-info-tabs__nav-item';
// specTab.innerHTML = '<div class="more-info-tabs__nav-link" data-id="specifications"><span>المواصفات</span></div>';
// navList.prepend(specTab);

// // Create the tab pane with the table
// const tabContent = document.querySelector('.more-info-tabs__content');
// const specPane = document.createElement('div');
// specPane.className = 'more-tab-container';
// specPane.innerHTML = `
// <div class="more-info-tabs__nav-link mobile" data-id="specifications">
//   <span>المواصفات</span>
// </div>
// <div id="specifications" class="tab-pane fade">
//   <style>
//     .spec-table {
//       width: 100%;
//       border-collapse: separate;
//       border-spacing: 0;
//       font-family: inherit;
//       font-size: 13px;
//       border: 0;
//       overflow: hidden;
//       border-radius: 5px 5px 0 0;
//     }

//     .spec-table thead th {
//       background: #E8E6E3;
//       color: #000;
//       font-weight: 500;
//       padding: 12px 16px;
//       text-align: center;
//       border-right: 1px solid #fff;
//       border-bottom: 1px solid #46BDB9;
//       font-size: 12px;
//     }


//     .spec-table tbody td {
//       background: #fff;
//       color: #000;
//       padding: 12px 16px;
//       text-align: center;
//       border-right: 1px solid #46BDB9;
//       border-bottom: 1px solid #46BDB9;
//       font-size: 13px;
//     }
// .spec-table tbody td:last-child {
//     border-left: 1px solid #46BDB9;
// }
//     .spec-table tbody td:first-child {
//       border-left: 1px solid #46BDB9;
//     }
//   </style>
//   <div class="spec-table-wrap">
//     <table class="spec-table">
//       <thead>
//         <tr>
//           <th>رقم</th>
//           <th>وزن الذهب</th>
//           <th>الذهب</th>
//           <th>لون الماس</th>
//           <th>نقاء الماس</th>
//           <th>شكل الماس</th>
//           <th>وزن الماس</th>
//         </tr>
//       </thead>
//       <tbody>
//         <tr>
//           <td>XYZ-24422-34535-234354</td>
//           <td>شامل</td>
//           <td>محدود</td>
//           <td>أساسي</td>
//           <td>أساسي</td>
//           <td>أساسي</td>
//           <td>أساسي</td>
//         </tr>
//       </tbody>
//     </table>
//   </div>
// </div>
// `;
// tabContent.prepend(specPane);

// // Tab switching logic
// document.querySelectorAll('.more-info-tabs__nav-link').forEach(link => {
// link.addEventListener('click', function () {
// const id = this.dataset.id;
// // Deactivate all
// document.querySelectorAll('.more-info-tabs__nav-link').forEach(l => l.classList.remove('active'));
// document.querySelectorAll('.tab-pane').forEach(p => { p.classList.remove('show'); p.classList.remove('active'); });
// // Activate matching
// document.querySelectorAll(`[data-id="${id}"]`).forEach(l => l.classList.add('active'));
// const pane = document.getElementById(id);
// if (pane) { pane.classList.add('show', 'active'); }
// });
// });

// // Show specs tab by default
// specTab.querySelector('.more-info-tabs__nav-link').click();
// });


document.addEventListener("DOMContentLoaded", function () {
  const navList = document.querySelector(
    "body.product-single .more-info-tabs__nav.nav",
  );
  const specTab = document.createElement("li");
  specTab.className = "more-info-tabs__nav-item";
  specTab.innerHTML =
    '<div class="more-info-tabs__nav-link" data-id="specifications"><span>المواصفات</span></div>';
  navList.prepend(specTab);

  const tabContent = document.querySelector(".more-info-tabs__content");
  const specPane = document.createElement("div");
  specPane.className = "more-tab-container";
  specPane.innerHTML = `
<div class="more-info-tabs__nav-link mobile" data-id="specifications">
  <span>المواصفات</span>
</div>
<div id="specifications" class="tab-pane fade">
  <style>
    .spec-table {
      width: 100%;
      border-collapse: collapse;
      font-family: inherit;
      font-size: 13px;
      direction: rtl;
    }
    .spec-table th {
      background: #E8E6E3;
      color: #000;
      font-weight: 500;
      padding: 10px 14px;
      text-align: center;
      border: 1px solid #46BDB9;
      font-size: 12px;
    }
      .spec-table tbody th {
      background: #fff;
      }
    .spec-table td {
      background: #fff;
      color: #000;
      padding: 12px 16px;
      text-align: center;
      border: 1px solid #46BDB9;
      font-size: 13px;
    }
  </style>
  <div class="spec-table-wrap">
    <table class="spec-table">
      <thead>
        <tr>
          <th>رقم الصنف</th>
          <th colspan="3">الذهب</th>
          <th colspan="5">الماس</th>
        </tr>
      </thead>
      <tbody>
         <tr>
          <td rowspan="2">Pe-18Y-L6D-BOA-1</td>
          <th>العيار<br>(قيراط)</th>
          <th>اللون</th>
          <th>الوزن<br>(غرام)</th>
          <th>النوع</th>
          <th>النقاء</th>
          <th>اللون</th>
          <th>القطع</th>
          <th>الوزن<br>(قيراط)</th>
        </tr>
        <tr>
          
          <td>18</td>
          <td>أصفر</td>
          <td>8.3</td>
          <td>LGD</td>
          <td>VSS</td>
          <td>IJ</td>
          <td>دائري</td>
          <td>0.35</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
  `;
  tabContent.prepend(specPane);

  document.querySelectorAll(".more-info-tabs__nav-link").forEach((link) => {
    link.addEventListener("click", function () {
      const id = this.dataset.id;
      document
        .querySelectorAll(".more-info-tabs__nav-link")
        .forEach((l) => l.classList.remove("active"));
      document.querySelectorAll(".tab-pane").forEach((p) => {
        p.classList.remove("show");
        p.classList.remove("active");
      });
      document
        .querySelectorAll(`[data-id="${id}"]`)
        .forEach((l) => l.classList.add("active"));
      const pane = document.getElementById(id);
      if (pane) {
        pane.classList.add("show", "active");
      }
    });
  });

  specTab.querySelector(".more-info-tabs__nav-link").click();
});