class SidebarRight extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host { display: block; }
                .title { font-size: 16px; color: #65676b; font-weight: 600; margin-bottom: 8px; }
                .contact-item {
                    display: flex;
                    align-items: center;
                    gap: 12px;
                    padding: 8px;
                    border-radius: 8px;
                    cursor: pointer;
                    transition: background 0.2s;
                }
                .contact-item:hover { background-color: #e4e6eb; }
                .avatar-wrapper { position: relative; }
                .status-dot {
                    width: 10px; height: 10px; background-color: #31a24c;
                    border-radius: 50%; border: 2px solid white;
                    position: absolute; bottom: 0; right: 0;
                }
                .name { font-weight: 500; font-size: 14px; }
                .ad-box {
                    background-color: white;
                    padding: 10px;
                    border-radius: 8px;
                    margin-bottom: 20px;
                }
            </style>
            
            <div class="title">Sponsored</div>
            <div class="ad-box">
                <div class="contact-item">
                    <img src="http://static.photos/technology/100x100/1" style="border-radius: 8px; width: 100px; height: 60px; object-fit: cover;">
                    <div>
                        <div class="name">Learn Coding</div>
                        <div style="font-size: 12px; color: #65676b;">codecademy.com</div>
                    </div>
                </div>
            </div>

            <div class="title" style="border-bottom: 1px solid #ced0d4; padding-bottom: 8px;">Contacts</div>
            
            <div class="contact-item">
                <div class="avatar-wrapper">
                    <img src="http://static.photos/people/40x40/1" style="width: 36px; height: 36px; border-radius: 50%;">
                    <div class="status-dot"></div>
                </div>
                <span class="name">Alice Freeman</span>
            </div>
            
            <div class="contact-item">
                <div class="avatar-wrapper">
                    <img src="http://static.photos/people/40x40/2" style="width: 36px; height: 36px; border-radius: 50%;">
                    <div class="status-dot"></div>
                </div>
                <span class="name">Bob Martin</span>
            </div>
            
            <div class="contact-item">
                <div class="avatar-wrapper">
                    <img src="http://static.photos/people/40x40/3" style="width: 36px; height: 36px; border-radius: 50%;">
                    <div class="status-dot"></div>
                </div>
                <span class="name">Charlie Kim</span>
            </div>
            
            <div class="contact-item">
                <div class="avatar-wrapper">
                    <img src="http://static.photos/people/40x40/4" style="width: 36px; height: 36px; border-radius: 50%;">
                    <div class="status-dot"></div>
                </div>
                <span class="name">Diana Prince</span>
            </div>

            <div class="contact-item">
                <div class="avatar-wrapper">
                    <img src="http://static.photos/people/40x40/5" style="width: 36px; height: 36px; border-radius: 50%;">
                    <div class="status-dot"></div>
                </div>
                <span class="name">Evan Wright</span>
            </div>
        `;
    }
}
customElements.define('app-sidebar-right', SidebarRight);