class CustomSidebar extends HTMLElement {
    connectedCallback() {
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                .sidebar-item {
                    transition: all 0.2s ease;
                    border-left: 3px solid transparent;
                }
                
                .sidebar-item:hover {
                    background-color: rgba(55, 65, 81, 0.5);
                    border-left-color: #7c3aed;
                }
                
                .sidebar-item.active {
                    background-color: rgba(55, 65, 81, 0.7);
                    border-left-color: #7c3aed;
                }
                
                .game-card {
                    background: linear-gradient(135deg, rgba(31, 41, 55, 0.7) 0%, rgba(55, 65, 81, 0.5) 100%);
                    transition: all 0.3s ease;
                }
                
                .game-card:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
                }
            </style>
            <div class="bg-gray-800 rounded-lg p-4 sticky top-6">
                <div class="mb-6">
                    <h2 class="text-xl font-bold mb-4 text-purple-300 flex items-center">
                        <i data-feather="compass" class="w-5 h-5 mr-2"></i>
                        Quick Links
                    </h2>
                    <div class="space-y-1">
                        <a href="#" class="sidebar-item active flex items-center space-x-2 px-3 py-2 rounded">
                            <i data-feather="globe" class="w-4 h-4"></i>
                            <span>Browse</span>
                        </a>
                        <a href="#" class="sidebar-item flex items-center space-x-2 px-3 py-2 rounded">
                            <i data-feather="bookmark" class="w-4 h-4"></i>
                            <span>Bookmarks</span>
                        </a>
                        <a href="#" class="sidebar-item flex items-center space-x-2 px-3 py-2 rounded">
                            <i data-feather="clock" class="w-4 h-4"></i>
                            <span>History</span>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h2 class="text-xl font-bold mb-4 text-purple-300 flex items-center">
                        <i data-feather="gamepad" class="w-5 h-5 mr-2"></i>
                        Cosmic Games
                    </h2>
                    <div class="grid grid-cols-1 gap-3">
                        <a href="https://poki.com" target="_blank" class="game-card p-3 rounded-lg flex items-center space-x-3">
                            <div class="bg-purple-600 p-2 rounded-lg">
                                <i data-feather="play" class="w-4 h-4"></i>
                            </div>
                            <div>
                                <h3 class="font-medium">Poki Games</h3>
                                <p class="text-xs text-gray-400">1000+ HTML5 games</p>
                            </div>
                        </a>
                        <a href="https://html5games.com" target="_blank" class="game-card p-3 rounded-lg flex items-center space-x-3">
                            <div class="bg-blue-600 p-2 rounded-lg">
                                <i data-feather="box" class="w-4 h-4"></i>
                            </div>
                            <div>
                                <h3 class="font-medium">HTML5 Games</h3>
                                <p class="text-xs text-gray-400">Collection of web games</p>
                            </div>
                        </a>
                        <a href="https://itch.io/html5" target="_blank" class="game-card p-3 rounded-lg flex items-center space-x-3">
                            <div class="bg-green-600 p-2 rounded-lg">
                                <i data-feather="codesandbox" class="w-4 h-4"></i>
                            </div>
                            <div>
                                <h3 class="font-medium">itch.io HTML5</h3>
                                <p class="text-xs text-gray-400">Indie HTML5 games</p>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
        `;
        feather.replace();
    }
}

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