document.addEventListener('DOMContentLoaded', function() {
    // Initialize tooltips for all elements with data-tooltip attribute
    const tooltipElements = document.querySelectorAll('[data-tooltip]');
    
    tooltipElements.forEach(el => {
        el.addEventListener('mouseenter', function() {
            const tooltip = document.createElement('div');
            tooltip.className = 'absolute z-50 px-3 py-2 text-sm text-white bg-gray-800 rounded-md shadow-lg';
            tooltip.textContent = this.getAttribute('data-tooltip');
            tooltip.style.top = `${this.getBoundingClientRect().top - 40}px`;
            tooltip.style.left = `${this.getBoundingClientRect().left + (this.offsetWidth / 2) - (tooltip.offsetWidth / 2)}px`;
            tooltip.id = 'current-tooltip';
            document.body.appendChild(tooltip);
        });
        
        el.addEventListener('mouseleave', function() {
            const tooltip = document.getElementById('current-tooltip');
            if (tooltip) {
                tooltip.remove();
            }
        });
    });
    
    // Toggle mobile menu
    const mobileMenuButton = document.querySelector('#mobile-menu-button');
    const mobileMenu = document.querySelector('#mobile-menu');
    
    if (mobileMenuButton && mobileMenu) {
        mobileMenuButton.addEventListener('click', function() {
            mobileMenu.classList.toggle('hidden');
        });
    }
    
    // Copy to clipboard functionality
    const copyButtons = document.querySelectorAll('[data-copy]');
    
    copyButtons.forEach(button => {
        button.addEventListener('click', function() {
            const target = this.getAttribute('data-copy');
            const element = document.querySelector(target);
            
            if (element) {
                element.select();
                document.execCommand('copy');
                
                // Show feedback
                const originalText = this.innerHTML;
                this.innerHTML = '<i data-feather="check" class="w-4 h-4"></i> Copied!';
                feather.replace();
                
                setTimeout(() => {
                    this.innerHTML = originalText;
                    feather.replace();
                }, 2000);
            }
        });
    });
});