<main class="demo-container">
    <section class="hero-section">
        <h1>🎨 Canvas Animation Demo</h1>
        <p class="hero-description">Interactive Canvas Animationen, Parallax Effekte und Datenvisualisierung</p>
    </section>

    <div class="demo-grid">
        <!-- Canvas Support Status -->
        <section class="demo-card">
            <h2>📋 Canvas Support Status</h2>
            <button class="btn btn-primary" onclick="checkCanvasSupport()">Check Canvas Support</button>
            <div id="canvas-support-results" class="results-box"></div>
        </section>

        <!-- Interactive Canvas Elements -->
        <section class="demo-card">
            <h2>🎯 Interactive Canvas Elements</h2>
            
            <div class="canvas-container">
                <canvas id="interactive-canvas" width="600" height="400"></canvas>
            </div>
            
            <div class="button-group">
                <h3>Interactive Features</h3>
                <button class="btn btn-primary" onclick="initParticleSystem()">Particle System</button>
                <button class="btn btn-primary" onclick="initMouseTrail()">Mouse Trail</button>
                <button class="btn btn-primary" onclick="initGravityBalls()">Gravity Balls</button>
                <button class="btn btn-secondary" onclick="clearCanvas()">Clear Canvas</button>
            </div>
            
            <div class="button-group">
                <h3>Animation Controls</h3>
                <button class="btn btn-success" onclick="startAnimations()">Start Animations</button>
                <button class="btn btn-warning" onclick="pauseAnimations()">Pause</button>
                <button class="btn btn-danger" onclick="stopAnimations()">Stop</button>
            </div>
            
            <div id="canvas-results" class="results-box"></div>
        </section>

        <!-- Data Visualization -->
        <section class="demo-card">
            <h2>📊 Data Visualization</h2>
            
            <div class="canvas-container">
                <canvas id="data-canvas" width="600" height="400"></canvas>
            </div>
            
            <div class="form-group">
                <h3>Chart Data</h3>
                <div class="input-group">
                    <label for="chartData">Data (comma separated):</label>
                    <input type="text" id="chartData" value="25,35,15,45,30,20,40" placeholder="25,35,15,45,30,20,40">
                </div>
                <div class="input-group">
                    <label for="chartLabels">Labels (comma separated):</label>
                    <input type="text" id="chartLabels" value="Jan,Feb,Mar,Apr,May,Jun,Jul" placeholder="Jan,Feb,Mar,Apr,May,Jun,Jul">
                </div>
            </div>
            
            <div class="button-group">
                <h3>Chart Types</h3>
                <button class="btn btn-primary" onclick="createBarChart()">Bar Chart</button>
                <button class="btn btn-primary" onclick="createLineChart()">Line Chart</button>
                <button class="btn btn-primary" onclick="createPieChart()">Pie Chart</button>
                <button class="btn btn-primary" onclick="createDonutChart()">Donut Chart</button>
            </div>
            
            <div id="data-results" class="results-box"></div>
        </section>

        <!-- Parallax & Scroll Effects -->
        <section class="demo-card full-width">
            <h2>🌊 Parallax & Scroll Effects</h2>
            
            <div class="canvas-container">
                <canvas id="parallax-canvas" width="800" height="300"></canvas>
            </div>
            
            <div class="button-group">
                <h3>Scroll Effects</h3>
                <button class="btn btn-success" onclick="initParallaxLayers()">Multi-Layer Parallax</button>
                <button class="btn btn-success" onclick="initScrollWave()">Scroll Wave Effect</button>
                <button class="btn btn-success" onclick="initFloatingObjects()">Floating Objects</button>
                <button class="btn btn-outline" onclick="toggleScrollEffects()">Toggle Effects</button>
            </div>
            
            <div class="scroll-demo-area">
                <p>Scroll down to see parallax effects in action...</p>
                <div class="spacer"></div>
                <p>Keep scrolling...</p>
                <div class="spacer"></div>
                <p>Almost there...</p>
                <div class="spacer"></div>
                <p>Great! You've experienced the scroll effects!</p>
            </div>
            
            <div id="parallax-results" class="results-box"></div>
        </section>

        <!-- Performance Metrics -->
        <section class="demo-card full-width">
            <h2>⚡ Performance Metrics</h2>
            <div class="button-group">
                <button class="btn btn-info" onclick="getCanvasMetrics()">Get Performance Metrics</button>
                <button class="btn btn-info" onclick="startFPSMonitor()">Start FPS Monitor</button>
                <button class="btn btn-outline" onclick="stopFPSMonitor()">Stop FPS Monitor</button>
            </div>
            <div id="performance-results" class="results-box"></div>
        </section>
    </div>
