HTMLify

// GLOBALS
let scene, camera, renderer, ghostModel;
let scrollProgress = 0;
let isLoaded = false;

// INIT
window.addEventListener('DOMContentLoaded', () => {
    init3D();
    initScroll();
    initNavigation();
});

// 3D SCENE
function init3D() {
    // Scene setup
    scene = new THREE.Scene();
    scene.fog = new THREE.Fog(0x050505, 10, 50);
    
    // Camera
    camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
    );
    camera.position.set(0, 0, 5);
    
    // Renderer
    renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById('ghost-canvas'),
        antialias: true,
        alpha: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.shadowMap.enabled = true;
    
    // Lighting
    const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
    scene.add(ambientLight);
    
    const directionalLight = new THREE.DirectionalLight(0x00ff41, 1);
    directionalLight.position.set(5, 5, 5);
    directionalLight.castShadow = true;
    scene.add(directionalLight);
    
    const pointLight = new THREE.PointLight(0xff0040, 0.5, 100);
    pointLight.position.set(-5, -5, 5);
    scene.add(pointLight);
    
    // Try to load Ghost Model
    loadGhostModel();
    
    // Handle resize
    window.addEventListener('resize', onWindowResize, false);
    
    // Start animation
    animate();
}

function loadGhostModel() {
    const loader = new THREE.GLTFLoader();
    
    // First, try the original path (works with server)
    loader.load(
        'models/ghost/simon_riley.glb',
        (gltf) => setupGhostModel(gltf.scene),
        undefined,
        (error) => {
            console.warn('Model not found, creating placeholder...');
            createGhostPlaceholder();
        }
    );
}

function setupGhostModel(model) {
    ghostModel = model;
    ghostModel.scale.set(1.5, 1.5, 1.5);
    ghostModel.position.y = -1;
    ghostModel.traverse((child) => {
        if (child.isMesh) {
            child.castShadow = true;
            child.receiveShadow = true;
        }
    });
    scene.add(ghostModel);
    finishLoading();
}

function createGhostPlaceholder() {
    // Create a simple "ghost" figure using primitives
    const group = new THREE.Group();
    
    // Body (cylinder)
    const bodyGeometry = new THREE.CylinderGeometry(0.3, 0.5, 1.5, 8);
    const bodyMaterial = new THREE.MeshStandardMaterial({ 
        color: 0x333333,
        metalness: 0.8,
        roughness: 0.2
    });
    const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
    body.position.y = 0;
    group.add(body);
    
    // Head (sphere)
    const headGeometry = new THREE.SphereGeometry(0.25, 16, 16);
    const headMaterial = new THREE.MeshStandardMaterial({ 
        color: 0x444444,
        metalness: 0.8
    });
    const head = new THREE.Mesh(headGeometry, headMaterial);
    head.position.y = 1.2;
    group.add(head);
    
    // Mask (flat plane with ghost skull texture)
    const maskGeometry = new THREE.PlaneGeometry(0.5, 0.5);
    const maskMaterial = new THREE.MeshBasicMaterial({ 
        color: 0x00ff41,
        transparent: true,
        opacity: 0.8
    });
    const mask = new THREE.Mesh(maskGeometry, maskMaterial);
    mask.position.z = 0.26;
    mask.position.y = 1.2;
    group.add(mask);
    
    // Ghost "logo" floating
    const logoGeometry = new THREE.RingGeometry(0.3, 0.5, 8);
    const logoMaterial = new THREE.MeshBasicMaterial({ 
        color: 0xff0040,
        transparent: true,
        opacity: 0.6,
        side: THREE.DoubleSide
    });
    const logo = new THREE.Mesh(logoGeometry, logoMaterial);
    logo.position.y = -1.5;
    logo.rotation.x = Math.PI / 2;
    group.add(logo);
    
    ghostModel = group;
    ghostModel.scale.set(1.5, 1.5, 1.5);
    scene.add(ghostModel);
    finishLoading();
}

function finishLoading() {
    // Hide loader
    document.getElementById('loader').style.opacity = '0';
    setTimeout(() => {
        document.getElementById('loader').style.display = 'none';
        isLoaded = true;
    }, 500);
}

// SCROLL ANIMATIONS
function initScroll() {
    const sections = document.querySelectorAll('.section');
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                // Remove active from all
                sections.forEach(s => s.classList.remove('active'));
                // Add active to current
                entry.target.classList.add('active');
                
                // Update scroll progress
                const index = Array.from(sections).indexOf(entry.target);
                scrollProgress = index / (sections.length - 1);
                
                // Trigger Ghost animation
                animateGhostOnScroll(scrollProgress);
            }
        });
    }, {
        threshold: 0.5,
        rootMargin: '-20% 0px -20% 0px'
    });
    
    sections.forEach(section => observer.observe(section));
}

// GHOST ANIMATIONS
function animateGhostOnScroll(progress) {
    if (!ghostModel || !isLoaded) return;
    
    // Rotation based on scroll
    ghostModel.rotation.y = progress * Math.PI * 2;
    
    // Position bobbing
    ghostModel.position.y = -1 + Math.sin(progress * Math.PI * 4) * 0.2;
    
    // Scale (closer/further)
    const scale = 1.5 + progress * 0.5;
    ghostModel.scale.set(scale, scale, scale);
    
    // Opacity/visibility (fade in/out)
    ghostModel.traverse((child) => {
        if (child.isMesh && child.material) {
            child.material.transparent = true;
            child.material.opacity = 0.5 + (progress * 0.5);
        }
    });
    
    // Special animation at 100% (full reveal)
    if (progress >= 0.9) {
        ghostModel.rotation.x = Math.sin(Date.now() * 0.001) * 0.1;
    }
}

// NAVIGATION
function initNavigation() {
    const navLinks = document.querySelectorAll('.nav-menu a');
    
    navLinks.forEach(link => {
        link.addEventListener('click', (e) => {
            e.preventDefault();
            const target = document.querySelector(link.getAttribute('href'));
            target.scrollIntoView({ behavior: 'smooth' });
            
            // Play radio chatter sound
            const audio = document.getElementById('ghost-audio');
            if (audio) {
                audio.volume = 0.1;
                audio.play().catch(() => {});
            }
        });
    });
}

// ANIMATION LOOP
function animate() {
    requestAnimationFrame(animate);
    
    if (ghostModel && isLoaded) {
        // Subtle idle animation
        ghostModel.rotation.z = Math.sin(Date.now() * 0.0005) * 0.02;
    }
    
    renderer.render(scene, camera);
}

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

// EASTER EGG: Konami Code
let konamiCode = [];
const konamiPattern = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowLeft', 'ArrowRight', 'b', 'a'];

window.addEventListener('keydown', (e) => {
    konamiCode.push(e.key);
    konamiCode = konamiCode.slice(-10);
    
    if (konamiCode.join(',') === konamiPattern.join(',')) {
        // Ghost reveals fully
        document.body.style.background = 'radial-gradient(circle, #1a1a1a, #050505)';
        document.querySelector('.nav-brand').textContent = 'ghost_protocol: UNLOCKED';
        console.log('Ghost Protocol Activated');
    }
});