/* =====================================================
   المزن 2 - JavaScript احترافي خفيف لثيم واثق
===================================================== */

(function () {
  function ready(fn) {
    if (document.readyState !== "loading") {
      fn();
    } else {
      document.addEventListener("DOMContentLoaded", fn);
    }
  }

  ready(function () {
    var banner = document.querySelector("#component-1005403127");
    var quickLinks = document.querySelector("#component-1429497871");
    var categories = document.querySelector("#component-2062506711");
    var features = document.querySelector("#component-655456008");
    var reviews = document.querySelector("#component-1895798281");
    var duplicateReviews = document.querySelector("#component-1596267733");

    /* ترتيب الصفحة */
    if (banner && quickLinks) {
      banner.insertAdjacentElement("afterend", quickLinks);
    }

    if (quickLinks && categories) {
      quickLinks.insertAdjacentElement("afterend", categories);
    }

    if (categories && features) {
      categories.insertAdjacentElement("afterend", features);
    }

    if (features && reviews) {
      features.insertAdjacentElement("afterend", reviews);
    }

    /* إخفاء آراء العملاء المكررة */
    if (duplicateReviews) {
      duplicateReviews.style.display = "none";
    }

    /* حركة ظهور ناعمة */
    var revealItems = document.querySelectorAll(
      "#component-1005403127, #component-1429497871, #component-2062506711, #component-655456008, #component-1895798281, .s-product-card, .s-product-card-entry"
    );

    revealItems.forEach(function (item) {
      item.classList.add("mz-reveal");
    });

    if ("IntersectionObserver" in window) {
      var observer = new IntersectionObserver(
        function (entries) {
          entries.forEach(function (entry) {
            if (entry.isIntersecting) {
              entry.target.classList.add("mz-show");
              observer.unobserve(entry.target);
            }
          });
        },
        { threshold: 0.12 }
      );

      revealItems.forEach(function (item) {
        observer.observe(item);
      });
    } else {
      revealItems.forEach(function (item) {
        item.classList.add("mz-show");
      });
    }
  });
})();

