components/mobile-nav.js

class MobileNav extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap');
                
                :host {
                    display: block;
                    font-family: 'Cairo', sans-serif;
                }
                
                nav {
                    background: white;
                    border-top: 1px solid #e5e7eb;
                    padding: 0.5rem 0;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    position: sticky;
                    bottom: 0;
                    z-index: 40;
                }
                
                .nav-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: 0.25rem;
                    padding: 0.5rem 1rem;
                    background: none;
                    border: none;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    border-radius: 12px;
                    min-width: 60px;
                }
                
                .nav-item:hover {
                    background: #f3e5f5;
                }
                
                .nav-item.active {
                    color: #9C27B0;
                }
                
                .nav-item.active svg {
                    color: #9C27B0;
                }
                
                .nav-icon {
                    width: 24px;
                    height: 24px;
                    color: #6b7280;
                    transition: color 0.2s ease;
                }
                
                .nav-item.active .nav-icon {
                    color: #9C27B0;
                }
                
                .nav-label {
                    font-size: 0.75rem;
                    font-weight: 500;
                    color: #6b7280;
                    transition: color 0.2s ease;
                }
                
                .nav-item.active .nav-label {
                    color: #9C27B0;
                }
                
                .nav-item:hover .nav-icon,
                .nav-item:hover .nav-label {
                    color: #9C27B0;
                }
            </style>
            
            <nav>
                <button class="nav-item active" data-page="home">
                    <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                        <polyline points="9 22 9 12 15 12 15 22"></polyline>
                    </svg>
                    <span class="nav-label">الرئيسية</span>
                </button>
                
                <button class="nav-item" data-page="transactions">
                    <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="12" y1="1" x2="12" y2="23"></line>
                        <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
                    </svg>
                    <span class="nav-label">المعاملات</span>
                </button>
                
                <button class="nav-item" data-page="services">
                    <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="3" width="7" height="7"></rect>
                        <rect x="14" y="3" width="7" height="7"></rect>
                        <rect x="14" y="14" width="7" height="7"></rect>
                        <rect x="3" y="14" width="7" height="7"></rect>
                    </svg>
                    <span class="nav-label">الخدمات</span>
                </button>
                
                <button class="nav-item" data-page="profile">
                    <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                        <circle cx="12" cy="7" r="4"></circle>
                    </svg>
                    <span class="nav-label">الحساب</span>
                </button>
            </nav>
        `;
        
        // Add click handlers for navigation
        const navItems = this.shadowRoot.querySelectorAll('.nav-item');
        navItems.forEach(item => {
            item.addEventListener('click', () => {
                // Remove active class from all items
                navItems.forEach(navItem => navItem.classList.remove('active'));
                // Add active class to clicked item
                item.classList.add('active');
                
                // Navigate to page (placeholder for actual navigation logic)
                const page = item.dataset.page;
                console.log(`Navigating to ${page}`);
            });
        });
    }
}

customElements.define('mobile-nav', MobileNav);