document.addEventListener("DOMContentLoaded", () => {
  // إنشاء زر الأيقونة
  const btn = document.createElement("div");
  btn.innerText = "🔥 أقوى المنتجات";
  btn.style.cssText = `
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: #ff6f00;
    color: #fff;
    font-weight: bold;
    padding: 12px 18px;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
    z-index: 9999;
    font-size: 14px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
  `;

  // إنشاء البانل الجانبي
  const panel = document.createElement("div");
  panel.style.cssText = `
    position: fixed;
    top: 0;
    left: -340px;
    width: 320px;
    height: 100%;
    background: #fff;
    box-shadow: 2px 0 10px rgba(0,0,0,0.2);
    transition: left 0.4s ease;
    z-index: 9998;
    padding: 15px;
    overflow-y: auto;
    font-family: Arial, sans-serif;
  `;

  panel.innerHTML = `
    <h3 style="margin-bottom: 15px; text-align:center; color:#ff6f00;">
      ⭐ مقترحات لك ⭐
    </h3>
    <div style="display: flex; flex-direction: column; gap: 15px;">

      <div style="border:1px solid #eee; border-radius:10px; padding:10px; text-align:center;">
        <img src="https://cdn.salla.sa/dPRRYv/bc5fc7ab-3ab8-4ccb-a86e-c323de3347b2-868.88888888889x1000-4ozCqKgDjBrL5wFwbCkJ7uoLHr4bbQrP4LzqXvHi.jpg" style="width:100%; border-radius:8px;" alt="حافظ حرارة">
        <p style="margin:10px 0; font-weight:bold;">🥤 حافظ حرارة وبرودة متعدد الاستخدام</p>
        <a href="https://car-accessories.shop/%D8%AD%D8%A7%D9%81%D8%B8-%D8%AD%D8%B1%D8%A7%D8%B1%D8%A9-%D9%88%D8%A8%D8%B1%D9%88%D8%AF%D8%A9-%D9%85%D8%AA%D8%B9%D8%AF%D8%AF-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%85%D9%86-dlc-%D8%AA%D8%B5%D9%85%D9%8A%D9%85-%D9%85%D8%AD%D9%85%D9%88%D9%84-%D9%88%D8%B9%D9%85%D9%84%D9%8A/p287599207" 
           target="_blank" style="display:inline-block; margin-top:8px; padding:8px 12px; background:#ff6f00; color:#fff; border-radius:6px; text-decoration:none;">
          🔗 اشتري الآن
        </a>
      </div>

      <div style="border:1px solid #eee; border-radius:10px; padding:10px; text-align:center;">
        <img src="https://cdn.salla.sa/dPRRYv/87ee9bad-cfe1-473c-a6d6-c92f9af73109-950.95095095095x1000-g6SxjamtTB4LL2kLHCL5qavLrXRPCSpw7W5IMvqT.png" style="width:100%; border-radius:8px;" alt="غسول سيارات">
        <p style="margin:10px 0; font-weight:bold;">🚗 غسول السيارات 500 مل</p>
        <a href="https://car-accessories.shop/%D8%BA%D8%B3%D9%88%D9%84-%D8%A7%D9%84%D8%B3%D9%8A%D8%A7%D8%B1%D8%A7%D8%AA-500-%D9%85%D9%84/p88204480" 
           target="_blank" style="display:inline-block; margin-top:8px; padding:8px 12px; background:#ff6f00; color:#fff; border-radius:6px; text-decoration:none;">
          🔗 اشتري الآن
        </a>
      </div>

      <div style="border:1px solid #eee; border-radius:10px; padding:10px; text-align:center;">
        <img src="https://cdn.salla.sa/dPRRYv/146f0d55-d796-4441-91d2-95236ada6bc1-1000x904-T7FPOOQFO1I4SrRttR5pWDycVF0C20FucLtYvoxf.png" style="width:100%; border-radius:8px;" alt="جهاز تحكم">
        <p style="margin:10px 0; font-weight:bold;">🎮 جهاز تحكم عن بعد للسيارة</p>
        <a href="https://car-accessories.shop/%D8%AC%D9%87%D8%A7%D8%B2-%D8%AA%D8%AD%D9%83%D9%85-%D8%B9%D9%86-%D8%A8%D8%B9%D8%AF-%D9%84%D8%A7%D8%B3%D9%84%D9%83%D9%8A-%D9%84%D9%84%D8%B3%D9%8A%D8%A7%D8%B1%D8%A9/p2033211428" 
           target="_blank" style="display:inline-block; margin-top:8px; padding:8px 12px; background:#ff6f00; color:#fff; border-radius:6px; text-decoration:none;">
          🔗 اشتري الآن
        </a>
      </div>

    </div>
  `;

  // عند الضغط على الزر
  btn.addEventListener("click", () => {
    panel.style.left = panel.style.left === "0px" ? "-340px" : "0px";
  });

  document.body.appendChild(btn);
  document.body.appendChild(panel);
});


