components/header.js

class HeaderComponent extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    background: linear-gradient(135deg, rgb(17 24 39), rgb(31 41 55));
                    border-bottom: 1px solid rgb(55 65 81);
                    padding: 1rem 0;
                    position: sticky;
                    top: 0;
                    z-index: 100;
                    backdrop-filter: blur(10px);
                }
                
                .container {
                    max-width: 1280px;
                    margin: 0 auto;
                    padding: 0 1rem;
                }
                
                nav {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
                
                .nav-brand {
                    display: flex;
                    align-items: center;
                    text-decoration: none;
                    color: white;
                    font-size: 1.25rem;
                    font-weight: bold;
                }
                
                .nav-brand svg {
                    margin-right: 0.5rem;
                    color: rgb(249 115 22);
                }
                
                .nav-links {
                    display: flex;
                    align-items: center;
                    gap: 2rem;
                }
                
                .nav-link {
                    color: rgb(209 213 219);
                    text-decoration: none;
                    font-size: 0.875rem;
                    font-weight: 500;
                    transition: color 0.2s ease;
                    position: relative;
                }
                
                .nav-link:hover {
                    color: rgb(249 115 22);
                }
                
                .nav-link.active {
                    color: rgb(249 115 22);
                }
                
                .nav-link.active::after {
                    content: '';
                    position: absolute;
                    bottom: -1.5rem;
                    left: 0;
                    right: 0;
                    height: 2px;
                    background: rgb(249 115 22);
                }
                
                .nav-actions {
                    display: flex;
                    align-items: center;
                    gap: 1rem;
                }
                
                .btn-icon {
                    background: none;
                    border: none;
                    color: rgb(156 163 175);
                    padding: 0.5rem;
                    border-radius: 0.5rem;
                    cursor: pointer;
                    transition: all 0.2s ease;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                
                .btn-icon:hover {
                    background: rgb(55 65 81);
                    color: rgb(249 115 22);
                }
                
                .btn-primary {
                    background: linear-gradient(135deg, rgb(249 115 22), rgb(234 88 12));
                    color: white;
                    padding: 0.5rem 1rem;
                    border-radius: 0.5rem;
                    font-weight: 500;
                    text-decoration: none;
                    display: flex;
                    align-items: center;
                    transition: all 0.2s ease;
                }
                
                .btn-primary:hover {
                    background: linear-gradient(135deg, rgb(234 88 12), rgb(194 65 12));
                    transform: translateY(-1px);
                    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
                }
                
                .user-menu {
                    position: relative;
                }
                
                .user-avatar {
                    width: 2rem;
                    height: 2rem;
                    border-radius: 50%;
                    background: linear-gradient(135deg, rgb(249 115 22), rgb(59 130 246));
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: white;
                    font-weight: bold;
                    cursor: pointer;
                }
                
                .notification-badge {
                    position: absolute;
                    top: -0.25rem;
                    right: -0.25rem;
                    width: 0.75rem;
                    height: 0.75rem;
                    background: rgb(239 68 68);
                    border-radius: 50%;
                    border: 2px solid rgb(17 24 39);
                }
                
                .mobile-menu-toggle {
                    display: none;
                    background: none;
                    border: none;
                    color: white;
                    padding: 0.5rem;
                    cursor: pointer;
                }
                
                @media (max-width: 768px) {
                    .nav-links {
                        display: none;
                    }
                    
                    .nav-actions {
                        gap: 0.5rem;
                    }
                    
                    .mobile-menu-toggle {
                        display: block;
                    }
                }
            </style>
            
            <header>
                <div class="container">
                    <nav>
                        <a href="#" class="nav-brand">
                            <i data-feather="search"></i>
                            Skip Trace Pro
                        </a>
                        
                        <div class="nav-links">
                            <a href="#" class="nav-link active">Dashboard</a>
                            <a href="#" class="nav-link">Cases</a>
                            <a href="#" class="nav-link">Analytics</a>
                            <a href="#" class="nav-link">Reports</a>
                            <a href="#" class="nav-link">Settings</a>
                        </div>
                        
                        <div class="nav-actions">
                            <button class="btn-icon" onclick="toggleNotifications()">
                                <i data-feather="bell"></i>
                                <span class="notification-badge"></span>
                            </button>
                            
                            <button class="btn-icon" onclick="toggleTheme()">
                                <i data-feather="moon"></i>
                            </button>
                            
                            <a href="#" class="btn-primary">
                                <i data-feather="plus" style="width: 16px; height: 16px; margin-right: 0.5rem;"></i>
                                New Search
                            </a>
                            
                            <div class="user-menu">
                                <div class="user-avatar">JD</div>
                            </div>
                            
                            <button class="mobile-menu-toggle" onclick="toggleMobileMenu()">
                                <i data-feather="menu"></i>
                            </button>
                        </div>
                    </nav>
                </div>
            </header>
        `;
        
        // Add event listeners
        this.shadowRoot.querySelectorAll('.nav-link').forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();
                this.setActiveLink(e.target);
            });
        });
    }
    
    setActiveLink(activeLink) {
        this.shadowRoot.querySelectorAll('.nav-link').forEach(link => {
            link.classList.remove('active');
        });
        activeLink.classList.add('active');
    }
}

customElements.define('header-component', HeaderComponent);

// Global functions for the header
function toggleNotifications() {
    // Toggle notifications dropdown
    console.log('Toggle notifications');
    showNotification('You have 3 new notifications', 'info');
}

function toggleTheme() {
    // Toggle between light and dark mode
    const html = document.documentElement;
    const isDark = html.classList.contains('dark');
    
    if (isDark) {
        html.classList.remove('dark');
        localStorage.setItem('theme', 'light');
    } else {
        html.classList.add('dark');
        localStorage.setItem('theme', 'dark');
    }
    
    showNotification(`Switched to ${isDark ? 'light' : 'dark'} mode`, 'info');
}

function toggleMobileMenu() {
    // Toggle mobile menu
    console.log('Toggle mobile menu');
}