/* Add custom JS code below */ 
/**
 * Custom 3-Column Image Grid Section
 * Created for Ag Fashion House
 */
(function() {
  // Target the main container
  const mainElement = document.querySelector('.index main');
  if (!mainElement) return;

  // Prevent duplicate insertion if script runs multiple times
  if (document.querySelector('.custom-image-grid-section')) return;

  // Create the section element
  const newSection = document.createElement('section');
  newSection.className = 's-block custom-image-grid-section';
  // Standard spacing and RTL support
  newSection.style.cssText = 'padding: 0; margin: 2rem 0; width: 100%; direction: rtl;';

  const items = [
    {      img: 'https://i.ibb.co/HTmCcTYM/abayat.webp'
    ,
      title: 'عبايات مناسبات',
      
      link: 'https://agfashionhouse.com/%D8%B9%D8%A8%D8%A7%D9%8A%D8%A7%D8%AA-%D9%85%D9%86%D8%A7%D8%B3%D8%A8%D8%A7%D8%AA/c1149473094'
   
    
    },
    {
  img: 'https://i.ibb.co/9HWwCLxv/monasba.webp',
      link:'https://agfashionhouse.com/%D8%B9%D8%A8%D8%A7%D9%8A%D8%A7%D8%AA-%D9%83%D8%AC%D9%88%D8%A7%D9%84/c1595232084',
      title: 'عبايات كاجوال',
      
    },
    {
      img: 'https://i.ibb.co/zHhY6RLN/fadyat.webp',
      title: 'فضيات',
      link: 'https://agfashionhouse.com/%D9%81%D8%B6%D9%8A%D8%A7%D8%AA/c1610702292'
    }
  ];

  const gridHtml = `
    <style>
      .custom-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        width: 100%;
      }
      .custom-grid-item {
        position: relative;
        overflow: hidden;
        aspect-ratio: 3/4;
        background-color: #eee;
      }
      .custom-grid-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.5s ease;
      }
      .custom-grid-item:hover img {
        transform: scale(1.05);
      }
      .custom-grid-overlay {
        position: absolute;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        width: 90%;
        z-index: 2;
      }
      .custom-grid-title {
        color: white;
        font-size: clamp(1.2rem, 2.5vw, 1.8rem);
        font-weight: bold;
        margin-bottom: 15px;
        text-shadow: 0 2px 8px rgba(0,0,0,0.7);
      }
      .custom-grid-btn {
        background-color: white !important;
        color: #BA8D43 !important;
        padding: 10px 35px;
        border-radius: 4px;
        text-decoration: none;
        display: inline-block;
        font-weight: bold;
        font-size: 1.1rem;
        transition: transform 0.2s, background-color 0.2s;
        border: none;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2);
      }
      .custom-grid-btn:hover {
        transform: scale(1.05);
        background-color: #fcfcfc !important;
      }
      @media (max-width: 768px) {
        .custom-grid {
          grid-template-columns: 1fr;
        }
        .custom-grid-item {
          aspect-ratio: 1/1.1;
        }
        .custom-grid-title {
          font-size: 1.5rem;
        }
      }
    </style>
    <div class="custom-grid">
      ${items.map(item => `
        <div class="custom-grid-item">
          <img src="${item.img}" alt="${item.title}" loading="lazy">
          <div class="custom-grid-overlay">
            <div class="custom-grid-title">${item.title}</div>
            <a href="${item.link}" class="custom-grid-btn">تسوقي الان</a>
          </div>
        </div>
      `).join('')}
    </div>
  `;

  newSection.innerHTML = gridHtml;

  // Logic to insert as the second section
  const sections = Array.from(mainElement.children).filter(el => 
    el.tagName === 'SECTION' || el.classList.contains('s-block')
  );
  
  if (sections.length > 0) {
    // Insert after the first major section (the slider)
    sections[0].after(newSection);
  } else {
    mainElement.prepend(newSection);
  }
})();