// Car shadow overlay — JS فقط (انسخه للصق في كود JS المخصص بمنصة سلة)
(function () {
  if (window.__carShadowOverlayInited) return;
  window.__carShadowOverlayInited = true;

  const NUM_CARS = 7;
  const BASE_SPEED = 0.2;
  const SHADOW_COLOR = "rgba(0,0,0,0.08)";
  const WHEEL_COLOR = "rgba(0,0,0,0.12)";
  const DPR = Math.max(1, window.devicePixelRatio || 1);

  // إنشاء canvas overlay أعلى كل شيء (لكي يظهر فورًا)
  const canvas = document.createElement("canvas");
  canvas.id = "car-shadow-overlay";
  Object.assign(canvas.style, {
    position: "fixed",
    inset: "0",
    width: "100%",
    height: "100%",
    zIndex: "2147483646", // أعلى طبقة تقريباً
    pointerEvents: "none", // لا يعيق التفاعل
    opacity: "1",
    mixBlendMode: "normal"
  });
  document.body.appendChild(canvas);

  const ctx = canvas.getContext("2d");

  // قياسات
  let W = window.innerWidth;
  let H = window.innerHeight;
  function resize() {
    W = window.innerWidth;
    H = window.innerHeight;
    canvas.width = Math.round(W * DPR);
    canvas.height = Math.round(H * DPR);
    canvas.style.width = W + "px";
    canvas.style.height = H + "px";
    ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
  }
  resize();
  window.addEventListener("resize", resize);

  // إنشاء بيانات العربيات
  const cars = [];
  function resetCars() {
    cars.length = 0;
    for (let i = 0; i < NUM_CARS; i++) {
      const scale = 0.45 + Math.random() * 1.1; // أحجام مختلفة
      const dir = Math.random() > 0.5 ? 1 : -1; // اتجاه الحركة
      const speed = BASE_SPEED * (0.5 + Math.random() * 1.2) * (0.6 + scale / 2) * dir;
      const y = H * (0.45 + Math.random() * 0.35) + (i % 2 === 0 ? -18 : 18);
      const x = Math.random() * W;
      const opacity = 0.03 + Math.random() * 0.08;
      cars.push({ x, y, scale, speed, dir, opacity });
    }
  }
  resetCars();
  window.addEventListener("resize", resetCars);

  // رسم silhouette بسيط لظل العربية
  function drawCarSilhouette(context, x, y, scale, opacity) {
    context.save();
    context.globalAlpha = opacity;
    context.fillStyle = SHADOW_COLOR;
    context.beginPath();
    const w = 120 * scale;
    const h = 36 * scale;
    const roofW = 56 * scale;
    const roofH = 22 * scale;

    // جسم السيارة تقريبي
    context.moveTo(x - w / 2, y);
    context.lineTo(x + w / 2, y);
    context.lineTo(x + w / 2, y - h);
    context.bezierCurveTo(x + w / 2 - 10 * scale, y - h - 2 * scale, x + roofW / 2, y - h - roofH, x + roofW / 2, y - h - roofH);
    context.lineTo(x - roofW / 2, y - h - roofH);
    context.bezierCurveTo(x - roofW / 2, y - h - roofH, x - w / 2 + 10 * scale, y - h - 2 * scale, x - w / 2, y - h);
    context.closePath();
    context.fill();

    // عجلات (ظل أغمق قليلاً)
    context.fillStyle = WHEEL_COLOR;
    const wheelRadius = 9 * scale;
    const wheelY = y + 8 * scale;
    const leftWheelX = x - w * 0.28;
    const rightWheelX = x + w * 0.28;
    context.beginPath();
    context.arc(leftWheelX, wheelY, wheelRadius, 0, Math.PI * 2);
    context.fill();
    context.beginPath();
    context.arc(rightWheelX, wheelY, wheelRadius, 0, Math.PI * 2);
    context.fill();

    context.restore();
  }

  // أنيميشن
  let last = performance.now();
  let running = true;
  function frame(now) {
    if (!running) return;
    const dt = Math.min(40, now - last);
    last = now;

    // مسح بسيط لنتيجة خفيفة (نستخدم clearRect)
    ctx.clearRect(0, 0, W, H);

    // رسم كل الظلال وتحريكها
    for (let i = 0; i < cars.length; i++) {
      const c = cars[i];
      // تحديث موقع
      c.x += c.speed * (dt * 0.06) * (c.dir); // معامل لضبط السرعة المستقرة
      // إعادة الدخول عند الخروج
      if (c.dir > 0) {
        if (c.x > W + 220) c.x = -220;
      } else {
        if (c.x < -220) c.x = W + 220;
      }
      drawCarSilhouette(ctx, c.x, c.y, c.scale, c.opacity);
    }

    requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);

  // تحكم خارجي للتجربة
  window.__toggleCarShadowOverlay = function () {
    running = !running;
    if (running) {
      last = performance.now();
      requestAnimationFrame(frame);
      console.log("car-overlay: resumed");
    } else {
      ctx.clearRect(0, 0, W, H);
      console.log("car-overlay: paused");
    }
  };
  window.__removeCarShadowOverlay = function () {
    running = false;
    try { canvas.remove(); } catch (e) {}
    console.log("car-overlay: removed");
  };

  // توقّف مؤقت لو التبويب غير ظاهر لتحسين الأداء
  document.addEventListener("visibilitychange", () => {
    if (document.hidden) running = false;
    else {
      if (!running) { running = true; last = performance.now(); requestAnimationFrame(frame); }
    }
  });
})();



document.addEventListener("DOMContentLoaded", () => {
  const testimonials = [
    { name: "", text: "خدمة ممتازة وسرعة في التوصيل 👌", rating: 5 },
    { name: "", text: "المنتجات أصلية 100% والأسعار رائعة 💯", rating: 4 },
    { name: "", text: "تجربة تسوق ممتعة وخدمة عملاء محترفة 🤝", rating: 5 },
    { name: "", text: "وصل الطلب أسرع مما توقعت 🚚", rating: 5 }
  ];

  // إنشاء القسم
  const section = document.createElement("section");
  section.id = "testimonials";
  section.style.cssText = `
    background: #fff;
    padding: 60px 20px;
    text-align: center;
    font-family: Arial, sans-serif;
    position: relative;
    overflow: hidden;
  `;

  const title = document.createElement("h2");
  title.textContent = "آراء عملائنا 🗣️";
  title.style.cssText = `
    font-size: 28px;
    margin-bottom: 40px;
    color: #ad6716;
  `;
  section.appendChild(title);

  const card = document.createElement("div");
  card.id = "testimonial-card";
  card.style.cssText = `
    max-width: 500px;
    margin: 0 auto;
    padding: 30px;
    background: linear-gradient(135deg, #f7921e, #ad6716);
    color: #fff;
    border-radius: 20px;
    box-shadow: 0 6px 15px rgba(0,0,0,.15);
    font-size: 18px;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity .6s ease, transform .6s ease;
  `;
  section.appendChild(card);

  // إدراج القسم قبل الفوتر
  const footer = document.querySelector("footer") || document.body;
  footer.parentNode.insertBefore(section, footer);

  let index = 0;
  function showTestimonial(i) {
    const t = testimonials[i];
    const stars = "⭐".repeat(t.rating);
    card.innerHTML = `
      <div style="font-size:22px; margin-bottom:10px;">${stars}</div>
      <p style="margin-bottom:15px;">"${t.text}"</p>
      <strong>- ${t.name}</strong>
    `;
    card.style.opacity = "1";
    card.style.transform = "translateY(0)";
  }

  function nextTestimonial() {
    card.style.opacity = "0";
    card.style.transform = "translateY(50px)";
    setTimeout(() => {
      index = (index + 1) % testimonials.length;
      showTestimonial(index);
    }, 600);
  }

  showTestimonial(index);
  setInterval(nextTestimonial, 4000);
});



