class CustomHeader extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .header {
                    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                }
                
                .logo {
                    background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                    font-weight: 700;
                }
                
                @media (max-width: 768px) {
                    .logo {
                        font-size: 1.25rem;
                    }
                }
            </style>
            <header class="header">
                <div class="container mx-auto px-4 py-4">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <div class="p-2 bg-white/20 rounded-lg">
                                <i data-feather="video" class="text-white"></i>
                        </div>
                        <h1 class="logo text-2xl md:text-3xl">ScreenStream Studio 📹</h1>
                        <div class="w-8"></div> <!-- Spacer for balance -->
                    </div>
                </div>
            </header>
        `;
        
        // Ensure feather icons are replaced in shadow DOM
        setTimeout(() => {
            if (this.shadowRoot.querySelector('[data-feather]')) {
                feather.replace(this.shadowRoot);
            }
        }, 100);
    }
}

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