/* سيكشن البنرات التفاعلية */
function insertInteractiveSideBanners() {

  const banners = [
    {
      name: 'البانر 1',
      image: 'https://i.postimg.cc/wTKnC2x7/Whats-App-Image-2026-01-15-at-17-09-33-(1).jpg',
      link: '#',
      text: 'من المصنع لباب بيتك',
      color: 'linear-gradient(135deg, #6a11cb, #8e2de2)'
    },
    {
      name: 'البانر 2',
      image: 'https://i.postimg.cc/L5sgXrKS/Whats_App_Image_2026_01_11_at_14_11_35.webp',
      link: '#',
      text: 'تعبئة فورية... توصيل سريع',
      color: 'linear-gradient(135deg, #7b2ff7, #9f5afd)'
    },
    {
      name: 'البانر 3',
      image: 'https://i.postimg.cc/4y3HdrCM/Whats_App_Image_2026_01_11_at_14_11_36.webp',
      link: '#',
      text: 'ليم فكر فيك وخلى للمياه طعم',
      color: 'linear-gradient(135deg, #5f2c82, #9d50bb)'
    },
    {
      name: 'البانر 4',
      image: 'https://i.postimg.cc/Y0SL9JKw/Whats_App_Image_2026_01_11_at_14_11_40.webp',
      link: '#',
      text: 'مياه جوفية بجودة عالمية',
      color: 'linear-gradient(135deg, #41295a, #2f0743)'
    },
    {
      name: 'البانر 5',
      image: 'https://i.postimg.cc/1XYnNJs5/Whats_App_Image_2026_01_11_at_14_11_41.jpg',
      link: '#',
      text: 'ليم ترافقك في كل مكان',
      color: 'linear-gradient(135deg, #8360c3, #2ebf91)'
    }
  ];

  const section = document.createElement('section');
  section.className = 'interactive-side-banners';

  section.innerHTML = `
    <div class="side-banner left">المجموعة الأخيرة</div>

    <div class="banners-wrapper">
      ${banners.map(b => `
        <a href="${b.link}" class="banner-item" style="background:${b.color}">
          <div class="banner-image">
            <img src="${b.image}" alt="${b.name}">
          </div>

          <div class="banner-text">
            ${b.text}
          </div>
        </a>
      `).join('')}
    </div>

    <div class="side-banner right">باقة المنتجات</div>
  `;

  if (!document.getElementById('interactive-side-banners-style')) {
    const style = document.createElement('style');
    style.id = 'interactive-side-banners-style';
    style.textContent = `
      .interactive-side-banners {
        display: flex;
        justify-content: center;
        align-items: stretch;
        padding: 20px;
        gap: 10px;
        direction: rtl;
      }

      .side-banner {
        writing-mode: vertical-rl;
        padding: 10px;
        color: #fff;
        font-weight: bold;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
      }

      .side-banner.left { background: #6aa9e7; }
      .side-banner.right { background: #d4b05d; }

      .banners-wrapper {
        display: flex;
        gap: 10px;
        flex: 1;
      }

      .banner-item {
        flex: 0.5;
        border-radius: 12px;
        overflow: hidden;
        transition: all 0.5s ease;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }

      .banner-item.active { flex: 4; }

      /* الصورة مخفية افتراضياً */
      .banner-image {
        width: 100%;
        height: 0;
        overflow: hidden;
        transition: height 0.5s ease;
      }

      .banner-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      /* عند الفتح تظهر الصورة */
      .banner-item.active .banner-image {
        height: 350px;
      }

      /* النص */
      .banner-text {
        color: #fff;
        font-size: 22px;
        font-weight: 700;
        padding: 16px;
        text-align: center;
        writing-mode: vertical-rl;
        transition: all 0.4s ease;
      }

      /* النص أفقي عند الفتح */
      .banner-item.active .banner-text {
        writing-mode: horizontal-tb;
        font-size: 20px;
        background: rgba(0,0,0,0.35);
        width: 100%;
      }

      /* ===== موبايل ===== */
      @media (max-width: 768px) {

        .interactive-side-banners {
          flex-direction: column;
        }

        .side-banner {
          writing-mode: horizontal-tb;
          width: 100%;
        }

        .banners-wrapper {
          flex-direction: column;
          gap: 8px;
        }

        .banner-item {
          height: 70px;
          flex: unset;
        }

        .banner-item.active {
          height: 260px;
        }

        .banner-item.active .banner-image {
          height: 180px;
        }

        .banner-text {
          writing-mode: horizontal-tb;
          font-size: 15px;
        }
      }
    `;
    document.head.appendChild(style);
  }

  const footer = document.querySelector('footer');
  footer ? footer.insertAdjacentElement('beforebegin', section) : document.body.appendChild(section);

  const bannerItems = section.querySelectorAll('.banner-item');

  if (window.innerWidth > 768 && bannerItems.length) {
    bannerItems[0].classList.add('active');
  }

  bannerItems.forEach(item => {
    item.addEventListener('click', e => {
      e.preventDefault();
      if (window.innerWidth <= 768) {
        const active = item.classList.contains('active');
        bannerItems.forEach(b => b.classList.remove('active'));
        if (!active) item.classList.add('active');
      } else {
        bannerItems.forEach(b => b.classList.remove('active'));
        item.classList.add('active');
      }
    });
  });
}

