const lang = document.querySelector("html").lang;
//    fixed-header
const fixedHeader = () => {
  window.addEventListener("scroll", function () {
    header = document.querySelector(".store-header");
    var y = window.scrollY;
    if (y > 52) {
      header.setAttribute(
        "style",
        `position: fixed; top: 0; left: 0; width: 100%; z-index: 2; background-color: #fff;`
      );
    } else {
      header.setAttribute("style", `position: rlative;`);
    }
  });
};

/* ############################################### */
// Go to top product details page after click add btn
const goToTopProductPage = () => {
  const cartBtn = document.querySelector(
    ".product-single .product-form .s-button-element.s-button-btn"
  );

  if (cartBtn) {
    cartBtn.addEventListener("click", function () {
      setTimeout(() => {
        document.documentElement.scrollTo({
          top: 0,
          behavior: "smooth",
        });
      }, 50);
    });
  }
};

window.addEventListener("load", () => {
  fixedHeader();
  // setTimeout(() => {
  //   goToTopProductPage();
  // }, 3000);
});


// تجهيز الأسئلة الشائعة
const showFAQsHomePage = () => {
  var questions = [
    {
      qes: "ايش أنواع الشوايات الموجودة عندكم؟",
      ans: "عندنا عدة أنواع من شوايات الغاز والفحم والكهرباء، تناسب جميع احتياجاتك. وكل نوع يجي بأشكال وأحجام مختلفة عشان تناسب جميع الاستخدامات والمناسبات",
    },
    {
      qes: "كيف أختار الشواية المناسبة لي؟",
      ans: `
        اختيارك للشواية يعتمد على المساحة اللي عندك وعدد الاشخاص ونوع الشواية اللي تفضل، وهي مسألة نسبية اما فحم أو غاز أو تدخين أو كهربائية
        وعلى كل حال، فريقنا موجود عشان يساعدك في اختيار نوع الشواية المناسبة لاحتياجك، تواصل معنا
        <a href="https://bckyrdbbq.com/ar/whatsapp/send" target="_blank">من هنا</a>
      `,
    },
    {
      qes: "إيش نوع الغاز والمنظم المناسب مع الشوايات وفرن البيتزا؟",
      ans: `
        جميع شوايات الغاز وفرن البيتزا تتوافق مع دبة الغاز المنزلية فقط 
        شوايات الغاز تتوافق مع منظم الغاز المنزلي(50 ملي بار ضغط ثابت) فقط 
        فرن البيتزا يتوافق مع المنظم اللي يجي مع الفرن (يعني منظم فرن البيتزا احنا نرسله لك) 
        <br> 
        ⛔تحذير
        <br> 
        شوايات الغاز وفرن البيتزا لا تتوافق مع الدافور أو دبة غاز الرحلات 
        <br> 
        ولا تتوافق مع منظم الضغط العالي
      `,
    },
    {
      qes: "توصلون لجميع مدن المملكة وخارجها؟",
      ans: "نوصل لجميع مدن وقرى المملكة، التوصيل الخارجي للحين ما فيه، ونسعى جاهدين لتوفير هذا الخيار",
    },
    {
      qes: "لو طلبت اليوم متى يوصل طلبي؟",
      ans: `
        التوصيل داخل الرياض من خلال مناديبنا من 2-5 أيام عمل 
        <br>
        وخارج الرياض من خلال شركات الشحن من 2-7 أيام عمل
        <br>
        (ممكن يأخذ وقت أكثر في اوقات المناسبات مثل الاعياد واليوم الوطني وغيرها من المناسبات المجتمعية)
      `,
    },
    {
      qes: "فيه ضمان على منتجاتكم؟",
      ans: `
        ايوه، نوفر ضمان على منتجاتنا ضد العيوب المصنعية فقط، ويجب الابلاغ عن الخلل الموجود بالمنتج خلال 14 يوم كحد اقصى 
        <br>  
        <span style="color: #d44c47;"> ملاحظة هامة: الضمان لا يشمل سوء الاستخدام </span>
        <br>
        فضلا مراجعة شروط الضمان والاستبدال والاسترجاع 
        <a href="https://bckyrdbbq.com/ar/p/dpGd " target="_blank"> هنا </a>
      `,
    },
    {
      qes: "متوفر عندكم الدفع أقساط وكيف الطريقة؟",
      ans: `
        ايوه متوفر الدفع أقساط تابي وتمارا وبدون فوائد وبسعر الكاش 
        <br> 
        بعد ما تضغط على سلة المشتريات ثم "إتمام الطلب"
        انزل تحت وراح تلاقي تابي وتمارا في خيارات الدفع، اختار اللي تبي منهم
        <br> ثم اضغط على"تأكيد الدفع" وسدد قيمة أول قسط
      `,
    },
    {
      qes: "هل تقدمون نصائح أو إرشادات للشواء؟",
      ans: `
        طبعاً! مدونة عالم الشواء فيها الكثير من المواضيع المتنوعة والمهمة في عالم الشواء .
        <br> 
        نوفر مقالات ونصائح في الشواء تناسب المبتدئين والمحترفين 
        <br> 
        وتقدر تشرفنا بزيارة معرضنا وفريقنا الاحترافي ما راح يقصر معاك 
        <br> 
        <a href="https://grill.bckyrdbbq.com/" target="_blank">
        وهنا مدونتنا الثرية
        </a>
      `,
    },
    {
      qes: "هل تتوفر قطع غيار للشوايات؟",
      ans: `
        أكيد، نوفر قطع الغيار لعملاءنا. كل اللي عليك هو التواصل مع خدمة العملاء على الواتس ومشاركتهم رقم طلبك وصورة القطعة اللي تحتاجها 
        <br> 
        وبتتم خدمتك على أكمل وجه
      `,
    },
  ];

  const faqsDiv = document.createElement("div");
  faqsDiv.classList.add("faqs-div");
  var title = document.createElement("h3");
  title.textContent = "لكل سؤال جواب";
  var subtitle = document.createElement("h5");
  subtitle.textContent =
    "ممكن يدور ببالك واحد من هذي الاسئلة، فضلاً اطلع عليها";
  faqsDiv.appendChild(title);
  faqsDiv.appendChild(subtitle);
  const brandsList = document.createElement("div");

  questions.forEach((faq) => {
    let accordion = document.createElement("div");
    accordion.innerHTML = `<button class="accordion">${faq.qes}</button><p class="accordion-content">${faq.ans} <br></p>`;
    brandsList.appendChild(accordion);
  });
  faqsDiv.appendChild(brandsList);

  // show in store
  const testimonials = document.querySelector(".s-block--testimonials");
  const storeCenter = document.querySelector(".store-footer");
  if (testimonials) {
    testimonials.before(faqsDiv);
  } else if (storeCenter) {
    storeCenter.before(faqsDiv);
  }
};

