class CustomHeader extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    font-family: 'Inter', sans-serif;
                }
                
                .header-container {
                    background: rgba(15, 23, 42, 0.8);
                    backdrop-filter: blur(10px);
                    border-bottom: 1px solid rgba(6, 182, 212, 0.2);
                    position: sticky;
                    top: 0;
                    z-index: 50;
                }
                
                .nav-link {
                    position: relative;
                    transition: color 0.3s ease;
                }
                
                .nav-link:hover {
                    color: #06b6d4;
                }
                
                .nav-link::after {
                    content: '';
                    position: absolute;
                    bottom: -2px;
                    left: 0;
                    width: 0;
                    height: 2px;
                    background: linear-gradient(90deg, #06b6d4, #3b82f6);
                    transition: width 0.3s ease;
                }
                
                .nav-link:hover::after {
                    width: 100%;
                }
                
                .mobile-menu {
                    transform: translateX(-100%);
                    transition: transform 0.3s ease;
                }
                
                .mobile-menu.open {
                    transform: translateX(0);
                }
                
                @media (max-width: 768px) {
                    .desktop-nav {
                        display: none;
                    }
                }
                
                @media (min-width: 769px) {
                    .mobile-menu-button {
                        display: none;
                    }
                }
            </style>
            
            <header class="header-container">
                <nav class="container mx-auto px-4 py-4">
                    <div class="flex items-center justify-between">
                        <!-- Logo -->
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-xl bg-gradient-to-r from-cyan-500 to-blue-500 flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                                </svg>
                            </div>
                            <div>
                                <h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-cyan-300 to-blue-300">
                                    SpotSync Alpha
                                </h1>
                                <p class="text-xs text-gray-400">Master-Follower Replication Engine</p>
                            </div>
                        </div>
                        
                        <!-- Desktop Navigation -->
                        <div class="desktop-nav flex items-center gap-6">
                            <a href="index.html" class="nav-link text-gray-300">Dashboard</a>
                            <a href="#engine" class="nav-link text-gray-300">Engine</a>