/* Add custom Js code below */ 
function insertCategorySection(targetClass = 's-block--photos-slider', insertPosition = 'after') {
  const images = [
    {
      src: 'https://cdn.salla.sa/yPKPP/cfbd85db-5452-4ea6-b424-3fa8f1b74041-1000x1000-0kgTqWb9bMzY8kLaSNAu8KlduA0YWdRDNA1bNcst.png',
      label: 'مجموعات',
      link: 'https://salla.sa/follcare/%D9%85%D8%AC%D9%85%D9%88%D8%B9%D8%A7%D8%AA-%D8%AA%D9%88%D8%A8-%D9%83%D9%8A%D8%B1/c721961970'
    },
    {
      src: 'https://cdn.salla.sa/yPKPP/fb3fe4d8-f135-463c-acb4-4a8f97d9520e-1000x1000-5L8fAjhBDTT17sxxOlyemf3NGAdNkQvBNa5TFhBY.png',
      label: 'منتجات مفردة',
      link: 'https://salla.sa/follcare/%D9%85%D9%86%D8%AA%D8%AC%D8%A7%D8%AA-%D9%85%D9%81%D8%B1%D8%AF%D8%A9/c1495475441'
    },
    {
      src: 'https://cdn.salla.sa/yPKPP/f7993d71-5e22-457e-8d8e-0cbef576e9a8-1000x1000-RSfZLSJ8jGeBhbPxzgJX7uhwMdwUPLzmkPzgkPED.png',
      label: 'العناية بالشعر',
      link: 'https://salla.sa/follcare/%D9%85%D9%86%D8%AA%D8%AC%D8%A7%D8%AA-%D8%A7%D9%84%D8%B9%D9%86%D8%A7%D9%8A%D8%A9-%D8%A8%D8%A7%D9%84%D8%B4%D8%B9%D8%B1/c461146526'
    },
    {
      src: 'https://cdn.salla.sa/yPKPP/163583f6-1ca1-43e7-ac3a-ca9865fd56f4-1000x1000-i9kuA27IBrgo9jPJZRrsqcuYPPEhuC8975fIXnnk.png',
      label: 'العناية بالجسم',
      link: 'https://salla.sa/follcare/%D9%85%D9%86%D8%AA%D8%AC%D8%A7%D8%AA-%D8%A7%D9%84%D8%B9%D9%86%D8%A7%D9%8A%D8%A9-%D8%A8%D8%A7%D9%84%D8%AC%D8%B3%D9%85/c1968810143'
    },
    {
      src: 'https://cdn.salla.sa/yPKPP/6a508eb8-39bd-4742-9800-c480ef063204-1000x1000-d5zchHURBKy2PfpwpkwhUtFV39xz1QvbGQD0yB7i.png',
      label: 'تخفيضات الصيف',
      link: 'https://salla.sa/follcare/%D9%85%D9%86%D8%AA%D8%AC%D8%A7%D8%AA-%D8%A7%D9%84%D8%B5%D9%8A%D9%81/c1454604796'
    },
    {
      src: 'https://cdn.salla.sa/yPKPP/4dac297b-164f-4fb7-9cae-8655817006d8-1000x1000-jpyJ5E2tMRifqu0ivUVkM0lJ8e45GXDslDB3M0Ag.png',
      label: 'العناية بالبشرة',
      link: 'https://top-carre.com/%D8%A7%D9%84%D8%B9%D9%86%D8%A7%D9%8A%D8%A9-%D8%A8%D8%A7%D9%84%D8%A8%D8%B4%D8%B1%D8%A9/c53836244'
    },
  ];

  const section = document.createElement('section');
  section.className = 'custom-category-section';
  section.innerHTML = `
    <h2 class="section-title">التصنيفات</h2>
    <div class="category-grid">
      ${images.map(item => `
        <a href="${item.link}" class="category-item">
          <img src="${item.src}" alt="تصنيف">
          <p class="category-label">${item.label}</p>
        </a>
      `).join('')}
    </div>
  `;

  const style = document.createElement('style');
  style.textContent = `
    .custom-category-section {
      padding: 40px 5vw;
      width: 100%;
      direction: rtl;
    }

    .section-title {
      font-size: 28px;
      margin-bottom: 20px;
      text-align: right;
      position: relative;
      color: #333;
      display: block;
    }

    .category-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 24px;
    }

    .category-item {
      flex: 0 1 calc(16.66% - 24px);
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      text-align: center;
      text-decoration: none;
    }

    .category-item:hover {
      transform: scale(1.05);
      box-shadow: 0 10px 24px #a0ba89;
    }

    .category-item img {
      width: 100%;
      height: auto;
      display: block;
      aspect-ratio: 1 / 1;
      object-fit: cover;
    }

    .category-label {
      padding: 10px 5px;
      font-size: 14px;
      color: #555;
      background-color: #f9f9f9;
    }

    @media (max-width: 1024px) {
      .category-item {
        flex: 0 1 calc(33.33% - 24px);
      }
    }

    @media (max-width: 768px) {
      .category-item {
        flex: 0 1 calc(50% - 24px);
      }
    }
  `;
  document.head.appendChild(style);

  const target = document.querySelector(`.${targetClass}`);
  if (target) {
    if (insertPosition === 'after') {
      target.insertAdjacentElement('afterend', section);
    } else {
      target.insertAdjacentElement('beforebegin', section);
    }
  }
}
insertCategorySection();
/***********************************************/
/*سيكشن اراء العملاء*/
function insertTestimonialsSection(targetClass = 's-block--features', insertPosition = 'before') {
  const testimonials = [
    { name: 'خلود الغامدي', image: 'https://cdn.salla.sa/yPKPP/jas4YdG2uXZuRbsKLPKmxdodirzzeFNd1FEBELYd.png', rating: 5, text: 'بنات يجننن والله 😍 أنا أخذت الصابون المغربي باللبان...' },
    { name: 'وعد الحربي', image: 'https://cdn.salla.sa/yPKPP/jas4YdG2uXZuRbsKLPKmxdodirzzeFNd1FEBELYd.png', rating: 5, text: 'خيييال تونر الوجه والجسم مشكلتي المسامات والحمدالله خفت بشكل واضح...' },
    { name: 'نسرين السلمان', image: 'https://cdn.salla.sa/yPKPP/jas4YdG2uXZuRbsKLPKmxdodirzzeFNd1FEBELYd.png', rating: 5, text: 'الزبت شيء مو طبيعي يرطب من قلبي مع لمعة طبعاً اخذت معه الشامبو...' },
    { name: 'Shaden Alhamdan', image: 'https://cdn.salla.sa/yPKPP/jas4YdG2uXZuRbsKLPKmxdodirzzeFNd1FEBELYd.png', rating: 5, text: 'وااااااو واو واو رهييب بشكل مو طبيعي تونر الوجه والجسم...' },
    { name: 'ابرار', image: 'https://cdn.salla.sa/yPKPP/jas4YdG2uXZuRbsKLPKmxdodirzzeFNd1FEBELYd.png', rating: 5, text: 'روعة في كل شيء شغل احترافي، سرعة الشحن، خدمة عملاء فوق الممتازة...' },
    { name: 'A.Aalshahrani', image: 'https://cdn.salla.sa/yPKPP/jas4YdG2uXZuRbsKLPKmxdodirzzeFNd1FEBELYd.png', rating: 5, text: 'يأخذ مليوووون من عشرة بإذن الله ما تكون آخر مره اطلب...' },
    { name: 'Raghad', image: 'https://cdn.salla.sa/yPKPP/jas4YdG2uXZuRbsKLPKmxdodirzzeFNd1FEBELYd.png', rating: 5, text: 'يا توب كير يا أجمل منتجات ف الأرض🌹❤️الكريم خياااال...' },
    { name: 'Amal', image: 'https://cdn.salla.sa/yPKPP/jas4YdG2uXZuRbsKLPKmxdodirzzeFNd1FEBELYd.png', rating: 5, text: 'بنت خالي زواجها قريب بإذن الله كل العناية وكل برنامجها للبشرة...' },
    { name: '-', image: 'https://cdn.salla.sa/yPKPP/jas4YdG2uXZuRbsKLPKmxdodirzzeFNd1FEBELYd.png', rating: 5, text: 'مساء الانبهاررر😭 توه وصلني التونر وكريم الترطيب...' }
  ];

  // إضافة Swiper
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css';
  document.head.appendChild(link);

  const script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js';
  script.onload = () => {
    new Swiper('.testimonial-swiper', {
      slidesPerView: 3,
      spaceBetween: 24,
      loop: true,
      autoplay: {
        delay: 4000,
        disableOnInteraction: false,
      },
      breakpoints: {
        0: { slidesPerView: 1.1 },
        600: { slidesPerView: 2 },
        1024: { slidesPerView: 3 }
      }
    });
  };
  document.body.appendChild(script);

  // إنشاء القسم
  const section = document.createElement('section');
  section.className = 'testimonials-section';
  section.innerHTML = `
    <h2 class="section-title">آراء العملاء</h2>
    <div class="swiper testimonial-swiper">
      <div class="swiper-wrapper">
        ${testimonials.map(t => `
          <div class="swiper-slide testimonial-card">
            <img src="${t.image}" alt="${t.name}">
            <h3>${t.name}</h3>
            <div class="stars">${'★'.repeat(t.rating)}</div>
            <p>${t.text}</p>
          </div>
        `).join('')}
      </div>
    </div>
  `;

  const style = document.createElement('style');
  style.textContent = `
    .testimonials-section {
      direction: rtl;
      background: transparent;
      padding: 50px 20px;
      text-align: center;
    }

    .section-title {
      font-size: 28px;
      margin-bottom: 30px;
      position: relative;
    }

 

    .testimonial-card {
      background: #f9f9f9;
      border: 1px solid #a0ba89;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      text-align: center;
      height: 100%;
    }

    .testimonial-card img {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      object-fit: cover;
      margin-bottom: 10px;
    }

    .testimonial-card h3 {
      font-size: 18px;
      color: #333;
      margin: 10px 0 5px;
    }

    .testimonial-card .stars {
      color: #f5b50a;
      font-size: 16px;
      margin-bottom: 10px;
    }

    .testimonial-card p {
      font-size: 15px;
      color: #555;
      line-height: 1.6;
    }

    @media (max-width: 768px) {
      .testimonial-card {
        font-size: 14px;
      }
    }
  `;
  document.head.appendChild(style);

  const target = document.querySelector(`.${targetClass.trim()}`);
  if (target) {
    if (insertPosition === 'after') {
      target.insertAdjacentElement('afterend', section);
    } else {
      target.insertAdjacentElement('beforebegin', section);
    }
  }
}

    // للتنفيذ:
  insertTestimonialsSection()
  /*********************************************/
   /*********************************************/