const myfunc = () => {
  const accordionBtns = document.querySelectorAll(".faqs-div .accordion");
  if (accordionBtns) {
    accordionBtns.forEach((accordion) => {
      if (accordion) {
        accordion.onclick = function () {
          // accordion.addEventListener('click', function () {
          this.classList.toggle("is-open");
          let content = this.nextElementSibling;
          if (content.style.maxHeight) {
            content.style.maxHeight = null;
          } else {
            content.style.maxHeight = content.scrollHeight + "px";
          }
          // })
        };
      }
    });
  }
};

const interval = setInterval(() => {
  myfunc();
}, 2000);

/* #### ####  عن المتجر   ###### ###### */
const showOurStory = () => {
  const storyDiv = document.createElement("div");
  storyDiv.classList.add("story-div");
  storyDiv.classList.add("container");
  const details = document.createElement("div");
  details.innerHTML = `
      <h2> فروعنا </h2>
      <p>
      نتشرف بزيارتكم لمعرضنا الرياض
      <br>
      طريق الملك عبدالله- حي الحمراء 
      </p>
      <a href="https://g.co/kgs/TKFsvs" target="_blank" class="btn"> موقع المعرض </a>
  `;
  storyDiv.appendChild(details);
  const storeCenter = document.querySelector(".index .s-block--testimonials");
  if (storeCenter) {
    storeCenter.before(storyDiv);
  }
};
window.addEventListener("load", () => {
  showOurStory();
  showFAQsHomePage();
});

/* #### ####   إظهار فيديو بداية المتجر   ###### ###### */
const CreateHomeVideo = () => {
  const videoMobile = document.createElement("div");
  videoMobile.classList.add("home-video", "container");
  videoMobile.innerHTML = `
        <video class=""
            loop
            muted
            autoplay
            playsinline
            src="https://media.zid.store/cb71dbd7-b319-4ca5-98cf-7dc3dfe2b3b4/6ca63eaa-d909-489e-8cce-c24489049f6b.mp4"
            type="video/mp4"
            style="width: 100%;margin: 0 auto 10px; max-width: 1000px;">
        </video>
    `;
  const section = document.querySelector(".index .app-inner");
  if (section) {
    section.after(videoMobile);
  }
};

