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

  /* =========================
     SECTION 1 (Before testimonials)
  ========================== */
  const testimonialsSection = document.querySelector('.s-block--custom-testimonials');

  if (testimonialsSection) {
    const imageGridSection = document.createElement('section');
    imageGridSection.className = 'custom-image-grid';
    imageGridSection.innerHTML = `
      <div class="section-title-wrapper">
        <h2 class="section-title">مميزاتنا</h2>
      </div>

      <div class="grid-container">
        <div class="grid-item">
          <img src="https://res.cloudinary.com/dndincv9f/image/upload/v1769694318/Group_5_ov6nlm.png">
        </div>
        <div class="grid-item">
          <img src="https://res.cloudinary.com/dndincv9f/image/upload/v1769694318/Group_6_l7quta.png">
        </div>
        <div class="grid-item">
          <img src="https://res.cloudinary.com/dndincv9f/image/upload/v1769694318/Group_7_jcq87e.png">
        </div>
        <div class="grid-item">
          <img src="https://res.cloudinary.com/dndincv9f/image/upload/v1769694318/Group_8_vkinzf.png">
        </div>
      </div>
    `;
    testimonialsSection.parentNode.insertBefore(imageGridSection, testimonialsSection);
  }

  /* =========================
     SECTION 2 (After first section)
  ========================== */
  const firstMainSection = document.querySelector('#main-content > section:nth-child(2)');

  if (firstMainSection) {
    const categoriesSection = document.createElement('section');
    categoriesSection.className = 'custom-categories-grid';
    categoriesSection.innerHTML = `
      <div class="section-title-wrapper">
        <h2 class="section-title">أقسامنا</h2>
      </div>

      <div class="grid-container">
        <a href="https://vellucre.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/c1959180974" class="grid-item">
          <img src="https://res.cloudinary.com/dndincv9f/image/upload/v1769955158/Group_9_xjkko1.png">
        </a>
        <a href="https://vellucre.com/%D8%A7%D9%84%D8%B9%D9%86%D8%A7%D9%8A%D8%A9-%D8%A8%D8%A7%D9%84%D8%A8%D8%B4%D8%B1%D8%A9/c452565933" class="grid-item">
          <img src="https://res.cloudinary.com/dndincv9f/image/upload/v1769694784/Group_5_ykqwsm.png">
        </a>
        <a href="https://vellucre.com/%D8%B9%D8%B7%D9%88%D8%B1-%D9%81%D8%A7%D8%AE%D8%B1%D8%A9/c1649739689" class="grid-item">
          <img src="https://res.cloudinary.com/dndincv9f/image/upload/v1769694784/Group_7_eerzb3.png">
        </a>
        <a href="https://vellucre.com/%D9%85%D9%83%D9%8A%D8%A7%D8%AC/c2101219249" class="grid-item">
          <img src="https://res.cloudinary.com/dndincv9f/image/upload/v1769694785/Group_8_bijvr9.png">
        </a>
      </div>
    `;
    firstMainSection.insertAdjacentElement('afterend', categoriesSection);
  }

  /* =========================
     STYLES
  ========================== */
  const style = document.createElement('style');
  style.innerHTML = `
    /* ===== Titles ===== */
    .section-title-wrapper {
      text-align: center;
      margin-bottom: 40px;
    }

    .section-title {
      position: relative;
      display: inline-block;
      padding: 0 20px;
      font-size: 28px;
      font-weight: 600;
    }

    .section-title::before,
    .section-title::after {
      content: "";
      position: absolute;
      top: 50%;
      width: 70px;
      height: 1px;
      background: #000;
    }

    .section-title::before {
      right: 100%;
      margin-right: 10px;
    }

    .section-title::after {
      left: 100%;
      margin-left: 10px;
    }

    /* ===== Grids ===== */
    .custom-image-grid,
    .custom-categories-grid {
      padding: 50px 15px;
    }

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

    .grid-item {
      border-radius: 18px;
      overflow: hidden;
      transition: transform .3s ease, box-shadow .3s ease;
      display: block;
    }

    .grid-item img {
      width: 100%;
      display: block;
    }

    .grid-item:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 25px rgba(0,0,0,.18);
    }

    /* ===== Responsive ===== */
    @media (max-width: 991px) {
      .grid-container {
        grid-template-columns: repeat(2, 1fr);
      }

      .section-title {
        font-size: 24px;
      }

      .section-title::before,
      .section-title::after {
        width: 40px;
      }
    }

    @media (max-width: 576px) {
      .grid-container {
        grid-template-columns: 1fr;
      }

      .section-title {
        font-size: 22px;
      }

      .section-title::before,
      .section-title::after {
        width: 25px;
      }
    }
  `;
  document.head.appendChild(style);

});