class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .navbar {
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    z-index: 50;
                    transition: all 0.3s ease;
                }
                
                .navbar.scrolled {
                    background-color: rgba(26, 26, 26, 0.95);
                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                }
                
                .nav-link {
                    position: relative;
                }
                
                .nav-link::after {
                    content: '';
                    position: absolute;
                    bottom: -2px;
                    left: 0;
                    width: 0;
                    height: 1px;
                    background-color: #c0a080;
                    transition: width 0.3s ease;
                }
                
                .nav-link:hover::after {
                    width: 100%;
                }
                
                .mobile-menu {
                    max-height: 0;
                    overflow: hidden;
                    transition: max-height 0.3s ease-out;
                }
                
                .mobile-menu.open {
                    max-height: 500px;
                }
                
                @media (min-width: 1024px) {
                    .mobile-menu {
                        max-height: none !important;
                        display: block !important;
                    }
                }
            </style>
            
            <nav class="navbar bg-transparent text-white py-4">
                <div class="container mx-auto px-6 flex justify-between items-center">
                    <a href="/" class="text-2xl font-serif tracking-wider">VogueVista</a>
                    
                    <div class="lg:hidden">
                        <button id="menu-toggle" class="focus:outline-none">
                            <i data-feather="menu"></i>
                        </button>
                    </div>
                    
                    <div id="mobile-menu" class="mobile-menu lg:flex lg:items-center lg:w-auto w-full">
                        <div class="lg:flex lg:flex-row flex flex-col lg:space-x-8 lg:space-y-0 space-y-4 lg:pt-0 pt-4">
                            <a href="#" class="nav-link">Women</a>
                            <a href="#" class="nav-link">Men</a>
                            <a href="#" class="nav-link">Accessories</a>
                            <a href="#" class="nav-link">Collections</a>
                            <a href="#" class="nav-link">About</a>
                            <a href="#" class="flex items-center nav-link">
                                <i data-feather="shopping-bag" class="mr-2"></i>
                                <span>Cart (0)</span>
                            </a>
                        </div>
                    </div>
                </div>
            </nav>
            
            <script>
                feather.replace();
                
                // Mobile menu toggle
                document.addEventListener('DOMContentLoaded', function() {
                    const menuToggle = this.shadowRoot.getElementById('menu-toggle');
                    const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
                    
                    if (menuToggle) {
                        menuToggle.addEventListener('click', function() {
                            mobileMenu.classList.toggle('open');
                            
                            // Change icon based on menu state
                            const icon = menuToggle.querySelector('i');
                            if (mobileMenu.classList.contains('open')) {
                                icon.setAttribute('data-feather', 'x');
                            } else {
                                icon.setAttribute('data-feather', 'menu');
                            }
                            feather.replace();
                        });
                    }
                    
                    // Navbar scroll effect
                    window.addEventListener('scroll', function() {
                        const navbar = this.shadowRoot.querySelector('.navbar');
                        if (window.scrollY > 50) {
                            navbar.classList.add('scrolled');
                        } else {
                            navbar.classList.remove('scrolled');
                        }
                    });
                });
            </script>
        `;
    }
}

customElements.define('custom-navbar', CustomNavbar);