/* #### ####   showCategoriesBanner   ###### ###### */
const showCategoriesBanner = () => {
  const banner = document.createElement("div");
  banner.classList.add("product-banner");
  banner.style = `
  text-align: center;
  margin-bottom: 1rem;
  `;
  banner.innerHTML = `
    </a>
      <p style="margin-top: 1rem;">
        عالم الشواء يوفر لك أفضل الشوايات والسموكرات، وكل ما تحتاجه للشواء، لأداء مثالي في كل مرة.
     </p>
     `;
  const storeCenter = document.querySelector(
    ".product-index .main-content > div"
  );
  if (storeCenter) {
    storeCenter.before(banner);
  }
};
const updateSubtitles = () => {
  const subtitles = document.querySelectorAll(
    ".s-product-card-content-subtitle"
  );
  subtitles.forEach((el) => {
    /* (شوايات الغاز) */
    if (el.innerText.includes("شواية غاز بخمس عيون للمناسبات")) {
      //  شواية غاز بخمس عيون وعين جانبية وسيخ شواء
      el.innerText =
        "استمتع بتجربة شواء مثالية للعائلة والمناسبات الكبيرة. هذه الشواية تجمع بين الأداء العالي والتصميم الأنيق لتقديم تجربة طهي مريحة وشاملة، مع خمس عيون وعين جانبية وسيخ شواء.";
    } else if (el.innerText.includes("شواية غاز مثالية مع عجلات قفل")) {
      // شواية غاز مع عين جانبية وحجرة تخزين سفلية
      el.innerText =
        "تحضير وجبات شهية بثبات وأمان في أي مناسبة خارجية. شواية مزودة بعين جانبية وحجرة تخزين سفلية، مع عجلات تسهل التنقل وتضمن الاستقرار في الطهي.";
    } else if (el.innerText.includes("شواية غاز بشعلتين لحرارة مرتفعة")) {
      // شواية غاز بعينين نار
      el.innerText =
        "اجعل حفلات الشواء المنزلية تجربة استثنائية. شعلتين قويتين توفران حرارة مرتفعة لطهي متكامل وسهل.";
      /* (شوايات الفحم والسموكر) */
    } else if (el.innerText.includes("شواية فحم عصرية لأداء موثوق")) {
      // شواية فحم مع رف معدني وعجلات
      el.innerText =
        "تجربة شواء رائعة في المنازل والشاليهات. شواية الفحم العصرية تأتي مع رف معدني وعجلات لتوفير أقصى درجات الفعالية والأمان.";
    } else if (el.innerText.includes("شواية برميل كبيرة للشواء العائلي")) {
      // شواية فحم البرميل الكبيرة
      el.innerText =
        "تمتع بجمعات الشواء العائلية بأجواء استثنائية. تصميم البرميل الكبير يضمن مساحة واسعة وارتفاع مثالي لاستقرار ممتاز وأداء متميز.";
    } else if (el.innerText.includes("شواية فحم تجمع بين الأناقة والكفاءة")) {
      // شواية فحم كبيرة XL:
      el.innerText =
        "إضافة المتعة لكل مناسبة مع مساحة طهي كبيرة تكفي لـ 10-15 شخصًا. هذه الشواية توفر تجربة احترافية وأنيقة في كل مرة.";
    } else if (el.innerText.includes("شواية تدخين لنكهات متنوعة")) {
      // شواية تدخين لحوم (سموكر)
      el.innerText =
        "استمتع بنكهات التدخين الأصيلة لمحبي اللحوم والمندي. شواية التدخين توفر مساحة واسعة وتدعم جميع أنواع التدخين.";
      /* فرن البيتزا */
    } else if (el.innerText.includes("فرن بيتزا يخبز في 60 ثانية")) {
      el.innerText =
        "فرن البيتزا المطور يجمع بين الابتكار والفعالية, يخبز البيتزا النابولية في 60 ثانية بفضل قاعدته الحجرية, جاهز للاستخدام على الغاز المنزلي مع قدّاح ذاتي الإشعال ومزايا أمان فعّالة.";
      // el.innerText = "استمتع بنكهات التدخين الأصيلة لمحبي اللحوم والمندي. شواية التدخين توفر مساحة واسعة وتدعم جميع أنواع التدخين.";
      /* ملحقات الشواء  */
    } else if (el.innerText.includes("حماية ضد اللهب، مريحة وقابلة للتمدد")) {
      //  قفازات مقاومة للحرارة
      el.innerText =
        "حماية ممتازة ضد اللهب بقماش فايبر مقاوم للحريق وسيلكون ضد الانزلاق، مبطنة بقطن عازل، مريحة وقابلة للتمدد للشواء أو التدخين.";
    } else if (el.innerText.includes("جانبان للتوزيع، مقبضان، مثالي")) {
      // صاجة شواء من حديد الزهر
      el.innerText =
        "توفر طهي وشواء ممتازين بفضل جانبيه المتنوعين مخطط واملس، إمكانية استخدامه على الشواية أو الموقد، مع توزيع مثالي للحرارة ومقبضين لسهولة الحمل والتعليق.";
    } else if (el.innerText.includes("مريلة طبخ مع 7 قطع شواء")) {
      // مريلة طبخ مع أدوات شواء - 7 قطع –
      el.innerText =
        "ابدأ الشواء كالمحترفين مع طقم المريلة المكون من 7 قطع، المصنوع من الستانلس ستيل مع مقابض خشبية، والذي يتحول إلى حقيبة محمولة مع جيوب عملية وأداة فتاحة علب.";
    } else if (el.innerText.includes("أسياخ ستانلس، مقبض مضاد للانزلاق")) {
      // اسياخ شواء غير قابلة للصدأ- 8 اسياخ
      el.innerText =
        "أسياخ شواء من الستانلس ستيل المقاوم للصدأ، مزودة بطرف حلقي ومقبض مضاد للانزلاق، تجمع بين المتانة والراحة كونها قابلة لإعادة الاستخدام وصديقة للبيئة.";
      /* ( الباقات ) */
    } else if (el.innerText.includes("كل ما تحتاجه لشواء مثالي في الخارج")) {
      // باقة محترف الشواء
      el.innerText =
        "كل ما تحتاجه لتحضير وجبة شواء مثالية في الهواء الطلق مع شواية فحم وأدوات شواء متكاملة.";
    } else if (el.innerText.includes("استمتع بشواء راقي بشواية غاز مميزة")) {
      // باقة الفخامة
      el.innerText =
        "استمتع بتجربة شواء راقية بشواية غاز عالية الجودة وأدوات شواء فاخرة لمناسباتك المميزة";
    } else if (el.innerText.includes("كل ما تحتاجه لشواء مثالي بشواية XL")) {
      // باقة الشواء المتكاملة
      el.innerText =
        "كل ما تحتاجه لشواء مثالي في تجمعاتك الكبيرة مع شواية فحم XL وأدوات متكاملة للشواء.";
    } else if (el.innerText.includes("شواية غاز وأدوات متينة لشواء احتراف")) {
      // باقة خبير الشواء
      el.innerText =
        "شواية غاز قوية وأدوات شواء متينة توفر لك تجربة شواء احترافية وسهلة.";
    } else if (el.innerText.includes("تدخين احترافي للأطعمة بأدوات متخصصة")) {
      // باقة التدخين الاحترافي
      el.innerText =
        "استمتع بتجربة تدخين احترافية للأطعمة مع شواية تدخين وأدوات متخصصة.";
    } else if (el.innerText.includes("استمتع بشواء الغاز بملحقات مثالية")) {
      // باقة ملحقات الشوي على الغاز
      el.innerText =
        "استكمل تجربة الشواء على الغاز بأفضل الملحقات والأدوات المخصصة لطهي مثالي.";
    } else if (el.innerText.includes("شواء لذيذ بفحم وأدوات متخصصة للشواء")) {
      // باقة ملحقات الشوي على الفحم
      el.innerText =
        "ما تحتاجه لشواء لذيذ على الفحم مع فحم عالي الجودة وأدوات متخصصة للشواء.";
    } else if (el.innerText.includes("شواية غاز 1+5، مثالية للشواء العائل")) {
      // الباقة الملكية
      el.innerText =
        "خيارك الأفضل لجميع مناسبات الشواء العائلية والحفلات الكبيرة شواية غاز 1+5 تتميز بهيكلها المتين والعصري";
    }
  });
};

