/**
 * PARTICLE ANIMATION SETUP
 * tsParticles configuration untuk hero section
 */

async function initParticles() {
    const particlesContainer = document.getElementById("tsparticles");
    
    if (!particlesContainer) {
        console.log("Particles container not found");
        return;
    }

    // Initialize tsParticles
    await tsParticles.load("tsparticles", {
        // Preset configuration
        preset: "bubbles",
        
        // Background configuration
        background: {
            color: {
                value: "transparent"
            }
        },

        // Fullscreen particles
        fullScreen: {
            enable: false,
            zIndex: 0
        },

        // Particles configuration
        particles: {
            number: {
                value: 60,  // Number of particles
                density: {
                    enable: true,
                    value_area: 800
                }
            },

            color: {
                value: [
                    "#9333ea",  // Purple
                    "#ec4899",  // Pink
                    "#a78bfa",  // Light purple
                    "#f472b6"   // Light pink
                ]
            },

            shape: {
                type: "circle"
            },

            opacity: {
                value: {
                    min: 0.3,
                    max: 0.7
                },
                animation: {
                    enable: true,
                    speed: 1,
                    minimumValue: 0.1,
                    sync: false
                }
            },

            size: {
                value: {
                    min: 1,
                    max: 3
                },
                animation: {
                    enable: true,
                    speed: 3,
                    minimumValue: 0.5,
                    sync: false
                }
            },

            // Movement/Velocity
            move: {
                enable: true,
                speed: {
                    min: 0.5,
                    max: 2
                },
                direction: "none",
                random: true,
                straight: false,
                outModes: {
                    default: "bounce"
                },
                attract: {
                    enable: false
                }
            },

            // Links between particles
            links: {
                enable: true,
                distance: 150,
                color: "#9333ea",
                opacity: 0.3,
                width: 1,
                triangles: {
                    enable: false
                }
            },

            // Interaction with mouse
            interactivity: {
                events: {
                    onHover: {
                        enable: true,
                        mode: "repulse"
                    },
                    onClick: {
                        enable: true,
                        mode: "push"
                    },
                    resize: {
                        enable: true
                    }
                },
                modes: {
                    repulse: {
                        distance: 200,
                        duration: 0.4,
                        speed: 1
                    },
                    push: {
                        quantity: 5
                    }
                }
            }
        },

        // Detection (for mobile)
        detectRetina: true
    });

    console.log("✨ Particles initialized successfully!");
}

// Initialize when DOM is ready
if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initParticles);
} else {
    initParticles();
}