class CryptoHeader extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .header-gradient {
                    background: linear-gradient(135deg, rgba(99,102,241,0.2) 0%, rgba(16,185,129,0.2) 100%);
                }
            </style>
            <header class="header-gradient border-b border-gray-800">
                <div class="container mx-auto px-4 py-6">
                    <div class="flex flex-col md:flex-row justify-between items-center">
                        <div class="flex items-center space-x-3 mb-4 md:mb-0">
                            <i data-feather="activity" class="text-primary-500"></i>
                            <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary-500 to-secondary-500">
                                Crypto Pulse Scanner
                            </h1>
                        </div>
                        
                        <div class="flex items-center space-x-4">
                            <div class="relative">
                                <input type="text" placeholder="Search coins..." 
                                    class="bg-gray-800 rounded-full py-2 px-4 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 w-full md:w-64">
                                <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
                            </div>
                            <button class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-full text-sm font-medium smooth-transition">
                                <i data-feather="refresh-cw" class="inline mr-1"></i> Refresh
                            </button>
                        </div>
                    </div>
                </div>
            </header>
        `;
    }
}

customElements.define('crypto-header', CryptoHeader);