(function () {
  const gifSrc = "https://www.animatedimages.org/data/media/67/animated-car-image-0151.gif";
  const showOnceKey = "carGifLoaderShown_v1";
  const brandName = "عنوان السيارات";
  const slogans = [
    "كل ما تحتاجه سيارتك في مكان واحد",
    "رحلة آمنة تبدأ من هنا",
    "مستلزمات سياراتك… بجودة تثق بها"
  ];
  const colors = { orange: "#f7921e", darkOrange: "#ad6716", black: "#000" };

  // تحقق: هل ظهر من قبل؟
  let alreadyShown = false;
  try {
    alreadyShown = !!localStorage.getItem(showOnceKey);
  } catch (e) {}

  // أثناء الاختبار: ?showLoader=1 يجبر العرض
  try {
    const params = new URLSearchParams(location.search);
    if (params.get("showLoader") === "1") alreadyShown = false;
  } catch (e) {}

  if (alreadyShown) return;

  function initLoader() {
    const overlay = document.createElement("div");
    overlay.id = "car-intro-loader";
    overlay.style.cssText = `
      position:fixed;inset:0;
      background:${colors.black};
      display:flex;align-items:center;justify-content:center;
      flex-direction:column;
      z-index:999999;
      transition:opacity .4s ease;
      opacity:1;
    `;

    // الخلفية GIF
    const img = document.createElement("img");
    img.src = gifSrc;
    img.alt = "";
    img.style.cssText = `
      position:absolute;inset:0;
      width:100%;height:100%;
      object-fit:cover;
      filter:brightness(0.6);
      z-index:1;
    `;

    // المحتوى
    const content = document.createElement("div");
    content.style.cssText = `
      position:relative;z-index:2;text-align:center;color:#fff;
      font-family:Arial,sans-serif;padding:20px;
    `;
    const nameEl = document.createElement("h1");
    nameEl.textContent = brandName;
    nameEl.style.cssText = `
      font-size:clamp(24px,5vw,40px);
      font-weight:bold;
      color:${colors.orange};
      margin-bottom:12px;
      text-shadow:0 4px 15px rgba(0,0,0,0.6);
      opacity:0;
      transform:translateY(20px);
      transition:all 1s ease;
    `;
    const sloganEl = document.createElement("p");
    sloganEl.textContent = slogans[0];
    sloganEl.style.cssText = `
      font-size:clamp(14px,3vw,20px);
      margin:0;
      opacity:0;
      transform:translateY(20px);
      transition:all 1s ease .5s;
    `;

    // زر التخطي
    const skipBtn = document.createElement("button");
    skipBtn.textContent = "تخطي";
    skipBtn.style.cssText = `
      position:absolute;top:15px;right:15px;
      background:transparent;
      border:2px solid ${colors.orange};
      color:${colors.orange};
      padding:6px 12px;
      border-radius:6px;
      cursor:pointer;
      z-index:3;
      font-weight:600;
    `;
    skipBtn.onclick = hideLoader;

    content.appendChild(nameEl);
    content.appendChild(sloganEl);

    overlay.appendChild(img);
    overlay.appendChild(content);
    overlay.appendChild(skipBtn);
    document.body.appendChild(overlay);

    // تفعيل الأنيميشن بعد الإضافة للصفحة
    requestAnimationFrame(() => {
      nameEl.style.opacity = "1";
      nameEl.style.transform = "translateY(0)";
      sloganEl.style.opacity = "1";
      sloganEl.style.transform = "translateY(0)";
    });

    // تدوير الجمل
    let idx = 0;
    const sloganInterval = setInterval(() => {
      idx = (idx + 1) % slogans.length;
      sloganEl.textContent = slogans[idx];
    }, 2000);

    // إخفاء تلقائي بعد 6 ثواني
    const autoClose = setTimeout(hideLoader, 6000);

    function hideLoader() {
      clearTimeout(autoClose);
      clearInterval(sloganInterval);
      overlay.style.opacity = "0";
      setTimeout(() => overlay.remove(), 500);
      try {
        localStorage.setItem(showOnceKey, "1");
      } catch (e) {}
    }
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initLoader);
  } else {
    initLoader();
  }
})();

(function () {
  const whatsappNumber = "966538959217"; // رقم الواتساب

  // الرسائل حسب الاختيار
  const options = [
    { text: "🛒 طلب منتج", message: "مرحباً، أريد المساعدة في طلب منتج." },
    { text: "⚙️ مشكلة في الطلب", message: "مرحباً، أواجه مشكلة في طلبي." },
    { text: "❓ استفسار عام", message: "مرحباً، لدي استفسار بخصوص المتجر." }
  ];

  function createSupportIcon() {
    const wrapper = document.createElement("div");
    wrapper.style.cssText = `
      position: fixed;
      bottom: 20px; left: 20px;
      z-index: 99999;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      font-family: Arial, sans-serif;
    `;

    // أيقونة السيارة
    const btn = document.createElement("div");
    btn.id = "support-car-icon";
    btn.style.cssText = `
      width: 90px; height: 90px;
      cursor: pointer;
      transition: transform .3s ease;
      display: flex; align-items: center; justify-content: center;
    `;

    const img = document.createElement("img");
    img.src = "https://www.animatedimages.org/data/media/67/animated-car-image-0421.gif"; 
    img.alt = "دعم فني";
    img.style.cssText = `
      width: 100%; height: 100%;
      object-fit: contain;
      display: block;
    `;
    btn.appendChild(img);

    // الفقاعة (القائمة الصغيرة)
    const bubble = document.createElement("div");
    bubble.style.cssText = `
      background: #fff;
      color: #000;
      border: 2px solid #f7921e;
      border-radius: 12px;
      padding: 12px;
      max-width: 230px;
      font-size: 14px;
      box-shadow: 0 4px 12px rgba(0,0,0,.2);
      opacity: 0;
      transform: scale(0.8);
      transform-origin: bottom left;
      transition: all 0.3s ease;
      pointer-events: none;
    `;
    bubble.innerHTML = `
      <p style="margin:0 0 8px 0; font-weight:bold; color:#ad6716;">
        👋 مرحباً بك
      </p>
      <p style="margin:0 0 10px 0;">إزاي نقدر نساعدك؟</p>
    `;

    // إضافة الأزرار حسب الخيارات
    options.forEach(opt => {
      const optionBtn = document.createElement("button");
      optionBtn.textContent = opt.text;
      optionBtn.style.cssText = `
        display:block;
        width:100%;
        margin:5px 0;
        background:#f7921e;
        color:#fff;
        border:none;
        padding:6px 10px;
        border-radius:6px;
        cursor:pointer;
        text-align:center;
        font-size:14px;
        transition: background .3s ease;
      `;
      optionBtn.onmouseenter = () => optionBtn.style.background = "#ad6716";
      optionBtn.onmouseleave = () => optionBtn.style.background = "#f7921e";
      optionBtn.onclick = (e) => {
        e.stopPropagation();
        const url = `https://wa.me/${whatsappNumber}?text=${encodeURIComponent(opt.message)}`;
        window.open(url, "_blank");
      };
      bubble.appendChild(optionBtn);
    });

    // فتح/إغلاق القائمة
    let bubbleOpen = false;
    btn.onclick = () => {
      bubbleOpen = !bubbleOpen;
      if (bubbleOpen) {
        bubble.style.opacity = "1";
        bubble.style.transform = "scale(1)";
        bubble.style.pointerEvents = "auto";
      } else {
        bubble.style.opacity = "0";
        bubble.style.transform = "scale(0.8)";
        bubble.style.pointerEvents = "none";
      }
    };

    wrapper.appendChild(bubble);
    wrapper.appendChild(btn);
    document.body.appendChild(wrapper);
  }

  // 🔹 تظهر بعد اللودر
  window.addEventListener("load", () => {
    setTimeout(() => {
      if (!document.getElementById("support-car-icon")) {
        createSupportIcon();
      }
    }, 6500);
  });
})();



