document.addEventListener('DOMContentLoaded', function() {
    // Initialize feather icons
    feather.replace();

    // Toggle dark mode
    const darkModeToggle = document.createElement('button');
    darkModeToggle.className = 'fixed bottom-4 right-4 p-3 rounded-full bg-primary-600 text-white shadow-lg z-50';
    darkModeToggle.innerHTML = '<i data-feather="moon"></i>';
    document.body.appendChild(darkModeToggle);
    
    darkModeToggle.addEventListener('click', function() {
        document.documentElement.classList.toggle('dark');
        const icon = darkModeToggle.querySelector('i');
        if (document.documentElement.classList.contains('dark')) {
            icon.setAttribute('data-feather', 'sun');
        } else {
            icon.setAttribute('data-feather', 'moon');
        }
        feather.replace();
    });
    // Enhanced console functionality
    const outputConsole = document.getElementById('output-console');
    if (outputConsole) {
        // Clear console button
        const clearBtn = outputConsole.closest('.rounded-lg').previousElementSibling.querySelector('button:has(i[data-feather="trash-2"])');
        clearBtn.addEventListener('click', () => {
            outputConsole.innerHTML = '';
        });

        // Copy console button
        const copyBtn = outputConsole.closest('.rounded-lg').previousElementSibling.querySelector('button:has(i[data-feather="copy"])');
        copyBtn.addEventListener('click', () => {
            const range = document.createRange();
            range.selectNode(outputConsole);
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(range);
            document.execCommand('copy');
            window.getSelection().removeAllRanges();
            
            // Show copied feedback
            const feedback = document.createElement('div');
            feedback.className = 'absolute bg-gray-800 text-white px-2 py-1 rounded text-xs';
            feedback.textContent = 'Copied!';
            copyBtn.appendChild(feedback);
            setTimeout(() => feedback.remove(), 1000);
        });

        // Simulate code editor functionality
        const compileButton = document.querySelector('button:has(i[data-feather="play"])');
        if (compileButton) {
            compileButton.addEventListener('click', function() {
                const messages = [
                    {text: '> Code compiled successfully!', color: 'text-green-400'},
                    {text: '> No errors found', color: 'text-green-400'},
                    {text: '> Expert Advisor initialized', color: 'text-blue-400'},
                    {text: '> Waiting for market data...', color: 'text-yellow-400'}
                ];
                
                messages.forEach((msg, i) => {
                    setTimeout(() => {
                        const newEntry = document.createElement('div');
                        newEntry.className = msg.color;
                        newEntry.textContent = msg.text;
                        outputConsole.appendChild(newEntry);
                        outputConsole.scrollTop = outputConsole.scrollHeight;
                    }, i * 300);
                });
            });
        }
    }
// Mobile menu toggle
    const mobileMenuButton = document.querySelector('button:has(i[data-feather="menu"])');
    if (mobileMenuButton) {
        mobileMenuButton.addEventListener('click', function() {
            const nav = document.querySelector('nav');
            if (nav) {
                nav.classList.toggle('hidden');
                nav.classList.toggle('flex');
            }
        });
    }

    // Initialize tooltips
    const tooltipElements = document.querySelectorAll('[data-tooltip]');
    tooltipElements.forEach(el => {
        el.addEventListener('mouseenter', function() {
            const tooltip = document.createElement('div');
            tooltip.className = 'absolute z-50 px-2 py-1 text-xs text-white bg-gray-800 rounded';
            tooltip.textContent = this.getAttribute('data-tooltip');
            this.appendChild(tooltip);
            
            this.addEventListener('mouseleave', function() {
                tooltip.remove();
            });
        });
    });

    // Highlight MQL5 code
    const codeBlocks = document.querySelectorAll('code.language-mql5');
    codeBlocks.forEach(block => {
        const code = block.innerHTML;
        let highlighted = code;
        
        // Highlight keywords
        const keywords = ['input', 'int', 'double', 'string', 'bool', 'void', 'return', 
                         'if', 'else', 'for', 'while', 'OnInit', 'OnDeinit', 'OnTick'];
        keywords.forEach(keyword => {
            const regex = new RegExp(`\\b${keyword}\\b`, 'g');
            highlighted = highlighted.replace(regex, `<span class="text-pink-400">${keyword}</span>`);
        });
        
        // Highlight functions
        const functions = ['iMA', 'trade.Buy', 'trade.Sell', 'NormalizeDouble', 'SymbolInfoDouble'];
        functions.forEach(func => {
            const regex = new RegExp(`\\b${func}\\b`, 'g');
            highlighted = highlighted.replace(regex, `<span class="text-blue-400">${func}</span>`);
        });
        
        // Highlight strings
        highlighted = highlighted.replace(/"([^"]*)"/g, `<span class="text-green-400">"$1"</span>`);
        
        // Highlight numbers
        highlighted = highlighted.replace(/\b(\d+\.?\d*)\b/g, `<span class="text-yellow-400">$1</span>`);
        
        // Highlight comments
        highlighted = highlighted.replace(/\/\/.*$/gm, `<span class="text-gray-500 italic">
document.addEventListener('DOMContentLoaded', function() {
    // Initialize feather icons
    feather.replace();

    // Toggle dark mode
    const darkModeToggle = document.createElement('button');
    darkModeToggle.className = 'fixed bottom-4 right-4 p-3 rounded-full bg-primary-600 text-white shadow-lg z-50';
    darkModeToggle.innerHTML = '<i data-feather="moon"></i>';
    document.body.appendChild(darkModeToggle);
    
    darkModeToggle.addEventListener('click', function() {
        document.documentElement.classList.toggle('dark');
        const icon = darkModeToggle.querySelector('i');
        if (document.documentElement.classList.contains('dark')) {
            icon.setAttribute('data-feather', 'sun');
        } else {
            icon.setAttribute('data-feather', 'moon');
        }
        feather.replace();
    });

    // Simulate code editor functionality
    const compileButton = document.querySelector('button:has(i[data-feather="play"])');
    if (compileButton) {
        compileButton.addEventListener('click', function() {
            const outputConsole = document.querySelector('.bg-gray-900.text-gray-300');
            if (outputConsole) {
                const newEntry = document.createElement('div');
                newEntry.className = 'text-green-400';
                newEntry.textContent = '> Code compiled successfully!';
                outputConsole.appendChild(newEntry);
                outputConsole.scrollTop = outputConsole.scrollHeight;
            }
        });
    }

    // Mobile menu toggle
    const mobileMenuButton = document.querySelector('button:has(i[data-feather="menu"])');
    if (mobileMenuButton) {
        mobileMenuButton.addEventListener('click', function() {
            const nav = document.querySelector('nav');
            if (nav) {
                nav.classList.toggle('hidden');
                nav.classList.toggle('flex');
            }
        });
    }

    // Initialize tooltips
    const tooltipElements = document.querySelectorAll('[data-tooltip]');
    tooltipElements.forEach(el => {
        el.addEventListener('mouseenter', function() {
            const tooltip = document.createElement('div');
            tooltip.className = 'absolute z-50 px-2 py-1 text-xs text-white bg-gray-800 rounded';
            tooltip.textContent = this.getAttribute('data-tooltip');
            this.appendChild(tooltip);
            
            this.addEventListener('mouseleave', function() {
                tooltip.remove();
            });
        });
    });

    // Highlight MQL5 code
    const codeBlocks = document.querySelectorAll('code.language-mql5');
    codeBlocks.forEach(block => {
        const code = block.innerHTML;
        let highlighted = code;
        
        // Highlight keywords
        const keywords = ['input', 'int', 'double', 'string', 'bool', 'void', 'return', 
                         'if', 'else', 'for', 'while', 'OnInit', 'OnDeinit', 'OnTick'];
        keywords.forEach(keyword => {
            const regex = new RegExp(`\\b${keyword}\\b`, 'g');
            highlighted = highlighted.replace(regex, `<span class="text-pink-400">${keyword}</span>`);
        });
        
        // Highlight functions
        const functions = ['iMA', 'trade.Buy', 'trade.Sell', 'NormalizeDouble', 'SymbolInfoDouble'];
        functions.forEach(func => {
            const regex = new RegExp(`\\b${func}\\b`, 'g');
            highlighted = highlighted.replace(regex, `<span class="text-blue-400">${func}</span>`);
        });
        
        // Highlight strings
        highlighted = highlighted.replace(/"([^"]*)"/g, `<span class="text-green-400">"$1"</span>`);
        
        // Highlight numbers
        highlighted = highlighted.replace(/\b(\d+\.?\d*)\b/g, `<span class="text-yellow-400">$1</span>`);
        
        // Highlight comments
        highlighted = highlighted.replace(/\/\/.*$/gm, `<span class="text-gray-500 italic">document.addEventListener('DOMContentLoaded', function() {
    // Toggle dark mode
    const darkModeToggle = document.createElement('button');
    darkModeToggle.className = 'fixed bottom-4 right-4 p-3 rounded-full bg-primary-600 text-white shadow-lg z-50';
    darkModeToggle.innerHTML = '<i data-feather="moon"></i>';
    document.body.appendChild(darkModeToggle);
    
    darkModeToggle.addEventListener('click', function() {
        document.documentElement.classList.toggle('dark');
        const icon = darkModeToggle.querySelector('i');
        if (document.documentElement.classList.contains('dark')) {
            icon.setAttribute('data-feather', 'sun');
        } else {
            icon.setAttribute('data-feather', 'moon');
        }
        feather.replace();
    });

    // Simulate code editor functionality
    const compileButton = document.querySelector('button:has(i[data-feather="play"])');
    if (compileButton) {
        compileButton.addEventListener('click', function() {
            const outputConsole = document.querySelector('.bg-gray-900.text-gray-300');
            if (outputConsole) {
                const newEntry = document.createElement('div');
                newEntry.className = 'text-green-400';
                newEntry.textContent = '> Code compiled successfully!';
                outputConsole.appendChild(newEntry);
                outputConsole.scrollTop = outputConsole.scrollHeight;
            }
        });
    }

    // Mobile menu toggle
    const mobileMenuButton = document.querySelector('button:has(i[data-feather="menu"])');
    if (mobileMenuButton) {
        mobileMenuButton.addEventListener('click', function() {
            // This would toggle a mobile menu in a real implementation
            alert('Mobile menu would open here in a full implementation');
        });
    }

    // Initialize tooltips
    const tooltipElements = document.querySelectorAll('[data-tooltip]');
    tooltipElements.forEach(el => {
        el.addEventListener('mouseenter', function() {
            // Tooltip display logic would go here
        });
    });

    // Re-initialize feather icons after dynamic content changes
    feather.replace();
});

// Syntax highlighting for MQL5 code
function highlightMQL5Code() {
    const codeBlocks = document.querySelectorAll('code.language-mql5');
    codeBlocks.forEach(block => {
        const code = block.textContent;
        let highlighted = code;
        
        // Highlight keywords
        const keywords = ['input', 'int', 'double', 'string', 'bool', 'void', 'return', 
                         'if', 'else', 'for', 'while', 'OnInit', 'OnDeinit', 'OnTick'];
        keywords.forEach(keyword => {
            const regex = new RegExp(`\\b${keyword}\\b`, 'g');
            highlighted = highlighted.replace(regex, `<span class="keyword">${keyword}</span>`);
        });
        
        // Highlight functions
        const functions = ['iMA', 'trade.Buy', 'trade.Sell', 'NormalizeDouble', 'SymbolInfoDouble'];
        functions.forEach(func => {
            const regex = new RegExp(`\\b${func}\\b`, 'g');
            highlighted = highlighted.replace(regex, `<span</span>`);
        
        block.innerHTML = highlighted;
    });
});
</span>`);
        highlighted = highlighted.replace(/\/\*[\s\S]*?\*\//g, `<span class="text-gray-500 italic">
document.addEventListener('DOMContentLoaded', function() {
    // Initialize feather icons
    feather.replace();

    // Toggle dark mode
    const darkModeToggle = document.createElement('button');
    darkModeToggle.className = 'fixed bottom-4 right-4 p-3 rounded-full bg-primary-600 text-white shadow-lg z-50';
    darkModeToggle.innerHTML = '<i data-feather="moon"></i>';
    document.body.appendChild(darkModeToggle);
    
    darkModeToggle.addEventListener('click', function() {
        document.documentElement.classList.toggle('dark');
        const icon = darkModeToggle.querySelector('i');
        if (document.documentElement.classList.contains('dark')) {
            icon.setAttribute('data-feather', 'sun');
        } else {
            icon.setAttribute('data-feather', 'moon');
        }
        feather.replace();
    });

    // Simulate code editor functionality
    const compileButton = document.querySelector('button:has(i[data-feather="play"])');
    if (compileButton) {
        compileButton.addEventListener('click', function() {
            const outputConsole = document.querySelector('.bg-gray-900.text-gray-300');
            if (outputConsole) {
                const newEntry = document.createElement('div');
                newEntry.className = 'text-green-400';
                newEntry.textContent = '> Code compiled successfully!';
                outputConsole.appendChild(newEntry);
                outputConsole.scrollTop = outputConsole.scrollHeight;
            }
        });
    }

    // Mobile menu toggle
    const mobileMenuButton = document.querySelector('button:has(i[data-feather="menu"])');
    if (mobileMenuButton) {
        mobileMenuButton.addEventListener('click', function() {
            const nav = document.querySelector('nav');
            if (nav) {
                nav.classList.toggle('hidden');
                nav.classList.toggle('flex');
            }
        });
    }

    // Initialize tooltips
    const tooltipElements = document.querySelectorAll('[data-tooltip]');
    tooltipElements.forEach(el => {
        el.addEventListener('mouseenter', function() {
            const tooltip = document.createElement('div');
            tooltip.className = 'absolute z-50 px-2 py-1 text-xs text-white bg-gray-800 rounded';
            tooltip.textContent = this.getAttribute('data-tooltip');
            this.appendChild(tooltip);
            
            this.addEventListener('mouseleave', function() {
                tooltip.remove();
            });
        });
    });

    // Highlight MQL5 code
    const codeBlocks = document.querySelectorAll('code.language-mql5');
    codeBlocks.forEach(block => {
        const code = block.innerHTML;
        let highlighted = code;
        
        // Highlight keywords
        const keywords = ['input', 'int', 'double', 'string', 'bool', 'void', 'return', 
                         'if', 'else', 'for', 'while', 'OnInit', 'OnDeinit', 'OnTick'];
        keywords.forEach(keyword => {
            const regex = new RegExp(`\\b${keyword}\\b`, 'g');
            highlighted = highlighted.replace(regex, `<span class="text-pink-400">${keyword}</span>`);
        });
        
        // Highlight functions
        const functions = ['iMA', 'trade.Buy', 'trade.Sell', 'NormalizeDouble', 'SymbolInfoDouble'];
        functions.forEach(func => {
            const regex = new RegExp(`\\b${func}\\b`, 'g');
            highlighted = highlighted.replace(regex, `<span class="text-blue-400">${func}</span>`);
        });
        
        // Highlight strings
        highlighted = highlighted.replace(/"([^"]*)"/g, `<span class="text-green-400">"$1"</span>`);
        
        // Highlight numbers
        highlighted = highlighted.replace(/\b(\d+\.?\d*)\b/g, `<span class="text-yellow-400">$1</span>`);
        
        // Highlight comments
        highlighted = highlighted.replace(/\/\/.*$/gm, `<span class="text-gray-500 italic">document.addEventListener('DOMContentLoaded', function() {
    // Toggle dark mode
    const darkModeToggle = document.createElement('button');
    darkModeToggle.className = 'fixed bottom-4 right-4 p-3 rounded-full bg-primary-600 text-white shadow-lg z-50';
    darkModeToggle.innerHTML = '<i data-feather="moon"></i>';
    document.body.appendChild(darkModeToggle);
    
    darkModeToggle.addEventListener('click', function() {
        document.documentElement.classList.toggle('dark');
        const icon = darkModeToggle.querySelector('i');
        if (document.documentElement.classList.contains('dark')) {
            icon.setAttribute('data-feather', 'sun');
        } else {
            icon.setAttribute('data-feather', 'moon');
        }
        feather.replace();
    });

    // Simulate code editor functionality
    const compileButton = document.querySelector('button:has(i[data-feather="play"])');
    if (compileButton) {
        compileButton.addEventListener('click', function() {
            const outputConsole = document.querySelector('.bg-gray-900.text-gray-300');
            if (outputConsole) {
                const newEntry = document.createElement('div');
                newEntry.className = 'text-green-400';
                newEntry.textContent = '> Code compiled successfully!';
                outputConsole.appendChild(newEntry);
                outputConsole.scrollTop = outputConsole.scrollHeight;
            }
        });
    }

    // Mobile menu toggle
    const mobileMenuButton = document.querySelector('button:has(i[data-feather="menu"])');
    if (mobileMenuButton) {
        mobileMenuButton.addEventListener('click', function() {
            // This would toggle a mobile menu in a real implementation
            alert('Mobile menu would open here in a full implementation');
        });
    }

    // Initialize tooltips
    const tooltipElements = document.querySelectorAll('[data-tooltip]');
    tooltipElements.forEach(el => {
        el.addEventListener('mouseenter', function() {
            // Tooltip display logic would go here
        });
    });

    // Re-initialize feather icons after dynamic content changes
    feather.replace();
});

// Syntax highlighting for MQL5 code
function highlightMQL5Code() {
    const codeBlocks = document.querySelectorAll('code.language-mql5');
    codeBlocks.forEach(block => {
        const code = block.textContent;
        let highlighted = code;
        
        // Highlight keywords
        const keywords = ['input', 'int', 'double', 'string', 'bool', 'void', 'return', 
                         'if', 'else', 'for', 'while', 'OnInit', 'OnDeinit', 'OnTick'];
        keywords.forEach(keyword => {
            const regex = new RegExp(`\\b${keyword}\\b`, 'g');
            highlighted = highlighted.replace(regex, `<span class="keyword">${keyword}</span>`);
        });
        
        // Highlight functions
        const functions = ['iMA', 'trade.Buy', 'trade.Sell', 'NormalizeDouble', 'SymbolInfoDouble'];
        functions.forEach(func => {
            const regex = new RegExp(`\\b${func}\\b`, 'g');
            highlighted = highlighted.replace(regex, `<span</span>`);
        
        block.innerHTML = highlighted;
    });
});
</span>`);
        
        block.innerHTML = highlighted;
    });
});