document.addEventListener("DOMContentLoaded", function() {
  const faqItems = document.querySelectorAll(".faq-item");

  faqItems.forEach(item => {
    const question = item.querySelector(".q");
    const answer = item.querySelector(".a");

    // نخفي كل الأجوبة بالبداية
    answer.style.display = "none";

    question.addEventListener("click", () => {
      // إذا كان مفتوح، نقفل، وإذا كان مقفول نفتح
      const isVisible = answer.style.display === "block";
      answer.style.display = isVisible ? "none" : "block";
    });
  });
});





/* =================كونتينر الصفحات فقطا================= */







/* =================  الهيدر================= */



(function(){
  // الصفحات التي يظهر فيها الهيدر الجديد
  const pages = [
    "/ar/connect%20with%20us/page-1360506844",
    "/ar/قدّم-طلب/page-813120795",
    "/ar/about-us/page-271304405"
  ];

  const path = window.location.pathname;
  if (!pages.includes(path)) return;

  let header = document.querySelector("header");
  if (!header) {
    header = document.createElement("header");
    document.body.insertBefore(header, document.body.firstChild);
  }
  header.innerHTML = "";

  // إنشاء الهيدر الجديد
  const headerContainer = document.createElement("div");
  headerContainer.className = "custom-header";

  // الروابط على اليمين
  const linksHtml = `
    <div class="nav-links">
      <a href="#" class="big-text">بدون دفعة أولى وقبول فوري</a>
      <a href="https://nttaq.com/ar/">الرئيسية</a>
      <a href="https://nttaq.com/ar/about-us/page-271304405">من نحن</a>
      <a href="https://nttaq.com/ar/connect%20with%20us/page-1360506844">تواصل معنا</a>
    </div>
  `;

  // الزر على اليسار
  const btn = document.createElement("button");
  btn.className = "order-btn";
  btn.type = "button";
  btn.textContent = "اطلب الآن";
  btn.addEventListener("click", function(){
    window.open("https://nttaq.com/ar/whatsapp/send", "_blank"); // يفتح في تبويب جديد
  });

  // عكس الترتيب: الروابط أولاً ثم الزر
  const temp = document.createElement("div");
  temp.innerHTML = linksHtml;
  const navLinksElem = temp.querySelector(".nav-links");
  headerContainer.appendChild(navLinksElem);
  headerContainer.appendChild(btn);

  header.appendChild(headerContainer);
})();
















