/* Add custom Js styles below */ 

document.addEventListener("DOMContentLoaded", function () {

  /* ===============================
     STYLE
     =============================== */
  const style = document.createElement("style");
  style.innerHTML = `
    .branches-section {
      padding: 80px 20px;
      background: #ffffff;
      direction: rtl;
      text-align: center;
    }

    .branches-title {
      font-size: 28px;
      font-weight: 800;
      margin-bottom: 45px;
      color: #000;
    }

    .branches-grid {
      max-width: 1200px;
      margin: auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 28px;
    }

    .branch-card {
      display: block;
      background: #000;
      border-radius: 18px;
      padding: 28px 22px;
      text-decoration: none;
      box-shadow: 0 15px 35px rgba(0,0,0,0.25);
      transition: all 0.35s ease;
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }

    .branch-card::after {
      content: "";
      position: absolute;
      inset: 0;
      border: 2px solid #E6BC71;
      border-radius: 18px;
      opacity: 0.6;
      pointer-events: none;
    }

    .branch-card:hover {
      transform: translateY(-10px) scale(1.05);
      box-shadow: 0 25px 55px rgba(0,0,0,0.45);
    }

    .branch-city {
      font-size: 22px;
      font-weight: 800;
      margin-bottom: 14px;
      color: #E6BC71;
    }

    .branch-list {
      font-size: 15px;
      font-weight: 600;
      color: #ffffff;
      line-height: 1.8;
    }

    .branch-list span {
      display: block;
    }

    @media (max-width: 992px) {
      .branches-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 480px) {
      .branches-grid {
        grid-template-columns: 1fr;
      }
    }
  `;
  document.head.appendChild(style);

  /* ===============================
     HTML
     =============================== */
  const branchesSection = document.createElement("section");
  branchesSection.className = "branches-section";
  branchesSection.innerHTML = `
    <h2 class="branches-title">فروعنا</h2>

    <div class="branches-grid">

      <a href="#" class="branch-card">
        <div class="branch-city">الطائف</div>
        <div class="branch-list">
          <span>الواحة بلازا</span>
        </div>
      </a>

      <a href="#" class="branch-card">
        <div class="branch-city">الباحة</div>
        <div class="branch-list">
          <span>الباحة مول</span>
        </div>
      </a>

      <a href="#" class="branch-card">
        <div class="branch-city">خميس مشيط</div>
        <div class="branch-list">
          <span>موجان</span>
        </div>
      </a>

      <a href="#" class="branch-card">
        <div class="branch-city">أبها</div>
        <div class="branch-list">
          <span>أبها بلازا</span>
          <span>الراشد مول</span>
          <span>لافندا بارك</span>
        </div>
      </a>

      <a href="#" class="branch-card">
        <div class="branch-city">جيزان</div>
        <div class="branch-list">
          <span>الراشد مول</span>
          <span>الكادي مول</span>
        </div>
      </a>

      <a href="#" class="branch-card">
        <div class="branch-city">الرياض</div>
        <div class="branch-list">
          <span>حياة مول</span>
        </div>
      </a>

      <a href="#" class="branch-card">
        <div class="branch-city">مكة</div>
        <div class="branch-list">
          <span>مكة مول</span>
        </div>
      </a>

      <a href="#" class="branch-card">
        <div class="branch-city">سراة عبيدة</div>
        <div class="branch-list">
         <span style="color: #fff;">الواحة مول</span>

       
        </div>
      </a>

    </div>
  `;

  /* ===============================
     INSERT BEFORE FEATURES
     =============================== */
  const observer = new MutationObserver(function () {
    const featuresSection = document.querySelector(".features-section");
    if (featuresSection && !document.querySelector(".branches-section")) {
      featuresSection.parentNode.insertBefore(branchesSection, featuresSection);
      observer.disconnect();
    }
  });

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

});


document.addEventListener("DOMContentLoaded", function () {

    // إنشاء السكشن بالكامل
    const section = document.createElement("section");
    section.className = "features-section";
    section.innerHTML = `
        <h2 class="features-title">مميزات متجرنا</h2>

        <div class="features-wrapper">
        
            <div class="feature-box">
                <img src="https://i.ibb.co/G4Dr4Zpc/grocery-store.png">
                <h3>شحن سريع</h3>
                <p>سرعة وصول منتجاتكم هي أولويتنا</p>
            </div>

            <div class="feature-box">
                <img src="https://i.ibb.co/VpwbC74j/delivery-2.png">
                <h3>تسوق آمن</h3>
                <p>نضمن لكم تسوقًا محميًا وآمنًا</p>
            </div>

            <div class="feature-box">
                <img src="https://i.ibb.co/Y7xgyNVF/payment-protection-2.png">
                <h3>خيارات دفع متعددة</h3>
                <p>اختاروا من بين طرق الدفع لدينا</p>
            </div>

            <div class="feature-box">
                <img src="https://i.ibb.co/BHL1SxKd/OBJECT.png">
                <h3>جودة عالية</h3>
                <p>أفضل جودة من خامات مختارة</p>
            </div>

        </div>
    `;

    // إدخال السكشن قبل الفوتر مباشرة
    const footer = document.querySelector("footer");
    if (footer) {
        footer.parentNode.insertBefore(section, footer);
    }
});


document.addEventListener("DOMContentLoaded", function () {

    const section = document.createElement("section");
    section.className = "reviews-section";
    const footer = document.querySelector("footer");
    if (footer) {
        footer.parentNode.insertBefore(section, footer);
    }
});