document.addEventListener("DOMContentLoaded", () => {
  const faqData = [
    {
      icon: "🛒",
      q: "كيف أقدر أطلب منتج من المتجر؟",
      a: "تقدر تضيف المنتج لعربة التسوق وتكمل خطوات الدفع بكل سهولة."
    },
    {
      icon: "🚚",
      q: "هل التوصيل متاح لكل المدن؟",
      a: "نعم، نوصل لجميع مدن المملكة بخدمة شحن سريعة وآمنة."
    },
    {
      icon: "💳",
      q: "ما طرق الدفع المتاحة؟",
      a: "نوفر الدفع عند الاستلام، البطاقة البنكية، والمحافظ الإلكترونية."
    },
    {
      icon: "⏱️",
      q: "كم يستغرق وصول الطلب؟",
      a: "عادة خلال 2-5 أيام عمل حسب موقعك."
    }
  ];

  // إنشاء القسم
  const faqSection = document.createElement("section");
  faqSection.id = "faq-bubbles";
  faqSection.style.cssText = `
    width: 100%;
    background: #fff;
    padding: 40px 20px;
    color: #000;
    text-align: center;
    font-family: Arial, sans-serif;
  `;

  const title = document.createElement("h2");
  title.textContent = "الأسئلة الشائعة ❓";
  title.style.cssText = `
    font-size: 28px;
    margin-bottom: 25px;
    color: #ad6716;
  `;
  faqSection.appendChild(title);

  const container = document.createElement("div");
  container.style.cssText = `
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    max-width: 1000px;
    margin: 0 auto;
  `;

  faqData.forEach((item, index) => {
    const bubble = document.createElement("div");
    bubble.style.cssText = `
      background: linear-gradient(135deg, #f7921e, #ad6716);
      color: #fff;
      border-radius: 20px;
      padding: 15px 20px;
      width: 250px;
      text-align: left;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(0,0,0,.15);
      transition: transform .3s ease, opacity .6s ease, transform .6s ease;
      position: relative;
      opacity: 0;
      transform: translateY(40px);
    `;

    const q = document.createElement("div");
    q.style.cssText = `
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: space-between;
    `;

    q.innerHTML = `<span style="font-size:20px; margin-right:8px;">${item.icon}</span> 
                   ${item.q} 
                   <span style="font-size:18px; color:#000; font-weight:bold;">＋</span>`;

    const a = document.createElement("div");
    a.textContent = item.a;
    a.style.cssText = `
      max-height: 0;
      overflow: hidden;
      line-height: 1.6;
      color: #fff;
      margin-top: 10px;
      transition: max-height .4s ease;
    `;

    let open = false;
    q.onclick = () => {
      open = !open;
      if (open) {
        a.style.maxHeight = "200px";
        q.querySelector("span:last-child").textContent = "－";
      } else {
        a.style.maxHeight = "0";
        q.querySelector("span:last-child").textContent = "＋";
      }
    };

    bubble.appendChild(q);
    bubble.appendChild(a);
    container.appendChild(bubble);
  });

  faqSection.appendChild(container);

  // إدراج فوق الفوتر
  const footer = document.querySelector("footer") || document.body;
  footer.parentNode.insertBefore(faqSection, footer);

  // 🔥 الأنيميشن عند ظهور القسم
  const bubbles = faqSection.querySelectorAll("div[style]");
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        [...bubbles].forEach((bubble, i) => {
          setTimeout(() => {
            bubble.style.opacity = "1";
            bubble.style.transform = "translateY(0)";
          }, i * 200); // يظهر وحدة ورا التانية
        });
        observer.disconnect();
      }
    });
  }, { threshold: 0.2 });

  observer.observe(faqSection);
});

// === [بداية] لودر متحرك زجاجي ===
(function futuristicLoader() {
  const loader = document.createElement("div");
  loader.id = "fancy-loader";

  const styles = document.createElement("style");
  styles.textContent = `
    #fancy-loader {
      position: fixed;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      background: var(--body);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 99999;
      overflow: hidden;
      transition: opacity 0.6s ease;
    }

    .glass-sphere {
      position: relative;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(12px);
      box-shadow:
        0 0 20px rgba(255, 255, 255, 0.2),
        inset 0 0 60px rgba(255, 255, 255, 0.15),
        inset 0 0 20px rgba(255, 255, 255, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      animation: floaty 3s ease-in-out infinite;
      overflow: hidden;
    }

    .glass-sphere::before {
      content: "";
      position: absolute;
      top: -40%;
      left: -40%;
      width: 180%;
      height: 180%;
      background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.05) 60%,
        rgba(255, 255, 255, 0.25) 100%
      );
      transform: rotate(45deg);
      animation: shine 4s linear infinite;
      pointer-events: none;
      border-radius: 50%;
      filter: blur(8px);
    }
    
    .loader-logo {
      position: relative;
      width: 80px;
      height: 80px;
      object-fit: contain;
      filter: drop-shadow(0 0 8px var(--second-color));
      animation: pulse 2s infinite;
      z-index: 2;
    }

    @keyframes floaty {
      0% { transform: translateY(0px) rotate(0deg); }
      50% { transform: translateY(-20px) rotate(5deg); }
      100% { transform: translateY(0px) rotate(0deg); }
    }

    @keyframes pulse {
      0% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.1); opacity: 0.9; }
      100% { transform: scale(1); opacity: 1; }
    }

    @keyframes shine {
      0% { transform: rotate(45deg) translateX(-100%); }
      100% { transform: rotate(45deg) translateX(100%); }
    }
  `;

  const sphere = document.createElement("div");
  sphere.className = "glass-sphere";

  const logo = document.createElement("img");
  logo.className = "loader-logo";
  logo.src = "https://cdn.salla.sa/cdn-cgi/image/fit=scale-down,width=400,height=400,onerror=redirect,format=auto/dPRRYv/K9lGKpdmLr7cxfHmwt3wavefzLC2UGXgtpSsfYqf.png"; // ضع اللوجو هنا

  sphere.appendChild(logo);
  loader.appendChild(sphere);
  document.head.appendChild(styles);
  document.body.appendChild(loader);

  window.addEventListener("load", () => {
    setTimeout(() => {
      loader.style.opacity = "0";
      setTimeout(() => loader.remove(), 600);
    }, 1500);
  });
})();
// === [نهاية] لودر متحرك زجاجي ===

