components/sidebar.js

class AppSidebar extends HTMLElement {
    constructor() {
        super();
    }

    connectedCallback() {
        this.innerHTML = `
            <aside class="w-64 bg-slate-900 border-r border-slate-800 h-full overflow-y-auto">
                <div class="p-4 space-y-6">
                    
                    <!-- Pipeline Steps -->
                    <div>
                        <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3 px-2">Etapas do Pipeline</h3>
                        <nav class="space-y-1">
                            <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg bg-primary-500/10 text-primary-400 border border-primary-500/20">
                                <i data-feather="upload-cloud" class="w-4 h-4"></i>
                                Upload
                                <span class="ml-auto w-2 h-2 rounded-full bg-primary-500"></span>
                            </a>
                            <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg text-slate-400 hover:bg-slate-800 hover:text-slate-200 transition-colors">
                                <i data-feather="scissors" class="w-4 h-4"></i>
                                Remoção de Silêncio
                            </a>
                            <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg text-slate-400 hover:bg-slate-800 hover:text-slate-200 transition-colors">
                                <i data-feather="mic" class="w-4 h-4"></i>
                                Transcrição
                            </a>
                            <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg text-slate-400 hover:bg-slate-800 hover:text-slate-200 transition-colors">
                                <i data-feather="align-left" class="w-4 h-4"></i>
                                Divisão de Texto
                            </a>
                            <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg text-slate-400 hover:bg-slate-800 hover:text-slate-200 transition-colors">
                                <i data-feather="anchor" class="w-4 h-4"></i>
                                Alinhamento
                            </a>
                            <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg text-slate-400 hover:bg-slate-800 hover:text-slate-200 transition-colors">
                                <i data-feather="type" class="w-4 h-4"></i>
                                Exportar SRT
                            </a>
                        </nav>
                    </div>

                    <!-- Quick Stats -->
                    <div>
                        <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3 px-2">Estatísticas Rápidas</h3>
                        <div class="space-y-3 px-2">
                            <div class="flex justify-between items-center text-sm">
                                <span class="text-slate-400">Threshold</span>
                                <span class="text-slate-200 font-mono">-70dB</span>
                            </div>
                            <div class="flex justify-between items-center text-sm">
                                <span class="text-slate-400">Modelo</span>
                                <span class="text-secondary-400 font-mono text-xs">small</span>
                            </div>
                            <div class="flex justify-between items-center text-sm">
                                <span class="text-slate-400">Max Block</span>
                                <span class="text-slate-200 font-mono">14</span>
                            </div>
                        </div>
                    </div>

                    <!-- Help Card -->
                    <div class="p-3 rounded-xl bg-gradient-to-br from-slate-800 to-slate-900 border border-slate-700">
                        <div class="flex items-start gap-3">
                            <div class="w-8 h-8 rounded-lg bg-secondary-500/20 flex items-center justify-center flex-shrink-0">
                                <i data-feather="help-circle" class="w-4 h-4 text-secondary-400"></i>
                            </div>
                            <div>
                                <h4 class="text-sm font-medium text-slate-200 mb-1">Dica CapCut</h4>
                                <p class="text-xs text-slate-400 leading-relaxed">
                                    Use Advance de 70ms e Preroll de 40ms para sincronização perfeita com vídeos verticais.
                                </p>
                            </div>
                        </div>
                    </div>

                </div>
            </aside>
        `;
    }
}

customElements.define('app-sidebar', AppSidebar);