components/header.js

class CustomHeader extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    position: sticky;
                    top: 0;
                    z-index: 1000;
                }
                .top-bar {
                    background: linear-gradient(135deg, #1E3A8A 0%, #1e40af 100%);
                    color: white;
                    padding: 8px 0;
                    font-size: 14px;
                }
                .header-main {
                    background: white;
                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                }
                .nav-link {
                    color: #374151;
                    transition: color 0.3s ease;
                }
                .nav-link:hover {
                    color: #1E3A8A;
                }
                .mobile-menu {
                    background: white;
                    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                }
                @media (max-width: 768px) {
                    .desktop-nav {
                        display: none;
                    }
                }
            </style>
            <div class="header-container">
                <!-- Top Bar -->
                <div class="top-bar">
                    <div class="container mx-auto px-4">
                        <div class="flex justify-between items-center">
                            <span>🛒 Livraison gratuite à partir de 350€ | 📞 01 39 91 23 04</span>
                            <div class="hidden md:flex items-center space-x-4">
                                <a href="/contact.html" class="hover:underline">Contact</a>
                                <a href="/magasin.html" class="hover:underline">Notre Magasin</a>
                        </div>
                    </div>
                </div>

                <!-- Main Header -->
                <div class="header-main">
                    <div class="container mx-auto px-4 py-4">
                        <div class="flex items-center justify-between">
                            <!-- Logo -->
                            <a href="/" class="flex items-center space-x-3">
                                <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                            <i data-feather="zap"></i>
                        </div>
                        <span class="text-xl font-bold text-primary">ÉLECPEINTURE</span>
                    </a>

                    <!-- Desktop Navigation -->
                    <nav class="desktop-nav hidden md:flex items-center space-x-8">
                                <a href="/catalogue.html" class="nav-link font-medium">Catalogue</a>
                                <a href="/electricite.html" class="nav-link font-medium">Électricité</a>
                                <a href="/peinture.html" class="nav-link font-medium">Peinture</a>
                                <a href="/promotions.html" class="nav-link font-medium">Promotions</a>
                                <a href="/magasin.html" class="nav-link font-medium">Magasin</a>
                            </nav>

                    <!-- Search and Actions -->
                    <div class="flex items-center space-x-4">
                                <div class="relative">
                                    <input type="text" placeholder="Rechercher un produit..." 
                                           class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                                    <div class="absolute left-3 top-1/2 transform -translate-y-1/2">
                                        <i data-feather="search"></i>
                                    </div>
                                </div>

                                <!-- Phone Button -->
                                <a href="tel:0139912304" 
                                   class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300">
                                    📞 01 39 91 23 04
                                </a>

                                <!-- Mobile Menu Toggle -->
                                <button id="menu-toggle" class="md:hidden">
                                    <i data-feather="menu"></i>
                                </button>
                            </div>
                        </div>

                        <!-- Mobile Menu -->
                        <div id="mobile-menu" class="mobile-menu hidden md:hidden absolute top-full left-0 right-0">
                                    <div class="container mx-auto px-4 py-4">
                                        <a href="/catalogue.html" class="block py-2 nav-link">Catalogue</a>
                                        <a href="/electricite.html" class="block py-2 nav-link">Électricité</a>
                                    <a href="/peinture.html" class="block py-2 nav-link">Peinture</a>
                                    <a href="/promotions.html" class="block py-2 nav-link">Promotions</a>
                                    <a href="/magasin.html" class="block py-2 nav-link">Magasin</a>
                                    <a href="/contact.html" class="block py-2 nav-link">Contact</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
        // Initialize feather icons in shadow DOM
        setTimeout(() => {
            if (window.feather) {
                window.feather.replace();
            }
        }, 200);
}
}

customElements.define('custom-header', CustomHeader);