(function () {
  function removeOldEnglishReviews() {
    var keywords = [
      'Shahad Alotaibi',
      'Sarah Abdullah',
      'Khaled Elmasry',
      'أميرة حمدي'
    ];

    document.querySelectorAll('section, .s-block, .s-block--testimonials, .testimonials, [class*="testimonial"], [class*="review"]').forEach(function (el) {
      if (el.id === 'mz-global-reviews' || el.id === 'mz-reviews-mini') return;

      var text = (el.innerText || '').trim();

      var hasOldEnglishReview = keywords.some(function (word) {
        return text.indexOf(word) !== -1;
      });

      var hasOldReviewTitle =
        text.indexOf('آراء العملاء') !== -1 &&
        text.indexOf('تقييمات عميلاتنا') === -1 &&
        text.indexOf('نورة') === -1 &&
        text.indexOf('منال') === -1;

      if (hasOldEnglishReview || hasOldReviewTitle) {
        el.style.setProperty('display', 'none', 'important');
        el.remove();
      }
    });
  }

  removeOldEnglishReviews();

  var observer = new MutationObserver(function () {
    removeOldEnglishReviews();
  });

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

(function () {
  function addAlmozenReviews() {
    if (document.querySelector('#mz-global-reviews')) return;

    var reviews = document.createElement('section');
    reviews.id = 'mz-global-reviews';
    reviews.dir = 'rtl';

    reviews.innerHTML = `
<style>
#mz-global-reviews{
  background:#FCFAF7;
  padding:18px 10px 14px;
  margin:18px 0 12px;
  font-family:inherit;
  overflow:hidden
}
#mz-global-reviews *{box-sizing:border-box}
#mz-global-reviews .wrap{max-width:1180px;margin:0 auto}
#mz-global-reviews .head{text-align:center;margin:0 auto 12px;max-width:620px}
#mz-global-reviews .tag{
  display:inline-block;
  background:#F1E6DA;
  color:#8A6A55;
  border:1px solid #E6D9CB;
  border-radius:999px;
  padding:4px 12px;
  font-size:11px;
  font-weight:900
}
#mz-global-reviews h2{
  margin:7px 0 0;
  color:#3B2418;
  font-size:21px;
  font-weight:900;
  line-height:1.2
}

/* الحركة */
#mz-global-reviews .slider{
  width:100%;
  overflow:hidden;
  position:relative;
  padding:1px 0 8px;
}
#mz-global-reviews .track{
  display:flex;
  gap:7px;
  width:max-content;
  animation:mzReviewsMove 38s linear infinite;
  will-change:transform;
}
#mz-global-reviews .slider:hover .track,
#mz-global-reviews .slider:active .track{
  animation-play-state:paused;
}

@keyframes mzReviewsMove{
  0%{transform:translateX(0)}
  100%{transform:translateX(50%)}
}

#mz-global-reviews .card{
  background:#fff;
  border:1px solid #E6D9CB;
  border-radius:15px;
  padding:8px 8px 7px;
  min-height:82px;
  width:285px;
  min-width:285px;
  box-shadow:0 5px 12px rgba(74,53,38,.05);
  overflow:hidden;
  position:relative;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
#mz-global-reviews .card:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 0%,rgba(184,149,94,.08) 45%,transparent 75%);
  transform:translateX(120%);
  animation:mzSoftShine 7s ease-in-out infinite;
  pointer-events:none
}
#mz-global-reviews .card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 22px rgba(74,53,38,.10);
  border-color:#D8C2AA
}
@keyframes mzSoftShine{
  0%,72%{transform:translateX(120%)}
  100%{transform:translateX(-120%)}
}

#mz-global-reviews .top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin-bottom:4px;
  position:relative;
  z-index:1
}
#mz-global-reviews .person{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0
}
#mz-global-reviews .avatar{
  width:26px;
  height:26px;
  min-width:26px;
  border-radius:10px;
  background:#F1E6DA;
  border:1px solid #D8C2AA;
  color:#6B4E3D;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900
}
#mz-global-reviews h3{
  margin:0;
  color:#4A3526;
  font-size:11.8px;
  font-weight:900;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
#mz-global-reviews .stars{
  color:#F4C542!important;
  font-size:12px;
  letter-spacing:.7px;
  white-space:nowrap
}
#mz-global-reviews p{
  margin:0;
  color:#5E4636;
  font-size:10.9px;
  font-weight:700;
  line-height:1.4;
  position:relative;
  z-index:1
}
#mz-global-reviews .only{
  min-height:66px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#FFFEFC
}
#mz-global-reviews .only .top{width:100%;margin-bottom:5px}
#mz-global-reviews .only .stars{
  font-size:15px;
  letter-spacing:1px;
  position:relative;
  z-index:1
}
#mz-global-reviews .face{
  font-size:16px;
  line-height:1;
  margin-top:1px;
  position:relative;
  z-index:1
}

@media(max-width:768px){
  #mz-global-reviews{
    padding:16px 8px 12px;
    margin:14px 0 10px
  }
  #mz-global-reviews h2{font-size:19px}
  #mz-global-reviews .track{
    gap:7px;
    animation-duration:30s
  }
  #mz-global-reviews .card{
    width:180px;
    min-width:180px;
    border-radius:14px;
    padding:8px;
    min-height:78px
  }
  #mz-global-reviews .only{
    width:150px;
    min-width:150px;
    min-height:62px
  }
  #mz-global-reviews p{
    font-size:10.4px;
    line-height:1.35
  }
  #mz-global-reviews h3{font-size:11.3px}
  #mz-global-reviews .avatar{
    width:25px;
    height:25px;
    min-width:25px;
    font-size:10.5px
  }
}

@media(prefers-reduced-motion:reduce){
  #mz-global-reviews .track,
  #mz-global-reviews .card:before{
    animation:none!important
  }
}
</style>

<div class="wrap">
  <div class="head">
    <span class="tag">تقييمات عميلاتنا</span>
    <h2>آراء العملاء</h2>
  </div>

  <div class="slider">
    <div class="track">

      <article class="card"><div class="top"><div class="person"><div class="avatar">ن</div><h3>نورة</h3></div><div class="stars">★★★★★</div></div><p>المنتج نفس الوصف 😍</p></article>
      <article class="card only"><div class="top"><div class="person"><div class="avatar">ل</div><h3>ليان</h3></div></div><div class="stars">★★★★★</div><div class="face">🥰</div></article>
      <article class="card"><div class="top"><div class="person"><div class="avatar">أ</div><h3>أمل</h3></div><div class="stars">★★★★★</div></div><p>تغليف مرتب وجميل</p></article>
      <article class="card"><div class="top"><div class="person"><div class="avatar">ر</div><h3>ريم</h3></div><div class="stars">★★★★★</div></div><p>المقاس ممتاز 👌</p></article>
      <article class="card only"><div class="top"><div class="person"><div class="avatar">د</div><h3>دانا</h3></div></div><div class="stars">★★★★★</div><div class="face">🤩</div></article>
      <article class="card"><div class="top"><div class="person"><div class="avatar">س</div><h3>سارة</h3></div><div class="stars">★★★★★</div></div><p>الجودة ممتازة</p></article>
      <article class="card"><div class="top"><div class="person"><div class="avatar">م</div><h3>مها</h3></div><div class="stars">★★★★★</div></div><p>أنصح فيه بكل ثقة</p></article>
      <article class="card only"><div class="top"><div class="person"><div class="avatar">ج</div><h3>جود</h3></div></div><div class="stars">★★★★★</div><div class="face">😊</div></article>
      <article class="card"><div class="top"><div class="person"><div class="avatar">ه</div><h3>هند</h3></div><div class="stars">★★★★★</div></div><p>الألوان أجمل من الصور</p></article>
      <article class="card"><div class="top"><div class="person"><div class="avatar">ع</div><h3>عبير</h3></div><div class="stars">★★★★★</div></div><p>خدمة راقية</p></article>
      <article class="card only"><div class="top"><div class="person"><div class="avatar">ش</div><h3>شهد</h3></div></div><div class="stars">★★★★★</div><div class="face">😍</div></article>
      <article class="card"><div class="top"><div class="person"><div class="avatar">د</div><h3>دلال</h3></div><div class="stars">★★★★★</div></div><p>وصلني مرتب 📦</p></article>
      <article class="card"><div class="top"><div class="person"><div class="avatar">ل</div><h3>لينا</h3></div><div class="stars">★★★★★</div></div><p>خامة تفتح النفس</p></article>
      <article class="card only"><div class="top"><div class="person"><div class="avatar">غ</div><h3>غلا</h3></div></div><div class="stars">★★★★★</div><div class="face">🩷</div></article>
      <article class="card"><div class="top"><div class="person"><div class="avatar">ه</div><h3>هناء</h3></div><div class="stars">★★★★★</div></div><p>يستحق الشراء</p></article>
      <article class="card"><div class="top"><div class="person"><div class="avatar">م</div><h3>منال</h3></div><div class="stars">★★★★★</div></div><p>تجربة رائعة جدًا</p></article>

      <article class="card"><div class="top"><div class="person"><div class="avatar">ن</div><h3>نورة</h3></div><div class="stars">★★★★★</div></div><p>المنتج نفس الوصف 😍</p></article>
      <article class="card only"><div class="top"><div class="person"><div class="avatar">ل</div><h3>ليان</h3></div></div><div class="stars">★★★★★</div><div class="face">🥰</div></article>
      <article class="card"><div class="top"><div class="person"><div class="avatar">أ</div><h3>أمل</h3></div><div class="stars">★★★★★</div></div><p>تغليف مرتب وجميل</p></article>
      <article class="card"><div class="top"><div class="person"><div class="avatar">ر</div><h3>ريم</h3></div><div class="stars">★★★★★</div></div><p>المقاس ممتاز 👌</p></article>
      <article class="card only"><div class="top"><div class="person"><div class="avatar">د</div><h3>دانا</h3></div></div><div class="stars">★★★★★</div><div class="face">🤩</div></article>
      <article class="card"><div class="top"><div class="person"><div class="avatar">س</div><h3>سارة</h3></div><div class="stars">★★★★★</div></div><p>الجودة ممتازة</p></article>
      <article class="card"><div class="top"><div class="person"><div class="avatar">م</div><h3>مها</h3></div><div class="stars">★★★★★</div></div><p>أنصح فيه بكل ثقة</p></article>
      <article class="card only"><div class="top"><div class="person"><div class="avatar">ج</div><h3>جود</h3></div></div><div class="stars">★★★★★</div><div class="face">😊</div></article>

    </div>
  </div>
</div>
`;

    var footer = document.querySelector('footer, .store-footer, salla-footer');

    if (footer && footer.parentNode) {
      footer.parentNode.insertBefore(reviews, footer);
    } else {
      document.body.appendChild(reviews);
    }
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', addAlmozenReviews);
  } else {
    addAlmozenReviews();
  }
})();

/* إخفاء مميزات سلة الأصلية في الجوال فقط */
@media (max-width:768px){

section:has(.store-features),
section:has(.feature-item),
.s-block--features,
.store-features{
    display:none !important;
}

}

(function () {
  function hideOriginalFeaturesMobile() {
    if (window.innerWidth > 768) return;

    document.querySelectorAll('section, .s-block').forEach(function (el) {
      const text = (el.innerText || '').trim();

      if (
        text.includes('طلبك مضمون') &&
        text.includes('منتجات مختارة بعناية') &&
        text.includes('تسوق بثقة')
      ) {
        // لا يخفي نسخة HTML الخاصة بنا
        if (el.querySelector('#mz-global-reviews')) return;

        el.style.setProperty('display', 'none', 'important');
      }
    });
  }

  document.addEventListener('DOMContentLoaded', hideOriginalFeaturesMobile);
  window.addEventListener('load', hideOriginalFeaturesMobile);
})();

window.addEventListener("load", function () {

  if (window.innerWidth > 768) return;

  const reviews = document.querySelector("#mz-global-reviews");

  if (!reviews) return;

  let el = reviews.previousElementSibling;

  while (el) {

    if (
      el.innerText.includes("طلبك مضمون") &&
      el.innerText.includes("منتجات مختارة بعناية") &&
      el.innerText.includes("تسوق بثقة")
    ) {
      el.remove();
      break;
    }

    el = el.previousElementSibling;
  }

});