main.js

$(document).ready(function() {
    // --- SCÈNE 3D AVEC THREE.JS ---
    let scene, camera, renderer, cube;

    function initThree() {
        const container = $('#canvas-container')[0];
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        renderer = new THREE.WebGLRenderer({ alpha: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);

        const geometry = new THREE.BoxGeometry(1.5, 1.5, 1.5);
        const material = new THREE.MeshNormalMaterial();
        cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        camera.position.z = 5;

        animate();
    }

    function animate() {
        requestAnimationFrame(animate);
        cube.rotation.x += 0.005;
        cube.rotation.y += 0.005;
        renderer.render(scene, camera);
    }
    
    $(window).on('resize', () => {
        renderer.setSize(window.innerWidth, window.innerHeight);
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
    });

    // --- GESTION DE LA NAVIGATION (ROUTING CÔTÉ CLIENT) ---
    const routes = {
        '#home': `
            <div class="text-center page-content">
                <h1 class="display-3">Bienvenue</h1>
                <p class="lead">Un portfolio interactif construit avec les dernières technologies du web.</p>
            </div>`,
        '#about': `
            <div class="page-content">
                <h2>À propos de moi</h2>
                <p>Je suis un développeur passionné par le design créatif et les expériences utilisateur immersives. Ce site est une démonstration de ce qu'il est possible de faire avec des outils comme Three.js et GSAP.</p>
            </div>`,
        '#portfolio': `
            <div class="page-content">
                <h2>Portfolio</h2>
                <div class="row">
                    ${Array.from({length: 6}, (_, i) => `
                    <div class="col-md-4 mb-4">
                        <div class="card">
                            <img src="//dummyimage.com/400x300/ddd/bbb" class="card-img-top" alt="Projet ${i + 1}">
                            <div class="card-body">
                                <h5 class="card-title">Projet ${i + 1}</h5>
                            </div>
                        </div>
                    </div>
                    `).join('')}
                </div>
            </div>`,
        '#news': `
            <div class="page-content">
                <h2>Actualités</h2>
                <p>Les dernières nouvelles et mises à jour seront publiées ici.</p>
            </div>`
    };

    function loadContent(hash) {
        const content = routes[hash] || routes['#home'];
        const $mainContent = $('#main-content');

        // Animation de sortie avec GSAP
        gsap.to($mainContent, { 
            opacity: 0, 
            y: 20, 
            duration: 0.4, 
            onComplete: () => {
                $mainContent.html(content);
                // Animation d'entrée
                gsap.fromTo($mainContent, { opacity: 0, y: -20 }, { opacity: 1, y: 0, duration: 0.5 });
            }
        });

        // Visibilité de la scène 3D
        if (hash === '#home' || !hash) {
            gsap.to('#canvas-container', { opacity: 1, duration: 1 });
        } else {
            gsap.to('#canvas-container', { opacity: 0, duration: 1 });
        }
    }

    // Gestion des clics sur les liens de navigation
    $('.nav-link').on('click', function(e) {
        e.preventDefault();
        const hash = $(this).attr('href');
        window.location.hash = hash;
    });
    
    // Gérer le changement de hash (navigation via les boutons précédent/suivant du navigateur)
    $(window).on('hashchange', function() {
        loadContent(window.location.hash);
    }).trigger('hashchange'); // Charge le contenu initial

    // Initialiser la scène 3D
    initThree();
});