/* Add custom Js styles below */ 

/*image mobile slider start*/

(function () {
  let desktopSrc = null; 
  function handleBanner()
  {
    if (!document.body.classList.contains("index")) return;
    const img = document.querySelector( ".s-block--fixed-banner.wide-placeholder img" ); 
    if (!img) return;
    // نخزن صورة الديسكتوب أول مرة بس 
    if (!desktopSrc)
    { desktopSrc = img.getAttribute("src"); }
    if (window.innerWidth <= 768) { 
      // 📱 موبايل
      img.src = "https://i.ibb.co/HDvLfY1T/roz-hero.webp"; 
      img.srcset = ""; }
    else { 
      // 💻 ديسكتوب (رجوع للصورة الأصلية) 
      img.src = desktopSrc; } }
  // عند تحميل الصفحة
  window.addEventListener("load", handleBanner);
  // عند تغيير حجم الشاشة 
  window.addEventListener("resize", handleBanner);
})();



/*image mobile slider end*/
/*nails sec start*/
document.addEventListener("DOMContentLoaded", function () {

  // 🔥 only run on homepage
  if (!document.body.classList.contains("index")) return;

  const section = document.createElement("section");
  section.className = "custom-nails-section";

  section.innerHTML = `
    <div class="nails-container">
      
      <div class="nails-image left">
        <img src="https://i.ibb.co/b5Kqkr6k/nails1.webp" alt="manicure">
      </div>

      <div class="nails-content">
        <p class="subtitle">استمتعي بخدمات المانيكير والباديكير باحترافية عالية</p>
        
        <h2>
          <span class="highlight">لأظــافــر نظيفــة</span>، صحية،<br>
          ومظهر أنيق يدوم.
        </h2>

        <a href="https://ronzaura.com/%D8%A7%D9%84%D8%B9%D9%86%D8%A7%D9%8A%D8%A9-%D8%A8%D8%A7%D9%84%D8%A7%D8%B8%D8%A7%D9%81%D8%B1-%D9%88-%D8%A7%D9%84%D9%82%D8%AF%D9%85%D9%8A%D9%86/c206343897" class="cta-btn">
          احجزي الآن
        </a>
      </div>

      <div class="nails-image right">
        <img src="https://i.ibb.co/xqsGct4k/nails2-1.webp" alt="pedicure">
      </div>

    </div>
  `;

  const sections = document.querySelectorAll("section");

  if (sections.length >= 2) {
    sections[1].after(section);
  } else {
    document.body.appendChild(section);
  }
});
/*nails sec end*/
/*services grid sec start*/
(function () {
  function createHairSection() {
    const section = document.createElement("section");
    section.className = "hair-services-section custom-fourth-section";

    section.innerHTML = `
      <div class="hair-services-grid">

        <a class="hair-card" href="https://ronzaura.com/%D8%A7%D9%84%D8%B9%D9%86%D8%A7%D9%8A%D8%A9-%D8%A8%D8%A7%D9%84%D8%B4%D8%B9%D8%B1/c1579789786">
          <img src="https://i.ibb.co/KcVM5BV4/hair1-1.png" alt="كل مايخص خدمات الشعر">
          <div class="hair-overlay">
            <h3 class="hair-title">كل مايخص خدمات الشعر</h3>
            <span class="hair-btn">احجزي موعدك الآن</span>
          </div>
        </a>

        <a class="hair-card" href="https://ronzaura.com/%D8%AA%D8%B1%D9%83%D9%8A%D8%A8-%D8%B1%D9%85%D9%88%D8%B4/c737594587">
          <img src="https://i.ibb.co/FLsYz5VG/romosh-1-1.png" alt="كل مايخص العناية بالرموش">
          <div class="hair-overlay">
            <h3 class="hair-title">كل مايخص العناية بالرموش</h3>
            <span class="hair-btn">احجزي موعدك الآن</span>
          </div>
        </a>

        <a class="hair-card" href="https://ronzaura.com/%D8%A7%D9%84%D8%B9%D9%86%D8%A7%D9%8A%D8%A9-%D8%A8%D8%A7%D9%84%D8%A7%D8%B8%D8%A7%D9%81%D8%B1-%D9%88-%D8%A7%D9%84%D9%82%D8%AF%D9%85%D9%8A%D9%86/c206343897">
          <img src="https://i.ibb.co/wFyY9fJW/badicare-1.png" alt="كل مايخص خدمات البادكير">
          <div class="hair-overlay">
            <h3 class="hair-title">كل مايخص خدمات البادكير</h3>
            <span class="hair-btn">احجزي موعدك الآن</span>
          </div>
        </a>

        <a class="hair-card wide" href="https://ronzaura.com/%D8%A7%D9%84%D9%85%D8%B3%D8%A7%D8%AC-%D9%88-%D8%A7%D9%84%D8%A7%D8%B3%D8%AA%D8%B1%D8%AE%D8%A7%D8%A1/c845574104">
          <img src="https://i.ibb.co/VYj55hCF/relax-1.png" alt="أسترخي في جلسة فريدة لكي">
          <div class="hair-overlay">
            <h3 class="hair-title">أسترخي في جلسة فريدة لكي</h3>
            <span class="hair-btn">احجزي موعدك الآن</span>
          </div>
        </a>

      </div>
    `;

    return section;
  }

  function getHomepageSections() {
    const startHook = document.querySelector('salla-hook[name="index:start"]');
    const endHook = document.querySelector('salla-hook[name="index:end"]');

    if (!startHook || !endHook) return [];

    const sections = [];
    let el = startHook.nextElementSibling;

    while (el && el !== endHook) {
      if (
        el.tagName &&
        el.tagName.toLowerCase() === "section" &&
        !el.classList.contains("custom-fourth-section")
      ) {
        sections.push(el);
      }

      el = el.nextElementSibling;
    }

    return sections;
  }

  function insertHairSection() {
    if (!document.body.classList.contains("index")) return false;

    const oldSection = document.querySelector(".custom-fourth-section");
    if (oldSection) oldSection.remove();

    const endHook = document.querySelector('salla-hook[name="index:end"]');
    if (!endHook) return false;

    const sections = getHomepageSections();
    const newSection = createHairSection();

    if (sections[3]) {
      sections[3].insertAdjacentElement("beforebegin", newSection);
    } else {
      endHook.insertAdjacentElement("beforebegin", newSection);
    }

    return true;
  }

  let tries = 0;
  const timer = setInterval(function () {
    tries++;

    if (insertHairSection() || tries >= 40) {
      clearInterval(timer);
    }
  }, 300);

  window.addEventListener("load", function () {
    setTimeout(insertHairSection, 1000);
  });
})();
/*services grid sec end*/

