document.addEventListener("DOMContentLoaded", () => {
  const hero = document.querySelector("section.s-block--hero-slider");
  if (!hero || document.querySelector(".cfbar")) return;

  const lang = document.documentElement.lang || "ar";
  const isArabic = lang.toLowerCase().startsWith("ar");

  const items = [
    { 
      ar: "توصيل سريع وآمن خلال 48 ساعة",
      en: "Fast Delivery",
      i: "https://cdn.files.salla.network/homepage/504871843/f655cc88-2337-4790-9275-7925e58467f6.webp"
    },
    { 
      ar: "جودة أوروبية ومكونات طبيعية",
      en: "EU Quality",
      i: "https://static.vecteezy.com/system/resources/previews/038/339/183/non_2x/high-quality-line-icon-vector.jpg"
    },
    { 
      ar: "ضمان ذهبي واسترجاع سهل",
      en: "Easy Returns",
      i: "https://cdn.files.salla.network/homepage/504871843/ebdc57c8-8f3a-4439-9579-d88e4560f503.webp"
    }
  ];


  var gt = document.createElement("script");
gt.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";
document.body.appendChild(gt);

function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'ar',
    includedLanguages: 'en',
    autoDisplay: true
  }, document.body);
}

  const style = document.createElement("style");
  style.textContent = `
    .cfbar{
      display:flex;
      gap:12px;
      max-width:1100px;
      margin:-35px auto 20px;
      padding:0 12px;
      position:relative;
      z-index:60;
      direction:${isArabic ? "rtl" : "ltr"};
    }
    .cfbar a{
      flex:1;
      background:#fff;
      border-radius:4px;
      padding:18px 10px;
      text-align:center;
      text-decoration:none;
      color:#111;
      box-shadow:0 2px 8px rgba(0,0,0,.08);
      font-size:12px;
      font-weight:600;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
    }
    .cfbar img{
      width:32px;
      height:32px;
      object-fit:contain;
      margin-bottom:8px;
      display:block;
    }

    @media (min-width: 992px){
      .cfbar a div{
        white-space: nowrap;
      }
    }
  `;
  document.head.appendChild(style);

  const bar = document.createElement("div");
  bar.className = "cfbar";
  bar.innerHTML = items.map(x =>
    `<a href="/">
        <img src="${x.i}" alt="">
        <div>${isArabic ? x.ar : x.en}</div>
     </a>`
  ).join("");

  hero.insertAdjacentElement("afterend", bar);
});

document.addEventListener("DOMContentLoaded", () => {

  // ✅ هنا التعديل المهم
  const faqSection = document.querySelector("section.s-block--faq.s-block-16");
  if (!faqSection) return;

  const branches = [
    { name: "القصر مول", map: "https://www.google.com/maps?q=Sir%20Francis%20Qasr%20Mall&output=embed" },
    { name: "النخيل مول", map: "https://www.google.com/maps?q=Sir%20Francis%20Nakheel%20Mall&output=embed" },
    { name: "واجهة روشن", map: "https://www.google.com/maps?q=Sir%20Francis%20Riyadh%20Front&output=embed" }
  ];

  const section = document.createElement("section");
  section.style.marginTop = "60px";

  section.innerHTML = `
    <div style="text-align:center;margin-bottom:16px">
      <h2 style="font-size:24px;font-weight:900;margin:0;color:#000">
        زورنا في أقرب فرع
      </h2>
      <p style="margin-top:6px;font-size:14px;color:#666">
        اختر الفرع الأقرب لك واستمتع بتجربة سير فرانسيس
      </p>
    </div>

    <div class="tabs"
      style="display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:22px">
    </div>

    <div style="max-width:1100px;margin:0 auto;padding:0 16px">
      <iframe
        style="width:100%;height:380px;border:0;border-radius:20px;
        box-shadow:0 12px 30px rgba(0,0,0,.12)"
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade">
      </iframe>
    </div>
  `;

  const tabs = section.querySelector(".tabs");
  const iframe = section.querySelector("iframe");

  branches.forEach((b, i) => {

    const btn = document.createElement("button");
    btn.type = "button";
    btn.textContent = b.name;

    btn.style.cssText = `
      padding:11px 26px;
      border-radius:999px;
      border:1px solid #ddd;
      background:${i === 0 ? "#000" : "#fff"};
      color:${i === 0 ? "#fff" : "#000"};
      cursor:pointer;
      font-weight:700;
      transition:.3s;
    `;

    btn.onclick = () => {
      tabs.querySelectorAll("button").forEach(el => {
        el.style.background = "#fff";
        el.style.color = "#000";
      });

      btn.style.background = "#000";
      btn.style.color = "#fff";
      iframe.src = b.map;
    };

    tabs.appendChild(btn);

    if (i === 0) iframe.src = b.map;
  });

  // ✅ الآن سيتم إدراجه تحت FAQ رقم 22 مباشرة
  faqSection.insertAdjacentElement("afterend", section);

});