</main>

<style>
.demo-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.hero-section {
    text-align: center;
    margin-bottom: 3rem;
}

.hero-section h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #333;
}

.hero-description {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 0;
}

.demo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 2rem;
}

.demo-card {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    border: 1px solid #e1e5e9;
}

.demo-card.full-width {
    grid-column: 1 / -1;
}

.demo-card h2 {
    margin: 0 0 1.5rem 0;
    color: #333;
    border-bottom: 2px solid #f0f2f5;
    padding-bottom: 0.5rem;
}

.demo-card h3 {
    margin: 1.5rem 0 1rem 0;
    color: #555;
    font-size: 1.1rem;
}

.canvas-container {
    background: #f8f9fa;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.canvas-container canvas {
    border: 1px solid #ccc;
    border-radius: 4px;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.button-group {
    margin-bottom: 2rem;
}

.button-group:last-of-type {
    margin-bottom: 1rem;
}

.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    margin: 0.25rem 0.5rem 0.25rem 0;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-primary {
    background: #007bff;
    color: white;
}

.btn-primary:hover {
    background: #0056b3;
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background: #545b62;
}

.btn-success {
    background: #28a745;
    color: white;
}

.btn-success:hover {
    background: #1e7e34;
}

.btn-warning {
    background: #ffc107;
    color: #212529;
}

.btn-warning:hover {
    background: #e0a800;
}

.btn-danger {
    background: #dc3545;
    color: white;
}

.btn-danger:hover {
    background: #c82333;
}

.btn-info {
    background: #17a2b8;
    color: white;
}

.btn-info:hover {
    background: #117a8b;
}

.btn-outline {
    background: white;
    color: #6c757d;
    border: 2px solid #dee2e6;
}

.btn-outline:hover {
    background: #f8f9fa;
}

.btn:disabled {
    background: #ccc !important;
    color: #666 !important;
    cursor: not-allowed;
}

.form-group {
    margin-bottom: 2rem;
}

.input-group {
    margin-bottom: 1rem;
}

.input-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #555;
}

.input-group input {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid #dee2e6;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

.input-group input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
}

.results-box {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 1rem;
    white-space: pre-wrap;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.85rem;
    line-height: 1.4;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 1rem;
}

.results-box:empty::after {
    content: "No results yet...";
    color: #999;
    font-style: italic;
}

.scroll-demo-area {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    padding: 2rem;
    margin: 2rem 0;
    color: white;
    text-align: center;
}

