// Initialize particles.js
document.addEventListener('DOMContentLoaded', function() {
    particlesJS('particles-js', {
        "particles": {
            "number": {
                "value": 80,
                "density": {
                    "enable": true,
                    "value_area": 800
                }
            },
            "color": {
                "value": ["#00E4FF", "#FF00FF"]
            },
            "shape": {
                "type": "circle",
                "stroke": {
                    "width": 0,
                    "color": "#000000"
                }
            },
            "opacity": {
                "value": 0.5,
                "random": true,
                "anim": {
                    "enable": true,
                    "speed": 1,
                    "opacity_min": 0.1,
                    "sync": false
                }
            },
            "size": {
                "value": 3,
                "random": true,
                "anim": {
                    "enable": true,
                    "speed": 2,
                    "size_min": 0.1,
                    "sync": false
                }
            },
            "line_linked": {
                "enable": true,
                "distance": 150,
                "color": "#00E4FF",
                "opacity": 0.2,
                "width": 1
            },
            "move": {
                "enable": true,
                "speed": 1,
                "direction": "none",
                "random": true,
                "straight": false,
                "out_mode": "out",
                "bounce": false,
                "attract": {
                    "enable": true,
                    "rotateX": 600,
                    "rotateY": 1200
                }
            }
        },
        "interactivity": {
            "detect_on": "canvas",
            "events": {
                "onhover": {
                    "enable": true,
                    "mode": "grab"
                },
                "onclick": {
                    "enable": true,
                    "mode": "push"
                },
                "resize": true
            },
            "modes": {
                "grab": {
                    "distance": 140,
                    "line_linked": {
                        "opacity": 0.5
                    }
                },
                "push": {
                    "particles_nb": 4
                }
            }
        },
        "retina_detect": true
    });

    // Countdown Timer
    const countdown = () => {
        const countDate = new Date('January 1, 2026 00:00:00').getTime();
        const now = new Date().getTime();
        const gap = countDate - now;

        // Time calculations
        const second = 1000;
        const minute = second * 60;
        const hour = minute * 60;
        const day = hour * 24;

        // Calculate remaining time
        const textDay = Math.floor(gap / day);
        const textHour = Math.floor((gap % day) / hour);
        const textMinute = Math.floor((gap % hour) / minute);
        const textSecond = Math.floor((gap % minute) / second);

        // Update HTML
        document.querySelectorAll('.text-4xl').forEach((el, index) => {
            if (index === 0) el.textContent = textDay.toString().padStart(2, '0');
            if (index === 1) el.textContent = textHour.toString().padStart(2, '0');
            if (index === 2) el.textContent = textMinute.toString().padStart(2, '0');
            if (index === 3) el.textContent = textSecond.toString().padStart(2, '0');
        });
    };

    // Run countdown every second
    setInterval(countdown, 1000);
    countdown(); // Initial call

    // Carousel Navigation
    const carousel = document.querySelector('.flex.space-x-4');
    const leftBtn = document.querySelector('.carousel-nav:first-child');
    const rightBtn = document.querySelector('.carousel-nav:last-child');

    if (leftBtn && rightBtn) {
        leftBtn.addEventListener('click', () => {
            carousel.scrollBy({ left: -150, behavior: 'smooth' });
        });

        rightBtn.addEventListener('click', () => {
            carousel.scrollBy({ left: 150, behavior: 'smooth' });
        });
    }

    // Form Submission
    const form = document.querySelector('input[type="email"]');
    const submitBtn = document.querySelector('button.bg-gradient-to-r');

    if (submitBtn) {
        submitBtn.addEventListener('click', () => {
            if (form.value && form.value.includes('@')) {
                alert('Thank you for pre-registering! Check your email for confirmation.');
                form.value = '';
            } else {
                alert('Please enter a valid email address.');
            }
        });
    }
});