/* ================= الرئيسيه ================= */
(function () {
    /* ================= إعداد سريع ================= */
    const injectAfterSelector = '.hero-right'; // العنصر الذي نضيف بعده السكشن الجديد
    const anchor = document.querySelector(injectAfterSelector);
    
    if (!anchor) return; // لو العنصر مش موجود، الكود يوقف

    /* ================= CSS للسكشن الجديد ================= */
    const SID = 'hero-like-sara-v2';
    if (!document.getElementById(SID)) {
        const css = `
:root{
    --topBg:#393939;
    --sea:#3a3a3a;
    --card:#e6e6e6;
    --wave-1:#b4b4b4;
    --wave-2:White;
    --white:#ffffff;
    --green:#ed6a23;
    --greenText:#0b3b0a;
    --gold1:#ed6a23;
    --gold2:#ec5006;
    --chipText:#393939;
}
.s-hero{position:relative;background:var(--sea);color:var(--white);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;overflow:hidden}
.s-head{position:relative;background:var(--topBg)}
.s-head__inner{max-width:1320px;margin:0 auto;padding:18px 16px 32px;direction:rtl;position:relative;z-index:2}
.actions{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:18px;direction:rtl}
.action{display:flex;align-items:center;justify-content:space-between;border-radius:22px;padding:18px;background:#fff;box-shadow:0 10px 28px rgba(0,0,0,.18)}
.action a{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;color:#0c2a16;text-decoration:none;font-weight:800;font-size:22px}
.action__icon{flex:0 0 54px;height:54px;border-radius:16px;background:#dfffe8;display:flex;align-items:center;justify-content:center}
.action__icon svg{width:28px;height:28px}
.action--apply{background:var(--green)}
.action--apply a{color:var(--greenText)}
.action--apply .action__icon{background:#baff9a}
.shape{direction:ltr;left:0;line-height:0;overflow:hidden;position:absolute;width:100%}
.shape svg{display:block;width:101%;height:86px}
.shape--head-bottom{bottom:-1px;z-index:0}
.terms{background:var(--card);padding:72px 16px 120px;position:relative}
.terms:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg, transparent 0, transparent 30px);pointer-events:none}
.terms__inner{max-width:1200px;margin:0 auto;text-align:center}
.title{font-size:44px;font-weight:900;margin:0 0 10px}
.sub{font-size:22px;opacity:.9;margin:0 0 36px}
.chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;justify-items:center}
.chip{background:linear-gradient(180deg,var(--gold1),var(--gold2));color:var(--chipText);border-radius:26px;padding:18px 28px;min-height:72px;display:flex;align-items:center;gap:16px;font-weight:900;font-size:24px;box-shadow:0 16px 36px rgba(0,0,0,.22)}
.chip__icon{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center}
.shape--bottom{bottom:-1px;transform:rotate(180deg)}
@media (max-width:1024px){
.actions{grid-template-columns:1fr}
.action a{font-size:20px}
.chips{grid-template-columns:repeat(2,1fr)}
.title{font-size:36px}
}
@media (max-width:560px){
.chips{grid-template-columns:1fr}
.shape svg{height:70px}
}`;
        const style = document.createElement('style');
        style.id = SID;
        style.textContent = css;
        document.head.appendChild(style);
    }

    /* ================== HTML للسكشن الجديد ================== */
    const section = document.createElement('section');
    section.className = 's-hero'; // سكشن مستقل
    section.innerHTML = `
<!-- رأس الأزرار -->
<div class="s-head">
  <div class="s-head__inner">
    <div class="actions">
      <div class="action action--call">
        <a href="tel:+966506616111" aria-label="اتصل بنا">
          <span>اتصل بنا</span>
          <span class="action__icon" title="Call">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#0b3b0a">
              <path d="M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24
                       1.12.37 2.33.56 3.57.56.55 0 1 .45 1 1V21a1 1 0 01-1 1C10.3
                       22 2 13.7 2 3a1 1 0 011-1h4.5c.55 0 1 .45 1 1 0
                       1.24.2 2.45.57 3.57.11.35.03.75-.24
                       1.02l-2.2 2.2z"/>
            </svg>
          </span>
        </a>
      </div>
      <div class="action action--wa">
        <a href="https://wa.me/966506616111" target="_blank" rel="noopener" aria-label="قدّم من الواتس">
          <span>قدّم من الواتس</span>
          <span class="action__icon" title="WhatsApp">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#1d7a3a">
              <path d="M20 12.04c0 4.42-3.58 8-8 8a7.93 7.93 0 01-4.07-1.11L4 20l1.09-3.86A7.94 7.94 0 014 
                       12.04c0-4.42 3.58-8 8-8s8 3.58 8 8zM6.39 16.79l.35.58-.64 
                       2.27 2.33-.61.56.33A6.5 6.5 0 1012 5.54a6.5 6.5 0 
                       00-5.61 9.75zM15.69 14.14c-.2-.1-1.19-.59-1.37-.66-.18-.07-.31-.1-.44.1-.13.2-.51.66-.63.8-.12.13-.23.15-.43.05-.2-.1-.86-.32-1.63-1.02-.6-.53-1-1.19-1.12-1.39-.12-.2-.01-.3.09-.4.09-.09.2-.23.29-.35.1-.12.13-.2.19-.33.06-.13.03-.25-.02-.35s-.44-1.06-.61-1.45c-.16-.39-.33-.33-.44-.33s-.24-.01-.37-.01-.35.05-.54.25c-.19.2-.71.69-.71 1.69s.73 1.96.83 2.1c.1.13 1.43 2.18 3.46 3.06.48.21.85.34 1.14.43.48.15.92.13 1.27.08.39-.06 1.19-.49 1.36-.96.17-.47.17-.87.12-.96-.05-.09-.18-.14-.38-.24z"/>
            </svg>
          </span>
        </a>
      </div>
      <div class="action action--apply">
        <a href="https://salla.sa/NITAQ.SA/connect-with-us/page-1360506844" aria-label="قدّم طلبك الآن">
          <span>قدّم طلبك الآن</span>
          <span class="action__icon" title="Apply">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#0b3b0a">
              <path d="M19 3H5a2 2 0 00-2 2v14l4-4h12a2 2 0 002-2V5a2 2 0 00-2-2zm-2 6H7V7h10v2zM7 11h8v2H7z"/>
            </svg>
          </span>
        </a>
      </div>
    </div>
  </div>
  <div class="shape shape--head-bottom" aria-hidden="true">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
      <path fill="var(--wave-1)" d="M761.9,44.1L643.1,27.2L333.8,98L0,3.8V0l1000,0v3.9"></path>
    </svg>
  </div>
</div>

<!-- قسم الشروط -->
<div class="terms">
  <div class="terms__inner">
    <h2 class="title">شروطنا ميسّرة</h2>
    <p class="sub">فقط تكون</p>
    <div class="chips">
      <div class="chip">
        <span class="chip__icon" aria-hidden="true">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--chipText)">
            <path d="M12 12a5 5 0 100-10 5 5 0 000 10zM5 21v-1a7 7 0 1114 0v1H5z"/>
          </svg>
        </span>
        <span>سعودي</span>
      </div>
      <div class="chip">
        <span class="chip__icon" aria-hidden="true">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--chipText)">
            <path d="M10 4h4a2 2 0 012 2v1h-2V6h-4v1H8V6a2 2 0 012-2zM3 12a2 2 0 012-2h14a2 2 0 012 2v7H3v-7zm7 1v2h4v-2h-4z"/>
          </svg>
        </span>
        <span>موظف</span>
      </div>
      <div class="chip">
        <span class="chip__icon" aria-hidden="true">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="var(--chipText)">
            <path d="M12 3a9 9 0 100 18 9 9 0 000-18zM7 13h3v2H7v-2zm7-6h3v8h-3V7z"/>
          </svg>
        </span>
        <span>+20 عمرك</span>
      </div>
    </div>
  </div>
</div>

<!-- موجة أسفل القسم الأزرق -->
<div class="shape shape--bottom" aria-hidden="true">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
    <path fill="var(--wave-1)" opacity="0.33" d="M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7 c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z"></path>
    <path fill="var(--wave-2)" opacity="0.66" d="M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1 s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z"></path>
    <path fill="var(--wave-1)" d="M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0 h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z"></path>
  </svg>
</div>
`;

    /* إدراج السكشن الجديد بعد البنر مباشرة */
    anchor.insertAdjacentElement('afterend', section);
    
})();




