document.addEventListener('DOMContentLoaded', function() {
    // إخفاء الأقسام الأصلية
    const originalCategories = document.querySelector('.categories_grid');
    if (originalCategories) {
        originalCategories.style.display = 'none';
    }
    
    // إنشاء الأقسام الجديدة
    const newCategories = `
        <div class="categories_grid centered-items" id="new-categories">
            <a href="https://bzaraldar-sa.com/redirect/categories/1897396403" class="card_category" style="width: auto; height: auto; border-radius: 4px; background-color: #edf7ed; display: block; text-decoration: none;">
                <div class="card_img" style="background-color: #edf7ed; cursor: pointer;">
                    <img src="https://cdn.salla.sa/form-builder/P2dQxpTekhOszr4JYqXVgCntJTI1tvcfcvpOPNy3.jpg" alt="قهوة سعودية">
                </div>
                <div class="card-name">
                    <p style="color: #181a14;">قهوة سعودية</p>
                    <i class="sicon-arrow-left"></i>
                </div>
            </a>
            
            <a href="https://bzaraldar-sa.com/redirect/categories/659216818" class="card_category" style="width: auto; height: auto; border-radius: 4px; background-color: #edf7ed; display: block; text-decoration: none;">
                <div class="card_img" style="background-color: #edf7ed; cursor: pointer;">
                    <img src="https://cdn.salla.sa/form-builder/6i2VPYbRfW7vBkLCMEXVvwQgYmsgp6qM0iPUqZnT.jpg" alt="بهارات شرقية">
                </div>
                <div class="card-name">
                    <p style="color: #000000;">بهارات شرقية</p>
                    <i class="sicon-arrow-left"></i>
                </div>
            </a>
            
            <a href="https://bzaraldar-sa.com/redirect/categories/1048813050" class="card_category" style="width: auto; height: auto; border-radius: 4px; background-color: #edf7ed; display: block; text-decoration: none;">
                <div class="card_img" style="background-color: #edf7ed; cursor: pointer;">
                    <img src="https://cdn.salla.sa/form-builder/DO9pvdFJKAqxrVN52eyDyFidlJa17ezZ3xBWlVVF.jpg" alt="التمور">
                </div>
                <div class="card-name">
                    <p style="color: #000000;">التمور</p>
                    <i class="sicon-arrow-left"></i>
                </div>
            </a>
            
            <a href="https://bzaraldar-sa.com/redirect/categories/1233902850" class="card_category" style="width: auto; height: auto; border-radius: 4px; background-color: #edf7ed; display: block; text-decoration: none;">
                <div class="card_img" style="background-color: #edf7ed; cursor: pointer;">
                    <img src="https://cdn.salla.sa/form-builder/SWmFjWkWdSeJCSUEjgEaoQ6oZPpMzFda3fTJuPjo.jpg" alt="منتجات موسمية">
                </div>
                <div class="card-name">
                    <p style="color: #000000;">منتجات موسمية</p>
                    <i class="sicon-arrow-left"></i>
                </div>
            </a>
            
            <a href="https://bzaraldar-sa.com/redirect/categories/993908553" class="card_category" style="width: auto; height: auto; border-radius: 4px; background-color: #edf7ed; display: block; text-decoration: none;">
                <div class="card_img" style="background-color: #edf7ed; cursor: pointer;">
                    <img src="https://cdn.salla.sa/form-builder/A9Fvq3SKvFgyMAm0rG62ltepJiKAvYEiYvfYmXAF.png" alt="الباكجات">
                </div>
                <div class="card-name">
                    <p style="color: #000000;">الباكجات</p>
                    <i class="sicon-arrow-left"></i>
                </div>
            </a>
        </div>
    `;
    
    // إضافة الأقسام الجديدة
    if (originalCategories && originalCategories.parentElement) {
        originalCategories.parentElement.insertAdjacentHTML('beforeend', newCategories);
    }
});