class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .navbar {
                    background: linear-gradient(135deg, #f472b6 0%, #ec4899 100%);
                    box-shadow: 0 4px 6px -1px rgba(236, 72, 153, 0.1), 0 2px 4px -1px rgba(236, 72, 153, 0.06);
                }
                
                .nav-link {
                    transition: all 0.3s ease;
                    position: relative;
                }
                
                .nav-link:hover {
                    color: white;
                }
                
                .nav-link::after {
                    content: '';
                    position: absolute;
                    bottom: -2px;
                    left: 0;
                    width: 0;
                    height: 2px;
                    background-color: white;
                    transition: width 0.3s ease;
                }
                
                .nav-link:hover::after {
                    width: 100%;
                }
                
                .mobile-menu {
                    animation: fadeInDown 0.3s ease-out;
                }
                
                @keyframes fadeInDown {
                    from {
                        opacity: 0;
                        transform: translateY(-10px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
            </style>
            
            <nav class="navbar text-white px-4 py-4 md:px-8">
                <div class="max-w-7xl mx-auto flex justify-between items-center">
                    <div class="flex items-center">
                        <a href="#" class="text-2xl font-bold flex items-center">
                            <i data-feather="database" class="mr-2"></i>
                            PinkyData
                        </a>
                    </div>
                    
                    <div class="hidden md:flex space-x-8">
                        <a href="#" class="nav-link text-pink-100">Dashboard</a>
                        <a href="#" class="nav-link text-pink-100">Analytics</a>
                        <a href="#" class="nav-link text-pink-100">Reports</a>
                        <a href="#" class="nav-link text-pink-100">Settings</a>
                    </div>
                    
                    <div class="md:hidden">
                        <button id="mobile-menu-button" class="text-white focus:outline-none">
                            <i data-feather="menu"></i>
                        </button>
                    </div>
                </div>
                
                <div id="mobile-menu" class="mobile-menu hidden md:hidden mt-4 pb-4 space-y-4">
                    <a href="#" class="block px-3 py-2 rounded-md text-pink-100 hover:bg-pink-600">Dashboard</a>
                    <a href="#" class="block px-3 py-2 rounded-md text-pink-100 hover:bg-pink-600">Analytics</a>
                    <a href="#" class="block px-3 py-2 rounded-md text-pink-100 hover:bg-pink-600">Reports</a>
                    <a href="#" class="block px-3 py-2 rounded-md text-pink-100 hover:bg-pink-600">Settings</a>
                </div>
            </nav>
        `;
    }
}

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