window.addEventListener("load", () => {
  // CreateHomeVideo();
  showCategoriesBanner();
  
    
  setTimeout(() => {
    updateSubtitles();
  }, 2000);
  setTimeout(() => {
    updateSubtitles();
  }, 5000);
  setTimeout(() => {
    updateSubtitles();
  }, 10000);
});

const showProductPageDetails = () => {
  // تحديد المنتجات
  const CharcoalWheelsProduct_VL1 = window.location.pathname.includes("jobqqX");
  const sideGazOvenProduct_VL2 = window.location.pathname.includes("vrXWao");
  const twoEyesGazOvenProduct_VL3 =
    window.location.pathname.includes("wWEqawW");
  const XLCharcoalProduct_VL4 = window.location.pathname.includes("OqRXoEK");
  const SmokerProduct_VL5 = window.location.pathname.includes("NDyNoG");
  const FiveGazOvenProduct_VL6 = window.location.pathname.includes("ePRaoZP");
  const pizzaOvenProduct = window.location.pathname.includes("AVEYGQ");
  /* الباقات */
  // باقة الفخامة
  const LuxuryPackage_VL2 = window.location.pathname.includes("BWAGXr");
  // باقة محترف الشواء
  const ProfessionalBBQPackage_VL1 =
    window.location.pathname.includes("qBWweV");
  // باقة الشواء المتكاملة
  const CompleteBBQPackage_VL4 = window.location.pathname.includes("mQwvRGW");
  // باقة خبير الشواء
  const GrillExpertPackage_VL3 = window.location.pathname.includes("vXAXRzy");
  // باقة التدخين الإحترافي
  const ProfessionalSmokingpackage_VL5 =
    window.location.pathname.includes("Rjwzxy");
  // الباقة الملكية
  const RoyalPackage_VL6 = window.location.pathname.includes("xAmmOlo");
  // صاج الشواء الكهربائي
  const ElectricPan = window.location.pathname.includes("ydlpGEx") || window.location.pathname.includes("p2072185441");
  
  const descDiv = document.createElement("div");
  descDiv.classList.add("description-div");
  const brandsList = document.createElement("div");

  /* === وصف المنتج === */
  const productDesc = document.querySelector(
    ".product-single .product__description"
  );
  const newDiv = document.createElement("div");
  if (productDesc) {
    Array.from(productDesc.children).forEach((item) => {
      newDiv.appendChild(item);
    });
  }

  let des = document.createElement("div");
  let desTitle = document.createElement("button");
  desTitle.classList.add("accordion");
  desTitle.innerText = lang === "en" ? "Product Description" : "وصف المنتج";
  let desText = document.createElement("p");
  desText.classList.add("accordion-content");
  productDesc ? desText.appendChild(newDiv) : "";
  des.appendChild(desTitle);
  des.appendChild(desText);

  /* === التوصيل والشحن === */
  let delivery = document.createElement("div");
  delivery.innerHTML = `
      <button class="accordion">${
        lang === "en" ? "Delivery & Shipping" : "التوصيل والشحن"
      }</button>
      <p class="accordion-content">
        التوصيل داخل الرياض من خلال مناديبنا  من 2-5 أيام عمل 
        <br>  
        خارج الرياض من خلال شركات الشحن
        من 2-7 أيام عمل
      </p>
  `;

  /* === تعليمات السلامة === */
  let safetyInstructionsForAllGazOvens = document.createElement("div");

  let gazOvenSaftyText = `
    اقرأ دليل التعليمات بعناية قبل الإستخدام واحتفظ به كمرجع مستقبلي، يمكن أن يؤدي عدم الإمتثال للتعليمات إلى أضرار فادحة
    <br>  
    للإطلاع على تعليمات السلامة لشوايات الغاز
    <a href="https://grill.bckyrdbbq.com/2024/06/4356.html" target="_blank">أنقر هنا</a>
  `;
  const pizzaOvenSafty = `
    يتوافق الفرن مع دبة الغاز المنزلية بالمنظم المنزلي المرفق مع الفرن. لا يتوافق مع دبة غاز الرحلات أو الدافور ولا يتوافق مع منظم الضغط العالي 
    <br>
    - تنبية هام: لا تلمس الفرن من الخارج اثناء تشغيله، لأنه سيكون ساخن جدًا و قد يتسبب في حروق لا سمح الله
    <br>
    اقرأ دليل التعليمات بعناية قبل الإستخدام واحتفظ به كمرجع مستقبلي، يمكن أن يؤدي عدم الإمتثال للتعليمات إلى أضرار فادحة
    <br>  
    للإطلاع على طريقة استخدام فرن البيتزا وتعليمات السلامة
    <a href="https://grill.bckyrdbbq.com/2022/10/blog-post.html" target="_blank">أنقر هنا</a>

    <br>
    <img width="100%" src="${
      lang == "en"
        ? "https://cdn.salla.sa/form-builder/3MhB4tPUktghUSfsyffTd1zjzJ7pKIOBOW8gFYDK.jpg"
        : "https://cdn.salla.sa/form-builder/MVYXtnbW0dALtaNzsKQd1GX1ihD62GXcx1wNgtsS.jpg"
    }" />
    <br>  
  `;
  const ElectricPanSafty = `
    اقرأ دليل التعليمات بعناية قبل الإستخدام واحتفظ به كمرجع مستقبلي، يمكن أن يؤدي عدم الإمتثال للتعليمات إلى أضرار فادحة
    <br>  
    يمكنك الاطلاع على تعليمات السلامة والاستخدام من  
    <a href="https://grill.bckyrdbbq.com/2024/09/%D8%AA%D8%B9%D9%84%D9%8A%D9%85%D8%A7%D8%AA-%D8%A7%D9%84%D8%B3%D9%84%D8%A7%D9%85%D8%A9-%D9%88%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%84%D8%B5%D8%A7%D8%AC-%D8%A7%D9%84%D8%B4%D9%88.html" target="_blank"> هنا </a>
  `;
  if (pizzaOvenProduct) {
    gazOvenSaftyText = pizzaOvenSafty;
  } else if (ElectricPan) {
    gazOvenSaftyText = ElectricPanSafty;
  }

  safetyInstructionsForAllGazOvens.innerHTML = `
    <button class="accordion">${
      lang === "en" ? "Safety Instructions" : "تعليمات السلامة"
    }</button>
    <p class="accordion-content">
    ${gazOvenSaftyText}
    </p>
  `;
  /* ===  فيديوهات استعراض المنتج  === */
  let productVideos = document.createElement("div");

  // باقة محترف الشواء= شواية الفحم برف معدني
  const videosList1 = `
 <br>
<iframe width="560" height="315" 
  src="https://www.youtube.com/embed/YOLVDGPJMSs" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
  referrerpolicy="strict-origin-when-cross-origin" 
  allowfullscreen>
</iframe>
<br>

<br>
<iframe width="560" height="315" 
  src="https://www.youtube.com/embed/M9SMoCmfEW8" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
  referrerpolicy="strict-origin-when-cross-origin" 
  allowfullscreen>
</iframe>
<br>
  `;
  // باقة الفخامة= شواية الغاز مع عين جانبية وحجرة تخزين سفلية
  const videosList2 = `
    <br>
    <strong> مقطع فيديو يوضح طريقة تركيب الشواية :</strong><br>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/spLCo5cmci4?si=bhzwyfGrtGxo8t4o" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <br>
    <strong> استعراض شواية الغاز:</strong><br>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Vfp2wyeEBJ0?si=trqF8tbHIgHCWugE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <br>
  `;
  // باقة خبير الشواء= شواية الغاز بعينين نار
  const videosList3 = `
    <br>
    <iframe src="https://youtube.com/embed/JYE-hBfSUyU?feature=shared" width="315" height="560" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <br>
  `;

  // باقة الشواء المتكاملة= شواية الفحم الكبيرة xl
  const videosList4 = `
    <br>
    <iframe src="https://www.youtube.com/embed/GeaV-xzf6A0?si=BtOhcs3IXXBu39c0" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <br>
    <iframe src="https://www.youtube.com/embed/esHfuyWhjtE?si=eOCCkzVFNT6KVqDC" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <br>
    <iframe src="https://youtube.com/embed/vYSJEIQ5HNk?si=r079VJhQ-QDgss4c" width="315" height="560" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <br>
  `;

  // باقة التدخين الاحترافي = شواية تدخين اللحوم السموكر
  const videosList5 = `
    <br>
    <iframe src="https://www.youtube.com/embed/B7TG1HGekV4?si=uppNYvg8gjRmK9v8" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <br>
    <iframe src="https://www.youtube.com/embed/tVr8lzD0oHA?si=Al7XtqjSAVZkoJXS" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <br>
  `;

  // شواية غاز بخمس عيون وعين جانبية وسيخ شواء
  const FiveGazOvenVideos = `
    <strong>مقطع فيديو لاستعراض الشواية بشكل تفصيلي: </strong><br>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/VN9qp7g7D3k?showinfo=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <br>
  `;
  // فرن البيتزا المتنقل
  const pizzaOvenVideos = `
    <strong>فيديو استعراضي للفرن بحلّته الجديدة بصحن دوّار:</strong><br>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/xxik-qo58Ng?showinfo=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <br>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/HoBlQtL3m0g?showinfo=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <br>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/-l3_GDkxc9Y?showinfo=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

    <br>
    <strong>مو بس للبيتزا! اتعرف على مميزاته مع شيف أحمد عزيز:</strong><br>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/bI_Lq5a9bYQ?showinfo=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <br>
    <strong>الخُبز العربي خَبزه صار أسهل مع الفرن.. شوف تجربة عثمانيات:</strong><br>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/Um3xDVQma7E?showinfo=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

    <br>
    <strong>تبي تعرف كيف طريقة البيتزا الإيطالية من العجين لين لصلصة؟ تابع شيف ورد تميم:</strong><br>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/ygrD7ghGo8k?showinfo=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    <br>
  `;
  // صاج الشواء الكهربائي
  const ElectricPanVideos = `
   <br>
  <iframe src="https://www.youtube.com/embed/YkC4QTgO2mw" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
  <br>
  <iframe src="https://www.youtube.com/embed/By5felwmsn0" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
  <br>
 <iframe width="560" height="315" 
src="https://www.youtube.com/embed/LBhlCG1HyXA" 
title="YouTube video player" frameborder="0" 
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
allowfullscreen></iframe>
  <br>
`;
      
  productVideos.innerHTML = `
    <button class="accordion">${
      lang === "en" ? "Product Review Videos" : "فيديوهات استعراض المنتج"
    }</button>
    <p class="accordion-content">
    ${
      CharcoalWheelsProduct_VL1 || ProfessionalBBQPackage_VL1 ? videosList1 : ""
    }
    ${sideGazOvenProduct_VL2 || LuxuryPackage_VL2 ? videosList2 : ""}
    ${twoEyesGazOvenProduct_VL3 || GrillExpertPackage_VL3 ? videosList3 : ""}
    ${XLCharcoalProduct_VL4 || CompleteBBQPackage_VL4 ? videosList4 : ""}
    ${SmokerProduct_VL5 || ProfessionalSmokingpackage_VL5 ? videosList5 : ""}
    ${pizzaOvenProduct ? pizzaOvenVideos : ""}
    ${FiveGazOvenProduct_VL6 || RoyalPackage_VL6 ? FiveGazOvenVideos : ""}
    ${ElectricPan ? ElectricPanVideos : ""}
    </p>
  `;

  brandsList.appendChild(des);
  if (
    twoEyesGazOvenProduct_VL3 ||
    LuxuryPackage_VL2 ||
    sideGazOvenProduct_VL2 ||
    GrillExpertPackage_VL3 ||
    FiveGazOvenProduct_VL6 ||
    RoyalPackage_VL6 ||
    pizzaOvenProduct ||
    ElectricPan
  ) {
    brandsList.appendChild(safetyInstructionsForAllGazOvens);
  }
  if (
    CharcoalWheelsProduct_VL1 ||
    ProfessionalBBQPackage_VL1 ||
    sideGazOvenProduct_VL2 ||
    LuxuryPackage_VL2 ||
    twoEyesGazOvenProduct_VL3 ||
    GrillExpertPackage_VL3 ||
    XLCharcoalProduct_VL4 ||
    CompleteBBQPackage_VL4 ||
    SmokerProduct_VL5 ||
    ProfessionalSmokingpackage_VL5 ||
    FiveGazOvenProduct_VL6 ||
    RoyalPackage_VL6 ||
    pizzaOvenProduct ||
    ElectricPan
  ) {
    brandsList.appendChild(productVideos);
  }
  brandsList.appendChild(delivery);
  descDiv.appendChild(brandsList);

  // show in productForm
  const productForm = document.querySelector(".product__description");

  if (productForm) {
    productForm.after(descDiv);
  }
};
const myfunc2 = () => {
  const accordionBtns = document.querySelectorAll(
    ".description-div .accordion"
  );
  if (accordionBtns) {
    accordionBtns.forEach((accordion) => {
      if (accordion) {
        accordion.onclick = function () {
          // accordion.addEventListener('click', function () {
          this.classList.toggle("is-open");
          let content = this.nextElementSibling;
          if (content.style.maxHeight) {
            content.style.maxHeight = null;
          } else {
            content.style.maxHeight = content.scrollHeight + "px";
          }
          // })
        };
      }
    });
  }
};

