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

    const isCategory = document.body.classList.contains('product-index');
    const isBrand = document.body.classList.contains('brands-single');

    if (!isCategory && !isBrand) return;

    if (document.querySelector('.brand-slider-wrapper')) return;

    const brands = [
        {
            name: 'فان كليف',
            image: 'https://cdn.salla.sa/zvlaQP/rikZZuuVxdDwMxhMXuD3O7ySXg61jPLhglirVa5Q.jpg',
            url: 'https://stellara-boutique.com/ar/فان-كليف/brand-1426087393'
        },
        {
            name: 'كارتير',
            image: 'https://cdn.salla.sa/zvlaQP/CoM7SN46G7soqiVagYEwWAqDKlmvl19bfPlFa6yL.png',
            url: 'https://stellara-boutique.com/ar/كارتير/brand-1851455726'
        },
        {
            name: 'سواروفسكي',
            image: 'https://cdn.salla.sa/zvlaQP/UDlfTkw6u6PgMzB1mievLwgnoln79ohK5RzbF8cR.jpg',
            url: 'https://stellara-boutique.com/ar/سواروفسكي/brand-478009837'
        },
        {
            name: 'ميسيكا',
            image: 'https://cdn.salla.sa/zvlaQP/rzBbbbf4YL13xOQPW7B72livr3IORfm7RJf1LSAT.png',
            url: 'https://stellara-boutique.com/ar/ميسيكا/brand-793166325'
        },
        {
            name: 'APM',
            image: 'https://cdn.salla.sa/zvlaQP/aYitiyCsfJStEbFgki5crQKKJ0IVwlbg0Lr6GH8S.jpg',
            url: 'https://stellara-boutique.com/ar/apm/brand-168568552'
        },
        {
            name: 'ديور',
            image: 'https://cdn.salla.sa/zvlaQP/f7KUWSN3bd1l0B4IKyY72RnEf3y86KJnrJeeDyu9.jpg',
            url: 'https://stellara-boutique.com/ar/dior/brand-1892391907'
        }
    ];

    const html = `
        <div class="brand-slider-wrapper">

            <div class="brand-title">
                تسوقي حسب الماركة
            </div>

            <div class="brand-slider">
                ${brands.map(item => `
                    <a href="${item.url}" class="brand-card" aria-label="${item.name}">
                        <img src="${item.image}" alt="${item.name}" loading="lazy">
                        <span class="brand-name">${item.name}</span>
                    </a>
                `).join('')}
            </div>

        </div>
    `;

    if (isCategory) {

        const target = document.querySelector('.products-index .container');

        if (target) {
            target.insertAdjacentHTML('afterbegin', html);
        }

    } else if (isBrand) {

        const brandHeader = document.querySelector(
            'header.flex.flex-col.md\\:flex-row'
        );

        if (brandHeader) {
            brandHeader.insertAdjacentHTML('afterend', html);
        }
    }

});