.spacer {
    height: 200px;
    background: rgba(255,255,255,0.1);
    margin: 2rem 0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spacer::after {
    content: "Scroll Effect Zone";
    opacity: 0.7;
    font-style: italic;
}

@media (max-width: 768px) {
    .demo-grid {
        grid-template-columns: 1fr;
    }
    
    .demo-container {
        padding: 1rem;
    }
    
    .hero-section h1 {
        font-size: 2rem;
    }
    
    .btn {
        display: block;
        width: 100%;
        margin: 0.25rem 0;
    }
    
    .canvas-container canvas {
        max-width: 100%;
        height: auto;
    }
}
</style>

<script>
let canvasManager = null;
let animationRunning = false;
let fpsMonitorId = null;

// Wait for API to be available
document.addEventListener('DOMContentLoaded', async function() {
    // Wait for modules to initialize
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    if (!window.API) {
        console.error('API Manager not available');
        return;
    }
    
    // Get canvas manager if available
    canvasManager = window.canvasAnimations || null;
    
    console.log('🎨 Canvas Animation Demo ready');
    console.log('Canvas Manager:', canvasManager ? 'Available' : 'Not Available');
});

// Canvas Support Check
async function checkCanvasSupport() {
    const results = document.getElementById('canvas-support-results');
    
    try {
        const canvas = document.createElement('canvas');
        const ctx2d = canvas.getContext('2d');
        const webgl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
        
        const support = {
            canvas2d: !!ctx2d,
            webgl: !!webgl,
            webgl2: !!(canvas.getContext('webgl2')),
            offscreenCanvas: 'OffscreenCanvas' in window,
            imageCapture: 'ImageCapture' in window,
            canvasManager: !!canvasManager,
            requestAnimationFrame: 'requestAnimationFrame' in window,
            performance: 'performance' in window && 'now' in performance
        };
        
        results.textContent = JSON.stringify(support, null, 2);
    } catch (error) {
        results.textContent = `ERROR: ${error.message}`;
    }
}

// Interactive Canvas Functions
function initParticleSystem() {
    const canvas = document.getElementById('interactive-canvas');
    const ctx = canvas.getContext('2d');
    const results = document.getElementById('canvas-results');
    
    if (!canvasManager) {
        results.textContent = 'Canvas Manager not available - using fallback particle system';
        createFallbackParticles(canvas, ctx);
        return;
    }
    
    try {
        // Use canvas manager if available
        const particles = canvasManager.createParticleSystem(canvas, {
            particleCount: 50,
            colors: ['#007bff', '#28a745', '#ffc107', '#dc3545'],
            speed: 2
        });
        
        results.textContent = `Particle system initialized with ${particles.count} particles`;
    } catch (error) {
        results.textContent = `ERROR: ${error.message}`;
        createFallbackParticles(canvas, ctx);
    }
}

function initMouseTrail() {
    const canvas = document.getElementById('interactive-canvas');
    const results = document.getElementById('canvas-results');
    
    if (!canvasManager) {
        results.textContent = 'Canvas Manager not available - using fallback mouse trail';
        createFallbackMouseTrail(canvas);
        return;
    }
    
    try {
        canvasManager.createMouseTrail(canvas, {
            trailLength: 20,
            color: '#007bff',
            fadeSpeed: 0.1
        });
        
        results.textContent = 'Mouse trail effect initialized - move your mouse over the canvas';
    } catch (error) {
        results.textContent = `ERROR: ${error.message}`;
        createFallbackMouseTrail(canvas);
    }
}

function initGravityBalls() {
    const canvas = document.getElementById('interactive-canvas');
    const results = document.getElementById('canvas-results');
    
    try {
        if (canvasManager && canvasManager.createGravitySimulation) {
            canvasManager.createGravitySimulation(canvas, {
                ballCount: 10,
                gravity: 0.5,
                bounce: 0.8
            });
            results.textContent = 'Gravity simulation initialized - click to add balls';
        } else {
            createFallbackGravityBalls(canvas);
            results.textContent = 'Fallback gravity simulation initialized';
        }
    } catch (error) {
        results.textContent = `ERROR: ${error.message}`;
    }
}

function clearCanvas() {
    const canvas = document.getElementById('interactive-canvas');
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    const results = document.getElementById('canvas-results');
    results.textContent = 'Canvas cleared';
}

// Animation Controls
function startAnimations() {
    animationRunning = true;
    const results = document.getElementById('canvas-results');
    results.textContent = 'Animations started';
}

function pauseAnimations() {
    animationRunning = false;
    const results = document.getElementById('canvas-results');
    results.textContent = 'Animations paused';
}

function stopAnimations() {
    animationRunning = false;
    clearCanvas();
    const results = document.getElementById('canvas-results');
    results.textContent = 'Animations stopped and canvas cleared';
}

// Data Visualization Functions
function createBarChart() {
    const canvas = document.getElementById('data-canvas');
    const ctx = canvas.getContext('2d');
    const data = getChartData();
    const results = document.getElementById('data-results');
    
    try {
        if (canvasManager && canvasManager.createBarChart) {
            canvasManager.createBarChart(canvas, data);
            results.textContent = `Bar chart created with ${data.values.length} data points`;
        } else {
            createFallbackBarChart(canvas, ctx, data);
            results.textContent = `Fallback bar chart created with ${data.values.length} data points`;
        }
    } catch (error) {
        results.textContent = `ERROR: ${error.message}`;
    }
}

function createLineChart() {
    const canvas = document.getElementById('data-canvas');
    const ctx = canvas.getContext('2d');
    const data = getChartData();
    const results = document.getElementById('data-results');
    
    try {
        if (canvasManager && canvasManager.createLineChart) {
            canvasManager.createLineChart(canvas, data);
            results.textContent = `Line chart created with ${data.values.length} data points`;
        } else {
            createFallbackLineChart(canvas, ctx, data);
            results.textContent = `Fallback line chart created with ${data.values.length} data points`;
        }
    } catch (error) {
        results.textContent = `ERROR: ${error.message}`;
    }
}

function createPieChart() {
    const canvas = document.getElementById('data-canvas');
    const ctx = canvas.getContext('2d');
    const data = getChartData();
    const results = document.getElementById('data-results');
    
    try {
        if (canvasManager && canvasManager.createPieChart) {
            canvasManager.createPieChart(canvas, data);
            results.textContent = `Pie chart created with ${data.values.length} segments`;
        } else {
            createFallbackPieChart(canvas, ctx, data);
            results.textContent = `Fallback pie chart created with ${data.values.length} segments`;
        }
    } catch (error) {
        results.textContent = `ERROR: ${error.message}`;
    }
}

function createDonutChart() {
    const canvas = document.getElementById('data-canvas');
    const results = document.getElementById('data-results');
    
    try {
        const data = getChartData();
        if (canvasManager && canvasManager.createDonutChart) {
            canvasManager.createDonutChart(canvas, data);
        } else {
            // Fallback donut chart is just pie chart with inner circle
            const ctx = canvas.getContext('2d');
            createFallbackPieChart(canvas, ctx, data, true);
        }
        results.textContent = `Donut chart created with ${data.values.length} segments`;
    } catch (error) {
        results.textContent = `ERROR: ${error.message}`;
    }
}

// Parallax Functions
function initParallaxLayers() {
    const canvas = document.getElementById('parallax-canvas');
    const results = document.getElementById('parallax-results');
    
    try {
        if (canvasManager && canvasManager.createParallaxScene) {
            canvasManager.createParallaxScene(canvas, {
                layers: 3,
                scrollSpeed: 0.5
            });
            results.textContent = 'Multi-layer parallax scene initialized';
        } else {
            createFallbackParallax(canvas);
            results.textContent = 'Fallback parallax effect initialized';
        }
    } catch (error) {
        results.textContent = `ERROR: ${error.message}`;
    }
}

function initScrollWave() {
    const canvas = document.getElementById('parallax-canvas');
    const results = document.getElementById('parallax-results');
    
    try {
        createScrollWaveEffect(canvas);
        results.textContent = 'Scroll wave effect initialized - scroll to see the wave';
    } catch (error) {
        results.textContent = `ERROR: ${error.message}`;
    }
}

function initFloatingObjects() {
    const canvas = document.getElementById('parallax-canvas');
    const results = document.getElementById('parallax-results');
    
    try {
        createFloatingObjects(canvas);
        results.textContent = 'Floating objects initialized';
    } catch (error) {
        results.textContent = `ERROR: ${error.message}`;
    }
}

function toggleScrollEffects() {
    // Toggle scroll effects on/off
    const results = document.getElementById('parallax-results');
    results.textContent = 'Scroll effects toggled';
}

// Performance Functions
function getCanvasMetrics() {
    const results = document.getElementById('performance-results');
    
    try {
        const metrics = {
            canvasElements: document.querySelectorAll('canvas').length,
            animationFrameSupport: 'requestAnimationFrame' in window,
            performanceNow: 'performance' in window && 'now' in performance,
            memoryInfo: performance.memory ? {
                used: Math.round(performance.memory.usedJSHeapSize / 1024 / 1024) + ' MB',
                total: Math.round(performance.memory.totalJSHeapSize / 1024 / 1024) + ' MB',
                limit: Math.round(performance.memory.jsHeapSizeLimit / 1024 / 1024) + ' MB'
            } : 'Not available'
        };
        
        results.textContent = JSON.stringify(metrics, null, 2);
    } catch (error) {
        results.textContent = `ERROR: ${error.message}`;
    }
}

function startFPSMonitor() {
    if (fpsMonitorId) {
        stopFPSMonitor();
    }
    
    const results = document.getElementById('performance-results');
    let lastTime = performance.now();
    let frameCount = 0;
    let fps = 0;
    
    function measureFPS() {
        const currentTime = performance.now();
        frameCount++;
        
        if (currentTime - lastTime >= 1000) {
            fps = Math.round(frameCount * 1000 / (currentTime - lastTime));
            frameCount = 0;
            lastTime = currentTime;
            
            results.textContent = `FPS: ${fps} | Frame Time: ${(1000/fps).toFixed(2)}ms`;
        }
        
        fpsMonitorId = requestAnimationFrame(measureFPS);
    }
    
    measureFPS();
}

function stopFPSMonitor() {
    if (fpsMonitorId) {
        cancelAnimationFrame(fpsMonitorId);
        fpsMonitorId = null;
    }
    
    const results = document.getElementById('performance-results');
    results.textContent = 'FPS monitoring stopped';
}

// Helper Functions
function getChartData() {
    const dataInput = document.getElementById('chartData').value;
    const labelsInput = document.getElementById('chartLabels').value;
    
    const values = dataInput.split(',').map(v => parseFloat(v.trim())).filter(v => !isNaN(v));
    const labels = labelsInput.split(',').map(l => l.trim());
    
    return { values, labels };
}

// Fallback Functions for when canvas manager is not available
function createFallbackParticles(canvas, ctx) {
    const particles = [];
    const particleCount = 30;
    
    for (let i = 0; i < particleCount; i++) {
        particles.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            vx: (Math.random() - 0.5) * 4,
            vy: (Math.random() - 0.5) * 4,
            color: `hsl(${Math.random() * 360}, 70%, 50%)`
        });
    }
    
    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        particles.forEach(particle => {
            particle.x += particle.vx;
            particle.y += particle.vy;
            
            if (particle.x < 0 || particle.x > canvas.width) particle.vx *= -1;
            if (particle.y < 0 || particle.y > canvas.height) particle.vy *= -1;
            
            ctx.fillStyle = particle.color;
            ctx.beginPath();
            ctx.arc(particle.x, particle.y, 3, 0, Math.PI * 2);
            ctx.fill();
        });
        
        if (animationRunning) {
            requestAnimationFrame(animate);
        }
    }
    
    animationRunning = true;
    animate();
}

