script.js

document.addEventListener('DOMContentLoaded', function() {
    // Handle search functionality
    document.addEventListener('search-performed', (e) => {
        const { query, type } = e.detail;
        // In a real implementation, this would make an API call
        console.log(`Searching for ${query} (type: ${type})`);
        alert(`Search functionality would look for ${query} in ${type} fields. This is a demo.`);
    });

    // Initialize tooltips
const tooltipTriggers = document.querySelectorAll('[data-tooltip]');
    tooltipTriggers.forEach(trigger => {
        trigger.addEventListener('mouseenter', showTooltip);
        trigger.addEventListener('mouseleave', hideTooltip);
    });

    // Mobile menu toggle functionality
    const mobileMenuButton = document.querySelector('[data-menu-toggle]');
    if (mobileMenuButton) {
        mobileMenuButton.addEventListener('click', toggleMobileMenu);
    }

    // Dark mode toggle
    const darkModeToggle = document.querySelector('[data-dark-mode-toggle]');
    if (darkModeToggle) {
        darkModeToggle.addEventListener('click', toggleDarkMode);
    }
});

function showTooltip(e) {
    const tooltipText = this.getAttribute('data-tooltip');
    const tooltip = document.createElement('div');
    
    tooltip.classList.add('absolute', 'z-50', 'px-2', 'py-1', 'text-xs', 'bg-gray-800', 'text-white', 'rounded', 'shadow-lg', 'whitespace-nowrap');
    tooltip.textContent = tooltipText;
    
    document.body.appendChild(tooltip);
    
    const rect = this.getBoundingClientRect();
    tooltip.style.top = `${rect.top - tooltip.offsetHeight - 5}px`;
    tooltip.style.left = `${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`;
    
    this.tooltip = tooltip;
}

function hideTooltip() {
    if (this.tooltip) {
        document.body.removeChild(this.tooltip);
        this.tooltip = null;
    }
}

function toggleMobileMenu() {
    const menu = document.querySelector('[data-menu]');
    menu.classList.toggle('hidden');
}

function toggleDarkMode() {
    const html = document.documentElement;
    html.classList.toggle('dark');
    localStorage.setItem('darkMode', html.classList.contains('dark'));
}