// === تشغيل صوت عند الضغط على زر "أضف للسلة" ===
document.addEventListener("DOMContentLoaded", function () {
  const addSound = new Audio("https://res.cloudinary.com/dgpyctx0v/video/upload/v1753155078/Add_to_Cart_SFX_at9ofh.mp3");

  document.body.addEventListener("click", function (e) {
    const target = e.target.closest("salla-add-product-button");
    if (target) {
      addSound.currentTime = 0;
      addSound.play().catch(err => console.warn("الصوت لم يعمل:", err));
    }
  });
});
// === [نهاية] صوت زر الإضافة للسلة ===

// === تحسين مظهر الناف بار عند التمرير للأسفل ===
document.addEventListener("DOMContentLoaded", function () {
    let alreadyStyled = false;

    const isDesktop = () => window.innerWidth >= 768;

    const styleSheet = document.createElement("style");
    styleSheet.innerHTML = `
        @keyframes slideDownNav {
            0% {
                opacity: 0;
                transform: translateY(-50%);
                box-shadow: none;
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
    `;
    document.head.appendChild(styleSheet);

    window.addEventListener("scroll", function () {
        const navInner = document.querySelector(".main-nav-container.fixed-header .inner");

        if (!navInner) return;

        if (window.scrollY > 30 && !alreadyStyled && isDesktop()) {
            navInner.classList.add("js-styled");
            navInner.style.animation = "slideDownNav 0.6s ease-out";
            navInner.style.background = "rgba(255, 255, 255, 0.15)";
            navInner.style.boxShadow = "0 8px 20px rgba(0, 0, 0, 0.15)";
            navInner.style.borderRadius = "20px";
            navInner.style.backdropFilter = "blur(12px) saturate(180%)";
            navInner.style.webkitBackdropFilter = "blur(12px) saturate(180%)";
            navInner.style.border = "1px solid rgba(255, 255, 255, 0.2)";
            navInner.style.transition = "all 0.4s ease-in-out";
            navInner.style.transform = "translateY(0)";
            navInner.style.width = "90%";
            navInner.style.margin = "30px auto 0 auto";
            navInner.style.maxWidth = "1200px";

            alreadyStyled = true;
        }

        if ((window.scrollY <= 30 || !isDesktop()) && alreadyStyled) {
            navInner.classList.remove("js-styled");
            navInner.removeAttribute("style");
            alreadyStyled = false;
        }
    });

    window.addEventListener("resize", () => {
        alreadyStyled = false;
    });
});
// === [نهاية] تحسين الناف بار عند التمرير ===


// === قسم الأسئلة الشائعة ===
document.addEventListener("DOMContentLoaded", () => {
  const style = document.createElement("style");
  style.innerHTML = `
    #faq-section {
      padding: 2rem 2rem 4rem;
      max-width: 1000px;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1.5rem;
    }

    .faq-bubble {
      position: relative;
      width: 180px;
      height: 180px;
      background: var(--main-color, #4a90e2);
      border-radius: 50%;
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 1rem;
      color: white;
      font-weight: bold;
      cursor: pointer;
      transition: transform 0.4s ease;
    }

    .faq-bubble:hover {
      transform: scale(1.05);
    }

    .faq-answer {
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      background: white;
      color: #333;
      padding: 1rem;
      border-radius: 1rem;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      max-width: 220px;
      width: max-content;
      opacity: 0;
      pointer-events: none;
      transform-origin: top center;
      transition: opacity 0.4s ease, transform 0.4s ease;
      font-weight: normal;
      font-size: 0.95rem;
      z-index: 100;
    }

    .faq-bubble.open .faq-answer {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(10px) scale(1.05);
    }

    @media (max-width: 768px) {
      .faq-bubble {
        width: 140px;
        height: 140px;
        font-size: 0.85rem;
      }

      .faq-answer {
        font-size: 0.85rem;
      }
    }

    @media (max-width: 395px) {
      #faq-section {
        justify-content: center;
      }

      .faq-bubble {
        width: 100% !important;
        max-width: 180px;
        height: auto;
        aspect-ratio: 1 / 1;
      }
    }
  `;
  document.head.appendChild(style);

  const faqSection = document.createElement("section");
  faqSection.id = "faq-section";

  const faqData = [
    {
      question: "خيارات الدفع؟",
      answer: "الدفع عبر مدى، البطاقات، Apple Pay، STC Pay."
    },
    {
      question: "مدة التوصيل؟",
      answer: "يستغرق من ٧ إلى ١٤ يوم عمل عادة."
    },
    {
      question: "هل يمكن الإرجاع؟",
      answer: "نعم، خلال ٧ أيام من الاستلام حسب سياسة المتجر."
    },
    {
      question: "أماكن التوصيل؟",
      answer: "نقوم بالتوصيل لجميع مناطق المملكة."
    }
  ];

  const bubbles = [];

  faqData.forEach(({ question, answer }) => {
    const bubble = document.createElement("div");
    bubble.className = "faq-bubble";
    bubble.innerText = question;

    const answerEl = document.createElement("div");
    answerEl.className = "faq-answer";
    answerEl.innerText = answer;

    bubble.appendChild(answerEl);

    bubble.addEventListener("click", () => {
      bubbles.forEach(b => {
        if (b !== bubble) b.classList.remove("open");
      });
      bubble.classList.toggle("open");
    });

    bubbles.push(bubble);
    faqSection.appendChild(bubble);
  });

  const footer = document.querySelector("footer");
  footer.parentNode.insertBefore(faqSection, footer);
});
// === [نهاية] فقاعات الأسئلة الشائعة ===

// === تأثيرات الموج في الفوتر ===
const footer = document.querySelector('.store-footer');
const wavesContainer = document.createElement('div');
wavesContainer.innerHTML = `
<div class="wave" id="wave1"></div>
<div class="wave" id="wave2"></div>
<div class="wave" id="wave3"></div>
<div class="wave" id="wave4"></div>
`;
wavesContainer.classList.add('waves');
footer.insertBefore(wavesContainer, footer.firstChild);

