/* Add custom JS code below */ 
document.addEventListener('DOMContentLoaded', function() {
    const cats = [
        { name: 'مولدات كهرباء', img: 'https://cdn.salla.sa/mQgPdZ/ec2d80a0-acd4-46e3-a1c7-68ff555e34c1-500x500-0OJOnVlPDxHF6fCj4NqUDeGLCtczGf5eO9QxQkhp.png' },
        { name: 'مضخات مياه وغطاسات', img: 'https://cdn.salla.sa/mQgPdZ/3d9b484d-19c0-49a1-8b10-6b1b3dd9cf47-500x500-PvQrsINlSB1RKSGR7te1IjrjLz6QI07X3VVkzeUG.png' },
        { name: 'معدات زراعية', img: 'https://cdn.salla.sa/mQgPdZ/7fcfe5e1-26ba-4d4e-be89-cb4ba55c9681-500x498.73096446701-i6XoCFs3H2nVMFHBLgpNPsnTweUrSRTaUdhFINJp.png' },
        { name: 'كمبروسرات هواء وملحقاتها', img: 'https://cdn.salla.sa/mQgPdZ/eeec67fa-7aff-48b3-bfc2-7880bacd7fa3-500x500-vm3jRp0puDmmA84KzV1dI1QVrXyFEWd46ABmFaNV.png' },
        { name: 'معدات مقاولات إنشائية', img: 'https://cdn.salla.sa/mQgPdZ/2019bbbf-ea0f-412f-a599-fd485d68465e-500x500-wPFVA0IeorokKKXS9osKdu42fKrTg8oAn0m94Yr0.jpg' },
        { name: 'معدات تنظيف وضغط عالي', img: 'https://cdn.salla.sa/mQgPdZ/40870f3c-43bc-497b-a3f6-31448911fd84-500x500-efgbiWKsyTW1fcdoDoSRV05oJyD3q7xLlya13u8I.png' },
        { name: 'لوازم ورش وسيارات', img: 'https://cdn.salla.sa/mQgPdZ/4a2c4212-17a7-4272-8d76-74133e91760f-500x500-PwbiW0HGRidwdk0fr5o0ujl3wURqhh58xa4ud8m1.png' },
        { name: 'عدد كهربائية', img: 'https://cdn.salla.sa/mQgPdZ/d1896560-d8ae-4543-bfce-5ee66844d908-500x500-6s8UMXmXr6ma4mJFNrmJIydLxb4F6tmjdg1KoNAt.png' }
    ];

    const style = document.createElement('style');
    style.innerHTML = `
        .slider-wrapper { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 30px auto; max-width: 1200px; }
        .track { display: flex; gap: 20px; overflow-x: hidden; width: 85%; scroll-behavior: smooth; }
        
        /* ضبط ظهور 6 أقسام في اللاب توب */
        .cat-card { min-width: calc(100% / 6 - 20px); text-decoration: none; color: #333; text-align: center; }
        
        .card-img-wrap { width: 120px; height: 120px; border-radius: 50%; border: 1px solid #ddd; overflow: hidden; margin: 0 auto; transition: 0.3s; }
        .cat-card img { width: 100%; height: 100%; object-fit: contain; transition: 0.8s ease; }
        .cat-card:hover .card-img-wrap { border: 1px solid #de1f33 !important; }
        .cat-card:hover img { transform: rotate(360deg); }
        .nav-btn { background: #f8f8f8; border: 1px solid #eee; padding: 15px; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #666; }
        
        /* ضبط ظهور قسمين فقط في الجوال */
        @media (max-width: 768px) {
            .cat-card { min-width: calc(100% / 2 - 10px); }
            .card-img-wrap { width: 90px; height: 90px; }
            .track { width: 90%; gap: 10px; }
        }
    `;
    document.head.appendChild(style);

    const section = document.createElement('section');
    section.innerHTML = `
        <div class="slider-wrapper">
            <button id="prev" class="nav-btn"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6"/></svg></button>
            <div id="track" class="track"></div>
            <button id="next" class="nav-btn"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg></button>
        </div>
    `;

    const firstSection = document.querySelector('main section');
    if (firstSection) firstSection.insertAdjacentElement('afterend', section);
    else document.querySelector('main').appendChild(section);

    const track = document.getElementById('track');
    cats.forEach(c => {
        track.innerHTML += `
            <a href="#" class="cat-card">
                <div class="card-img-wrap"><img src="${c.img}"></div>
                <p style="font-weight:bold; margin-top:10px; font-size:14px;">${c.name}</p>
            </a>
        `;
    });

    document.getElementById('next').onclick = () => track.scrollBy({left: 250, behavior: 'smooth'});
    document.getElementById('prev').onclick = () => track.scrollBy({left: -250, behavior: 'smooth'});
});