class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                nav {
                    background: linear-gradient(135deg, #3B82F6 0%, #10B981 100%);
                    padding: 1rem 2rem;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                    position: relative;
                    z-index: 50;
                }
                .logo {
                    color: white;
                    font-weight: bold;
                    font-size: 1.5rem;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                }
                .nav-links {
                    display: flex;
                    gap: 1.5rem;
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    align-items: center;
                }
                a {
                    color: white;
                    text-decoration: none;
                    transition: opacity 0.2s;
                    font-weight: 500;
                    display: flex;
                    align-items: center;
                    gap: 0.25rem;
                }
                a:hover {
                    opacity: 0.8;
                }
                .user-actions {
                    display: flex;
                    align-items: center;
                    gap: 1rem;
                }
                .dark-mode-toggle {
                    background: none;
                    border: none;
                    color: white;
                    cursor: pointer;
                    padding: 0.5rem;
                    border-radius: 50%;
                    transition: background-color 0.2s;
                }
                .dark-mode-toggle:hover {
                    background-color: rgba(255, 255, 255, 0.1);
                }
                .mobile-menu-btn {
                    display: none;
                    background: none;
                    border: none;
                    color: white;
                    cursor: pointer;
                }
                @media (max-width: 768px) {
                    .mobile-menu-btn {
                        display: block;
                    }
                    .nav-links, .user-actions {
                        display: none;
                    }
                }
            </style>
            <nav>
                <div class="logo">
                    <i data-feather="image"></i>
                    <span>AI Artisan</span>
                </div>
                
                <button class="mobile-menu-btn">
                    <i data-feather="menu"></i>
                </button>
                <ul class="nav-links">
                    <li><a href="index.html"><i data-feather="home"></i> Home</a></li>
                    <li><a href="gallery.html"><i data-feather="grid"></i> Gallery</a></li>
                    <li><a href="processors.html"><i data-feather="cpu"></i> Processors</a></li>
                    <li><a href="marketplace.html"><i data-feather="shopping-bag"></i> Marketplace</a></li>
                    <li><a href="about.html"><i data-feather="info"></i> About</a></li>
                </ul>
<div class="user-actions">
                    <button id="darkModeToggle" class="dark-mode-toggle">
                        <i data-feather="moon"></i>
                    </button>
                    <a href="login.html"><i data-feather="user"></i> Sign In</a>
                    <a href="upload.html" class="bg-accent-red hover:bg-red-600 px-4 py-2 rounded-full">
                        <i data-feather="upload"></i> Upload
                    </a>
                </div>
            </nav>
        `;
        
        // Initialize feather icons in shadow DOM
        const featherScript = document.createElement('script');
        featherScript.src = 'https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js';
        this.shadowRoot.appendChild(featherScript);
        
        featherScript.onload = () => {
            if (window.feather) {
                window.feather.replace();
            }
        };
        
        // Mobile menu toggle functionality
        const mobileMenuBtn = this.shadowRoot.querySelector('.mobile-menu-btn');
        if (mobileMenuBtn) {
            mobileMenuBtn.addEventListener('click', () => {
                const navLinks = this.shadowRoot.querySelector('.nav-links');
                const userActions = this.shadowRoot.querySelector('.user-actions');
                
                if (navLinks.style.display === 'flex' || navLinks.style.display === '') {
                    navLinks.style.display = 'none';
                    userActions.style.display = 'none';
                } else {
                    navLinks.style.display = 'flex';
                    userActions.style.display = 'flex';
                }
            });
        }
    }
}

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