/*dynamic banner mobile image start*/
(function () {

  const mobileBannerImages = [
    "https://i.ibb.co/BKndFpxV/Chat-GPT-Image-May-5-2026-09-30-57-AM-1.png",
    "https://i.ibb.co/Hp24yJWS/rel-mob.webp",
    "https://i.ibb.co/8LvHvn9h/Frame-1820549363-2.webp"
    // "https://i.ibb.co/YF0DNrWQ/www1-1.webp"
    // add more here if you have more banners
  ];

  const desktopBannerImages = [];

  function setImage(img, src) {
    img.removeAttribute("srcset");
    img.removeAttribute("data-srcset");
    img.removeAttribute("sizes");

    img.src = src;
    img.setAttribute("src", src);
    img.setAttribute("data-src", src);
  }

  function handleBanners() {
    if (!document.body.classList.contains("index")) return;

    const banners = document.querySelectorAll(".banner.banner--fixed img");

    banners.forEach(function (img, index) {

      // save desktop image once
      if (!desktopBannerImages[index]) {
        desktopBannerImages[index] =
          img.getAttribute("src") ||
          img.getAttribute("data-src");
      }

      // mobile
      if (window.innerWidth <= 768) {
        if (mobileBannerImages[index]) {
          setImage(img, mobileBannerImages[index]);
        }
      } 
      // desktop
      else {
        setImage(img, desktopBannerImages[index]);
      }

    });
  }

  window.addEventListener("load", function () {
    handleBanners();
    setTimeout(handleBanners, 1000); // important for Salla lazy load
  });

  window.addEventListener("resize", handleBanners);

})();
/*dynamic banner mobile image end*/
/*lashes-section start*/
document.addEventListener("DOMContentLoaded", function () {
  const section = document.createElement("section");
  section.className = "custom-lashes-section";

  section.innerHTML = `
    <div class="lashes-container">

      <div class="lashes-image left">
        <img src="https://i.ibb.co/fYm6VJDL/rom1.webp" alt="lashes service">
      </div>

      <div class="lashes-content">
        <h2>نظرة جذابة… بدون مجهود</h2>

        <p>بلمسة احترافية تدوم وتبرز جمال عينيك.</p>

        <a href="https://ronzaura.com/%D8%AA%D8%B1%D9%83%D9%8A%D8%A8-%D8%B1%D9%85%D9%88%D8%B4/c737594587" class="lashes-btn">
          احجزي الآن
        </a>
      </div>

      <div class="lashes-image right">
        <img src="https://i.ibb.co/hFdkWCqq/rom2.webp" alt="lashes beauty">
      </div>

    </div>
  `;

  function insertAsSeventhSection() {
    const startHook = document.querySelector('salla-hook[name="index:start"]');
    const endHook = document.querySelector('salla-hook[name="index:end"]');

    if (!startHook || !endHook) return false;

    const oldSection = document.querySelector(".custom-lashes-section");
    if (oldSection) oldSection.remove();

    const sections = [];
    let el = startHook.nextElementSibling;

    while (el && el !== endHook) {
      if (
        el.tagName &&
        el.tagName.toLowerCase() === "section" &&
        !el.classList.contains("custom-lashes-section")
      ) {
        sections.push(el);
      }

      el = el.nextElementSibling;
    }

    if (sections[6]) {
      sections[6].insertAdjacentElement("beforebegin", section);
    } else {
      endHook.insertAdjacentElement("beforebegin", section);
    }

    return true;
  }

  let tries = 0;
  const timer = setInterval(function () {
    tries++;

    if (insertAsSeventhSection() || tries >= 40) {
      clearInterval(timer);
    }
  }, 300);
});
/*lashes-section end*/
/*change the logo at footer start*/
document.addEventListener("DOMContentLoaded", function () {

  function replaceFooterLogo() {
    const logo = document.querySelector(
      ".store-footer img.max-w-24"
    );

    if (logo) {
      logo.src = "https://i.ibb.co/9HMJ6sCc/logo-1763385446-2.png";
      logo.setAttribute("data-src", "https://i.ibb.co/9HMJ6sCc/logo-1763385446-2.png");
      return true;
    }

    return false;
  }

  // retry because Salla loads async
  let tries = 0;
  const timer = setInterval(function () {
    tries++;

    if (replaceFooterLogo() || tries >= 30) {
      clearInterval(timer);
    }
  }, 300);

});
/*change the logo at footer end*/