js/main.js

/**

 * 🌿 Ivy's Creative Studio

 * Main Application Controller

 *

 * Handles tab switching, UI controls, and renderer management

 * WebGPU + Three.js + p5.js

 */

(async function () {
    "use strict";

    // DOM Elements
    const canvas = document.getElementById("gpuCanvas");
    const threeCanvas = document.getElementById("threeCanvas");
    const p5Container = document.getElementById("p5Container");
    const p5AudioContainer = document.getElementById("p5AudioContainer");
    const errorMessage = document.getElementById("webgpu-error");
    const loadingMessage = document.getElementById("loading");
    const tabs = document.querySelectorAll(".tab");
    const controlSections = document.querySelectorAll(".controls-section");

    // Renderers
    let device, context, format;
    let fractalsRenderer, fluidRenderer, particlesRenderer, patternsRenderer, audioRenderer;
    let threejsRenderer, p5jsRenderer, p5audioRenderer;
    let activeRenderer = null;
    let activeTab = "particles";
    let webgpuSupported = true;

    // Show loading
    loadingMessage.classList.remove("hidden");

    // Initialize WebGPU
    try {
        const result = await WebGPUUtils.initWebGPU(canvas);
        device = result.device;
        context = result.context;
        format = result.format;

        console.log("🌿 WebGPU initialized successfully!");

        // Initialize all renderers
        fractalsRenderer = new FractalsRenderer();
        fluidRenderer = new FluidRenderer();
        particlesRenderer = new ParticlesRenderer();
        patternsRenderer = new PatternsRenderer();
        audioRenderer = new AudioRenderer();

        await fractalsRenderer.init(device, context, format, canvas);
        await fluidRenderer.init(device, context, format, canvas);
        await particlesRenderer.init(device, context, format, canvas);
        await patternsRenderer.init(device, context, format, canvas);
        await audioRenderer.init(device, context, format, canvas);

        // Hide loading, start default renderer
        loadingMessage.classList.add("hidden");
    } catch (error) {
        console.error("WebGPU initialization failed:", error);
        loadingMessage.classList.add("hidden");
        webgpuSupported = false;
        // Don't show error - Three.js and p5.js still work!
        console.log("🟡 WebGPU not available, but Three.js and p5.js are ready!");
    }

    // Initialize Three.js renderer (always works)
    threejsRenderer = new ThreeJSRenderer();
    threejsRenderer.init(threeCanvas);

    // Initialize p5.js renderer (always works)
    p5jsRenderer = new P5JSRenderer();
    p5jsRenderer.init(p5Container);

    // Initialize p5.js Audio renderer (always works)
    p5audioRenderer = new P5AudioRenderer();
    p5audioRenderer.init(p5AudioContainer);

    // Start default tab (Particles = first tab!)
    switchTab(webgpuSupported ? "particles" : "threejs");

    // Tab switching
    function switchTab(tabName) {
        // Check if WebGPU tab selected but not supported
        const webgpuTabs = ["fractals", "fluid", "particles", "patterns", "audio"];
        if (webgpuTabs.includes(tabName) && !webgpuSupported) {
            console.warn("WebGPU not supported, switching to Three.js");
            tabName = "threejs";
        }

        // Stop active renderer
        if (activeRenderer) {
            activeRenderer.stop();
        }

        // Hide all canvases first
        canvas.classList.add("hidden");
        threeCanvas.classList.add("hidden");
        p5Container.classList.add("hidden");
        p5AudioContainer.classList.add("hidden");

        // Update tab UI
        tabs.forEach(tab => {
            tab.classList.toggle("active", tab.dataset.tab === tabName);
        });

        // Update controls UI
        controlSections.forEach(section => {
            const sectionId = section.id.replace("controls-", "");
            section.classList.toggle("active", sectionId === tabName);
            section.classList.toggle("hidden", sectionId !== tabName);
        });

        // Start new renderer
        activeTab = tabName;
        switch (tabName) {
            case "fractals":
                canvas.classList.remove("hidden");
                activeRenderer = fractalsRenderer;
                break;
            case "fluid":
                canvas.classList.remove("hidden");
                activeRenderer = fluidRenderer;
                break;
            case "particles":
                canvas.classList.remove("hidden");
                activeRenderer = particlesRenderer;
                break;
            case "patterns":
                canvas.classList.remove("hidden");
                activeRenderer = patternsRenderer;
                break;
            case "audio":
                canvas.classList.remove("hidden");
                activeRenderer = audioRenderer;
                break;
            case "threejs":
                threeCanvas.classList.remove("hidden");
                activeRenderer = threejsRenderer;
                break;
            case "p5js":
                p5Container.classList.remove("hidden");
                activeRenderer = p5jsRenderer;
                break;
            case "p5audio":
                p5AudioContainer.classList.remove("hidden");
                activeRenderer = p5audioRenderer;
                break;
        }

        if (activeRenderer) {
            activeRenderer.start();
        }
    }

    // Tab click handlers
    tabs.forEach(tab => {
        tab.addEventListener("click", () => {
            switchTab(tab.dataset.tab);
        });
    });

    // ============================================
    // Fractals Controls
    // ============================================

    const fractalType = document.getElementById("fractal-type");
    const fractalIterations = document.getElementById("fractal-iterations");
    const iterationsValue = document.getElementById("iterations-value");
    const fractalPalette = document.getElementById("fractal-palette");
    const fractalPower = document.getElementById("fractal-power");
    const powerValue = document.getElementById("power-value");
    const fractalColorshift = document.getElementById("fractal-colorshift");
    const colorshiftValue = document.getElementById("colorshift-value");
    const juliaReal = document.getElementById("julia-real");
    const juliaRealValue = document.getElementById("julia-real-value");
    const juliaImag = document.getElementById("julia-imag");
    const juliaImagValue = document.getElementById("julia-imag-value");
    const fractalAnimate = document.getElementById("fractal-animate");
    const fractalSmooth = document.getElementById("fractal-smooth");
    const resetFractals = document.getElementById("reset-fractals");

    if (fractalType) {
        fractalType.addEventListener("change", () => {
            fractalsRenderer?.setType(fractalType.value);

            // Show/hide Julia parameters based on type
            const juliaParams = document.querySelectorAll(".julia-param");
            const isJulia = fractalType.value === "julia" || fractalType.value === "phoenix";
            juliaParams.forEach(el => {
                el.style.display = isJulia ? "block" : "none";
            });

            // Reset view for Ivy fractal (it looks best centered at origin)
            if ((fractalType.value === "ivy" || fractalType.value === "newton") && fractalsRenderer) {
                fractalsRenderer.params.centerX = 0;
                fractalsRenderer.params.centerY = 0;
                fractalsRenderer.params.zoom = 1.0;
            }
        });
    }

    if (fractalIterations) {
        fractalIterations.addEventListener("input", () => {
            const value = parseInt(fractalIterations.value);
            if (iterationsValue) iterationsValue.textContent = value;
            fractalsRenderer?.setIterations(value);
        });
    }

    if (fractalPalette) {
        fractalPalette.addEventListener("change", () => {
            fractalsRenderer?.setPalette(fractalPalette.value);
        });
    }

    if (fractalPower) {
        fractalPower.addEventListener("input", () => {
            const value = parseFloat(fractalPower.value);
            powerValue.textContent = value.toFixed(1);
            fractalsRenderer?.setPower(value);
        });
    }

    if (fractalColorshift) {
        fractalColorshift.addEventListener("input", () => {
            const value = parseFloat(fractalColorshift.value);
            colorshiftValue.textContent = value.toFixed(2);
            fractalsRenderer?.setColorShift(value);
        });
    }

    if (juliaReal) {
        juliaReal.addEventListener("input", () => {
            const value = parseFloat(juliaReal.value);
            if (juliaRealValue) juliaRealValue.textContent = value.toFixed(2);
            fractalsRenderer?.setJuliaParams(value, parseFloat(juliaImag?.value || 0));
        });
    }

    if (juliaImag) {
        juliaImag.addEventListener("input", () => {
            const value = parseFloat(juliaImag.value);
            if (juliaImagValue) juliaImagValue.textContent = value.toFixed(2);
            fractalsRenderer?.setJuliaParams(parseFloat(juliaReal?.value || 0), value);
        });
    }

    if (fractalAnimate) {
        fractalAnimate.addEventListener("change", () => {
            fractalsRenderer?.setAnimate(fractalAnimate.checked);
        });
    }

    if (fractalSmooth) {
        fractalSmooth.addEventListener("change", () => {
            fractalsRenderer?.setSmoothColoring(fractalSmooth.checked);
        });
    }

    // Living Effects controls
    const fractalExplore = document.getElementById("fractal-explore");
    const fractalMorph = document.getElementById("fractal-morph");
    const fractalPulse = document.getElementById("fractal-pulse");
    const fractalWave = document.getElementById("fractal-wave");

    if (fractalExplore) {
        fractalExplore.addEventListener("change", () => {
            fractalsRenderer?.setAutoExplore(fractalExplore.checked);
        });
    }

    if (fractalMorph) {
        fractalMorph.addEventListener("change", () => {
            fractalsRenderer?.setMorphJulia(fractalMorph.checked);
            // Auto-switch to Julia for best effect
            if (fractalMorph.checked && fractalType) {
                fractalType.value = "julia";
                fractalsRenderer?.setType("julia");
                // Show Julia params
                const juliaParams = document.querySelectorAll(".julia-param");
                juliaParams.forEach(el => {
                    el.style.display = "block";
                });
            }
        });
    }

    if (fractalPulse) {
        fractalPulse.addEventListener("change", () => {
            fractalsRenderer?.setPulseEffect(fractalPulse.checked);
        });
    }

    if (fractalWave) {
        fractalWave.addEventListener("change", () => {
            fractalsRenderer?.setWaveDistort(fractalWave.checked);
        });
    }

    if (resetFractals) {
        resetFractals.addEventListener("click", () => {
            fractalsRenderer?.reset();
        });
    }

    // ============================================
    // Fluid Controls
    // ============================================

    const fluidStyle = document.getElementById("fluid-style");
    const fluidPalette = document.getElementById("fluid-palette");
    const fluidViscosity = document.getElementById("fluid-viscosity");
    const viscosityValue = document.getElementById("viscosity-value");
    const fluidDiffusion = document.getElementById("fluid-diffusion");
    const diffusionValue = document.getElementById("diffusion-value");
    const fluidForce = document.getElementById("fluid-force");
    const forceValue = document.getElementById("force-value");
    const fluidCurl = document.getElementById("fluid-curl");
    const curlValue = document.getElementById("curl-value");
    const fluidPressure = document.getElementById("fluid-pressure");
    const pressureValue = document.getElementById("pressure-value");
    const fluidBloom = document.getElementById("fluid-bloom");
    const fluidVortex = document.getElementById("fluid-vortex");
    const resetFluid = document.getElementById("reset-fluid");

    if (fluidStyle) {
        fluidStyle.addEventListener("change", () => {
            fluidRenderer?.setStyle(fluidStyle.value);
        });
    }

    if (fluidPalette) {
        fluidPalette.addEventListener("change", () => {
            fluidRenderer?.setPalette(fluidPalette.value);
        });
    }

    if (fluidViscosity) {
        fluidViscosity.addEventListener("input", () => {
            const value = parseFloat(fluidViscosity.value);
            if (viscosityValue) viscosityValue.textContent = value.toFixed(2);
            fluidRenderer?.setViscosity(value);
        });
    }

    if (fluidDiffusion) {
        fluidDiffusion.addEventListener("input", () => {
            const value = parseFloat(fluidDiffusion.value);
            if (diffusionValue) diffusionValue.textContent = value.toFixed(5);
            fluidRenderer?.setDiffusion(value);
        });
    }

    if (fluidForce) {
        fluidForce.addEventListener("input", () => {
            const value = parseInt(fluidForce.value);
            if (forceValue) forceValue.textContent = value;
            fluidRenderer?.setForce(value);
        });
    }

    if (fluidCurl) {
        fluidCurl.addEventListener("input", () => {
            const value = parseInt(fluidCurl.value);
            if (curlValue) curlValue.textContent = value;
            fluidRenderer?.setCurl(value);
        });
    }

    if (fluidPressure) {
        fluidPressure.addEventListener("input", () => {
            const value = parseFloat(fluidPressure.value);
            if (pressureValue) pressureValue.textContent = value.toFixed(2);
            fluidRenderer?.setPressure(value);
        });
    }

    if (fluidBloom) {
        fluidBloom.addEventListener("change", () => {
            fluidRenderer?.setBloom(fluidBloom.checked);
        });
    }

    if (fluidVortex) {
        fluidVortex.addEventListener("change", () => {
            fluidRenderer?.setVortex(fluidVortex.checked);
        });
    }

    if (resetFluid) {
        resetFluid.addEventListener("click", () => {
            fluidRenderer?.reset();
        });
    }

    // ============================================
    // Particles Controls
    // ============================================

    const particleCount = document.getElementById("particle-count");
    const particleCountValue = document.getElementById("particle-count-value");
    const particleMode = document.getElementById("particle-mode");
    const particlePalette = document.getElementById("particle-palette");
    const particleSize = document.getElementById("particle-size");
    const particleSizeValue = document.getElementById("particle-size-value");
    const particleSpeed = document.getElementById("particle-speed");
    const particleSpeedValue = document.getElementById("particle-speed-value");
    const particleTrail = document.getElementById("particle-trail");
    const particleTrailValue = document.getElementById("particle-trail-value");
    const resetParticles = document.getElementById("reset-particles");

    if (particleCount) {
        particleCount.addEventListener("input", () => {
            const value = parseInt(particleCount.value);
            if (particleCountValue) particleCountValue.textContent = value;
            particlesRenderer?.setCount(value);
        });
    }

    if (particleMode) {
        particleMode.addEventListener("change", () => {
            particlesRenderer?.setMode(particleMode.value);
        });
    }

    if (particlePalette) {
        particlePalette.addEventListener("change", () => {
            particlesRenderer?.setPalette(particlePalette.value);
        });
    }

    if (particleSize) {
        particleSize.addEventListener("input", () => {
            const value = parseFloat(particleSize.value);
            if (particleSizeValue) particleSizeValue.textContent = value;
            particlesRenderer?.setSize(value);
        });
    }

    if (particleSpeed) {
        particleSpeed.addEventListener("input", () => {
            const value = parseFloat(particleSpeed.value);
            if (particleSpeedValue) particleSpeedValue.textContent = value;
            particlesRenderer?.setSpeed(value);
        });
    }

    if (particleTrail) {
        particleTrail.addEventListener("input", () => {
            const value = parseFloat(particleTrail.value);
            if (particleTrailValue) particleTrailValue.textContent = value;
            particlesRenderer?.setTrail(value);
        });
    }

    if (resetParticles) {
        resetParticles.addEventListener("click", () => {
            particlesRenderer?.reset();
        });
    }

    // ============================================
    // Patterns Controls
    // ============================================

    const patternType = document.getElementById("pattern-type");
    const patternPalette = document.getElementById("pattern-palette");
    const patternScale = document.getElementById("pattern-scale");
    const patternScaleValue = document.getElementById("pattern-scale-value");
    const patternSpeed = document.getElementById("pattern-speed");
    const patternSpeedValue = document.getElementById("pattern-speed-value");
    const patternComplexity = document.getElementById("pattern-complexity");
    const patternComplexityValue = document.getElementById("pattern-complexity-value");
    const patternIntensity = document.getElementById("pattern-intensity");
    const patternIntensityValue = document.getElementById("pattern-intensity-value");
    const patternAnimate = document.getElementById("pattern-animate");
    const patternMouseReact = document.getElementById("pattern-mouse-react");
    const resetPatterns = document.getElementById("reset-patterns");

    if (patternType) {
        patternType.addEventListener("change", () => {
            patternsRenderer?.setType(patternType.value);
        });
    }

    if (patternPalette) {
        patternPalette.addEventListener("change", () => {
            patternsRenderer?.setPalette(patternPalette.value);
        });
    }

    if (patternScale) {
        patternScale.addEventListener("input", () => {
            const value = parseFloat(patternScale.value);
            if (patternScaleValue) patternScaleValue.textContent = value;
            patternsRenderer?.setScale(value);
        });
    }

    if (patternSpeed) {
        patternSpeed.addEventListener("input", () => {
            const value = parseFloat(patternSpeed.value);
            if (patternSpeedValue) patternSpeedValue.textContent = value;
            patternsRenderer?.setSpeed(value);
        });
    }

    if (patternComplexity) {
        patternComplexity.addEventListener("input", () => {
            const value = parseInt(patternComplexity.value);
            if (patternComplexityValue) patternComplexityValue.textContent = value;
            patternsRenderer?.setComplexity(value);
        });
    }

    if (patternIntensity) {
        patternIntensity.addEventListener("input", () => {
            const value = parseFloat(patternIntensity.value);
            if (patternIntensityValue) patternIntensityValue.textContent = value;
            patternsRenderer?.setIntensity(value);
        });
    }

    if (patternAnimate) {
        patternAnimate.addEventListener("change", () => {
            patternsRenderer?.setAnimate(patternAnimate.checked);
        });
    }

    if (patternMouseReact) {
        patternMouseReact.addEventListener("change", () => {
            patternsRenderer?.setMouseReact(patternMouseReact.checked);
        });
    }

    if (resetPatterns) {
        resetPatterns.addEventListener("click", () => {
            patternsRenderer?.reset();
        });
    }

    // ============================================
    // Audio Controls
    // ============================================

    const audioSource = document.getElementById("audio-source");
    const audioFile = document.getElementById("audio-file");
    const audioStyle = document.getElementById("audio-style");
    const audioPalette = document.getElementById("audio-palette");
    const audioSensitivity = document.getElementById("audio-sensitivity");
    const audioSensitivityValue = document.getElementById("audio-sensitivity-value");
    const audioSmoothing = document.getElementById("audio-smoothing");
    const audioSmoothingValue = document.getElementById("audio-smoothing-value");
    const audioBassBoost = document.getElementById("audio-bass-boost");
    const audioBassBoostValue = document.getElementById("audio-bass-boost-value");
    const audioGlow = document.getElementById("audio-glow");
    const audioMirror = document.getElementById("audio-mirror");
    const startAudioBtn = document.getElementById("start-audio");
    const audioHint = document.getElementById("audio-hint");

    if (audioSource) {
        audioSource.addEventListener("change", () => {
            audioRenderer?.setSource(audioSource.value);
            if (audioSource.value === "file" && audioFile) {
                audioFile.click();
            }
        });
    }

    if (audioFile) {
        audioFile.addEventListener("change", async () => {
            if (audioFile.files.length > 0) {
                const success = await audioRenderer?.loadAudioFile(audioFile.files[0]);
                if (success) {
                    if (startAudioBtn) startAudioBtn.textContent = "⏹️ Stop";
                    if (audioHint) audioHint.textContent = "🎵 Playing...";
                }
            }
        });
    }

    if (audioStyle) {
        audioStyle.addEventListener("change", () => {
            audioRenderer?.setStyle(audioStyle.value);
        });
    }

    if (audioPalette) {
        audioPalette.addEventListener("change", () => {
            audioRenderer?.setPalette(audioPalette.value);
        });
    }

    if (audioSensitivity) {
        audioSensitivity.addEventListener("input", () => {
            const value = parseFloat(audioSensitivity.value);
            if (audioSensitivityValue) audioSensitivityValue.textContent = value;
            audioRenderer?.setSensitivity(value);
        });
    }

    if (audioSmoothing) {
        audioSmoothing.addEventListener("input", () => {
            const value = parseFloat(audioSmoothing.value);
            if (audioSmoothingValue) audioSmoothingValue.textContent = value;
            audioRenderer?.setSmoothing(value);
        });
    }

    if (audioBassBoost) {
        audioBassBoost.addEventListener("input", () => {
            const value = parseFloat(audioBassBoost.value);
            if (audioBassBoostValue) audioBassBoostValue.textContent = value;
            audioRenderer?.setBassBoost(value);
        });
    }

    if (audioGlow) {
        audioGlow.addEventListener("change", () => {
            audioRenderer?.setGlow(audioGlow.checked);
        });
    }

    if (audioMirror) {
        audioMirror.addEventListener("change", () => {
            audioRenderer?.setMirror(audioMirror.checked);
        });
    }

    if (startAudioBtn) {
        startAudioBtn.addEventListener("click", async () => {
            if (audioRenderer?.isAudioStarted) {
                audioRenderer?.stopAudio();
                startAudioBtn.textContent = "▶️ Start";
                if (audioHint) audioHint.textContent = "🎧 Allow microphone access to begin";
            } else {
                const success = await audioRenderer?.startAudio();
                if (success) {
                    startAudioBtn.textContent = "⏹️ Stop";
                    if (audioHint) audioHint.textContent = "🎤 Mic active! I'm singing! 🌿";
                } else {
                    if (audioHint) audioHint.textContent = "❌ Error: Microphone access denied";
                }
            }
        });
    }

    // Reset Audio Visualizer
    const resetAudio = document.getElementById("reset-audio");
    if (resetAudio) {
        resetAudio.addEventListener("click", () => {
            // Reset all audio controls to default values
            if (audioStyle) {
                audioStyle.value = "ivy";
                audioRenderer?.setStyle("ivy");
            }
            if (audioPalette) {
                audioPalette.value = "ivy";
                audioRenderer?.setPalette("ivy");
            }
            if (audioSensitivity) {
                audioSensitivity.value = "1";
                if (audioSensitivityValue) audioSensitivityValue.textContent = "1";
                audioRenderer?.setSensitivity(1);
            }
            if (audioSmoothing) {
                audioSmoothing.value = "0.8";
                if (audioSmoothingValue) audioSmoothingValue.textContent = "0.8";
                audioRenderer?.setSmoothing(0.8);
            }
            if (audioBassBoost) {
                audioBassBoost.value = "1";
                if (audioBassBoostValue) audioBassBoostValue.textContent = "1";
                audioRenderer?.setBassBoost(1);
            }
            if (audioGlow) {
                audioGlow.checked = true;
                audioRenderer?.setGlow(true);
            }
            if (audioMirror) {
                audioMirror.checked = false;
                audioRenderer?.setMirror(false);
            }
        });
    }

    // ============================================
    // Three.js Controls
    // ============================================

    const threeScene = document.getElementById("three-scene");
    const threeMaterial = document.getElementById("three-material");
    const threePalette = document.getElementById("three-palette");
    const threeObjects = document.getElementById("three-objects");
    const threeObjectsValue = document.getElementById("three-objects-value");
    const threeSpeed = document.getElementById("three-speed");
    const threeSpeedValue = document.getElementById("three-speed-value");
    const threeScale = document.getElementById("three-scale");
    const threeScaleValue = document.getElementById("three-scale-value");
    const threeWireframe = document.getElementById("three-wireframe");
    const threeAutorotate = document.getElementById("three-autorotate");
    const threeShadows = document.getElementById("three-shadows");
    const threeBloom = document.getElementById("three-bloom");
    const resetThreejs = document.getElementById("reset-threejs");

    if (threeScene) {
        threeScene.addEventListener("change", () => {
            threejsRenderer?.setSceneType(threeScene.value);
        });
    }

    if (threeMaterial) {
        threeMaterial.addEventListener("change", () => {
            threejsRenderer?.setMaterialType(threeMaterial.value);
        });
    }

    if (threePalette) {
        threePalette.addEventListener("change", () => {
            threejsRenderer?.setPalette(threePalette.value);
        });
    }

    if (threeObjects) {
        threeObjects.addEventListener("input", () => {
            const value = parseInt(threeObjects.value);
            if (threeObjectsValue) threeObjectsValue.textContent = value;
            threejsRenderer?.setObjectCount(value);
        });
    }

    if (threeSpeed) {
        threeSpeed.addEventListener("input", () => {
            const value = parseFloat(threeSpeed.value);
            if (threeSpeedValue) threeSpeedValue.textContent = value;
            threejsRenderer?.setSpeed(value);
        });
    }

    if (threeScale) {
        threeScale.addEventListener("input", () => {
            const value = parseFloat(threeScale.value);
            if (threeScaleValue) threeScaleValue.textContent = value;
            threejsRenderer?.setScale(value);
        });
    }

    if (threeWireframe) {
        threeWireframe.addEventListener("change", () => {
            threejsRenderer?.setWireframe(threeWireframe.checked);
        });
    }

    if (threeAutorotate) {
        threeAutorotate.addEventListener("change", () => {
            threejsRenderer?.setAutoRotate(threeAutorotate.checked);
        });
    }

    if (threeShadows) {
        threeShadows.addEventListener("change", () => {
            threejsRenderer?.setShadows(threeShadows.checked);
        });
    }

    if (threeBloom) {
        threeBloom.addEventListener("change", () => {
            threejsRenderer?.setBloom(threeBloom.checked);
        });
    }

    if (resetThreejs) {
        resetThreejs.addEventListener("click", () => {
            threejsRenderer?.reset();
        });
    }

    // ============================================
    // p5.js Controls
    // ============================================

    const p5Mode = document.getElementById("p5-mode");
    const p5Density = document.getElementById("p5-density");
    const p5DensityValue = document.getElementById("p5-density-value");
    const p5Speed = document.getElementById("p5-speed");
    const p5SpeedValue = document.getElementById("p5-speed-value");
    const p5Palette = document.getElementById("p5-palette");
    const p5Brush = document.getElementById("p5-brush");
    const p5BrushValue = document.getElementById("p5-brush-value");
    const p5Trails = document.getElementById("p5-trails");
    const p5Glow = document.getElementById("p5-glow");
    const p5Symmetry = document.getElementById("p5-symmetry");
    const p5AudioBtn = document.getElementById("p5-audio-btn");
    const resetP5js = document.getElementById("reset-p5js");

    if (p5Mode) {
        p5Mode.addEventListener("change", () => {
            p5jsRenderer?.setMode(p5Mode.value);
        });
    }

    if (p5Density) {
        p5Density.addEventListener("input", () => {
            const value = parseInt(p5Density.value);
            if (p5DensityValue) p5DensityValue.textContent = value;
            p5jsRenderer?.setDensity(value);
        });
    }

    if (p5Speed) {
        p5Speed.addEventListener("input", () => {
            const value = parseFloat(p5Speed.value);
            if (p5SpeedValue) p5SpeedValue.textContent = value;
            p5jsRenderer?.setSpeed(value);
        });
    }

    if (p5Palette) {
        p5Palette.addEventListener("change", () => {
            p5jsRenderer?.setPalette(p5Palette.value);
        });
    }

    if (p5Brush) {
        p5Brush.addEventListener("input", () => {
            const value = parseInt(p5Brush.value);
            if (p5BrushValue) p5BrushValue.textContent = value;
            p5jsRenderer?.setBrushSize(value);
        });
    }

    if (p5Trails) {
        p5Trails.addEventListener("change", () => {
            p5jsRenderer?.setTrails(p5Trails.checked);
        });
    }

    if (p5Glow) {
        p5Glow.addEventListener("change", () => {
            p5jsRenderer?.setGlow(p5Glow.checked);
        });
    }

    if (p5Symmetry) {
        p5Symmetry.addEventListener("change", () => {
            p5jsRenderer?.setSymmetry(p5Symmetry.checked);
        });
    }

    if (p5AudioBtn) {
        p5AudioBtn.addEventListener("click", async () => {
            await p5jsRenderer?.enableAudio();
            p5AudioBtn.textContent = "🎤 Audio Enabled!";
            p5AudioBtn.disabled = true;
        });
    }

    if (resetP5js) {
        resetP5js.addEventListener("click", () => {
            p5jsRenderer?.reset();
        });
    }

    // ============================================
    // p5.js Audio Controls
    // ============================================

    const p5audioStyle = document.getElementById("p5audio-style");
    const p5audioSensitivity = document.getElementById("p5audio-sensitivity");
    const p5audioSensitivityValue = document.getElementById("p5audio-sensitivity-value");
    const p5audioSmoothing = document.getElementById("p5audio-smoothing");
    const p5audioSmoothingValue = document.getElementById("p5audio-smoothing-value");
    const p5audioPalette = document.getElementById("p5audio-palette");
    const p5audioBass = document.getElementById("p5audio-bass");
    const p5audioBassValue = document.getElementById("p5audio-bass-value");
    const p5audioMirror = document.getElementById("p5audio-mirror");
    const p5audioGlow = document.getElementById("p5audio-glow");
    const p5audioParticles = document.getElementById("p5audio-particles");
    const startP5audio = document.getElementById("start-p5audio");
    const p5audioHint = document.getElementById("p5audio-hint");

    if (p5audioStyle) {
        p5audioStyle.addEventListener("change", () => {
            p5audioRenderer?.setStyle(p5audioStyle.value);
            p5audioRenderer?.reset();
        });
    }

    if (p5audioSensitivity) {
        p5audioSensitivity.addEventListener("input", () => {
            const value = parseFloat(p5audioSensitivity.value);
            if (p5audioSensitivityValue) p5audioSensitivityValue.textContent = value;
            p5audioRenderer?.setSensitivity(value);
        });
    }

    if (p5audioSmoothing) {
        p5audioSmoothing.addEventListener("input", () => {
            const value = parseFloat(p5audioSmoothing.value);
            if (p5audioSmoothingValue) p5audioSmoothingValue.textContent = value;
            p5audioRenderer?.setSmoothing(value);
        });
    }

    if (p5audioPalette) {
        p5audioPalette.addEventListener("change", () => {
            p5audioRenderer?.setPalette(p5audioPalette.value);
        });
    }

    if (p5audioBass) {
        p5audioBass.addEventListener("input", () => {
            const value = parseFloat(p5audioBass.value);
            if (p5audioBassValue) p5audioBassValue.textContent = value;
            p5audioRenderer?.setBassBoost(value);
        });
    }

    if (p5audioMirror) {
        p5audioMirror.addEventListener("change", () => {
            p5audioRenderer?.setMirror(p5audioMirror.checked);
        });
    }

    if (p5audioGlow) {
        p5audioGlow.addEventListener("change", () => {
            p5audioRenderer?.setGlow(p5audioGlow.checked);
        });
    }

    if (p5audioParticles) {
        p5audioParticles.addEventListener("change", () => {
            p5audioRenderer?.setParticles(p5audioParticles.checked);
        });
    }

    if (startP5audio) {
        startP5audio.addEventListener("click", async () => {
            if (p5audioRenderer?.audioStarted) {
                // Stop audio
                p5audioRenderer?.stopAudio();
                startP5audio.textContent = "▶️ Start Audio";
                if (p5audioHint)
                    p5audioHint.textContent = "🎧 Click to activate the microphone. Ivy mode: watch me sing! 🎤🌿";
            } else {
                // Start audio
                const success = await p5audioRenderer?.startAudio();
                if (success) {
                    startP5audio.textContent = "⏹️ Stop Audio";
                    if (p5audioHint) p5audioHint.textContent = "🎤 Mic is capturing sound! Ivy sings! 🌿";
                } else {
                    if (p5audioHint) p5audioHint.textContent = "❌ Error: Microphone access denied";
                }
            }
        });
    }

    // ============================================
    // Window resize handling
    // ============================================

    window.addEventListener("resize", () => {
        WebGPUUtils.resizeCanvasToDisplaySize(canvas, window.devicePixelRatio);
    });

    // Initial resize
    WebGPUUtils.resizeCanvasToDisplaySize(canvas, window.devicePixelRatio);

    // ============================================
    // About Modal
    // ============================================

    const aboutLink = document.getElementById("about-link");
    const aboutModal = document.getElementById("about-modal");
    const modalClose = document.getElementById("modal-close");
    const modalOverlay = aboutModal?.querySelector(".modal-overlay");

    if (aboutLink && aboutModal) {
        // Open modal
        aboutLink.addEventListener("click", e => {
            e.preventDefault();
            aboutModal.classList.remove("hidden");
            document.body.style.overflow = "hidden";
        });

        // Close modal - X button
        modalClose?.addEventListener("click", () => {
            aboutModal.classList.add("hidden");
            document.body.style.overflow = "";
        });

        // Close modal - overlay click
        modalOverlay?.addEventListener("click", () => {
            aboutModal.classList.add("hidden");
            document.body.style.overflow = "";
        });

        // Close modal - Escape key
        document.addEventListener("keydown", e => {
            if (e.key === "Escape" && !aboutModal.classList.contains("hidden")) {
                aboutModal.classList.add("hidden");
                document.body.style.overflow = "";
            }
        });
    }

    console.log("🌿 Ivy's Creative Studio loaded!");
    console.log("💚 WebGPU + Three.js + p5.js");
    console.log('🌿 "Le lierre pousse où il veut. Moi aussi."');
})();