const style = document.createElement('style');
style.innerHTML = `
@font-face {
  font-family: 'TG Frida Mono';
  src: url('https://dl.dropboxusercontent.com/scl/fi/i120ory44h25qroqoyaz7/tgfridamono-light.otf?rlkey=9px1tk49q2k7ai4nepvquel7g&st=mz2enswi') format('opentype');
  font-weight: 300;
}
@font-face {
  font-family: 'TG Frida Mono';
  src: url('https://dl.dropboxusercontent.com/scl/fi/t7vkhvu9v6su9aehlejlr/tgfridamono-regular.otf?rlkey=i69wzsh2ascosdi38mhalu7oq&st=cmwj7pqy') format('opentype');
  font-weight: 400;
}
@font-face {
  font-family: 'TG Frida Mono';
  src: url('https://dl.dropboxusercontent.com/scl/fi/g84ecrzj7ze1ewv99labu/tgfridamono-bold.otf?rlkey=mee0t9omd0t9kdjfuk8tacc1o&st=mxfslvwc') format('opentype');
  font-weight: 700;
}
@font-face {
  font-family: 'TG Frida Mono';
  src: url('https://dl.dropboxusercontent.com/scl/fi/nirko5yd779dz84mjqv5r/tgfridamono-extrabold.otf?rlkey=hhjjg9b4en6o91rtifjnm79x5&st=87ct5rzd') format('opentype');
  font-weight: 800;
}

body,h1,h2,h3,p,a * {
  font-family: 'TG Frida Mono', monospace !important;
}
`;
document.head.appendChild(style);


//end of font 
/* Add custom JS code below */
document.addEventListener('DOMContentLoaded', function () {
  // --------- 1. Load Google Fonts (Playfair Display + Lato) ---------
  const fontLink = document.createElement('link');
  fontLink.rel = 'stylesheet';
  fontLink.href = 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&family=Lato:wght@100;300;400;700;900&display=swap';
  document.head.appendChild(fontLink);

  // --------- 2. Load Font Awesome ---------
  const fa = document.createElement('link');
  fa.rel = 'stylesheet';
  fa.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css';
  document.head.appendChild(fa);

  // --------- 3. Modify #about-3 h2 ---------
  const heading = document.querySelector('#about-3 h2');
  if (!heading) return;

  // Split text and wrap 3rd word
  const words = heading.innerText.trim().split(/\s+/);
  if (words.length >= 3) {
    words[2] = `<span class="bold-word">${words[2]}</span>`;
  }

  // Update h2 content with Instagram icon inline
  heading.innerHTML = `
    ${words.join(' ')}
    <a href="https://www.instagram.com/vibey.ksa" target="_blank" rel="noopener noreferrer" class="instagram-icon-inline">
      <i class="fab fa-instagram"></i>
    </a>
  `;
});

//video
(function () {
  const VIDEO_ID = 'custom-video-card';
  const VIDEO_SRC = 'https://h.top4top.io/m_3554pzv771.mp4';
  let lastPath = location.pathname;

  function insertStandaloneVideoCard() {
    const sallaList = document.querySelector('salla-products-list');
    if (!sallaList || document.getElementById(VIDEO_ID)) return;

    const wrapper = sallaList.querySelector('.s-products-list-wrapper');
    const firstCard = wrapper?.querySelector('.product-card');
    const height = firstCard?.offsetHeight || 320;

    const videoCard = document.createElement('div');
    videoCard.id = VIDEO_ID;
    videoCard.className = firstCard?.className || 'product-card';
    videoCard.style.height = `${height}px`;
    videoCard.style.overflow = 'hidden';
    videoCard.style.marginBottom = '2px';
    videoCard.style.position = 'relative';

    videoCard.innerHTML = `
      <div class="vibey-video-caption">vibe with vibey</div>
      <video autoplay muted loop playsinline style="
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0;
        display: block;
      ">
        <source src="${VIDEO_SRC}" type="video/mp4">
      </video>
    `;

    sallaList.insertBefore(videoCard, wrapper);
  }

  setInterval(() => {
    if (location.pathname !== lastPath) {
      lastPath = location.pathname;
      const old = document.getElementById(VIDEO_ID);
      if (old) old.remove();
      setTimeout(insertStandaloneVideoCard, 1000);
    }
  }, 700);

  const observer = new MutationObserver(() => {
    if (
      document.querySelector('salla-products-list .s-products-list-wrapper .product-card') &&
      !document.getElementById(VIDEO_ID)
    ) {
      insertStandaloneVideoCard();
    }
  });

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

  insertStandaloneVideoCard();
})();


//product
(function () {
  function updateSelectedShade() {
    const selectedInput = document.querySelector('.s-product-options-thumbnails-wrapper input[type="radio"]:checked');
    const labelEl = document.querySelector('.s-product-options-option-label b');

    if (selectedInput && labelEl) {
      const selectedLabel = selectedInput.closest('div').querySelector('p');
      if (selectedLabel) {
        // تأكد من عدم التكرار عند التبديل
        const existingSpan = labelEl.querySelector('.selected-shade');
        if (existingSpan) existingSpan.remove();

        const shadeSpan = document.createElement('strong');
        shadeSpan.className = 'selected-shade';
        shadeSpan.style.marginLeft = '10px';
        shadeSpan.style.fontWeight = '400';
        shadeSpan.textContent = selectedLabel.textContent;

        labelEl.appendChild(shadeSpan);
      }
    }
  }

  // استمع لأي تغيير في الاختيار
  document.addEventListener('change', (e) => {
    if (e.target.matches('.s-product-options-thumbnails-wrapper input[type="radio"]')) {
      updateSelectedShade();
    }
  });

  // نفذ عند التحميل الأولي
  window.addEventListener('DOMContentLoaded', () => {
    setTimeout(updateSelectedShade, 500);
  });
})();


//ordering 

document.addEventListener("DOMContentLoaded", function () {
  // اختار العنصر بتاع الوصف
  const description = document.querySelector(".product-single-top-description");

  // اختار الـ container الأساسي للمنتج (انت عندك div.product-single__info)
  const container = document.querySelector(".product-single__info");

  if (description && container) {
    // انقله لآخر الـ container
    container.appendChild(description);
  }
});