/* ================== قاائمه العناصر ================== */
(function () {
    // ضع selector للسكشن الذي تريدين الإضافة بعده
    const insertAfterSelector = '.s-hero'; // <-- عدلي هنا

    const anchor = document.querySelector(insertAfterSelector);
    if (!anchor) return;

    // إنشاء السكشن
    const section = document.createElement('section');
    section.className = 's-block s-block--banners container s-block--live-editor';
    section.innerHTML = `
<div class="grid one-row md:grid-cols-3 grid-flow-row gap-3 sm:gap-8">
    <div class="banner-entry" data-wow-delay="0.1s">
        <div class="lazy__bg lazy entered loaded" style="background-image: url('https://cdn.salla.sa/form-builder/omRDo58qtNaVW99CcyuNH4LQhwd1pDDEBUq5Eb6N.png');"></div>
        <a href="https://salla.sa/NITAQ.SA/offers" aria-label="link"></a>
    </div>
    <div class="banner-entry" data-wow-delay="0.2s">
        <div class="lazy__bg lazy entered loaded" style="background-image: url('https://cdn.salla.sa/form-builder/SumBwWdOGzGnuwefybw0fAi594kMkNNlwXJsXLxE.png');"></div>
        <a href="https://salla.sa/NITAQ.SA/offers" aria-label="link"></a>
    </div>
    <div class="banner-entry" data-wow-delay="0.3s">
        <div class="lazy__bg lazy entered loaded" style="background-image: url('https://cdn.salla.sa/form-builder/arqjFUkdm83jb2QyMGFdeH6BoHfF1XRllvVvlgGS.png');"></div>
        <a href="https://salla.sa/NITAQ.SA/offers" aria-label="link"></a>
    </div>
</div>
`;

    // إدراج السكشن بعد العنصر المحدد
    anchor.insertAdjacentElement('afterend', section);

    // إضافة CSS للسكشن
    const style = document.createElement('style');
    style.textContent = `
.s-block--banners .grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media(min-width: 768px) {
    .s-block--banners .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.banner-entry {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    height: 200px;
    cursor: pointer;
    transition: transform 0.3s;
}
.banner-entry:hover {
    transform: scale(1.03);
}
.banner-entry .lazy__bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s;
}
.banner-entry a {
    position: absolute;
    top:0; left:0; width:100%; height:100%;
    z-index: 2;
}
`;
    document.head.appendChild(style);
})();








