class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    background-color: #050505;
                    border-bottom: 1px solid #1f2937;
                    height: 64px;
                }
                .container {
                    max-width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 1.5rem;
                }
                .brand {
                    font-family: 'Courier New', monospace;
                    font-weight: bold;
                    font-size: 1.25rem;
                    color: #fff;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    text-decoration: none;
                    letter-spacing: 2px;
                }
                .brand span {
                    color: #22c55e;
                }
                .actions {
                    display: flex;
                    align-items: center;
                    gap: 1.5rem;
                }
                .icon-btn {
                    background: none;
                    border: none;
                    cursor: pointer;
                    color: #9ca3af;
                    transition: color 0.2s;
                    display: flex;
                    align-items: center;
                }
                .icon-btn:hover {
                    color: #fff;
                }
                .user-profile {
                    display: flex;
                    align-items: center;
                    gap: 0.75rem;
                    border-left: 1px solid #1f2937;
                    padding-left: 1.5rem;
                }
                .avatar {
                    width: 32px;
                    height: 32px;
                    border-radius: 50%;
                    border: 1px solid #374151;
                    object-fit: cover;
                }
                .user-info {
                    display: flex;
                    flex-direction: column;
                }
                .user-name {
                    font-size: 0.875rem;
                    font-weight: 500;
                    color: #fff;
                }
                .user-role {
                    font-size: 0.75rem;
                    color: #6b7280;
                }
            </style>
            <div class="container">
                <a href="#" class="brand">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg>
                    CLAWDBOT<span>C2</span>
                </a>
                <div class="actions">
                    <button class="icon-btn">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
                    </button>
                    <div class="user-profile">
                        <div class="user-info">
                            <span class="user-name">Cmdr. Shepard</span>
                            <span class="user-role">Level 4 Access</span>
                        </div>
                        <img src="http://static.photos/people/64x64/42" alt="User" class="avatar">
                    </div>
                </div>
            </div>
        `;
    }
}
customElements.define('custom-navbar', CustomNavbar);