// === تأثيرات الظهور بالتمرير ===
function handleScroll() {
  const elements = document.querySelectorAll('.banner--fixed img');

  elements.forEach(element => {
    const rect = element.getBoundingClientRect();

    if (rect.top <= window.innerHeight && rect.bottom >= 0) {
      if (!element.classList.contains('visible')) {
        element.classList.add('visible');
      }
    } else {
      if (element.classList.contains('visible')) {
        element.classList.remove('visible');
      }
    }
  });
}

function handleScroll2() {
  const elements = document.querySelectorAll('salla-slider.photos-slider');

  elements.forEach(element => {
    const rect = element.getBoundingClientRect();

    if (rect.top <= window.innerHeight && rect.bottom >= 0) {
      if (!element.classList.contains('visible')) {
        element.classList.add('visible');
      }
    }
  });
}

function handleScroll3() {
  const elements = document.querySelectorAll('.lazy__bg');

  elements.forEach(element => {
    const rect = element.getBoundingClientRect();

    if (rect.top <= window.innerHeight && rect.bottom >= 0) {
      if (!element.classList.contains('visible')) {
        element.classList.add('visible');
      }
    } else {
      if (element.classList.contains('visible')) {
        element.classList.remove('visible');
      }
    }
  });
}

function handleScrollBlur() {
  const elements = document.querySelectorAll('.s-product-card-vertical');

  elements.forEach(element => {
    const rect = element.getBoundingClientRect();

    if (rect.top <= window.innerHeight && rect.bottom >= 0) {
      element.classList.add('visible');
    } else {
      element.classList.remove('visible');
    }
  });
}

window.addEventListener('scroll', handleScroll);
window.addEventListener('scroll', handleScroll2);
window.addEventListener('scroll', handleScroll3);
window.addEventListener('scroll', handleScrollBlur);
handleScroll();
handleScroll2();
handleScroll3();
handleScrollBlur();

// === نص ترويجي متحرك ===
const scrollingDiv = document.createElement('div');
scrollingDiv.className = 'scrolling-text';

const textContent = `
<span>🔥 خصومات لن تجدها إلا هنا </span>
<span>💥💵 أسعار تبدأ من المستحيل </span>
<span>🔥 عروض حصرية تنتظرك الآن</span>
<span>⏳💰 لا تفوت فرص التوفير اليوم </span>
<span>🛒💥 عروض حصرية تنتظرك الآن</span>
`;

scrollingDiv.innerHTML = `
<div class="text-container">
 ${textContent.repeat(4)}
</div>
`;

const sallaSlider = document.querySelector('salla-slider');
if (sallaSlider) {
  sallaSlider.insertAdjacentElement('afterend', scrollingDiv);
}

document.addEventListener("DOMContentLoaded", () => {
  const bannerImages = document.querySelectorAll("salla-slider.photos-slider");
  const bannerObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add("visible");
        observer.unobserve(entry.target);
      }
    });
  }, {
    threshold: 0.1
  });

  bannerImages.forEach(image => bannerObserver.observe(image));

  const productCards = document.querySelectorAll(".s-product-card-entry");
  const productObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add("visible");
        observer.unobserve(entry.target);
      }
    });
  }, {
    threshold: 0.1
  });

  productCards.forEach(card => {
    productObserver.observe(card);
  });

  // زر العودة للأعلى
  const backToTopButton = document.createElement("div");
  backToTopButton.id = "backToTop";
  backToTopButton.innerHTML = `
 <div class="icon">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
     <path d="M12 4l-8 8h6v8h4v-8h6z" />
   </svg>
 </div>
 <svg class="circular-chart" viewBox="0 0 36 36">
   <path class="circle-bg" d="M18 2.0845a15.9155 15.9155 0 1 1 0 31.831a15.9155 15.9155 0 1 1 0-31.831" />
   <path class="circle" d="M18 2.0845a15.9155 15.9155 0 1 1 0 31.831a15.9155 15.9155 0 1 1 0-31.831" />
 </svg>`;
  document.body.appendChild(backToTopButton);

  const style = `
 #backToTop {
   position: fixed;
   bottom: 20px;
   right: 20px;
   width: 60px;
   height: 60px;
   display: none;
   z-index: 99;
 }
 #backToTop .icon {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 2;
   color: var(--main-color);
 }
 .circular-chart {
   width: 100%;
   height: 100%;
   transform: rotate(-90deg);
 }
 .circle-bg {
   fill: none;
   stroke: transparent;
   stroke-width: 3.8;
 }
 .circle {
   fill: none;
   stroke: var(--main-color);
   stroke-width: 3.8;
   stroke-dasharray: 100, 100;
   stroke-linecap: round;
   transition: stroke-dasharray 0.1s linear;
 }
 #backToTop:hover .icon {
   color: var(--second-color);
 }
`;

  const styleSheet = document.createElement("style");
  styleSheet.type = "text/css";
  styleSheet.textContent = style;
  document.head.appendChild(styleSheet);

  window.addEventListener("scroll", () => {
    const scrollTop = window.scrollY;
    const docHeight = document.documentElement.scrollHeight - window.innerHeight;
    const scrollPercent = (scrollTop / docHeight) * 100;

    if (scrollPercent > 1) {
      backToTopButton.style.display = "block";
    } else {
      backToTopButton.style.display = "none";
    }

    const circle = document.querySelector(".circle");
    const offset = 100 - scrollPercent;
    circle.style.strokeDasharray = `${scrollPercent}, 100`;
  });

  backToTopButton.addEventListener("click", () => {
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    });
  });
});

// منع السلوك الافتراضي لبعض الروابط
document.querySelectorAll('a[href=""], a[href="#"]').forEach(link => {
  link.addEventListener('click', event => {
    event.preventDefault();
  });
});

// رسالة تنبيه لخيارات المنتج
const sallaProductOptions = document.querySelector('salla-product-options');
if (sallaProductOptions) {
  const alertMessage = document.createElement('p');
  alertMessage.textContent = "الرجاء اختيار أحد هذا الاختيارات للتمكن من اتمام الشراء";

  alertMessage.style.backgroundColor = '#ffdddd';
  alertMessage.style.color = '#a94442';
  alertMessage.style.padding = '15px';
  alertMessage.style.border = '1px solid #a94442';
  alertMessage.style.borderRadius = '5px';
  alertMessage.style.marginBottom = '10px';
  alertMessage.style.fontWeight = 'bold';
  alertMessage.style.textAlign = 'center';

  sallaProductOptions.insertBefore(alertMessage, sallaProductOptions.firstChild);
}