document.addEventListener("DOMContentLoaded", function () {
  const targetSection = document.querySelector(
    ".s-block.s-block--fixed-banner.wide-placeholder"
  );

  if (!targetSection) return;

  const section = document.createElement("section");
  section.className = "category-cards";

  section.innerHTML = `
    <a href="https://ekhtiaryalawl.com/%D8%B7%D8%B1%D8%AD/c474180960" class="category-card">
      <img src="https://i.ibb.co/cXYJkHnG/Group-1261154864-10.png" alt="طرح">
    </a>

    <a href="https://ekhtiaryalawl.com/%D8%A7%D9%84%D9%86%D9%82%D8%A7%D8%A8%D8%A7%D8%AA/c1650277620" class="category-card">
      <img src="https://i.ibb.co/WN9gcv0x/Group-1261154864-20.png" alt="نقاب">
    </a>

    <a href="https://ekhtiaryalawl.com/%D8%B9%D8%A8%D8%A7%D9%8A%D8%A7%D8%AA/c1994309968" class="category-card">
      <img src="https://i.ibb.co/xSyQD8dH/Group-1261154864-30.png" alt="عبايات">
    </a>
  `;

  targetSection.insertAdjacentElement("afterend", section);
});

document.addEventListener("DOMContentLoaded", function () {
  // منع التكرار
  if (document.querySelector(".custom-footer")) return;

  const footer = document.createElement("div");
  footer.className = "custom-footer";

  footer.innerHTML = `
    <div class="footer-bg"></div>

    <div class="footer-container">

      <!-- روابط مهمة -->
      <div class="footer-col">
        <h4>روابط مهمة</h4>
        <ul>
          <li><a href="https://ekhtiaryalawl.com/ليل-قياس-العبايات/page-662777267">دليل القياس</a></li>
          <li><a href="https://ekhtiaryalawl.com/أسئلة-شائعة-واجابتها/page-1084202728">أسئلة وأجوبة</a></li>
         
          <li><a href="https://ekhtiaryalawl.com/سياسة-الاستبدال-والإرجاع/page-2032276204">سياسة الاستبدال والاسترجاع</a></li>
          <li><a href="https://ekhtiaryalawl.com/طرق-الدفع/page-1991344111">طرق الدفع في موقعنا</a></li>
          <li><a href="https://ekhtiaryalawl.com/كيف-اتتبع-شحنتي/page-1765789535">كيف أتتبع شحنتي</a></li>
          <li><a href="https://ekhtiaryalawl.com/سياسة-الخصوصية/page-1945361153">سياسة الخصوصية</a></li>
          
        </ul>
      </div>

      <!-- البراند -->
      <div class="footer-center">
        <img class="footer-logo"
          src="https://i.ibb.co/8LbMzd7Z/download-10-1.png"
          alt="First Choice" />

        <p>
          اختياري الأول – براند سعودي متخصص في تصميم العبايات منذ 2010.
          خبرة متقنة في كل قطعة. لدينا 20 فرعًا وأكثر من 3000 منتج حصري.
          نجمع بين الأناقة والجودة لتناسب ذوق المرأة العصرية.
          <br><strong>تسوقي العبايات الآن</strong>
        </p>

      <div class="footer-social">
  <a href="https://www.instagram.com/fc.1411" target="_blank" rel="noopener" title="Instagram">
    <img src="https://i.ibb.co/tTjr38Wj/instagram-2.png" alt="Instagram">
  </a>

  <a href="https://www.tiktok.com/@fc.1411" target="_blank" rel="noopener" title="TikTok">
    <img src="https://i.ibb.co/TBBW3Qkh/tik-tok-1.png" alt="TikTok">
  </a>

  <a href="https://www.snapchat.com/add/fc.1141" target="_blank" rel="noopener" title="Snapchat">
    <img src="https://i.ibb.co/20Vx2Mn5/snapchat-1.png" alt="Snapchat">
  </a>
</div>


        <div class="footer-cert">
          <img src="https://i.ibb.co/JwJtPfnC/Group-1261154855.png" alt="منصة الأعمال" />
           <img src="https://i.ibb.co/3yjKDjYc/BAa-VI0oa-EE9gu-GKLa-W8-IDt-Uabvg-Qc-Iwq-Zhmq1d-HG-removebg-preview.png" alt="منصة الأعمال" />
          <div class="vat">
            <span>الرقم الضريبي</span>
            <strong>311350263400003</strong>
          </div>
        </div>
      </div>

      <!-- التواصل -->
      <div class="footer-col">
        <h4>تواصل معنا</h4>
        <ul>
          <li><a href="https://wa.me/966553182077">واتساب: +966553182077</a></li>
          <li><a href="tel:+966553182077">اتصال: +966553182077</a></li>
          <li><a href="mailto:first.choice1078@gmail.com">first.choice1078@gmail.com</a></li>
        </ul>
      </div>

    </div>
  `;

  document.body.insertAdjacentElement("beforeend", footer);
});

function fixFirstBannerOffset() {
  const header = document.querySelector(".store-header");
  const firstBanner = document.querySelector(
    ".s-block.s-block--fixed-banner.wide-placeholder"
  );

  if (!header || !firstBanner) return;

  const headerHeight = header.getBoundingClientRect().height;
  const isMobile = window.innerWidth <= 768;

  let offset;

  if (isMobile) {
    offset = headerHeight + 10; // موبايل: كامل الهيدر + أمان
  } else {
    offset = headerHeight + 15; // ديسكتوب
  }

  firstBanner.style.marginTop = offset + "px";
}

/* أول تحميل */
document.addEventListener("DOMContentLoaded", function () {
  fixFirstBannerOffset();

  /* إعادة الحساب بعد استقرار الصفحة */
  setTimeout(fixFirstBannerOffset, 300);
  setTimeout(fixFirstBannerOffset, 800);
});

/* عند تغيير المقاس أو تدوير الجوال */
window.addEventListener("resize", fixFirstBannerOffset);