/* Add custom Js code below */ 
const categories = [
  { img: 'https://i.ibb.co/rGzHkTp5/cat1-7.png', link: 'https://myshagf.com/%D8%AD%D8%A8%D9%88%D8%A8-%D9%82%D9%87%D9%88%D8%A9/c2101602861' },
  { img: 'https://i.ibb.co/VWv9rJv5/cat2-8.png', link: 'https://myshagf.com/%D8%A7%D9%83%D9%88%D8%A7%D8%A8-%D8%A8%D8%B1%D8%B3%D9%85-%D8%A7%D9%84%D9%8A%D8%AF/c129797410' },
  { img: 'https://i.ibb.co/TBBRWPw0/cat3-8.png', link: 'https://myshagf.com/%D8%A7%D9%83%D9%88%D8%A7%D8%A8-%D9%82%D9%87%D9%88%D8%A9/c1895506374' },
  { img: 'https://i.ibb.co/kYB8TSw/cat4-9.png', link: 'https://myshagf.com/%D9%82%D9%87%D9%88%D8%A9-%D8%A7%D9%84%D9%85%D8%B2%D8%A7%D8%AC/c1935163791' },
]; 


// العثور على العنصر المستهدف قبل الذي نريد إدراج المحتوى فيه
const targetElement = document.getElementById('best-offers-2-slider');

// إنشاء عنصر section كحاوية
const section = document.createElement('section');
section.classList.add('categories-section'); // إضافة كلاس إلى section

// إنشاء عنصر H2 بعنوان "تصفح حسب اختيارك"
const heading = document.createElement('h2');
heading.textContent = "أقسامنا"; // النص داخل العنوان
heading.classList.add('section-heading'); // كلاس لتنسيق العنوان

// إضافة العنوان إلى الـ section
section.appendChild(heading);

// إنشاء الحاوية الخاصة  بالأقسام فقط وتطبيق flexbox عليها
const categoriesContainer = document.createElement('div');
categoriesContainer.classList.add('categories-container'); // إضافة كلاس لتطبيق flexbox على الفئات

categories.forEach(category => {
  const categoryDiv = document.createElement('div');
  categoryDiv.classList.add('category-item');

  // إنشاء الرابط حول الصورة
  const link = document.createElement('a');
  link.href = category.link;
  link.target = '_blank'; // فتح الرابط في نافذة جديدة

  const img = document.createElement('img');
  img.src = category.img;
  img.alt = "صورة فئة"; // نص بديل للصورة

  // إضافة الصورة إلى الرابط
  link.appendChild(img);

  // إضافة الرابط إلى العنصر
  categoryDiv.appendChild(link);
  categoriesContainer.appendChild(categoryDiv);
});

// إضافة الحاوية التي تحتوي على الأقسام بعد العنوان
section.appendChild(categoriesContainer);

// إدراج section قبل العنصر المستهدف
targetElement.parentNode.insertBefore(section, targetElement);
// تحديد العنصر
const footerText = document.querySelector('.text-gray-400');

// تعديل النص والرابط
if (footerText) {
  footerText.innerHTML = `صنع بإتقان على | 2025
    <a href="https://supplyid.agency/" class="hover:text-primary" target="_blank" rel="noreferrer"> digital identity

 </a>`;
}


document.addEventListener('DOMContentLoaded', function() {
    // Create the container for the store features section
    const section = document.createElement('section');
    section.id = 'E_store_features_sec_16';
    section.className = 'f_enhanced-store-features page-content-section';

    // Create the title section
    const titleDiv = document.createElement('div');
    titleDiv.className = 'f_block__title underlined-title';
    
    const titleContent = `
        <h2>مميزات المتجر</h2>
        <p>أكثر ما يميزنا هو اهتمامنا وشغفنا بعملنا ،وتفانينا فيه</p>
    `;
    titleDiv.innerHTML = titleContent;
    section.appendChild(titleDiv);

    // Create the features container
    const featuresContainer = document.createElement('div');
    featuresContainer.className = 'feature-items';

    // Array of features to be added
    const features = [
        {
            icon: 'https://cdn.salla.sa/form-builder/prqUOBUhVTkfGxJrafN83IUEMK2hICAsTBBVcxPU.png',
            title: 'الجودة العالية',
            description: 'منتجاتنا أصلية ومضمونة'
        },
        {
            icon: 'https://cdn.salla.sa/form-builder/yUMQdv0Spt5FEHtJ5StjxvNKUGoCwG4V5didZX10.png',
            title: 'الشحن السريع',
            description: 'توصيل سريع لجميع مدن المملكة العربية السعودية '
        },
        {
            icon: 'https://cdn.salla.sa/form-builder/6fi3CFedCmd0e0jLknkz0Yq3MHnKio8qCJJiY2dw.png',
            title: 'الدعم الفني المتميز',
            description: 'نجيك بأسرع وقت'
        },
        {
            icon: 'https://cdn.salla.sa/form-builder/l65q9GY6Ul6SmLVj1C4g1BO7CL6vF7TnLtAHOucp.png',
            title: 'الأسعار الرهيبة',
            description: 'أسعار تنافسية وعروض مذهلة'
        }
    ];

    // Create feature items and append to container
    features.forEach(feature => {
        const featureItem = document.createElement('div');
        featureItem.className = 'f_features-item';
        
        featureItem.innerHTML = `
            <div class="feature-icon">
                <img src="${feature.icon}" alt="${feature.title}" loading="lazy" class="h-full" />
            </div>
            <h3>${feature.title}</h3>
            <p>${feature.description}</p>
        `;
        featuresContainer.appendChild(featureItem);
    });

    // Append features container to section
    section.appendChild(featuresContainer);

    // Append the section before the footer
    const footer = document.querySelector('footer');
    if (footer) {
        footer.parentNode.insertBefore(section, footer);
    }
});