document.addEventListener("DOMContentLoaded", () => {
  if (!window.location.pathname.includes("/cart")) return;

  const section = document.createElement("div");
  section.id = "checkout-products-section";
  section.innerHTML = `
    <section>
      <div class="container">
        <h2>اختيارات رائعة قبل اتمام طلبك</h2>
        <salla-products-list source="selected" source-value="[1090820487,1035933438,1096940575,1522991399, 1408450512,159201483]"></salla-products-list>
      </div>
    </section>
  `;

  const placeSection = () => {
    const target = window.innerWidth <= 768
      ? document.querySelector("#free-shipping")
      : document.querySelector("footer.store-footer");
    if (target && !document.getElementById("checkout-products-section")) {
      target.parentNode.insertBefore(section, target);
    }
  };

  placeSection();
  window.addEventListener("resize", placeSection);

  section.addEventListener("click", e => {
    const btn = e.target.closest("salla-add-product-button");
    if (btn) setTimeout(() => location.reload(), 800);
  });
});



document.querySelectorAll(".s-block__title h2").forEach(h2 => {
    if (h2.textContent.trim() === "-" || h2.textContent.trim() === "") {
        h2.closest(".s-block__title").style.display = "none";
    }
});

(() => {
  if (innerWidth > 768) return;
  if (document.querySelector(".mf")) return;

  const desc = document.querySelector(".product__description");
  if (!desc) return;

  desc.insertAdjacentHTML(
    "afterbegin",
    `
    <div class="mf">
      <div class="mf-item">
        <img src="https://i.postimg.cc/MKmWqx3f/view.webp">
        <div class="mf-title">ضمان ذهبي</div>
        <div class="mf-subtitle"> إسترجاع خلال 7 أيام </div>
      </div>

      <div class="mf-item">
        <img src="https://i.postimg.cc/xCqkR4WD/delivery-truck.png">
        <div class="mf-title">توصيل اكسبريس</div>
        <div class="mf-subtitle">التوصيل السريع لمدينة الرياض</div>
      </div>

      <div class="mf-item">
        <img src="https://cdn.files.salla.network/homepage/504871843/b326331d-f8e4-475a-b24d-d70cf48ac2c4.webp">
        <div class="mf-title">طرق دفع متعددة</div>
        <div class="mf-subtitle">مدى، فيزا، دفع عند الاستلام</div>
      </div>
    </div>

<style>
  .mf{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    padding:10px;
    margin-bottom:12px;
    margin-top: 15px;
  }

  .mf-item{
    background:#f8f9fb;
    border-radius:14px;
    padding:10px 0;
    text-align:center;
    color:#111;
  }

  .mf-title{
    font-size:13px;
    font-weight:700;
    margin-bottom:2px;
  }

  .mf-subtitle{
    font-size:9px;      /* تصغير الخط */
    font-weight:400;     /* أخف */
    line-height:1.4;
    color:#555;          /* أهدى */
  }

  .mf-item img{
    width:30px;
    height:30px;
    margin:0 auto 6px;
    display:block;
    object-fit:contain;
  }
</style>
    `
  );
})();