/* ========================== */
/* ======= COUNTERS ========= */
/* ========================== */

const countersData = [
    { id: "c1", value: 83641, duration: 2000, prefix: "", suffix: "", title: "عميل تم خدمته" },
    { id: "c2", value: 98, duration: 2000, prefix: "", suffix: "%", title: "نسبة قبول الطلبات" },
];

const bannersSection = document.querySelector('section.s-block.s-block--banners.container.s-block--live-editor');

if (bannersSection) {
    // إنشاء القسم الجديد للعدادات
    const section = document.createElement('section');
    section.className = "counter-section";
    section.id = "myCounters";
    bannersSection.insertAdjacentElement('afterend', section);

    // إنشاء صناديق العدادات
    countersData.forEach(c => {
        const box = document.createElement("div");
        box.className = "counter-box";

        const number = document.createElement("span");
        number.className = "counter-number";
        number.id = c.id;
        number.textContent = `${c.prefix}0${c.suffix}`;

        const title = document.createElement("h4");
        title.className = "counter-title";
        title.textContent = c.title;

        box.appendChild(number);
        box.appendChild(title);
        section.appendChild(box);
    });

    // دالة تحريك العداد
    function animateCounter(el, value, duration, prefix, suffix) {
        const startTime = performance.now();

        function update(currentTime) {
            const elapsed = currentTime - startTime;
            const progress = Math.min(elapsed / duration, 1);
            const current = Math.floor(progress * value);

            // تأكد أنه يوصل للقيمة النهائية بالضبط
            if (progress === 1) {
                el.textContent = `${prefix}${value.toLocaleString()}${suffix}`;
            } else {
                el.textContent = `${prefix}${current.toLocaleString()}${suffix}`;
            }

            if (progress < 1) requestAnimationFrame(update);
        }
        requestAnimationFrame(update);
    }

    // مراقبة ظهور القسم لتشغيل العدادات
    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                countersData.forEach(c => {
                    const el = document.getElementById(c.id);
                    animateCounter(el, c.value, c.duration, c.prefix, c.suffix);
                });
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.3 });

    observer.observe(section);
}






// ================= إضافة سكشن الآراء قبل الفوتر =================
const footer = document.querySelector('.store-footer');
if(footer){
  const reviewsSection = document.createElement('section');
  reviewsSection.className = 'reviews-section';
  
  reviewsSection.innerHTML = `
    <h2 class="reviews-title">أيش قال عملائنا عنا؟</h2>
    <div class="reviews-slider-container">
      <button class="slider-btn prev-btn">&#10094;</button>
      <div class="reviews-slider">
        <div class="review-box">
          <img src="https://cdn.salla.sa/form-builder/HnrjkGFgpU754sZCTkSXHKkX9qjECl0luURCM006.jpg" alt="صورة العميل">
          <h4>خالد الأحمد</h4>
          <p class="review-text">أشتريت هنا لعيالي وبصراحة شئ لا يعلي عليه</p>
        </div>
        <div class="review-box">
          <img src="https://cdn.salla.sa/form-builder/k0TNY42Oajz3xnvbIBbrIsVZPDZc28pBiUtRStyx.png" alt="صورة العميل">
          <h4>راني المولد</h4>
          <p class="review-text">تعامل سلس وراقي من كل الموجودين في المحل واالحمدلله اخذت الجهاز من عندهم ,ومعه هدية قاعدة جوال</p>
        </div>
        <div class="review-box">
          <img src="https://cdn.salla.sa/form-builder/u5qxJN4ZcSlhOvxxMiiLkkdHNT1WlFiAdEUYn1Oh.jpg" alt="صورة العميل">
          <h4>Ameerah Alharbi</h4>
          <p class="review-text">اشكر موظف شفت المساء علي حسن التعامل ولباقة الاسلوب يستاهل كل التقدير والاحترام الله يعطيه العافية ما قصر دلعت نفسي بأحلي أجهزة</p>
        </div>
        <div class="review-box">
          <img src="https://cdn.salla.sa/form-builder/7BiUnSARv2HHs7HEaI7aLOHA7HHYkOsNWnyylDwI.jpg" alt="صورة العميل">
          <h4>اميرة الرابغي</h4>
          <p class="review-text">صراحة ماني عارفه ايش اقول بس اشكر من صميم القلب الاستاذه هند كانت معي خطوه بخطوه ما قصرت كانت مثال للموظفه الصبوره والراقيه اشكرها من القلب ع كلامها الحلو وأسلوبها الاحلي فعلا الشخص الصح في المكان الصح</p>
        </div>
        <div class="review-box">
          <img src="https://cdn.salla.sa/form-builder/oABwGa3vh4OMN3XUwO4Ud4dH14zz6Hzu7eb96XOQ.jpg" alt="صورة العميل">
          <h4>صلاح علي </h4>
          <p class="review-text">الأخ عبدالكريم محترم وتعاملة جدا راقي وخدوم ومحل للامانه جيد ويخدم الناس</p>
        </div>
      </div>
      <button class="slider-btn next-btn">&#10095;</button>
    </div>
  `;

  footer.parentNode.insertBefore(reviewsSection, footer);
}

