class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                nav {
                    background-color: white;
                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                }
                .nav-container {
                    max-width: 1200px;
                    margin: 0 auto;
                }
                .logo-text {
                    background: linear-gradient(90deg, #13aa52 0%, #027d46 100%);
                    -webkit-background-clip: text;
                    background-clip: text;
                    color: transparent;
                }
                @media (max-width: 768px) {
                    .nav-links {
                        display: none;
                    }
                    .mobile-menu {
                        display: block;
                    }
                }
            </style>
            <nav class="py-4 px-6">
                <div class="nav-container flex justify-between items-center">
                    <a href="/" class="flex items-center">
                        <i data-feather="database" class="text-green-600 mr-2"></i>
                        <span class="text-xl font-bold logo-text">MongoMaster</span>
                    </a>
                    
                    <div class="nav-links flex items-center space-x-6">
                        <a href="/" class="text-gray-700 hover:text-green-600 transition-colors font-medium">Home</a>
                        <custom-dropdown title="Courses">
                            <a href="#foundational">Foundational</a>
                            <a href="#developer">Developer</a>
                            <a href="#admin">Admin/DevOps</a>
                            <a href="#ai">AI Developer</a>
                        </custom-dropdown>
                        <custom-dropdown title="Resources">
                            <a href="#">Documentation</a>
                            <a href="#">Tutorials</a>
                            <a href="#">Community</a>
                            <a href="#">Blog</a>
                        </custom-dropdown>
                        <a href="#" class="text-gray-700 hover:text-green-600 transition-colors font-medium">About</a>
                        <a href="#" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md font-medium transition-colors">Sign In</a>
                    </div>
<button class="mobile-menu hidden text-gray-700">
                        <i data-feather="menu"></i>
                    </button>
                </div>
            </nav>
            <script>feather.replace();</script>
        `;
    }
}

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