const interval2 = setInterval(() => {
  myfunc2();
}, 2000);

window.addEventListener("load", () => {
  const productDesc = document.querySelector(
    ".product-single .product__description"
  );
  if (productDesc) {
    const main = document.querySelector(".product-single .main-content");
    main.appendChild(productDesc);
    showProductPageDetails();
  }
});


// Greeting Popup Script for Product Pages
const createGreetingPopup = () => {
  // Get language from HTML tag or default to 'en'
  const lang = document.querySelector("html").lang || 'en';

  // Check if current URL contains allowed product IDs
  const allowedProducts = {
    'BWAGXr': 'باقة الفخامة',
    'xAmmOlo': 'الباقة الملكية',
    'vXAXRzy': 'باقة خبير الشواء',
    'vrXWao': 'شواية غاز مع عين جانبية وحجرة تخزين سفلية',
    'DpPRzAv': 'شواية الغاز بخمس عيون وعين جانبية وسيخ شواء-2',
    'wPjRjz': 'ثلاجة تعتيق وتجفيف اللحوم الذكية'
  };

  const currentPath = window.location.pathname;
  const currentSearch = window.location.search;
  const fullUrl = currentPath + currentSearch;

  let productName = null;
  for (const [productId, name] of Object.entries(allowedProducts)) {
    if (fullUrl.includes(productId)) {
      productName = name;
      break;
    }
  }

  if (!productName) {
    console.log('Popup only shows for specific products');
    return;
  }

  // Check if popup was already dismissed
  const popupDismissed = localStorage.getItem('notify-popup-dismissed');
  if (popupDismissed === 'true') {
    console.log('Popup already dismissed, not showing again');
    return;
  }

  // Create popup content
  const popup = document.createElement('div');
  popup.className = 'greeting-popup';

  // Check if mobile
  const isMobile = window.innerWidth <= 768;

  popup.style.cssText = `
    position: fixed;
    ${isMobile ? `
      bottom: 0;
      left: 0;
      right: 0;
      border-radius: 16px 16px 0 0;
      max-width: 100%;
      width: 100%;
    ` : `
      bottom: 20px;
      ${lang === 'ar' ? 'left: 20px;' : 'right: 20px;'}
      border-radius: 8px;
      max-width: 400px;
      width: 90%;
    `}
    background: #FFFFFF;
    padding: ${isMobile ? '1rem 1.25rem 1.5rem' : '2rem'};
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    text-align: center;
    z-index: 9999;
    transform: translateY(120%);
    transition: transform 0.4s ease;
    border: none;
    font-family: 'DINNextLTArabic-Regular', Arial, sans-serif;
  `;

  // Popup HTML content
  popup.innerHTML = `
    ${isMobile ? `
      <div class="popup-drag-handle" style="
        width: 40px;
        height: 4px;
        background: #FE680D;
        border-radius: 2px;
        margin: 0 auto 0.75rem;
        cursor: grab;
        opacity: 0.5;
      "></div>
    ` : ''}

    <button class="popup-close" style="
      position: absolute;
      top: ${isMobile ? '1rem' : '15px'};
      ${lang === 'ar' ? 'left: 1rem;' : 'right: 1rem;'}
      background: none;
      border: none;
      font-size: ${isMobile ? '28px' : '24px'};
      cursor: pointer;
      color: #FE680D;
      line-height: 1;
      padding: 5px;
      transition: all 0.2s;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    "
    onmouseover="this.style.color='#000000'"
    onmouseout="this.style.color='#FE680D'"
    ontouchstart="this.style.color='#000000'"
    ontouchend="this.style.color='#FE680D'">×</button>

    <h2 style="color: #FE680D; margin-bottom: 1rem; font-size: ${isMobile ? '1.1rem' : '1.5rem'}; font-weight: bold;">
      اعلمني في حال توفر المنتج
    </h2>

    <form id="notify-form" style="text-align: right;">
      <div style="margin-bottom: ${isMobile ? '0.75rem' : '1rem'};">
        <label style="display: block; margin-bottom: 0.4rem; color: #000000; font-weight: 500; font-size: ${isMobile ? '0.85rem' : '0.95rem'};">
          الاسم
        </label>
        <input
          type="text"
          id="customer-name"
          required
          placeholder="أدخل اسمك"
          style="
            width: 100%;
            padding: ${isMobile ? '0.65rem' : '0.75rem'};
            border: 1px solid #FE680D;
            border-radius: 4px;
            font-size: ${isMobile ? '14px' : '1rem'};
            box-sizing: border-box;
            outline: none;
            transition: all 0.3s;
            -webkit-appearance: none;
            appearance: none;
            text-align: right;
            direction: rtl;
          "
          onfocus="this.style.borderColor='#FE680D'; this.style.boxShadow='0 0 0 2px rgba(254, 104, 13, 0.1)'"
          onblur="this.style.boxShadow='none'"
        />
      </div>

      <div style="margin-bottom: ${isMobile ? '1rem' : '1.5rem'};">
        <label style="display: block; margin-bottom: 0.4rem; color: #000000; font-weight: 500; font-size: ${isMobile ? '0.85rem' : '0.95rem'};">
          رقم الجوال
        </label>
        <input
          type="tel"
          id="customer-mobile"
          required
          inputmode="numeric"
          placeholder="أدخل رقم جوالك"
          style="
            width: 100%;
            padding: ${isMobile ? '0.65rem' : '0.75rem'};
            border: 1px solid #FE680D;
            border-radius: 4px;
            font-size: ${isMobile ? '14px' : '1rem'};
            box-sizing: border-box;
            outline: none;
            transition: all 0.3s;
            -webkit-appearance: none;
            appearance: none;
            text-align: right;
            direction: rtl;
          "
          onfocus="this.style.borderColor='#FE680D'; this.style.boxShadow='0 0 0 2px rgba(254, 104, 13, 0.1)'"
          onblur="this.style.boxShadow='none'"
        />
      </div>

      <button type="submit" class="popup-submit" style="
        background-color: #FE680D;
        color: #FFFFFF;
        padding: ${isMobile ? '0.75rem' : '0.875rem 1.5rem'};
        border-radius: 4px;
        border: none;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
        width: 100%;
        font-size: ${isMobile ? '0.95rem' : '1rem'};
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
      "
      onmouseover="this.style.backgroundColor='#E55C0A'; this.style.transform='translateY(-1px)'; this.style.boxShadow='0 4px 12px rgba(254, 104, 13, 0.3)'"
      onmouseout="this.style.backgroundColor='#FE680D'; this.style.transform='translateY(0)'; this.style.boxShadow='none'"
      ontouchstart="this.style.backgroundColor='#E55C0A'"
      ontouchend="this.style.backgroundColor='#FE680D'">
        تأكيد
      </button>
    </form>
  `;

  document.body.appendChild(popup);

  console.log('Popup added to body');
  console.log('Popup element:', popup);

  // Prevent background scroll when touching popup
  popup.addEventListener('touchstart', (e) => {
    e.stopPropagation();
  }, { passive: true });

  popup.addEventListener('touchmove', (e) => {
    // Allow scrolling within the popup if content is scrollable
    const target = e.target;
    const isScrollable = target.scrollHeight > target.clientHeight;

    if (!isScrollable) {
      e.preventDefault();
    }
  }, { passive: false });

  // Drag to close functionality for mobile
  if (isMobile) {
    let startY = 0;
    let currentY = 0;
    let isDragging = false;
    let initialTransform = 0;

    const dragHandle = popup.querySelector('.popup-drag-handle');
    const handleStart = (e) => {
      isDragging = true;
      startY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY;
      currentY = startY;
      popup.style.transition = 'none';
      dragHandle.style.cursor = 'grabbing';
    };

    const handleMove = (e) => {
      if (!isDragging) return;

      currentY = e.type.includes('touch') ? e.touches[0].clientY : e.clientY;
      const deltaY = currentY - startY;

      // Only allow dragging down
      if (deltaY > 0) {
        popup.style.transform = `translateY(${deltaY}px)`;
      }
    };

    const handleEnd = () => {
      if (!isDragging) return;

      isDragging = false;
      const deltaY = currentY - startY;
      popup.style.transition = 'transform 0.4s ease';
      dragHandle.style.cursor = 'grab';

      // Close if dragged down more than 100px
      if (deltaY > 100) {
        closePopup();
      } else {
        // Snap back to position
        popup.style.transform = 'translateY(0)';
      }
    };

    // Touch events
    dragHandle.addEventListener('touchstart', handleStart, { passive: true });
    document.addEventListener('touchmove', handleMove, { passive: true });
    document.addEventListener('touchend', handleEnd);

    // Mouse events (for testing on desktop)
    dragHandle.addEventListener('mousedown', handleStart);
    document.addEventListener('mousemove', handleMove);
    document.addEventListener('mouseup', handleEnd);
  }

  // Show popup with animation
  setTimeout(() => {
    popup.style.transform = 'translateY(0)';
    console.log('Animation applied');
  }, 100);

  // Close popup function
  const closePopup = () => {
    popup.style.transform = 'translateY(120%)';

    // Set flag in localStorage to not show popup again
    localStorage.setItem('notify-popup-dismissed', 'true');

    setTimeout(() => {
      popup.remove();
    }, 400);
  };

  // Close button event
  const closeBtn = popup.querySelector('.popup-close');
  closeBtn.addEventListener('click', closePopup);

  // Form submit event
  const form = popup.querySelector('#notify-form');
  form.addEventListener('submit', async (e) => {
    e.preventDefault();

    const name = document.getElementById('customer-name').value;
    const mobile = document.getElementById('customer-mobile').value;
    const submitBtn = popup.querySelector('.popup-submit');

    // Disable button and show loading state
    submitBtn.disabled = true;
    submitBtn.textContent = 'جاري الإرسال...';
    submitBtn.style.opacity = '0.6';

    try {
      // Send webhook to Make.com
      const saudiTime = new Date().toLocaleString('en-US', {
        timeZone: 'Asia/Riyadh',
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
      });

      const response = await fetch('https://hook.eu2.make.com/2nk3tjeu47qejbf6fkpsr7o6me6kwym3', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          name: name,
          mobile: mobile,
          product: productName,
          timestamp: saudiTime,
          url: window.location.href
        })
      });

      if (response.ok) {
        console.log('Notification request sent successfully:', { name, mobile });

        // Set flag in localStorage to not show popup again
        localStorage.setItem('notify-popup-dismissed', 'true');

        // Show success message
        alert('شكراً! سنقوم بإعلامك عند توفر المنتج');
        closePopup();
      } else {
        throw new Error('Failed to send notification');
      }
    } catch (error) {
      console.error('Error sending notification:', error);

      // Reset button state
      submitBtn.disabled = false;
      submitBtn.textContent = 'تأكيد';
      submitBtn.style.opacity = '1';

      // Show error message
      alert('عذراً، حدث خطأ. الرجاء المحاولة مرة أخرى');
    }
  });

  // Close on ESC key
  document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
      closePopup();
    }
  });
};

// Show popup only on product detail pages
window.addEventListener('load', () => {
  console.log('Greeting popup script loaded');

  // Check if we're on a product detail page
  const isProductPage = document.querySelector('.product-detail') !== null ||
                        document.querySelector('.product-single') !== null;

  console.log('Is product page:', isProductPage);

  if (isProductPage) {
    console.log('Showing popup in 1.5 seconds...');
    setTimeout(() => {
      createGreetingPopup();
      console.log('Popup created');
    }, 1500); // Show after 1.5 seconds
  }
});