document.addEventListener('DOMContentLoaded', insertInteractiveSideBanners);

/* سيكشن التصنيفات */
function insertCategoriesSection(targetClass, insertPosition = 'after') {

 const categories = [
  { 
    name: 'المنتجات المفردة', 
    image: 'https://i.postimg.cc/YCQC2GwR/المنتجات_المفرده.png',
    link: 'https://lim-water.com/%D8%A7%D9%84%D9%85%D9%86%D8%AA%D8%AC%D8%A7%D8%AA-%D8%A7%D9%84%D9%85%D9%81%D8%B1%D8%AF%D8%A9/c2073033817'
  },
  { 
    name: 'المساجد والجمعيات', 
    image: 'https://i.postimg.cc/QdcdN9rJ/المسجد.png',
    link: 'https://lim-water.com/%D8%A7%D9%84%D9%85%D8%B3%D8%A7%D8%AC%D8%AF-%D9%88%D8%A7%D9%84%D8%AC%D9%85%D8%B9%D9%8A%D8%A7%D8%AA-%D8%A7%D9%84%D8%AE%D9%8A%D8%B1%D9%8A%D8%A9/c1431575386'
  },
  { 
    name: 'العروض', 
    image: 'https://i.postimg.cc/BQrvG5R1/offer.png',
    link: 'https://lim-water.com/%D8%A7%D9%84%D8%B9%D8%B1%D9%88%D8%B6/c698539352'
  },
];


  const section = document.createElement('section');
  section.className = 'water-categories-section';
  section.innerHTML = `
    <h2 class="categories-title">التصنيفات</h2>
   <div class="categories-wrapper">
  ${categories.map(cat => `
    <a href="${cat.link}" class="category-item">
     <div class="water-drop">
  <svg viewBox="0 0 160 200" preserveAspectRatio="xMidYMid slice">
    <defs>
      <clipPath id="drop-shape">
        <path d="M80 0 C120 40 160 90 160 130 C160 175 120 200 80 200 C40 200 0 175 0 130 C0 90 40 40 80 0 Z"/>
      </clipPath>
    </defs>
    <image href="${cat.image}" width="160" height="200" clip-path="url(#drop-shape)" preserveAspectRatio="xMidYMid slice"/>
  </svg>
</div>

      <h3>${cat.name}</h3>
    </a>
  `).join('')}
</div>

  `;

  /* CSS */
  if (!document.getElementById('water-categories-style')) {
    const style = document.createElement('style');
    style.id = 'water-categories-style';
    style.textContent = `
      .water-categories-section {
        padding: 60px 20px;
        text-align: center;
        direction: rtl;
      }

      .categories-title {
        font-size: 32px;
        margin-bottom: 40px;
        position: relative;
        display: inline-block;
      }

      .categories-title::after {
        content: '';
        display: block;
        width: 80px;
        height: 4px;
        background: #84297C;
        margin: 10px auto 0;
        border-radius: 2px;
      }

      .categories-wrapper {
        display: flex;
        justify-content: center;
        gap: 40px;
        flex-wrap: wrap;
      }

 .category-item {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}


    .water-drop {
  width: 160px;
  aspect-ratio: 4 / 5;
  margin: 0 auto;
}

.water-drop svg {
  width: 100%;
  height: 100%;
  display: block;
}


      .water-drop img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .water-fill {
        position: absolute;
        bottom: -100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(63,169,245,.75);
        transition: bottom .5s ease;
        z-index: 2;
      }

      .category-item:hover .water-fill {
        bottom: 0;
      }

      .category-item h3 {
        margin-top: 14px;
        font-size: 18px;
        color: #333;
        transition: color .3s ease;
      }

      .category-item:hover h3 {
        color: #84297C;
      }

      /* موبايل */
/* موبايل */
@media (max-width: 768px) {
  .categories-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .category-item {
    flex: 0 0 30%;
    text-align: center;
  }

  .water-drop {
    width: 90px;
    height: 112px; /* حافظنا على نفس النسبة */
    margin: 0 auto;
  }

  .water-drop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.08); /* يمنع أي فراغات */
  }

  .category-item h3 {
    font-size: 13px;
    margin-top: 6px;
  }
}







    `;
    document.head.appendChild(style);
  }

  const target = document.querySelector(`.${targetClass}`);
  if (target) {
    target.insertAdjacentElement(
      insertPosition === 'after' ? 'afterend' : 'beforebegin',
      section
    );
  }
}

/* تنفيذ */
document.addEventListener('DOMContentLoaded', () => {
  insertCategoriesSection('s-block--photos-slider', 'after');
});

          /* <h3>${b.name}</h3>*/