{{-- PROJECTOS DROPDOWN — Grid de 4 botões com dropdowns de projetos realizados --}}
<div id="projetos-bar-container" class="w-full hidden lg:block bg-gradient-to-r from-[#06458F]/8 via-[#06458F]/4 to-transparent border-b border-[#06458F]/10">
    <div class="max-w-[1440px] mx-auto px-6 md:px-12 py-3 flex items-center justify-end gap-3">
        <span class="text-[9px] font-bold uppercase tracking-[0.2em] text-[#06458F]/50 mr-auto whitespace-nowrap">{{ __('app.projetos.title') }}</span>

        {{-- Botão 1: 2018-2019 — Laúca --}}
        <div class="relative">
            <button onclick="toggleProjetoPanel('projeto-panel-1')"
                class="flex items-center gap-2 px-4 py-2 rounded-lg bg-[#06458F] border border-[#06458F]/20 text-white text-[11px] font-bold uppercase tracking-wider hover:bg-[#06458F] hover:border-white/40 transition-all duration-200 min-w-[130px] shadow-lg">
                <span class="w-1.5 h-1.5 rounded-full bg-[#8BCB4A] flex-shrink-0"></span>
                {{ __('app.projetos.ano1_titulo') }}
                <svg id="projeto-arrow-1" class="w-3 h-3 ml-auto transition-transform duration-200 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>
            <div id="projeto-panel-1" class="absolute right-0 mt-2 w-[420px] bg-white rounded-xl border border-slate-200 shadow-2xl hidden z-50" inert>
                <div class="p-4 text-slate-800 text-xs leading-relaxed">
                    <p class="font-semibold text-[#06458F] mb-1 uppercase tracking-wider text-[10px]">{{ __('app.projetos.ano1_titulo') }}</p>
                    <p class="font-light">{{ __('app.projetos.ano1_desc') }}</p>
                </div>
            </div>
        </div>

        {{-- Botão 2: 2019-2020 — Macro Drenagem INEA 2ª Fase --}}
        <div class="relative">
            <button onclick="toggleProjetoPanel('projeto-panel-2')"
                class="flex items-center gap-2 px-4 py-2 rounded-lg bg-[#06458F] border border-[#06458F]/20 text-white text-[11px] font-bold uppercase tracking-wider hover:bg-[#06458F] hover:border-white/40 transition-all duration-200 min-w-[130px] shadow-lg">
                <span class="w-1.5 h-1.5 rounded-full bg-[#8BCB4A] flex-shrink-0"></span>
                {{ __('app.projetos.ano2_titulo') }}
                <svg id="projeto-arrow-2" class="w-3 h-3 ml-auto transition-transform duration-200 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>
            <div id="projeto-panel-2" class="absolute right-0 mt-2 w-[420px] bg-white rounded-xl border border-slate-200 shadow-2xl hidden z-50" inert>
                <div class="p-4 text-slate-800 text-xs leading-relaxed">
                    <p class="font-semibold text-[#06458F] mb-1 uppercase tracking-wider text-[10px]">{{ __('app.projetos.ano2_titulo') }}</p>
                    <p class="font-light">{{ __('app.projetos.ano2_desc') }}</p>
                </div>
            </div>
        </div>

        {{-- Botão 3: 2020-2021 — Condomínio CSS-FAA + Condomínio COTO --}}
        <div class="relative">
            <button onclick="toggleProjetoPanel('projeto-panel-3')"
                class="flex items-center gap-2 px-4 py-2 rounded-lg bg-[#06458F] border border-[#06458F]/20 text-white text-[11px] font-bold uppercase tracking-wider hover:bg-[#06458F] hover:border-white/40 transition-all duration-200 min-w-[130px] shadow-lg">
                <span class="w-1.5 h-1.5 rounded-full bg-[#8BCB4A] flex-shrink-0"></span>
                {{ __('app.projetos.ano3_titulo') }}
                <svg id="projeto-arrow-3" class="w-3 h-3 ml-auto transition-transform duration-200 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>
            <div id="projeto-panel-3" class="absolute right-0 mt-2 w-[420px] bg-white rounded-xl border border-slate-200 shadow-2xl hidden z-50" inert>
                <div class="p-4 text-slate-800 text-xs leading-relaxed">
                    <p class="font-semibold text-[#06458F] mb-1 uppercase tracking-wider text-[10px]">{{ __('app.projetos.ano3_titulo') }}</p>
                    <p class="font-light">{{ __('app.projetos.ano3_desc') }}</p>
                </div>
            </div>
        </div>

        {{-- Botão 4: 2021-2022 — Condomínio Hortênsio 2 + Renascer --}}
        <div class="relative">
            <button onclick="toggleProjetoPanel('projeto-panel-4')"
                class="flex items-center gap-2 px-4 py-2 rounded-lg bg-[#06458F] border border-[#06458F]/20 text-white text-[11px] font-bold uppercase tracking-wider hover:bg-[#06458F] hover:border-white/40 transition-all duration-200 min-w-[130px] shadow-lg">
                <span class="w-1.5 h-1.5 rounded-full bg-[#8BCB4A] flex-shrink-0"></span>
                {{ __('app.projetos.ano4_titulo') }}
                <svg id="projeto-arrow-4" class="w-3 h-3 ml-auto transition-transform duration-200 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/>
                </svg>
            </button>
            <div id="projeto-panel-4" class="absolute right-0 mt-2 w-[420px] bg-white rounded-xl border border-slate-200 shadow-2xl hidden z-50" inert>
                <div class="p-4 text-slate-800 text-xs leading-relaxed">
                    <p class="font-semibold text-[#06458F] mb-1 uppercase tracking-wider text-[10px]">{{ __('app.projetos.ano4_titulo') }}</p>
                    <p class="font-light">{{ __('app.projetos.ano4_desc') }}</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function toggleProjetoPanel(panelId) {
    var panel = document.getElementById(panelId);
    if (!panel) return;

    var isOpen = !panel.classList.contains('hidden');

    // Fechar todos os painéis primeiro
    var allPanels = document.querySelectorAll('[id^="projeto-panel-"]');
    allPanels.forEach(function(p) {
        p.classList.add('hidden');
        p.setAttribute('inert', '');
    });

    // Rotacionar todas as setas para baixo
    for (var i = 1; i <= 4; i++) {
        var arrow = document.getElementById('projeto-arrow-' + i);
        if (arrow) arrow.style.transform = 'rotate(0deg)';
    }

    // Se não estava aberto, abrir este
    if (!isOpen) {
        panel.classList.remove('hidden');
        panel.removeAttribute('inert');
        var arrowId = panelId.replace('projeto-panel-', 'projeto-arrow-');
        var arrow = document.getElementById(arrowId);
        if (arrow) arrow.style.transform = 'rotate(180deg)';
    }
}

// Fechar ao clicar fora
document.addEventListener('click', function(e) {
    var container = document.getElementById('projetos-bar-container');
    if (!container) return;
    if (!container.contains(e.target)) {
        var allPanels = document.querySelectorAll('[id^="projeto-panel-"]');
        allPanels.forEach(function(p) {
            p.classList.add('hidden');
            p.setAttribute('inert', '');
        });
        for (var i = 1; i <= 4; i++) {
            var arrow = document.getElementById('projeto-arrow-' + i);
            if (arrow) arrow.style.transform = 'rotate(0deg)';
        }
    }
});
</script>