class CustomSidebar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    height: 100%;
                }
                
                .sidebar {
                    height: 100%;
                    padding: 1rem 0;
                    background: rgba(10, 12, 16, 0.95);
                }
                
                .nav-section {
                    margin-bottom: 2rem;
                }
                
                .section-title {
                    font-family: 'Chakra Petch', monospace;
                    font-size: 0.75rem;
                    text-transform: uppercase;
                    color: #4a5568;
                    padding: 0.5rem 1rem;
                    letter-spacing: 0.1em;
                }
                
                .nav-item {
                    display: flex;
                    align-items: center;
                    gap: 0.75rem;
                    padding: 0.75rem 1rem;
                    color: #4a5568;
                    text-decoration: none;
                    font-size: 0.875rem;
                    transition: all 0.3s ease;
                    border-left: 2px solid transparent;
                }
                
                .nav-item:hover {
                    color: #ff9f1c;
                    background: rgba(255, 159, 28, 0.05);
                    border-left-color: #ff9f1c;
                }
                
                .nav-item.active {
                    color: #ff9f1c;
                    background: rgba(255, 159, 28, 0.1);
                    border-left-color: #ff9f1c;
                }
                
                .nav-item i {
                    width: 16px;
                    height: 16px;
                }
                
                .status-indicator {
                    width: 6px;
                    height: 6px;
                    border-radius: 50%;
                    margin-left: auto;
                }
                
                .status-online {
                    background: #ff9f1c;
                    box-shadow: 0 0 4px #ff9f1c;
                }
                
                .status-offline {
                    background: #4a5568;
                }
                
                @media (max-width: 768px) {
                    .sidebar {
                        padding: 0.5rem;
                    }
                    
                    .nav-item {
                        padding: 1rem;
                        font-size: 1rem;
                    }
                }
            </style>
            <div class="sidebar">
                <div class="nav-section">
                    <div class="section-title">NAVIGATION</div>
                    <a href="/" class="nav-item">
                        <i data-feather="home"></i>
                        DASHBOARD
                    </a>
                    <a href="/login.html" class="nav-item">
                        <i data-feather="shield"></i>
                        ACCESS TERMINAL
                    </a>
                    <a href="/table.html" class="nav-item">
                        <i data-feather="file-text"></i>
                        SYSTEM LOGS
                    </a>
                    <a href="/pack" class="nav-item">
                        <i data-feather="users"></i>
                        THE PACK
                    </a>
                </div>
                
                <div class="nav-section">
                    <div class="section-title">SYSTEMS</div>
                    <a href="/armory" class="nav-item">
                        <i data-feather="tool"></i>
                        ARMORY
                    </a>
                    <a href="/map" class="nav-item">
                        <i data-feather="map"></i>
                        TOPOGRAPHIC MAP
                    </a>
                </div>
<div class="nav-section">
                    <div class="section-title">ENVIRONMENT</div>
                    <a href="#" class="nav-item">
                        <i data-feather="sun"></i>
                        SEASONAL MODE
                        <div class="status-indicator status-online"></div>
                    </a>
                </div>
            </div>
        `;
        
        // Initialize feather icons in shadow DOM
        setTimeout(() => {
            const icons = this.shadowRoot.querySelectorAll('[data-feather]');
            icons.forEach(icon => {
                feather.replace(icon);
            });
        }, 100);
    }
}

customElements.define('custom-sidebar', CustomSidebar);