class CustomBottomNav extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .bottom-nav {
                    backdrop-filter: blur(10px);
                    -webkit-backdrop-filter: blur(10px);
                }
                .nav-item.active {
                    color: var(--tw-primary-500);
                }
            </style>
            <nav class="bottom-nav bg-white/80 dark:bg-gray-800/80 border-t border-gray-200 dark:border-gray-700 fixed bottom-0 left-0 right-0 z-50">
                <div class="container mx-auto px-4">
                    <div class="flex justify-around py-3">
                        <a href="#" class="nav-item active flex flex-col items-center text-primary-500">
                            <i data-feather="home" class="w-5 h-5 mb-1"></i>
                            <span class="text-xs">Home</span>
                        </a>
                        <a href="#" class="nav-item flex flex-col items-center text-gray-500 dark:text-gray-400 hover:text-primary-500 dark:hover:text-primary-400">
                            <i data-feather="pie-chart" class="w-5 h-5 mb-1"></i>
                            <span class="text-xs">Markets</span>
                        </a>
                        <a href="#" class="nav-item flex flex-col items-center text-gray-500 dark:text-gray-400 hover:text-primary-500 dark:hover:text-primary-400">
                            <i data-feather="credit-card" class="w-5 h-5 mb-1"></i>
                            <span class="text-xs">Cards</span>
                        </a>
                        <a href="#" class="nav-item flex flex-col items-center text-gray-500 dark:text-gray-400 hover:text-primary-500 dark:hover:text-primary-400">
                            <i data-feather="settings" class="w-5 h-5 mb-1"></i>
                            <span class="text-xs">Settings</span>
                        </a>
                    </div>
                </div>
            </nav>
        `;
    }
}

customElements.define('custom-bottom-nav', CustomBottomNav);