(() => {
  const STYLE_ID = "lv-installment-style";

  const getPrice = () => {
    const p =
      document.querySelector("salla-installment[price]")?.getAttribute("price") ||
      document.querySelector("salla-add-product-button[amount]")?.getAttribute("amount") ||
      document.querySelector(".flex.whitespace-nowrap h2, .flex.whitespace-nowrap h4")?.textContent ||
      document.querySelector("h2.total-price, .price-wrapper .total-price, h4.text-black.font-black")?.textContent ||
      "";
    return Number(String(p).match(/[\d.]+/g)?.join("") || 0) || 0;
  };

  const run = () => {
    if (document.querySelector(".installment-box")) return;

    const mf = document.querySelector(".mf");
    const price = getPrice();
    if (!mf || !price) return;

    mf.insertAdjacentHTML(
      "afterend",
      `<div class="installment-box">
        <div class="installment-text">
          قسمها إلى 4 دفعات متساوية بقيمة
          <strong>${(price / 4).toFixed(2)} ر.س</strong> مع
        </div>
        <div class="installment-methods">
          <img src="https://i.postimg.cc/k4J88jpZ/Screenshot-2026-01-23-0012578.jpg" alt="Tamara">
          <span class="or">أو</span>
          <img src="https://i.postimg.cc/13RfvgHc/Screenshot-2026-01-23-001257.jpg" alt="Tabby">
        </div>
      </div>`
    );

    if (!document.getElementById(STYLE_ID)) {
      document.head.insertAdjacentHTML(
        "beforeend",
        `<style id="${STYLE_ID}">
          .installment-box{margin:14px auto 0;padding:10px;background:#f8f9fb;border-radius:10px;text-align:center;font-size:12px;max-width:450px;width:90%}
          .installment-text{margin-bottom:10px;font-weight:600}
          .installment-methods{display:flex;justify-content:center;align-items:center;gap:10px}
          .installment-methods img{height:26px;object-fit:contain}
          .or{font-size:13px;color:#666}
        </style>`
      );
    }
  };

  window.addEventListener("load", run, { once: true });
  setTimeout(run, 500);
})();



// ====== إضافة ستايل تلقائي ======
const style = document.createElement("style");
style.innerHTML = `
.faq-content{
  background:#f8f8f8;
  padding:20px;
  margin-top:12px;
  border-radius:10px;
  line-height:2;
}

.faq-row{
  display:flex;
  gap:14px;
  margin-bottom:22px;
  align-items:flex-start;
}

.faq-icon{
  width:28px;
  height:28px;
  stroke:#000;
  stroke-width:2;
  fill:none;
  flex-shrink:0;
  margin-top:4px;
}

.faq-row b{
  display:block;
  font-size:16px;
  margin-bottom:4px;
}

.faq-row p{
  margin:0;
  font-size:14px;
  color:#555;
}
`;
document.head.appendChild(style);


// ====== أيقونات SVG ======
function iconAward(){
return `<svg class="faq-icon" viewBox="0 0 24 24">
<circle cx="12" cy="8" r="6"></circle>
<path d="M8 14l-2 8 6-4 6 4-2-8"></path>
</svg>`;
}

function iconLeaf(){
return `<svg class="faq-icon" viewBox="0 0 24 24">
<path d="M5 21c10 0 14-8 14-16C11 5 5 11 5 21z"></path>
</svg>`;
}

function iconClock(){
return `<svg class="faq-icon" viewBox="0 0 24 24">
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 6v6l4 2"></path>
</svg>`;
}

function iconRefresh(){
return `<svg class="faq-icon" viewBox="0 0 24 24">
<polyline points="23 4 23 10 17 10"></polyline>
<polyline points="1 20 1 14 7 14"></polyline>
<path d="M3.5 9a9 9 0 0114-3.36L23 10M1 14l5.5 4.36A9 9 0 0020.5 15"></path>
</svg>`;
}

function iconTruck(){
return `<svg class="faq-icon" viewBox="0 0 24 24">
<rect x="1" y="3" width="15" height="13"></rect>
<polygon points="16 8 20 8 23 11 23 16 16 16"></polygon>
<circle cx="5.5" cy="18.5" r="2.5"></circle>
<circle cx="18.5" cy="18.5" r="2.5"></circle>
</svg>`;
}


