// Массив фоновых изображений (те же, что были)
const heroImages = [
    'img/h777.webp',
    'img/h777o.webp',
    'img/h777l.webp',
    'img/h777z.webp'
];

// Возможные эффекты анимации (классы CSS)
const effects = ['effect-shutter', 'effect-tornado', 'effect-wave'];

// Текущий индекс изображения
let currentIndex = 0;
let intervalId = null;

// Получаем элемент hero
const hero = document.querySelector('.hero');

// Функция для применения случайного эффекта и смены фона
function changeBackgroundWithEffect() {
    if (!hero) return;

    // Выбираем случайный эффект
    const randomEffect = effects[Math.floor(Math.random() * effects.length)];
    
    // Добавляем класс эффекта
    hero.classList.add('effect-active', randomEffect);
    
    // Через небольшую задержку меняем фон (чтобы анимация началась)
    // Но для плавности меняем изображение сразу, а эффект создаёт иллюзию перехода
    currentIndex = (currentIndex + 1) % heroImages.length;
    const newImageUrl = heroImages[currentIndex];
    
    // Меняем фон
    hero.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('${newImageUrl}')`;
    
    // Через время, равное длительности анимации, убираем класс эффекта
    setTimeout(() => {
        hero.classList.remove('effect-active', randomEffect);
    }, 800); // длительность анимации 0.8с
}

// Запуск слайдшоу
function startSlideshow(intervalMs = 15000) {
    if (intervalId) clearInterval(intervalId);
    intervalId = setInterval(changeBackgroundWithEffect, intervalMs);
}

// Остановка слайдшоу (опционально)
function stopSlideshow() {
    if (intervalId) {
        clearInterval(intervalId);
        intervalId = null;
    }
}

// Инициализация: устанавливаем первый фон сразу
if (hero) {
    hero.style.backgroundImage = `linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('${heroImages[0]}')`;
    startSlideshow(15000);
}