document.addEventListener("DOMContentLoaded", function () {
  // ==============================
  // خدمات القسم
  // ==============================

  const services = [
    {
      title: "مبادرة توفير مياه الشرب لمساجد والجوامع",
      image: "ضع-رابط-الصورة-الأولى-هنا"
    },
    {
      title: "مبادرة توفير السجاد وتنظيفها للمساجد والجوامع",
      image: "ضع-رابط-الصورة-الثانية-هنا"
    },
    {
      title: "مبادرة توفير المنظفات للمساجد والجوامع",
      image: "ضع-رابط-الصورة-الثالثة-هنا"
    },
    {
      title: "مشروع بناء المساجد والجوامع",
      image: "ضع-رابط-الصورة-الرابعة-هنا"
    }
  ];

  // ==============================
  // منع التكرار
  // ==============================

  if (document.querySelector(".custom-services-section")) {
    return;
  }

  // ==============================
  // إنشاء القسم
  // ==============================

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

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

      <!-- الخدمة الأولى -->
      <a href="#" class="custom-service-card custom-service-tall">
        <img src="${services[0].image}" alt="${services[0].title}">
        <span class="custom-service-overlay"></span>
        <span class="custom-service-title">
          ${services[0].title}
        </span>
      </a>

      <!-- الخدمة الثانية -->
      <a href="#" class="custom-service-card custom-service-medium">
        <img src="${services[1].image}" alt="${services[1].title}">
        <span class="custom-service-overlay"></span>
        <span class="custom-service-title">
          ${services[1].title}
        </span>
      </a>

      <!-- عنوان القسم -->
      <div class="custom-services-heading">
        <span>خدماتنا</span>
      </div>

      <!-- الخدمة الثالثة -->
      <a href="#" class="custom-service-card custom-service-medium">
        <img src="${services[2].image}" alt="${services[2].title}">
        <span class="custom-service-overlay"></span>
        <span class="custom-service-title">
          ${services[2].title}
        </span>
      </a>

      <!-- الخدمة الرابعة -->
      <a href="#" class="custom-service-card custom-service-tall">
        <img src="${services[3].image}" alt="${services[3].title}">
        <span class="custom-service-overlay"></span>
        <span class="custom-service-title">
          ${services[3].title}
        </span>
      </a>

    </div>
  `;

  // ==============================
  // تحديد مكان القسم
  // ==============================

  // يضع القسم قبل Footer
  const footer = document.querySelector("footer");

  if (footer) {
    footer.parentNode.insertBefore(section, footer);
  } else {
    document.body.appendChild(section);
  }
});