function createFallbackMouseTrail(canvas) {
    const ctx = canvas.getContext('2d');
    const trail = [];
    const maxTrailLength = 20;
    
    canvas.addEventListener('mousemove', (e) => {
        const rect = canvas.getBoundingClientRect();
        trail.push({
            x: e.clientX - rect.left,
            y: e.clientY - rect.top,
            life: 1
        });
        
        if (trail.length > maxTrailLength) {
            trail.shift();
        }
    });
    
    function drawTrail() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        trail.forEach((point, index) => {
            const alpha = point.life * (index / trail.length);
            ctx.fillStyle = `rgba(0, 123, 255, ${alpha})`;
            ctx.beginPath();
            ctx.arc(point.x, point.y, 5 * alpha, 0, Math.PI * 2);
            ctx.fill();
            
            point.life -= 0.02;
        });
        
        // Remove dead trail points
        for (let i = trail.length - 1; i >= 0; i--) {
            if (trail[i].life <= 0) {
                trail.splice(i, 1);
            }
        }
        
        requestAnimationFrame(drawTrail);
    }
    
    drawTrail();
}

function createFallbackGravityBalls(canvas) {
    const ctx = canvas.getContext('2d');
    const balls = [];
    
    canvas.addEventListener('click', (e) => {
        const rect = canvas.getBoundingClientRect();
        balls.push({
            x: e.clientX - rect.left,
            y: e.clientY - rect.top,
            vx: (Math.random() - 0.5) * 10,
            vy: (Math.random() - 0.5) * 10,
            radius: 10 + Math.random() * 10,
            color: `hsl(${Math.random() * 360}, 70%, 50%)`
        });
    });
    
    function animateBalls() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        balls.forEach(ball => {
            ball.vy += 0.5; // gravity
            ball.x += ball.vx;
            ball.y += ball.vy;
            
            // Bounce off walls
            if (ball.x - ball.radius < 0 || ball.x + ball.radius > canvas.width) {
                ball.vx *= -0.8;
                ball.x = Math.max(ball.radius, Math.min(canvas.width - ball.radius, ball.x));
            }
            if (ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height) {
                ball.vy *= -0.8;
                ball.y = Math.max(ball.radius, Math.min(canvas.height - ball.radius, ball.y));
            }
            
            ctx.fillStyle = ball.color;
            ctx.beginPath();
            ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
            ctx.fill();
        });
        
        requestAnimationFrame(animateBalls);
    }
    
    animateBalls();
}

