<?php
/**
 * Plugin Name: Coco Beauty Bar 3D Visuals
 * Description: Adds 3D animations using Three.js to the luxury site.
 */

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script('threejs', 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js', [], '128', true);
});

add_action('wp_footer', function() {
    // Only show on the home page hero
    if (!is_front_page()) return;
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const hero = document.querySelector('.coco-hero');
        if (!hero) return;

        // Create canvas container
        const canvasContainer = document.createElement('div');
        canvasContainer.id = 'coco-3d-bg';
        canvasContainer.style.position = 'absolute';
        canvasContainer.style.top = '0';
        canvasContainer.style.left = '0';
        canvasContainer.style.width = '100%';
        canvasContainer.style.height = '100%';
        canvasContainer.style.zIndex = '0';
        canvasContainer.style.pointerEvents = 'none';
        hero.style.position = 'relative';
        hero.insertBefore(canvasContainer, hero.firstChild);

        // Ensure hero content is above the canvas
        Array.from(hero.children).forEach(child => {
            if (child.id !== 'coco-3d-bg') {
                child.style.position = 'relative';
                child.style.zIndex = '1';
            }
        });

        // Three.js Scene Setup
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, hero.offsetWidth / hero.offsetHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
        renderer.setSize(hero.offsetWidth, hero.offsetHeight);
        canvasContainer.appendChild(renderer.domElement);

        // Add floating golden particles
        const geometry = new THREE.BufferGeometry();
        const count = 50;
        const positions = new Float32Array(count * 3);
        for (let i = 0; i < count * 3; i++) {
            positions[i] = (Math.random() - 0.5) * 10;
        }
        geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));

        const material = new THREE.PointsMaterial({
            color: 0xD4AF37, // Gold
            size: 0.1,
            transparent: true,
            opacity: 0.6
        });

        const points = new THREE.Points(geometry, material);
        scene.add(points);

        camera.position.z = 5;

        function animate() {
            requestAnimationFrame(animate);
            points.rotation.y += 0.002;
            points.rotation.x += 0.001;
            renderer.render(scene, camera);
        }

        animate();

        window.addEventListener('resize', () => {
            camera.aspect = hero.offsetWidth / hero.offsetHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(hero.offsetWidth, hero.offsetHeight);
        });
    });
    </script>
    <?php
});
