class CustomNav extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
                
                :host {
                    display: block;
                    font-family: 'Poppins', sans-serif;
                }
                .top-banner {
                    background: #002366;
                    color: white;
                    padding: 0.5rem 0;
                    text-align: center;
                    font-size: 0.9rem;
                    display: flex;
                    justify-content: center;
                    gap: 1.5rem;
                }

                .top-banner a {
                    color: white;
                    text-decoration: none;
                    transition: color 0.3s ease;
                    display: flex;
                    align-items: center;
                    gap: 0.3rem;
                }

                .top-banner a:hover {
                    color: #D4AF37;
                }

                .top-banner i {
                    width: 16px;
                    height: 16px;
                }

                nav {
                    background: white;
                    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
                    position: sticky;
                    top: 0;
                    z-index: 1000;
                }
.container {
                    max-width: 1200px;
                    margin: 0 auto;
                    padding: 0 2rem;
                }
                
                .nav-container {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    height: 80px;
                }
                
                .logo-container {
                    display: flex;
                    align-items: center;
                    gap: 0.75rem;
                    transition: transform 0.2s ease;
                }
                
                .logo-container:hover {
                    transform: scale(1.05);
                }
                
                .logo-icon {
                    color: #D4AF37;
                    width: 24px;
                    height: 24px;
                }
                
                .logo-text {
                    font-size: 1.5rem;
                    font-weight: 700;
                    color: #002366;
                }
                
                .nav-menu {
                    display: flex;
                    align-items: center;
                    gap: 2.5rem;
                }
                
                .nav-item {
                    position: relative;
                    font-weight: 500;
                    color: #002366;
                    font-size: 1rem;
                    transition: all 0.3s ease;
                }
                
                .nav-item:hover {
                    color: #D4AF37;
                }
                
                .nav-item:after {
                    content: '';
                    position: absolute;
                    width: 0;
                    height: 2px;
                    bottom: -4px;
                    left: 0;
                    background-color: #D4AF37;
                    transition: width 0.3s ease;
                }
                
                .nav-item:hover:after {
                    width: 100%;
                }
                
                .btn-signup {
                    background-color: #D4AF37;
                    color: #002366;
                    padding: 0.6rem 1.5rem;
                    border-radius: 30px;
                    font-weight: 600;
                    transition: all 0.3s ease;
                    box-shadow: 0 4px 6px rgba(212, 175, 55, 0.2);
                }
                
                .btn-signup:hover {
                    background-color: #c19d30;
                    transform: translateY(-2px);
                    box-shadow: 0 6px 12px rgba(212, 175, 55, 0.3);
                }
                
                .mobile-menu-btn {
                    display: none;
                    background: none;
                    border: none;
                    cursor: pointer;
                    color: #002366;
                }
                
                .mobile-menu {
                    position: fixed;
                    top: 80px;
                    left: 0;
                    width: 100%;
                    background: white;
                    padding: 1rem 2rem;
                    transform: translateX(-100%);
                    transition: transform 0.3s ease;
                    z-index: 999;
                    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
                }
                
                .mobile-menu.open {
                    transform: translateX(0);
                }
                
                .mobile-nav-item {
                    display: block;
                    padding: 1rem 0;
                    color: #002366;
                    font-weight: 500;
                    font-size: 1.1rem;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
                }
                
                .mobile-nav-item:last-child {
                    border-bottom: none;
                }
                
                .mobile-btn-signup {
                    background-color: #D4AF37;
                    color: #002366;
                    padding: 0.8rem;
                    border-radius: 30px;
                    font-weight: 600;
                    display: block;
                    text-align: center;
                    margin: 1.5rem 0;
                }
                
                @media (max-width: 992px) {
                    .nav-menu {
                        display: none;
                    }
                    
                    .mobile-menu-btn {
                        display: block;
                    }
                }
            </style>
            <div class="top-banner">
                <a href="#services">
                    <i data-feather="info"></i>
                    HOW IT WORKS
                </a>
                <a href="#services">
                    <i data-feather="star"></i>
                    WHY CHOOSE US
                </a>
                <a href="#services">
                    <i data-feather="dollar-sign"></i>
                    SHIPPING RATES
                </a>
                <a href="#services">
                    <i data-feather="shopping-bag"></i>
                    SHOP WITH US
                </a>
                <a href="signup.html">
                    <i data-feather="user-plus"></i>
                    SIGN UP
                </a>
            </div>
            <nav>
<div class="container">
                    <div class="nav-container">
                        <a href="index.html" class="logo-container">
                            <i data-feather="globe" class="logo-icon"></i>
                            <span class="logo-text">BavulumKatar'da</span>
                        </a>
                        
                        <!-- Desktop Navigation -->
                        <div class="nav-menu">
                        <a href="how-it-works.html" class="nav-item">HOW IT WORKS</a>
                        <a href="why-choose-us.html" class="nav-item">WHY CHOOSE US</a>
                        <a href="shipping-rates.html" class="nav-item">SHIPPING RATES</a>
                        <a href="shop-with-us.html" class="nav-item">SHOP WITH US</a>
                        <a href="orders.html" class="nav-item">MY ORDERS</a>
                        <a href="signup.html" class="btn-signup">SIGN UP</a>
</div>
                        
                        <!-- Mobile menu button -->
                        <button class="mobile-menu-btn">
                            <i data-feather="menu" class="w-6 h-6"></i>
                        </button>
                    </div>
                </div>
                
                <!-- Mobile Navigation -->
                <div class="mobile-menu">
                    <a href="how-it-works.html" class="mobile-nav-item">HOW IT WORKS</a>
                    <a href="why-choose-us.html" class="mobile-nav-item">WHY CHOOSE US</a>
                    <a href="shipping-rates.html" class="mobile-nav-item">SHIPPING RATES</a>
                    <a href="shop-with-us.html" class="mobile-nav-item">SHOP WITH US</a>
                    <a href="orders.html" class="mobile-nav-item">MY ORDERS</a>
                    <a href="signup.html" class="mobile-btn-signup">SIGN UP</a>
</div>
            </nav>
<script>
            <script>
                feather.replace();
                
                // Mobile menu toggle
                const mobileMenuButton = this.shadowRoot.querySelector('.mobile-menu-btn');
                const mobileMenu = this.shadowRoot.querySelector('.mobile-menu');
                
                mobileMenuButton.addEventListener('click', () => {
                    mobileMenu.classList.toggle('open');
                    const icon = mobileMenuButton.querySelector('i');
                    if (mobileMenu.classList.contains('open')) {
                        feather.icons['x'].replace(icon);
                    } else {
                        feather.icons['menu'].replace(icon);
                    }
                });
            </script>
</script>
        `;
    }
}