// ====================== CSS للسلايدر ======================
const style = document.createElement('style');
style.innerHTML = `
.reviews-section {
  padding: 40px 20px;
  background-color: #fafaf5;
  text-align: center;
}
.reviews-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #071a52;
}
.reviews-slider-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reviews-slider {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 0;
  width: 80%;
}
.review-box {
  flex: 0 0 auto;
  width: 180px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  text-align: center;
}
.review-box img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 0;
}
.review-box h4 {
  font-size: 16px;
  color: #071a52;
  margin: 10px 0 5px 0;
}
.review-text {
  font-size: 14px;
  color: #555;
  padding: 0 5px 10px 5px;
}
.slider-btn {
  background: rgb(237 106 35);
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  padding: 10px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.prev-btn { left: -40px; }
.next-btn { right: -40px; }
.reviews-slider::-webkit-scrollbar {
  height: 6px;
}
.reviews-slider::-webkit-scrollbar-thumb {
  background: rgb(237 106 35);  /* برتقالي */
  border-radius: 3px;
}

`;
document.head.appendChild(style);

// ====================== JS أزرار التحكم ======================
const sliderContainer = document.querySelector('.reviews-slider');
const prevBtn = document.querySelector('.prev-btn');
const nextBtn = document.querySelector('.next-btn');

if(sliderContainer){
  const scrollAmount = 200;
  nextBtn.addEventListener('click', () => {
    sliderContainer.scrollBy({ left: scrollAmount, behavior: 'smooth' });
  });
  prevBtn.addEventListener('click', () => {
    sliderContainer.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
  });
}











