// Header Component - Performance Optimized with Multi-Language Support
function createHeader() {
    // Global performance optimization: Add preconnect hints for all pages
    if (!document.head.querySelector('link[href="https://d3js.org"]')) {
        const d3Preconnect = document.createElement('link');
        d3Preconnect.rel = 'preconnect';
        d3Preconnect.href = 'https://d3js.org';
        d3Preconnect.crossOrigin = 'anonymous';
        document.head.appendChild(d3Preconnect);

        const pexelsPreconnect = document.createElement('link');
        pexelsPreconnect.rel = 'preconnect';
        pexelsPreconnect.href = 'https://images.pexels.com';
        pexelsPreconnect.crossOrigin = 'anonymous';
        document.head.appendChild(pexelsPreconnect);
    }

    // Get current language and labels
    const lang = typeof LanguageRouter !== 'undefined' ? LanguageRouter.detectLanguage() : 'es';
    const labels = typeof LanguageRouter !== 'undefined' ? LanguageRouter.getNavLabels() : {
        home: 'Inicio', odoo: 'Odoo', odooIA: 'Odoo IA', hosting: 'Hosting Odoo'
    };
    const prefix = typeof LanguageRouter !== 'undefined' ? LanguageRouter.getLinkPrefix() : '';

    // Get language switcher HTML
    const langSwitcher = typeof LanguageRouter !== 'undefined'
        ? LanguageRouter.createLanguageSwitcher()
        : '';

    return `
    <header class="site-header">
        <nav class="navbar">
            <div class="container">
                <div class="nav-brand">
                    <a href="${prefix}/" class="logo">
                        <span class="logo-text">Odoo Expertos</span>
                    </a>
                </div>
                <button class="nav-toggle" aria-label="Toggle navigation">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
                <div class="nav-menu">
                    <ul class="nav-list">
                        <li><a href="${prefix}/">${labels.home}</a></li>
                        <li><a href="${prefix}/odoo/">${labels.odoo}</a></li>
                        <li><a href="${prefix}/odoo-ia/">${labels.odooIA}</a></li>
                        <li><a href="${prefix}/odoo-hosting/">${labels.hosting}</a></li>
                    </ul>
                    ${langSwitcher}
                </div>
            </div>
        </nav>
    </header>
    `;
}

// Mobile menu toggle
document.addEventListener('DOMContentLoaded', function() {
    const navToggle = document.querySelector('.nav-toggle');
    const navMenu = document.querySelector('.nav-menu');

    if (navToggle) {
        navToggle.addEventListener('click', function() {
            navMenu.classList.toggle('active');
            navToggle.classList.toggle('active');
        });
    }
});