// زر واتساب عائم
const whatsappFloat = document.createElement('div');
whatsappFloat.className = 'whatsapp-float';

const whatsappPopup = document.createElement('div');
whatsappPopup.className = 'whatsapp-popup';
whatsappPopup.style.display = 'none';

const popupContent = `
<div class="popup-header">
  <div class="avatar-container">
    <img src="https://i.pinimg.com/736x/8b/16/7a/8b167af653c2399dd93b952a48740620.jpg" alt="Avatar" class="avatar-img">
    <span class="support-text">الدعم الفني</span>
  </div>
  <button class="close-popup">×</button>
</div>
<div class="logo-container">
    <a >
      <img src="">
    </a>
  </div>
<div class="popup-body">
  <p>مرحباً بك، نحن متواجدون لخدمتك</p>
  <p>برجاء ارسال رقم:</p>
  <ul class="options-list">
    <li>1- لتتبع الطلب</li>
    <li>2- مشكلة</li>
    <li>3- استفسار</li>
  </ul>
  <a href="https://wa.me/+966503448528" target="_blank" class="whatsapp-button">تواصل معنا</a>
  <div class="adfaz-container">
    <a href="https://adfaz.sa/" target="_blank" class="adfaz-link">
      <img src="https://i.ibb.co/P4YVDmW/Black-Gold-White-Luxury-Royal-Crown-Logo.png" alt="Adfaz" class="adfaz-img">
      <span class="adfaz-text">برمجة وتطوير أدفاز</span>
    </a>
  </div>
</div>
`;


// Insert the banSwiper as the first element in the body
document.body.insertAdjacentHTML('afterbegin', banSwiperHTML);

// === سلايدر مخصص ===
const style = document.createElement("style");
style.innerHTML = `
  .custom-carousel-wrapper {
    width: 100%;
    padding: 30px 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    position: relative;
  }

  .carousel-inner-container {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
    transition: transform 0.5s ease;
  }

  .custom-carousel-item {
    flex-shrink: 0;
    height: 420px;
    width: 90px;
    border-radius: 30px;
    overflow: hidden;
    transition: all 0.4s ease;
    opacity: 0.6;
    cursor: pointer;
    position: relative;
    z-index: 1;
  }

  .custom-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease;
  }

  .custom-carousel-item.active {
    width: 1024px;
    height: 576px;
    border-radius: 30px;
    opacity: 1;
    z-index: 2;
  }

  .custom-carousel-item.active img {
    object-fit: cover;
  }

  /* === Arrows for Desktop === */
  .carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.7);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 24px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    user-select: none;
  }

  .carousel-arrow.left {
    left: 10px;
  }

  .carousel-arrow.right {
    right: 10px;
  }

  /* === Swiper for Mobile & Tablet === */
  @media (max-width: 1023px) {
    .custom-carousel-wrapper {
      display: none !important;
    }

    .mobile-swiper-container {
      width: 100%;
      padding: 16px 0;
    }

    .swiper-slide img {
      width: 100%;
      height: auto;
      border-radius: 20px;
      object-fit: cover;
    }

    .swiper-pagination-bullets {
      bottom: 8px;
    }
  }

  @media (min-width: 1024px) {
    .mobile-swiper-container {
      display: none !important;
    }
  }
`;
document.head.appendChild(style);

