// Alpine.js initialization for the Military Welfare site
document.addEventListener('alpine:init', () => {
    // Hero Slider
    Alpine.data('heroSlider', () => ({
        currentSlide: 1,
        totalSlides: 3,
        autoplayInterval: null,
        
        init() {
            // Ensure first slide is visible immediately
            this.$nextTick(() => {
                this.currentSlide = 1;
                // Start autoplay after a short delay
                setTimeout(() => {
                    this.startAutoplay();
                }, 2000);
            });
        },
        
        startAutoplay() {
            if (this.autoplayInterval) {
                clearInterval(this.autoplayInterval);
            }
            this.autoplayInterval = setInterval(() => {
                this.nextSlide();
            }, 5000);
        },
        
        stopAutoplay() {
            if (this.autoplayInterval) {
                clearInterval(this.autoplayInterval);
            }
        },
        
        nextSlide() {
            this.stopAutoplay();
            this.currentSlide = this.currentSlide === this.totalSlides ? 1 : this.currentSlide + 1;
            this.startAutoplay();
        },
        
        prevSlide() {
            this.stopAutoplay();
            this.currentSlide = this.currentSlide === 1 ? this.totalSlides : this.currentSlide - 1;
            this.startAutoplay();
        }
    }));
    
    // Counter animation
    Alpine.data('counter', () => ({
        current: 0,
        target: 0,
        
        init() {
            this.target = parseInt(this.$el.dataset.target);
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        this.animate();
                        observer.unobserve(this.$el);
                    }
                });
            }, { threshold: 0.5 });
            
            observer.observe(this.$el);
        },
        
        animate() {
            const duration = 3000; // 3 seconds
            const increment = this.target / (duration / 16); // 16ms is roughly 60fps
            
            const timer = setInterval(() => {
                this.current += increment;
                if (this.current >= this.target) {
                    this.current = this.target;
                    clearInterval(timer);
                }
            }, 16);
        }
    }));
    
    // Leave types carousel
    Alpine.data('leaveTypesCarousel', () => ({
        activeSlide: 0,
        totalSlides: 3,
        
        init() {
            // For mobile, show one slide at a time
            if (window.innerWidth < 768) {
                this.totalSlides = 3;
            } 
            // For desktop, show all 3 at once
            else {
                this.totalSlides = 1;
            }
            
            window.addEventListener('resize', () => {
                if (window.innerWidth < 768) {
                    this.totalSlides = 3;
                } else {
                    this.totalSlides = 1;
                    if (this.activeSlide > 0) {
                        this.activeSlide = 0;
                    }
                }
            });
        },
        
        next() {
            if (this.activeSlide < this.totalSlides - 1) {
                this.activeSlide++;
            }
        },
        
        prev() {
            if (this.activeSlide > 0) {
                this.activeSlide--;
            }
        }
    }));
});