/*تجارب العملاء*/
function insertCustomerExperiencesSection(targetClass = 'testimonials-section', insertPosition = 'after') {
  const experiences = [
    //الصابونة المغربية
    { image: 'https://cdn.salla.sa/yPKPP/v9ZvobyCH5CNdyRitN98aSam03DP8ycL0fU4nW5S.png', link: 'https://top-carre.com/%D8%A7%D9%84%D8%B5%D8%A7%D8%A8%D9%88%D9%86%D8%A9-%D8%A7%D9%84%D9%85%D8%BA%D8%B1%D8%A8%D9%8A%D8%A9-%D8%A8%D8%A7%D9%84%D9%84%D8%A8%D8%A7%D9%86/p1805226758' },
    //دلكة
    { image: 'https://cdn.salla.sa/yPKPP/aLQkYSNcCKFajXKu6Y4nns5VxXuRm98aWqMv8pY1.png', link: 'https://top-carre.com/%D8%AF%D9%84%D9%83%D8%A9-%D8%A7%D9%84%D8%AC%D8%B3%D9%85-%D9%85%D9%86-topcare/p990077145' },
    //تونر
    { image: 'https://cdn.salla.sa/yPKPP/s2k2U1X9XQ41zL4GwHDKsnKY2gO9lTCfiNOa059B.png', link: 'https://top-carre.com/%D8%AA%D9%88%D9%86%D8%B1-%D8%A7%D9%84%D9%88%D8%AC%D9%87-%D9%88-%D8%A7%D9%84%D9%85%D9%86%D8%A7%D8%B7%D9%82-%D8%A7%D9%84%D8%AD%D8%B3%D8%A7%D8%B3%D8%A9/p636503667' },
    //كريم مخملي للجسم
    { image: 'https://cdn.salla.sa/yPKPP/oUhIET6bIlzMeJUDQNh0qunmpz79RCrfUqWXzPrA.png', link: 'https://top-carre.com/%D9%83%D8%B1%D9%8A%D9%85-%D9%85%D8%AE%D9%85%D9%84%D9%8A-%D9%84%D9%84%D8%AC%D8%B3%D9%85-100-%D9%85%D9%84/p1808838721' },
    //كريم توب كير
    { image: 'https://cdn.salla.sa/yPKPP/3H7MjqgnvFNDzPoR4l7oB6f4ZHc6e992PFFcQmUl.png', link: 'https://top-carre.com/%D9%83%D8%B1%D9%8A%D9%85-%D8%AA%D9%88%D8%A8-%D9%83%D9%8A%D8%B1-%D9%86%D8%B6%D8%A7%D8%B1%D8%A9-%D8%A7%D9%84%D9%88%D8%AC%D9%87-%D8%A7%D9%84%D8%AC%D8%B3%D9%85/p1413364020' },
    //مجموعة الشعر
    { image: 'https://cdn.salla.sa/yPKPP/IlFtZFoGxFvWmOd9Rcgzf3CD2Lmwc0FFnjNqepiO.png', link: 'https://top-carre.com/%D9%85%D8%AC%D9%85%D9%88%D8%B9%D8%A9-%D8%AA%D9%81%D8%AA%D9%8A%D8%AD-%D8%A7%D9%84%D8%AC%D8%B3%D9%85-%D9%88-%D8%A7%D9%84%D9%88%D8%AC%D9%87/p1563197078' },
    //مجموعة الجسم
    { image: 'https://cdn.salla.sa/yPKPP/7ULE8Y7Ke1QoJbCv4uaEhTjzYn6eYl59rd4eSySu.png', link: 'https://top-carre.com/%D9%85%D8%AC%D9%85%D9%88%D8%B9%D8%A9-%D8%AA%D9%81%D8%AA%D9%8A%D8%AD-%D8%A7%D9%84%D8%AC%D8%B3%D9%85-%D9%88-%D8%A7%D9%84%D9%88%D8%AC%D9%87/p1563197078' }
  ];

  // إضافة ملفات Swiper
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css';
  document.head.appendChild(link);

  const script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js';
  script.onload = () => {
    new Swiper('.experience-slider', {
      slidesPerView: 4,
      spaceBetween: 16,
      loop: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      breakpoints: {
        0: { slidesPerView: 1.5 },
        500: { slidesPerView: 2.2 },
        768: { slidesPerView: 3 },
        1024: { slidesPerView: 4 }
      }
    });
  };
  document.body.appendChild(script);

  // إنشاء القسم
  const section = document.createElement('section');
  section.className = 'experience-section';
  section.innerHTML = `
    <h2 class="section-title">تجارب العملاء</h2>
    <div class="swiper experience-slider">
      <div class="swiper-wrapper">
        ${experiences.map(e => `
          <div class="swiper-slide experience-box">
            <div class="image-wrapper">
              <img src="${e.image}" alt="تجربة">
              <a href="${e.link}" class="experience-btn">تجربة المنتج</a>
            </div>
          </div>
        `).join('')}
      </div>
    </div>
  `;

  const style = document.createElement('style');
  style.textContent = `
    .experience-section {
      width: 100%;
      padding: 40px 5vw;
      background: transparent;
      direction: rtl;
    }

    .section-title {
      font-size: 28px;
      margin-bottom: 30px;
      text-align: right;
      position: relative;
    }

 

    .experience-box {
      border: 2px solid #a0ba89;
      border-radius: 12px;
      overflow: hidden;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      height: 100%;
    }

    .experience-box:hover {
      transform: scale(1.03);
      box-shadow: 0 8px 24px rgba(160, 186, 137, 0.4);
    }

    .image-wrapper {
      position: relative;
      width: 100%;
      aspect-ratio: 4 / 3;
      overflow: hidden;
    }

    .image-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      transition: transform 0.3s ease;
    }

    .image-wrapper:hover img {
      transform: scale(1.05);
    }

    .experience-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #a0ba89;
      color: #fff;
      padding: 3px 6px;
      border-radius: 6px;
      text-decoration: none;
      font-size: 10px;
      font-weight: bold;
      opacity: 0.95;
      transition: background 0.3s, opacity 0.3s;
      z-index: 2;
    }

    .experience-btn:hover {
      background: #8aa46e;
      opacity: 1;
    }
  `;
  document.head.appendChild(style);

  const target = document.querySelector(`.${targetClass.trim()}`);
  if (target) {
    if (insertPosition === 'after') {
      target.insertAdjacentElement('afterend', section);
    } else {
      target.insertAdjacentElement('beforebegin', section);
    }
  }
}
  // للتشغيل:
  insertCustomerExperiencesSection();
  /****************************************/
  //اضافة اللوجو