document.addEventListener("DOMContentLoaded", function () {
  const targetSection = document.querySelector(".counter-section");
  if (!targetSection) return;

  const wrapper = document.createElement("div");
  wrapper.className = "custom-swiper-section";

  wrapper.innerHTML = `
    <section class="s-block s-block--banners p-left">
      <div class="container">
        <div class="s-block__title text-center">
          <h2 class="w-full da-cp">اشتر وانت مرتاح</h2>
          <p class="w-full !p-0 text-gray-400 da-ts">كل اللي تحتاجه , جودة مضمونة وسرعة في تنفيذ طلبك</p>
        </div>

        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            ${[
              { img: "https://cdn.salla.sa/form-builder/9GWlAPwHMdyG7Df8eErFGgrTXTRJftNw4LQMxhec.png", link: "https://salla.sa/NITAQ.SA/redirect/categories/488237067", label: "الهواتف الذكية" },
              { img: "https://cdn.salla.sa/form-builder/fUiHeTjFFizbppi29sp8Jfrych4zTe8Py8V2Qszn.png", link: "https://salla.sa/NITAQ.SA/redirect/categories/281753323", label: "الأجهزة السمعية والبصرية" },
              { img: "https://cdn.salla.sa/form-builder/nUcQJUk9LmNQRCgnT2yF0SNKvbHsyhc4r1jJjwjj.png", link: "https://salla.sa/NITAQ.SA/redirect/categories/1795799807", label: "السماعات ومكبرات الصوت" },
              { img: "https://cdn.salla.sa/form-builder/Hf2LCQRrgHYCD6NSxQGgb1oRyVfJvBwHL0oqrWnh.png", link: "https://salla.sa/NITAQ.SA/redirect/categories/515296702", label: "الأجهزة اللوحية" },
              { img: "https://cdn.salla.sa/form-builder/zu1Xw0I70QcomMqTfm9JzePQJfmjuQ7K8kgoTRpI.png", link: "https://salla.sa/NITAQ.SA/redirect/categories/1855692429", label: "أجهزة الألعاب والترفيه" },
              { img: "https://cdn.salla.sa/form-builder/usFln0hz5i9U8rby3RSNfSxF5pz0HMCkbjpgUHSO.png", link: "https://salla.sa/NITAQ.SA/redirect/categories/1765363183", label: "الساعات الذكية" }
            ].map(item => `
              <div class="swiper-slide text-center">
                <a href="${item.link}">
                  <img src="${item.img}" alt="${item.label}">
                  <div class="slide-label">${item.label}</div>
                </a>
              </div>
            `).join('')}
          </div>
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
        </div>
      </div>
    </section>
  `;

  targetSection.insertAdjacentElement("afterend", wrapper);

  // تهيئة Swiper
  new Swiper(wrapper.querySelector(".mySwiper"), {
    slidesPerView: 3,
    spaceBetween: 20,
    loop: true,
    autoplay: {
      delay: 2000,
      disableOnInteraction: false,
    },
    navigation: {
      nextEl: wrapper.querySelector(".swiper-button-next"),
      prevEl: wrapper.querySelector(".swiper-button-prev"),
    },
    breakpoints: {
      320: { slidesPerView: 1 },
      768: { slidesPerView: 2 },
      1024: { slidesPerView: 3 }
    }
  });

  // CSS للمستطيل أسفل كل صورة
  const style = document.createElement("style");
  style.innerHTML = `
    .custom-swiper-section .swiper-slide img {
      width: 200px;
      height: 200px;
      object-fit: contain;
      display: block;
      margin: 0 auto;
      border-radius: 8px;
    }
    .custom-swiper-section .slide-label {
      margin-top: 8px;
      background-color: #d4af37;
      color: #fff;
      padding: 5px 10px;
      border-radius: 5px;
      font-size: 14px;
      display: inline-block;
    }
  `;
  document.head.appendChild(style);
});











/* ========================== */
/* =======من نحن ========= */
/* ========================== */



document.addEventListener("DOMContentLoaded", function () {
  function addCommercialQR() {
    const detailsList = document.querySelectorAll("details");

    detailsList.forEach(function (details) {
      const summary = details.querySelector("summary");

      if (summary && summary.innerText.includes("السجل التجاري")) {
        const accBody = details.querySelector(".acc-body");

        if (accBody && !accBody.querySelector("img")) {
          const crNumber = "0000188415"; // رقم السجل التجاري
          const link = `https://eauthenticate.saudibusiness.gov.sa/certificate-details?crn=${crNumber}`;

          // امسح الرقم القديم
          accBody.innerHTML = "";

          // صورة QR
          const qrImg = document.createElement("img");
          qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(link)}`;
          qrImg.alt = "السجل التجاري";
          qrImg.style.display = "block";
          qrImg.style.margin = "10px auto";

          // لينك نصي تحت البركود
          const linkEl = document.createElement("a");
          linkEl.href = link;
          linkEl.target = "_blank";
          linkEl.rel = "noopener";
          linkEl.innerText = "عرض السجل التجاري";
          linkEl.style.display = "block";
          linkEl.style.textAlign = "center";
          linkEl.style.marginTop = "8px";
          linkEl.style.color = "#d4af37";
          linkEl.style.fontWeight = "bold";

          // أضف العناصر
          accBody.appendChild(qrImg);
          accBody.appendChild(linkEl);
        }
      }
    });
  }

  addCommercialQR();
  const observer = new MutationObserver(addCommercialQR);
  observer.observe(document.body, { childList: true, subtree: true });
});



/* ==============الهيدر============ */