components/header.js

class CustomHeader extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    width: 100%;
                }
                
                header {
                    background: rgba(17, 24, 39, 0.8);
                    backdrop-filter: blur(10px);
                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                }
                
                .nav-link {
                    position: relative;
                    transition: all 0.3s ease;
                }
                
                .nav-link:hover {
                    color: #8B5CF6;
                }
                
                .nav-link::after {
                    content: '';
                    position: absolute;
                    bottom: -2px;
                    left: 0;
                    width: 0;
                    height: 2px;
                    background: #8B5CF6;
                    transition: width 0.3s ease;
                }
                
                .nav-link:hover::after {
                    width: 100%;
                }
            </style>
            
            <header class="py-4 px-6">
                <div class="container mx-auto flex justify-between items-center">
                    <a href="/" class="flex items-center space-x-2">
                        <i data-feather="code" class="w-6 h-6 text-indigo-400"></i>
                        <span class="text-xl font-bold">Rosalinda's Haven</span>
                    </a>
                    
                    <nav class="hidden md:flex space-x-8">
                        <a href="#" class="nav-link">Home</a>
                        <a href="#features" class="nav-link">Features</a>
                        <a href="#projects" class="nav-link">Projects</a>
                        <a href="#about" class="nav-link">About</a>
                        <a href="#contact" class="nav-link">Contact</a>
                    </nav>
                    
                    <div class="flex items-center space-x-4">
                        <button id="darkModeToggle" class="p-2 rounded-full hover:bg-gray-700 transition-colors">
                            <i data-feather="moon" class="w-5 h-5"></i>
                        </button>
                        <button class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 rounded-lg text-sm font-medium transition-colors">
                            Get Started
                        </button>
                        <button class="md:hidden p-2 rounded-full hover:bg-gray-700 transition-colors">
                            <i data-feather="menu" class="w-5 h-5"></i>
                        </button>
                    </div>
                </div>
            </header>
        `;
    }
}

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