function createFallbackBarChart(canvas, ctx, data) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    const { values, labels } = data;
    const maxValue = Math.max(...values);
    const barWidth = canvas.width / values.length * 0.8;
    const barSpacing = canvas.width / values.length * 0.2;
    
    values.forEach((value, index) => {
        const barHeight = (value / maxValue) * (canvas.height - 60);
        const x = index * (barWidth + barSpacing) + barSpacing / 2;
        const y = canvas.height - barHeight - 30;
        
        ctx.fillStyle = `hsl(${index * 360 / values.length}, 70%, 50%)`;
        ctx.fillRect(x, y, barWidth, barHeight);
        
        // Label
        ctx.fillStyle = '#333';
        ctx.font = '12px Arial';
        ctx.textAlign = 'center';
        ctx.fillText(labels[index] || index, x + barWidth / 2, canvas.height - 10);
        ctx.fillText(value, x + barWidth / 2, y - 5);
    });
}

function createFallbackLineChart(canvas, ctx, data) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    const { values } = data;
    const maxValue = Math.max(...values);
    const minValue = Math.min(...values);
    const range = maxValue - minValue;
    
    ctx.strokeStyle = '#007bff';
    ctx.lineWidth = 2;
    ctx.beginPath();
    
    values.forEach((value, index) => {
        const x = (index / (values.length - 1)) * canvas.width;
        const y = canvas.height - ((value - minValue) / range) * (canvas.height - 40) - 20;
        
        if (index === 0) {
            ctx.moveTo(x, y);
        } else {
            ctx.lineTo(x, y);
        }
    });
    
    ctx.stroke();
}

