components/search.js

class CustomSearch extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .search-input {
                    transition: box-shadow 0.3s ease, border-color 0.3s ease;
                }
                .search-input:focus {
                    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
                }
            </style>
            <div class="bg-white rounded-lg shadow-md p-6">
                <h2 class="text-2xl font-semibold mb-4 text-gray-800">Search American Data</h2>
                <div class="flex flex-col md:flex-row gap-4">
                    <div class="flex-grow">
                        <input type="text" 
                               placeholder="Enter state, city, or demographic..." 
                               class="search-input w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none">
                    </div>
                    <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg transition-colors duration-300 flex items-center justify-center">
                        <i data-feather="search" class="mr-2 w-4 h-4"></i>
                        Search
                    </button>
                </div>
                <div class="mt-4">
                    <p class="text-sm text-gray-500">Try searching for: "California population", "New York income", or "Texas housing"</p>
                </div>
            </div>
        `;
    }
}

customElements.define('custom-search', CustomSearch);