class CustomNavbar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    position: fixed;
                    top: 50%;
                    right: 2rem;
                    transform: translateY(-50%);
                    z-index: 1000;
                }
                
                .nav-container {
                    display: flex;
                    flex-direction: column;
                    align-items: flex-end;
                    gap: 2rem;
                }
                
                .nav-item {
                    display: flex;
                    align-items: center;
                    position: relative;
                    cursor: pointer;
                }
                
                .nav-circle {
                    width: 16px;
                    height: 16px;
                    border: 1px solid #f4f4f5;
                    border-radius: 50%;
                    transition: all 0.3s ease;
                }
                
                .nav-item:hover .nav-circle {
                    background-color: #f4f4f5;
                    transform: scale(1.2);
                }
                
                .nav-line {
                    position: absolute;
                    right: 8px;
                    width: 1px;
                    height: 2rem;
                    background-color: #f4f4f5;
                    bottom: -2rem;
                }
                
                .nav-text {
                    position: absolute;
                    right: 24px;
                    white-space: nowrap;
                    overflow: hidden;
                    color: #f4f4f5;
                    font-weight: 300;
                    opacity: 0;
                    transform: translateX(20px);
                    transition: all 0.3s ease;
                }
                
                .nav-item:hover .nav-text {
                    opacity: 1;
                    transform: translateX(0);
                }
                
                .nav-item:last-child .nav-line {
                    display: none;
                }
            </style>
            
            <div class="nav-container">
                <div class="nav-item">
                    <div class="nav-circle"></div>
                    <div class="nav-line"></div>
                    <span class="nav-text">About</span>
                </div>
                <div class="nav-item">
                    <div class="nav-circle"></div>
                    <div class="nav-line"></div>
                    <span class="nav-text">Work</span>
                </div>
                <div class="nav-item">
                    <div class="nav-circle"></div>
                    <div class="nav-line"></div>
                    <span class="nav-text">Reviews</span>
                </div>
                <div class="nav-item">
                    <div class="nav-circle"></div>
                    <div class="nav-line"></div>
                    <span class="nav-text">Contact</span>
                </div>
                <div class="nav-item">
                    <div class="nav-circle"></div>
                    <div class="nav-line"></div>
                    <span class="nav-text">Discourse</span>
                </div>
</div>
        `;

        // Add GSAP animations for text reveal
        const navItems = this.shadowRoot.querySelectorAll('.nav-item');
        navItems.forEach((item, index) => {
            const text = item.querySelector('.nav-text');
            
            item.addEventListener('mouseenter', () => {
                gsap.to(text, {
                    opacity: 1,
                    x: 0,
                    duration: 0.3,
                    ease: 'power2.out'
                });
                
                // Animate each character
                const chars = text.textContent.split('');
                text.textContent = '';
                chars.forEach((char, i) => {
                    const span = document.createElement('span');
                    span.textContent = char;
                    span.style.display = 'inline-block';
                    span.style.opacity = '0';
                    span.style.transform = 'translateX(10px)';
                    text.appendChild(span);
                    
                    gsap.to(span, {
                        opacity: 1,
                        x: 0,
                        duration: 0.1,
                        delay: i * 0.03,
                        ease: 'power2.out'
                    });
                });
            });
            
            item.addEventListener('mouseleave', () => {
                const spans = text.querySelectorAll('span');
                gsap.to(spans, {
                    opacity: 0,
                    x: 10,
                    duration: 0.2,
                    ease: 'power2.in',
                    onComplete: () => {
                        text.textContent = text.querySelector('span') ? text.textContent : text.textContent;
                    }
                });
                
                gsap.to(text, {
                    opacity: 0,
                    x: 20,
                    duration: 0.3,
                    delay: 0.1,
                    ease: 'power2.in'
                });
            });
            
            // Add click handler to scroll to section
            item.addEventListener('click', () => {
                const sections = ['about', 'work', 'reviews', 'contact', 'discourse.html'];
if (index < sections.length) {
                    document.getElementById(sections[index]).scrollIntoView({
                        behavior: 'smooth'
                    });
                }
            });
        });
    }
}

customElements.define('custom-navbar', CustomNavbar);