// ====== تشغيل FAQ ======
document.querySelectorAll(".pp-feature__item").forEach(item => {
  item.addEventListener("click", () => {

    const next = item.nextElementSibling;

    // لو المحتوى موجود نحذفه (toggle)
    if (next && next.classList.contains("faq-content")) {
      next.remove();
      return;
    }

    const content = document.createElement("div");
    content.className = "faq-content";

    content.innerHTML = `
      <div class="faq-row">
        <b>1. جودة أوروبية بسعر مثالي</b>
        <p>منتجاتنا بتصميم أوروبي ومعايير تصنيع عالمية.</p>
      </div>

      <div class="faq-row">
        <b>2. ما هي المكونات المستخدمة؟</b>
        <p>من أجود الزيوت الطبيعية بعناية فائقة.</p>
      </div>

      <div class="faq-row">
        <b>3. ثبات يدوم ولمسة فاخرة</b>
        <p>مصممة لتدوم طويلًا طوال اليوم.</p>
      </div>

      <div class="faq-row">
        <b>4. ضمان تجربة 7 أيام</b>
        <p>تقدر تجرب وإذا ما ناسبك الاسترجاع متاح.</p>
      </div>

      <div class="faq-row">
        <b>5. الشحن والتوصيل</b>
        <p>
          السعودية (الرياض – جدة – الدمام): خلال 48 ساعة<br>
          باقي المدن: 2 إلى 5 أيام عمل<br>
          دول الخليج: 2 - 4 أيام
        </p>
      </div>
    `;

    item.after(content);
  });
});
document.querySelectorAll(".pp-feature__item").forEach(item => { if (item.innerText.includes("الأسئلة الشائعة")) item.classList.add("faq-arrow"); });

// ====== إضافة سهم لقسم الأسئلة ======
document.querySelectorAll(".pp-feature__item").forEach(item => {
  if (item.innerText.includes("الأسئلة الشائعة")){
    item.style.cursor = "pointer";
  }
});



document.addEventListener("DOMContentLoaded", () => {
  // للجوال فقط
  if (window.innerWidth > 768) return;

  const videos = {
    "/onXOAgQ": "https://i.top4top.io/m_3596sn81e1.mp4",
    "/EXqQBqQ": "https://b.top4top.io/m_3596gduwo1.mp4",
    "/RAnbeGV": "https://e.top4top.io/m_3596smodu1.mp4",
    "/nEXxVOb": "https://b.top4top.io/m_3596xry4g1.mp4",
    "/vAXVOny": "https://j.top4top.io/m_3596032k31.mp4",
    "/wWrqVen": "https://k.top4top.io/m_359617xqp1.mp4"
  };

  // يحدد الفيديو حسب الرابط
  let chosenSrc = null;
  for (const [path, src] of Object.entries(videos)) {
    if (location.href.includes(path)) {
      chosenSrc = src;
      break;
    }
  }
  if (!chosenSrc) return;

  const videoHTML = (src) => `
    <div class="mobile-product-video" style="margin: 12px 0;">
      <video muted autoplay playsinline loop preload="metadata" style="
        width:100%;
        max-height:520px;
        object-fit:cover;
        border-radius:8px;
        display:block;
      ">
        <source src="${src}" type="video/mp4">
      </video>
    </div>
  `;

  const tryInsert = () => {
    const container = document.querySelector("article#more-content"); // أو "#more-content"
    if (!container) return false;

    // منع التكرار
    if (container.querySelector(".mobile-product-video")) return true;

    container.insertAdjacentHTML("afterbegin", videoHTML(chosenSrc));
    return true;
  };

  // محاولة مباشرة
  if (tryInsert()) return;

  // لو المحتوى يتأخر بالتحميل
  const obs = new MutationObserver(() => {
    if (tryInsert()) obs.disconnect();
  });
  obs.observe(document.documentElement, { childList: true, subtree: true });
});

document.addEventListener("DOMContentLoaded", function () {
  var free = document.getElementById("free-shipping");
  var target = document.querySelector(".pt-5.flex.flex-col.items-start.lg\\:flex-row.pb-6.lg\\:pb-20");
  var msg = document.getElementById("free-shipping-msg");

  if (free) {
    free.style.display = "block";
    free.style.visibility = "visible";
    free.classList.remove("hidden", "lg:hidden", "md:hidden");
  }

  if (free && target) {
    target.before(free);
  }

  if (msg) {
    msg.innerHTML = 'احصل على <b>شحن مجاني</b> عند إضافة <b>350 <i class="sicon-sar"></i></b> للسلة';
  }
});


document.getElementById('cart-button').onclick = () => location.assign('/ar/cart');