function insertCustomFooterContent() {
  const target = document.querySelector('.lg\\:col-span-2');
  if (!target) return;

  target.innerHTML = `
    <div class="flex flex-col lg:flex-row lg:items-start items-center gap-4">
      <!-- صورة الشعار -->
      <a href="https://salla.sa/follcare/" class="block">
        <img src="https://cdn.salla.sa/yPKPP/ytSyXZ4qypoohhWa6fYF6OgHXB8LFui9eoaNrPHn.png" alt="Top Care Logo" class="w-32 h-auto object-contain">
      </a>

      <!-- المحتوى النصي والباقي -->
      <div class="flex flex-col items-center lg:items-start text-center lg:text-right">
        <p class="max-w-sm leading-6 mb-4">
          هنا حيثُ التناغم المثالي<br>
          بين خيرات الطبيعة ، ومنتجات العناية ! 🍃
        </p>

        <!-- السوشيال ميديا -->
        <div class="hidden lg:block mb-4">
          <salla-social class="s-social-list hydrated"></salla-social>
        </div>

        <!-- الرقم الضريبي -->
        <div class="flex rtl:space-x-reverse space-x-2 items-center">
          <a class="load-img-onclick" data-modal-id="modal-value-tax" href="#/" alt="311028440300003">
            <img src="https://cdn.salla.network/cdn-cgi/image/fit=scale-down,width=70,height=70,onerror=redirect,format=auto/images/tax.png?v=2.0.5"
              class="w-10 rounded-sm hover:opacity-80 transition-opacity" alt="value added tax">
          </a>
          <div>
            <p class="text-sm text-text-grey mb-1">الرقم الضريبي</p>
            <b class="text-sm">311028440300003</b>
          </div>
        </div>
      </div>
    </div>
  `;
}

// نفذ الفانكشن
insertCustomFooterContent();
// شاشة التحميل باللوجو
function insertLoadingScreen(logoUrl = 'https://cdn.salla.sa/yPKPP/ytSyXZ4qypoohhWa6fYF6OgHXB8LFui9eoaNrPHn.png') {
  // إنشاء عنصر التحميل
  const loader = document.createElement('div');
  loader.id = 'custom-loading-screen';
  loader.innerHTML = `
    <div class="loader-content">
      <img src="${logoUrl}" alt="Logo" class="loader-logo" />
    </div>
  `;

  // إضافة اللودر للصفحة
  document.body.appendChild(loader);

  // إزالة اللودر عند التحميل الكامل
  window.addEventListener('load', () => {
    setTimeout(() => {
      loader.style.opacity = '0';
      setTimeout(() => loader.remove(), 500);
    }, 500); // نصف ثانية بعد التحميل
  });
}

// تشغيل شاشة التحميل
insertLoadingScreen();