document.addEventListener('alpine:init', () => {
    Alpine.data('navigation', () => ({
        menuStates: {
            about: false,
            work: false,
            contact: false
        },
        toggleSubmenu(menu) {
            this.menuStates[menu] = !this.menuStates[menu];
            Object.keys(this.menuStates).forEach(key => {
                if (key !== menu) this.menuStates[key] = false;
            });
        }
    }));

    Alpine.data('mainApp', () => ({
        images: [],
        currentImageIndex: null,
        async init() {
            const response = await fetch('data.json');
            const data = await response.json();
            this.images = data.images;
            this.currentImageIndex = Math.floor(Math.random() * this.images.length);
            this.$nextTick(() => {
                this.startImageAnimation();
            });
        },
        getRandomIndex() {
            let newIndex;
            do {
                newIndex = Math.floor(Math.random() * this.images.length);
            } while (newIndex === this.currentImageIndex && this.images.length > 1);
            return newIndex;
        },
        startImageAnimation() {
            const img = document.querySelector('.hero img');
            img.classList.add('zooming');
            
            img.addEventListener('animationend', () => {
                img.classList.add('fade-out');
                
                setTimeout(() => {
                    this.currentImageIndex = this.getRandomIndex();
                    img.classList.remove('zooming', 'fade-out');
                    setTimeout(() => {
                        img.classList.add('zooming');
                    }, 50);
                }, 1000);
            });
        }
    }));
});