components/header.js

class CustomHeader extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&family=Assistant:wght@300;400;600;700&display=swap');
                
                :host {
                    --deep-cocoa: #3E2723;
                    --milk-chocolate: #795548;
                    --creamy-white: #FDFBF7;
                    --luxury-gold: #C5A063;
                }
                
                .top-bar {
                    background-color: var(--deep-cocoa);
                    color: white;
                    padding: 8px 0;
                    text-align: center;
                    font-size: 14px;
                }
                
                .nav-link {
                    transition: color 0.3s ease;
                }
                
                .nav-link:hover {
                    color: var(--milk-chocolate);
                }
                
                .mobile-menu {
                    transform: translateX(-100%);
                    transition: transform 0.3s ease;
                }
                
                .mobile-menu.open {
                    transform: translateX(0);
                }
            </style>
            
            <header>
                <!-- Top Bar -->
                <div class="top-bar">
                    <p>Save 15% use code: MELTERS15 | Free Shipping on orders over £30</p>
                </div>
                
                <!-- Main Navigation -->
                <nav class="bg-white shadow-sm">
                    <div class="container mx-auto px-4">
                        <div class="flex items-center justify-between py-4">
                            <!-- Mobile Menu Button -->
                            <button class="md:hidden text-deep-cocoa" id="mobile-menu-button">
                                <i data-feather="menu"></i>
                            </button>
                            
                            <!-- Logo -->
                            <div class="flex-1 md:flex-none text-center">
                                <a href="/" class="font-dancing text-3xl text-deep-cocoa">Melters</a>
                                <div class="text-xs text-deep-cocoa uppercase tracking-wide">Chocolate</div>
                            </div>
                            
                            <!-- Desktop Navigation -->
                            <div class="hidden md:flex space-x-8">
                                <a href="#shop" class="nav-link text-deep-cocoa font-semibold">Shop</a>
                                <a href="#gifting" class="nav-link text-deep-cocoa font-semibold">Corporate Gifting</a>
                                <a href="#wholesale" class="nav-link text-deep-cocoa font-semibold">Wholesale</a>
                                <a href="#about" class="nav-link text-deep-cocoa font-semibold">About</a>
                                <a href="#contact" class="nav-link text-deep-cocoa font-semibold">Contact</a>
                            </div>
                            
                            <!-- Icons -->
                            <div class="flex items-center space-x-4">
                                <a href="#search" class="text-deep-cocoa">
                                    <i data-feather="search"></i>
                                </a>
                                <a href="#account" class="text-deep-cocoa">
                                    <i data-feather="user"></i>
                                </a>
                                <a href="#cart" class="text-deep-cocoa relative">
                                    <i data-feather="shopping-bag"></i>
                                    <span class="absolute -top-2 -right-2 bg-luxury-gold text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">0</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Mobile Menu -->
                    <div class="mobile-menu fixed inset-y-0 left-0 w-64 bg-white shadow-lg z-50">
                        <div class="p-4 border-b">
                            <button class="text-deep-cocoa" id="close-mobile-menu">
                                <i data-feather="x"></i>
                            </button>
                        </div>
                        <div class="p-4 space-y-4">
                            <a href="#shop" class="block text-deep-cocoa font-semibold">Shop</a>
                            <a href="#gifting" class="block text-deep-cocoa font-semibold">Corporate Gifting</a>
                            <a href="#wholesale" class="block text-deep-cocoa font-semibold">Wholesale</a>
                            <a href="#about" class="block text-deep-cocoa font-semibold">About</a>
                            <a href="#contact" class="block text-deep-cocoa font-semibold">Contact</a>
                        </div>
                    </div>
                </nav>
            </header>
        `;
        
        // Add mobile menu functionality
        const mobileMenuButton = this.shadowRoot.getElementById('mobile-menu-button');
        const closeMobileMenu = this.shadowRoot.getElementById('close-mobile-menu');
        const mobileMenu = this.shadowRoot.querySelector('.mobile-menu');
        
        mobileMenuButton.addEventListener('click', () => {
            mobileMenu.classList.add('open');
        });
        
        closeMobileMenu.addEventListener('click', () => {
            mobileMenu.classList.remove('open');
        });
        
        // Initialize feather icons
        if (typeof feather !== 'undefined') {
            feather.replace();
        }
    }
}

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