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

    const slider = document.querySelector('.hero-slider');
    if (!slider) return;

    const slides = slider.querySelectorAll('.hero-slide');
    const count  = slides.length;

    if (count <= 1) return; // شريحة واحدة = ثابت

    let index = 0;
    let timer = null;
    const delay = 5000;

    // Dots
    const dotsWrap = document.createElement('div');
    dotsWrap.className = 'hero-dots';

    slides.forEach((_, i) => {
        const dot = document.createElement('div');
        dot.className = 'hero-dot' + (i === 0 ? ' is-active' : '');
        dot.addEventListener('click', () => goTo(i));
        dotsWrap.appendChild(dot);
    });

    slider.appendChild(dotsWrap);

    // Arrows
    const prev = document.createElement('button');
    prev.className = 'hero-arrow prev';
    prev.innerHTML = '‹';

    const next = document.createElement('button');
    next.className = 'hero-arrow next';
    next.innerHTML = '›';

    slider.appendChild(prev);
    slider.appendChild(next);

    function goTo(i) {
        slides[index].classList.remove('is-active');
        dotsWrap.children[index].classList.remove('is-active');

        index = (i + count) % count;

        slides[index].classList.add('is-active');
        dotsWrap.children[index].classList.add('is-active');
    }

    function nextSlide() {
        goTo(index + 1);
    }

    function start() {
        stop();
        timer = setInterval(nextSlide, delay);
    }

    function stop() {
        if (timer) clearInterval(timer);
    }

    prev.addEventListener('click', () => {
        goTo(index - 1);
        start();
    });

    next.addEventListener('click', () => {
        nextSlide();
        start();
    });

    slider.addEventListener('mouseenter', stop);
    slider.addEventListener('mouseleave', start);

    start();
});
