class CustomHeader extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                header {
                    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
                    color: white;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                }
                
                .logo {
                    transition: all 0.3s ease;
                }
                
                .logo:hover {
                    transform: scale(1.05);
                }
            </style>
            <header class="py-4">
                <div class="container mx-auto px-4 flex justify-between items-center">
                    <a href="#" class="flex items-center space-x-2 logo">
                        <i data-feather="lock" class="w-6 h-6"></i>
                        <span class="text-xl font-bold">SecureVault</span>
                    </a>
                    <div class="flex items-center space-x-4">
                        <span id="vaultId" class="text-sm bg-white/20 px-3 py-1 rounded-full">Vault ID: ${window.location.hash.substring(1) || 'Private'}</span>
                    </div>
                </div>
            </header>
        `;
    }
}

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