class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .nav-link {
                    transition: all 0.2s ease;
                }
                .nav-link:hover {
                    color: #6366f1;
                    transform: translateY(-1px);
                }
            </style>
            <nav class="bg-white shadow-sm">
                <div class="container mx-auto px-4 py-4">
                    <div class="flex justify-between items-center">
                        <div class="flex items-center">
                            <i data-feather="upload" class="text-indigo-500 w-6 h-6 mr-3"></i>
                            <span class="text-xl font-bold text-gray-800">Droppy</span>
                        </div>
                        <div class="hidden md:flex space-x-8">
                            <a href="#" class="nav-link text-gray-600 hover:text-indigo-500 font-medium">Home</a>
                            <a href="#" class="nav-link text-gray-600 hover:text-indigo-500 font-medium">Features</a>
                            <a href="#" class="nav-link text-gray-600 hover:text-indigo-500 font-medium">Pricing</a>
                            <a href="#" class="nav-link text-gray-600 hover:text-indigo-500 font-medium">About</a>
                        </div>
                        <div class="flex items-center">
                            <a href="#" class="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg font-medium transition">
                                Login
                            </a>
                        </div>
                    </div>
                </div>
            </nav>
        `;
    }
}
customElements.define('custom-navbar', CustomNavbar);