components/header.js

class CustomHeader extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                header {
                    background: rgba(17, 24, 39, 0.8);
                    backdrop-filter: blur(10px);
                    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
                }
                .container {
                    max-width: 1200px;
                    margin: 0 auto;
                    padding: 0 1rem;
                }
                .logo {
                    font-weight: bold;
                    font-size: 1.5rem;
                    background: linear-gradient(45deg, #a855f7, #ec4899);
                    background-clip: text;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
                nav a {
                    transition: color 0.3s ease;
                }
                nav a:hover {
                    color: #a855f7;
                }
            </style>
            <header class="py-4">
                <div class="container mx-auto px-4">
                    <div class="flex items-center justify-between">
                        <a href="/" class="logo">TiltShift Studio 🎨</a>
                        <nav class="flex items-center space-x-6">
                            <a href="#upload" class="text-gray-300 hover:text-white">Upload</a>
                            <a href="#editor" class="text-gray-300 hover:text-white">Editor</a>
                            <a href="https://github.com" target="_blank" class="text-gray-300 hover:text-white">
                                <i data-feather="github"></i>
                            </a>
                        </nav>
                    </div>
                </div>
            </header>
        `;
        
        // Replace feather icons in shadow DOM
        setTimeout(() => {
            if (typeof feather !== 'undefined') {
                feather.replace();
            }
        }, 100);
    }
}

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