components/header.js

class CustomHeader extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                header {
                    background: rgba(10, 10, 10, 0.8);
                    backdrop-filter: blur(10px);
                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                }
                
                .logo {
                    background: linear-gradient(135deg, #ff8c00, #ffcc00);
                    -webkit-background-clip: text;
                    background-clip: text;
                    color: transparent;
                }
                
                nav a:hover {
                    color: #ff8c00;
                }
            </style>
            <header class="py-4 px-6">
                <div class="container mx-auto flex justify-between items-center">
                    <div class="logo text-2xl font-bold">Loot Spin Royale  🎰</div>
                    <nav class="flex gap-6">
                        <a href="#" class="text-gray-300 hover:text-orange-400 transition-colors">Home</a>
                        <a href="#" class="text-gray-300 hover:text-orange-400 transition-colors">Prizes</a>
                        <a href="#" class="text-gray-300 hover:text-orange-400 transition-colors">About</a>
                    </nav>
                </div>
            </header>
        `;
    }
}

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