document.addEventListener("DOMContentLoaded", function () {
  const allSliders = Array.from(document.querySelectorAll("salla-slider.photos-slider"));

  allSliders.forEach((slider) => {
    const sliderImgs = Array.from(slider.querySelectorAll(".swiper-slide img"));
    if (sliderImgs.length <= 1) return;

    const imageData = sliderImgs.map((img) => {
      const linkEl = img.closest("a");
      return {
        src: img.src,
        href: linkEl ? linkEl.href : null,
      };
    });

    // إخفاء سلايدر سلة
    slider.style.display = "none";
    slider.style.height = "0";
    slider.style.width = "0";
    slider.style.overflow = "hidden";
    slider.style.opacity = "0";
    slider.style.pointerEvents = "none";
    slider.style.visibility = "hidden";

    // === Desktop Carousel ===
    const wrapper = document.createElement("div");
    wrapper.className = "custom-carousel-wrapper";

    const container = document.createElement("div");
    container.className = "carousel-inner-container";

    const items = [];

    imageData.forEach((data, index) => {
      const item = document.createElement("div");
      item.className = "custom-carousel-item";
      if (index === 0) item.classList.add("active");

      const img = document.createElement("img");
      img.src = data.src;

      if (data.href) {
        const link = document.createElement("a");
        link.href = data.href;
        link.appendChild(img);
        item.appendChild(link);
      } else {
        item.appendChild(img);
      }

      container.appendChild(item);
      items.push(item);
    });

    wrapper.appendChild(container);

    // === Arrows
    const leftArrow = document.createElement("div");
    leftArrow.className = "carousel-arrow left";
    leftArrow.innerHTML = "‹";

    const rightArrow = document.createElement("div");
    rightArrow.className = "carousel-arrow right";
    rightArrow.innerHTML = "›";

    wrapper.appendChild(leftArrow);
    wrapper.appendChild(rightArrow);

    let currentIndex = 0;

    const activateItem = (index) => {
      items.forEach((el) => el.classList.remove("active"));
      items[index].classList.add("active");
    };

    leftArrow.addEventListener("click", () => {
      currentIndex = (currentIndex - 1 + items.length) % items.length;
      activateItem(currentIndex);
    });

    rightArrow.addEventListener("click", () => {
      currentIndex = (currentIndex + 1) % items.length;
      activateItem(currentIndex);
    });

    slider.insertAdjacentElement("afterend", wrapper);

    // === Swiper Slider for Mobile/Tablet ===
    const swiperContainer = document.createElement("div");
    swiperContainer.className = "mobile-swiper-container";

    swiperContainer.innerHTML = `
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          ${imageData
            .map(
              (data) => `
            <div class="swiper-slide">
              ${data.href ? `<a href="${data.href}">` : ""}
                <img src="${data.src}" />
              ${data.href ? `</a>` : ""}
            </div>`
            )
            .join("")}
        </div>
        <div class="swiper-pagination"></div>
      </div>
    `;

    slider.insertAdjacentElement("afterend", swiperContainer);
  });

  // تحميل Swiper
  if (typeof Swiper === "undefined") {
    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(".mySwiper", {
        loop: true,
        autoplay: {
          delay: 3500,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
    };
    document.body.appendChild(script);
  } else {
    new Swiper(".mySwiper", {
      loop: true,
      autoplay: {
        delay: 3500,
        disableOnInteraction: false,
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
  }
});
// === [نهاية] سلايدر مخصص ===

// === أزرار المنتجات ===
const observer = new MutationObserver(() => {
  document.querySelectorAll('.s-product-card-entry').forEach(card => {
    const image = card.querySelector('.s-product-card-image');
    const productId = card.id;
    const originalBtn = card.querySelector('salla-add-product-button button');
    const productLink = card.querySelector('a')?.href;

    if (!image || !productId || !originalBtn || !productLink) return;

    // ✅ زر السلة
    if (!image.querySelector('.custom-cart-button')) {
      const cartBtn = document.createElement('button');
      cartBtn.className = 'custom-cart-button';
      cartBtn.innerHTML = '<i class="sicon-shopping-bag"></i>';
      cartBtn.addEventListener('click', e => {
        e.preventDefault();
        originalBtn.click();
      });
      image.appendChild(cartBtn);
    }

    // ✅ زر المقارنة
    if (!image.querySelector('.compare-btn')) {
      const compareBtn = document.createElement('button');
      compareBtn.className = 'compare-btn';
      compareBtn.innerHTML = '<i class="sicon-compare"></i>';
      compareBtn.title = 'قارن هذا المنتج';

      compareBtn.addEventListener('click', (e) => {
        e.preventDefault();
        let arr = JSON.parse(localStorage.getItem('compare-products') || '[]');
        if (!arr.includes(productId)) arr.push(productId);
        localStorage.setItem('compare-products', JSON.stringify(arr));

        if (arr.length === 2) {
          const cards = arr.map(id => document.getElementById(id));
          const data = cards.map(card => {
            const name = card.querySelector('.s-product-card-content-title')?.innerText || 'بدون اسم';
            const img = card.querySelector('img')?.src || '';
            const price = card.querySelector('.s-product-card-price')?.innerText || 'بدون سعر';
            return { name, img, price };
          });

          const popup = document.createElement('div');
          popup.style = `
            position: fixed;
            top: 10%;
            left: 50%;
            transform: translateX(-50%);
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2);
            width: 90%;
            max-width: 600px;
            z-index: 99999;
          `;
          popup.innerHTML = `
            <h3 style="text-align:center;">🔍 مقارنة المنتجين</h3>
            <div style="display:flex; gap:10px; justify-content:center; flex-wrap:wrap;">
              ${data.map(d => `
                <div style="width: 45%; text-align:center; border:1px solid #eee; border-radius:8px; padding:10px;">
                  <img src="${d.img}" style="width:100px; height:100px; object-fit:cover;" />
                  <h4>${d.name}</h4>
                  <p>${d.price}</p>
                </div>
              `).join('')}
            </div>
            <div style="text-align:center; margin-top:15px;">
              <button onclick="this.parentElement.parentElement.remove()" style="padding: 8px 16px; background:#000; color:#fff; border:none; border-radius:5px;">إغلاق</button>
            </div>
          `;
          document.body.appendChild(popup);
          localStorage.removeItem('compare-products');
        } else {
          alert("✅ تم اختيار المنتج. اختر منتجًا آخر للمقارنة.");
        }
      });

      image.appendChild(compareBtn);
    }

    // ✅ زر العرض السريع 👁️
    if (!image.querySelector('.quick-view-btn')) {
      const quickBtn = document.createElement('button');
      quickBtn.className = 'quick-view-btn';
      quickBtn.innerHTML = '<i class="sicon-eye"></i>';
      quickBtn.title = 'عرض سريع';

      quickBtn.addEventListener('click', () => {
        const popup = document.createElement('div');
        popup.style = `
          position: fixed;
          top: 5%;
          left: 50%;
          transform: translateX(-50%);
          background: white;
          padding: 0;
          border-radius: 10px;
          box-shadow: 0 4px 20px rgba(0,0,0,0.2);
          z-index: 99999;
          width: 90%;
          max-width: 800px;
          height: 80%;
          overflow: hidden;
        `;

        popup.innerHTML = `
          <iframe src="${productLink}" style="width:100%; height:100%; border:none;"></iframe>
          <button onclick="this.parentElement.remove()" style="
            position:absolute;
            top:10px;
            right:10px;
            background:black;
            color:white;
            border:none;
            padding:8px 12px;
            border-radius:5px;
            z-index: 999999;
          ">✖</button>
        `;

        document.body.appendChild(popup);
      });

      image.appendChild(quickBtn);
    }
  });
});

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

// ✅ زر المنتجات المشابهة
const similarObserver = new MutationObserver(() => {
  document.querySelectorAll('.s-product-card-entry').forEach(card => {
    const image = card.querySelector('.s-product-card-image');
    if (!image || image.querySelector('.similar-products-btn')) return;

    const productTitle = card.querySelector('.s-product-card-content-title')?.innerText?.trim();
    if (!productTitle) return;

    const similarBtn = document.createElement('button');
    similarBtn.className = 'similar-products-btn';
    similarBtn.title = 'منتجات مشابهة';
    similarBtn.innerHTML = '<i class="sicon-search"></i>';

    similarBtn.addEventListener('click', async () => {
      const keywords = '';
      const categoryPath = '';

      if (categoryPath) {
        window.location.href = `/${categoryPath}`;
      } else {
        const searchQuery = encodeURIComponent(productTitle + ' ' + keywords);

        try {
          const res = await fetch(`/search?q=${searchQuery}`);
          const text = await res.text();

          if (text.includes('no-results') || text.includes('لم يتم العثور') || res.url.includes('/not-found')) {
            alert('❌ لم يتم العثور على منتجات مشابهة لهذا المنتج.');
          } else {
            window.location.href = `/search?q=${searchQuery}`;
          }
        } catch (err) {
          alert('حدث خطأ أثناء البحث، حاول مرة أخرى.');
        }
      }
    });

    image.appendChild(similarBtn);
  });
});

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

//✅تقييم وهمي
const ratingObserver = new MutationObserver(() => {
  document.querySelectorAll('.s-product-card-entry').forEach(card => {
    if (card.querySelector('.fake-rating')) return;

    const priceEl = card.querySelector('.s-product-card-price');
    if (!priceEl) return;

    const ratingEl = document.createElement('div');
    ratingEl.className = 'fake-rating';

    const fullStars = Math.floor(Math.random() * 3) + 3;
    const emptyStars = 5 - fullStars;

    ratingEl.innerHTML = '★'.repeat(fullStars) + '☆'.repeat(emptyStars);

    priceEl.parentElement.insertBefore(ratingEl, priceEl);
  });
});

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