use leptos::prelude::*;

#[component]
pub fn ParticleBackground() -> impl IntoView {
    // Generate 20 particles with random positions
    let particles: Vec<_> = (0..20)
        .map(|i| {
            let left = (i * 5) % 100;
            let delay = (i as f32) * 0.5;
            let duration = 15.0 + (i as f32 % 10.0);
            (left, delay, duration)
        })
        .collect();

    view! {
        <div class="fixed inset-0 overflow-hidden pointer-events-none z-0">
            {particles.into_iter().map(|(left, delay, duration)| {
                view! {
                    <div
                        class="absolute w-1 h-1 bg-neon-magenta/20 rounded-full"
                        style=format!(
                            "left: {}%; animation: float {}s {}s infinite linear; bottom: -10px;",
                            left, duration, delay
                        )
                    />
                }
            }).collect_view()}
        </div>

        <style>
            "@keyframes float {
                0% { transform: translateY(0) translateX(0); opacity: 0; }
                10% { opacity: 0.5; }
                90% { opacity: 0.5; }
                100% { transform: translateY(-100vh) translateX(20px); opacity: 0; }
            }"
        </style>
    }
}