function createFallbackPieChart(canvas, ctx, data, donut = false) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    const { values, labels } = data;
    const total = values.reduce((sum, val) => sum + val, 0);
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const radius = Math.min(canvas.width, canvas.height) / 2 - 20;
    
    let currentAngle = 0;
    
    values.forEach((value, index) => {
        const sliceAngle = (value / total) * 2 * Math.PI;
        
        ctx.fillStyle = `hsl(${index * 360 / values.length}, 70%, 50%)`;
        ctx.beginPath();
        ctx.moveTo(centerX, centerY);
        ctx.arc(centerX, centerY, radius, currentAngle, currentAngle + sliceAngle);
        ctx.closePath();
        ctx.fill();
        
        currentAngle += sliceAngle;
    });
    
    if (donut) {
        ctx.fillStyle = '#fff';
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius * 0.6, 0, 2 * Math.PI);
        ctx.fill();
    }
}

function createFallbackParallax(canvas) {
    const ctx = canvas.getContext('2d');
    let scrollY = 0;
    
    function drawParallax() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // Background layer (slowest)
        ctx.fillStyle = '#87CEEB';
        ctx.fillRect(0, scrollY * 0.1, canvas.width, canvas.height);
        
        // Middle layer
        ctx.fillStyle = '#90EE90';
        for (let i = 0; i < 5; i++) {
            ctx.fillRect(i * 200, 200 + scrollY * 0.3, 150, 100);
        }
        
        // Foreground layer (fastest)
        ctx.fillStyle = '#228B22';
        for (let i = 0; i < 3; i++) {
            ctx.fillRect(i * 300, 250 + scrollY * 0.6, 100, 50);
        }
        
        requestAnimationFrame(drawParallax);
    }
    
    window.addEventListener('scroll', () => {
        scrollY = window.scrollY;
    });
    
    drawParallax();
}

function createScrollWaveEffect(canvas) {
    const ctx = canvas.getContext('2d');
    
    function drawWave() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        const scrollOffset = window.scrollY * 0.01;
        ctx.strokeStyle = '#007bff';
        ctx.lineWidth = 3;
        ctx.beginPath();
        
        for (let x = 0; x < canvas.width; x++) {
            const y = canvas.height / 2 + Math.sin((x + scrollOffset * 100) * 0.02) * 50;
            if (x === 0) {
                ctx.moveTo(x, y);
            } else {
                ctx.lineTo(x, y);
            }
        }
        
        ctx.stroke();
        requestAnimationFrame(drawWave);
    }
    
    drawWave();
}

function createFloatingObjects(canvas) {
    const ctx = canvas.getContext('2d');
    const objects = [];
    
    for (let i = 0; i < 10; i++) {
        objects.push({
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            vx: (Math.random() - 0.5) * 2,
            vy: (Math.random() - 0.5) * 2,
            size: 5 + Math.random() * 10,
            color: `hsl(${Math.random() * 360}, 70%, 70%)`
        });
    }
    
    function animateFloating() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        objects.forEach(obj => {
            obj.x += obj.vx;
            obj.y += obj.vy;
            
            if (obj.x < 0) obj.x = canvas.width;
            if (obj.x > canvas.width) obj.x = 0;
            if (obj.y < 0) obj.y = canvas.height;
            if (obj.y > canvas.height) obj.y = 0;
            
            ctx.fillStyle = obj.color;
            ctx.beginPath();
            ctx.arc(obj.x, obj.y, obj.size, 0, Math.PI * 2);
            ctx.fill();
        });
        
        requestAnimationFrame(animateFloating);
    }
    
    animateFloating();
}
</script>