// Background animation with Three.js
let scene, camera, renderer, stars = [];

function initBackground() {
    // Setup scene
    scene = new THREE.Scene();
    
    // Setup camera
    camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 100;
    
    // Setup renderer
    renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x000000, 0); // Transparent background
    
    // Append renderer to DOM
    const backgroundContainer = document.getElementById('background-container');
    if (backgroundContainer) {
        backgroundContainer.appendChild(renderer.domElement);
    }
    
    // Add stars
    for (let i = 0; i < 1000; i++) {
        const geometry = new THREE.SphereGeometry(0.2, 8, 8);
        const material = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: Math.random() * 0.5 + 0.1 });
        const star = new THREE.Mesh(geometry, material);
        
        // Random position
        star.position.x = Math.random() * 600 - 300;
        star.position.y = Math.random() * 600 - 300;
        star.position.z = Math.random() * 600 - 300;
        
        // Store reference to move in animation
        star.velocity = Math.random() * 0.02 + 0.005;
        stars.push(star);
        
        scene.add(star);
    }
    
    // Add large glowing particles
    for (let i = 0; i < 15; i++) {
        const size = Math.random() * 5 + 2;
        const geometry = new THREE.SphereGeometry(size, 16, 16);
        
        // Create a glowing material
        const color = new THREE.Color();
        color.setHSL(Math.random(), 0.7, 0.5); // Random hue
        
        const material = new THREE.MeshBasicMaterial({ 
            color: color, 
            transparent: true, 
            opacity: 0.2
        });
        
        const particle = new THREE.Mesh(geometry, material);
        
        // Random position but further away
        particle.position.x = Math.random() * 1000 - 500;
        particle.position.y = Math.random() * 1000 - 500;
        particle.position.z = Math.random() * 200 - 400;
        
        // Store reference to move in animation
        particle.velocity = Math.random() * 0.01 + 0.002;
        stars.push(particle);
        
        scene.add(particle);
    }
    
    // Handle window resize
    window.addEventListener('resize', onWindowResize);
    
    // Start animation
    animate();
}

function animate() {
    requestAnimationFrame(animate);
    
    // Move stars
    stars.forEach(star => {
        star.position.z += star.velocity;
        
        // Reset position if star moves too close
        if (star.position.z > 100) {
            star.position.z = -300;
        }
    });
    
    // Rotate the entire scene slightly for a dreamy effect
    scene.rotation.y += 0.0003;
    scene.rotation.x += 0.0001;
    
    renderer.render(scene, camera);
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

// Initialize background when the DOM is loaded
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initBackground);
} else {
    initBackground();
}