@extends('layouts.app')

@section('title', __('sobre.hero_title'))

@section('styles')
<style>
    /* Linha azul animada sob os itens de navegação (active/hover) */
    nav.hidden.lg\:flex a.nav-link {
        position: relative;
        padding-bottom: 6px;
    }
    nav.hidden.lg\:flex a.nav-link::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #06458F;
        transition: width 0.3s ease;
    }
    nav.hidden.lg\:flex a.nav-link:hover::after {
        width: 100%;
    }
    /* Forçar a linha ativa no link "Sobre Nós" na página sobre */
    nav.hidden.lg\:flex a[href*="sobre"]::after {
        width: 100% !important;
    }

    /* Otimização do Grid e Margens do Footer */
    footer .grid {
        column-gap: 2.5rem !important;
    }
    @media (min-width: 1024px) {
        footer .grid {
            column-gap: 3.5rem !important;
        }
    }
    footer img[alt="AMD-TOPOGRAFIA, LDA."] {
        height: 3.8rem !important;
    }
    footer p.text-slate-400 {
        font-size: 0.875rem !important;
        line-height: 1.625 !important;
    }
</style>
@endsection

@section('content')

{{-- ============================================================ --}}
{{-- HERO DINÂMICO — FULL-COVER (via BD)                       --}}
{{-- ============================================================ --}}
@include('partials.hero-sobre')

{{-- ============================================================ --}}
{{-- SECÇÃO: QUEM SOMOS (left/right)                           --}}
{{-- ============================================================ --}}
<section id="quem-somos" class="relative bg-[#06458F] py-20 sm:py-28 overflow-hidden">
    <div class="absolute inset-0 pointer-events-none">
        <div class="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-white/10 to-transparent"></div>
    </div>

    <div class="relative z-10 max-w-[1200px] mx-auto px-6 md:px-12">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-20 items-center">

            {{-- COLUNA ESQUERDA — Texto --}}
            <div class="space-y-6">
                <span class="inline-block text-[10px] font-bold uppercase tracking-[0.25em] text-white/60">SOBRE NÓS</span>
                <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white leading-tight">
                    {{ __('sobre.accordion.who_we_are') }}
                </h2>
                <div class="w-16 h-1 bg-white/20 rounded-full"></div>
                <div class="text-white/80 text-sm sm:text-[15px] font-light leading-relaxed space-y-5">
                    <p>{!! __('sobre.accordion.who_we_are_p1') !!}</p>
                    <p>{!! __('sobre.accordion.who_we_are_p2') !!}</p>
                </div>
            </div>

            {{-- COLUNA DIREITA — Stats & visual --}}
            <div class="space-y-8">
                <div class="relative">
                    <div class="absolute -top-4 -right-4 w-24 h-24 bg-white/5 rounded-full blur-2xl pointer-events-none"></div>
                    <div class="grid grid-cols-2 gap-4">
                        <div class="bg-white/10 border border-white/10 rounded-2xl p-6 text-center">
                            <span class="block text-3xl sm:text-4xl font-bold text-white">5+</span>
                            <span class="block text-[10px] font-bold uppercase tracking-widest text-white/60 mt-1">{{ __('sobre.stats.experience') }}</span>
                        </div>
                        <div class="bg-white/10 border border-white/10 rounded-2xl p-6 text-center">
                            <span class="block text-3xl sm:text-4xl font-bold text-white">80+</span>
                            <span class="block text-[10px] font-bold uppercase tracking-widest text-white/60 mt-1">{{ __('sobre.stats.projects') }}</span>
                        </div>
                        <div class="bg-white/10 border border-white/10 rounded-2xl p-6 text-center">
                            <span class="block text-3xl sm:text-4xl font-bold text-white">125+</span>
                            <span class="block text-[10px] font-bold uppercase tracking-widest text-white/60 mt-1">{{ __('sobre.stats.clients') }}</span>
                        </div>
                        <div class="bg-white/10 border border-white/10 rounded-2xl p-6 text-center">
                            <span class="block text-3xl sm:text-4xl font-bold text-white">98%</span>
                            <span class="block text-[10px] font-bold uppercase tracking-widest text-white/60 mt-1">{{ __('sobre.stats.satisfaction') }}</span>
                        </div>
                    </div>
                </div>

                <div class="bg-white/10 border border-white/10 rounded-2xl p-6 sm:p-8">
                    <p class="text-white/80 text-sm sm:text-[15px] font-light leading-relaxed italic">
                        "{!! __('sobre.accordion.who_we_are_p3') !!}"
                    </p>
                </div>
            </div>

        </div>
    </div>
</section>

{{-- ============================================================ --}}
{{-- SECÇÃO UNIFICADA: RIGOR & INSTITUIÇÃO (ACCORDION INTERATIVO) --}}
{{-- ============================================================ --}}
<section id="institucional" class="relative bg-[#F8FAFC] py-16 sm:py-20 overflow-hidden">
    <div class="absolute inset-0 pointer-events-none">
        <div class="absolute top-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-[#06458F]/10 to-transparent"></div>
        <div class="absolute bottom-0 left-0 w-full h-px bg-gradient-to-r from-transparent via-[#06458F]/10 to-transparent"></div>
    </div>

    <div class="relative z-10 max-w-[960px] mx-auto px-6 md:px-12">
        {{-- Título da Secção --}}
        <div class="text-center max-w-3xl mx-auto mb-12 reveal">
            {{-- span decorativo removido --}}
            <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-[#06458F] leading-tight">
                {!! __('sobre.sec_title') !!}
            </h2>
        </div>

        {{-- Container do Accordion --}}
        <div class="accordion-container grid grid-cols-1 md:grid-cols-2 gap-4 reveal">
            
                {{-- 1. Áreas de Atuação --}}
            <div class="accordion-item group border border-slate-100 bg-white rounded-3xl shadow-[0_4px_20px_rgba(6,69,143,0.01)] hover:shadow-[0_12px_30px_rgba(6,69,143,0.06)] hover:border-[#06458F]/15 transition-all duration-300">
                <button type="button" 
                        class="accordion-btn w-full flex items-center justify-between p-6 sm:p-7 text-left font-bold text-[#06458F] uppercase text-xs sm:text-sm tracking-widest outline-none"
                        onclick="toggleAccordion(this)">
                    <span class="flex items-center gap-3 transition-transform duration-300 group-hover:translate-x-1">
                        <span class="acc-dot w-2.5 h-2.5 bg-[#06458F] transition-transform duration-300 group-hover:scale-125 shrink-0"></span>
                        {{ __('sobre.accordion.areas') }}
                    </span>
                    <svg class="acc-arrow w-5 h-5 text-[#06458F] transition-transform ease-out transform" style="transition-duration: 300ms;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div class="accordion-content max-h-0 overflow-hidden transition-all ease-out" style="transition-duration: 350ms; opacity: 0;">
                    <div class="p-6 sm:p-7 pt-0 border-t border-slate-50 text-slate-600 text-sm sm:text-[15px] font-light leading-relaxed space-y-4">
                        <p>{{ __('sobre.accordion.areas_p1') }}</p>
                        <ul class="space-y-2.5 pl-5 list-disc text-slate-600 font-light">
                            <li>{!! __('sobre.accordion.areas_item1') !!}</li>
                            <li>{!! __('sobre.accordion.areas_item2') !!}</li>
                            <li>{!! __('sobre.accordion.areas_item3') !!}</li>
                            <li>{!! __('sobre.accordion.areas_item4') !!}</li>
                        </ul>
                    </div>
                </div>
            </div>

            {{-- 2. Missão --}}
            <div class="accordion-item group border border-slate-100 bg-white rounded-3xl shadow-[0_4px_20px_rgba(6,69,143,0.01)] hover:shadow-[0_12px_30px_rgba(6,69,143,0.06)] hover:border-[#06458F]/15 transition-all duration-300">
                <button type="button" 
                        class="accordion-btn w-full flex items-center justify-between p-6 sm:p-7 text-left font-bold text-[#06458F] uppercase text-xs sm:text-sm tracking-widest outline-none"
                        onclick="toggleAccordion(this)">
                    <span class="flex items-center gap-3 transition-transform duration-300 group-hover:translate-x-1">
                        <span class="acc-dot w-2.5 h-2.5 bg-[#06458F] transition-transform duration-300 group-hover:scale-125 shrink-0"></span>
                        {{ __('sobre.accordion.mission') }}
                    </span>
                    <svg class="acc-arrow w-5 h-5 text-[#06458F] transition-transform ease-out transform" style="transition-duration: 300ms;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div class="accordion-content max-h-0 overflow-hidden transition-all ease-out" style="transition-duration: 350ms; opacity: 0;">
                    <div class="p-6 sm:p-7 pt-0 border-t border-slate-50 text-slate-600 text-sm sm:text-[15px] font-light leading-relaxed">
                        <p>{{ __('sobre.accordion.mission_p1') }}</p>
                    </div>
                </div>
            </div>

            {{-- 3. Visão --}}
            <div class="accordion-item group border border-slate-100 bg-white rounded-3xl shadow-[0_4px_20px_rgba(6,69,143,0.01)] hover:shadow-[0_12px_30px_rgba(6,69,143,0.06)] hover:border-[#06458F]/15 transition-all duration-300">
                <button type="button" 
                        class="accordion-btn w-full flex items-center justify-between p-6 sm:p-7 text-left font-bold text-[#06458F] uppercase text-xs sm:text-sm tracking-widest outline-none"
                        onclick="toggleAccordion(this)">
                    <span class="flex items-center gap-3 transition-transform duration-300 group-hover:translate-x-1">
                        <span class="acc-dot w-2.5 h-2.5 bg-[#06458F] transition-transform duration-300 group-hover:scale-125 shrink-0"></span>
                        {{ __('sobre.accordion.vision') }}
                    </span>
                    <svg class="acc-arrow w-5 h-5 text-[#06458F] transition-transform ease-out transform" style="transition-duration: 300ms;" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div class="accordion-content max-h-0 overflow-hidden transition-all ease-out" style="transition-duration: 350ms; opacity: 0;">
                    <div class="p-6 sm:p-7 pt-0 border-t border-slate-50 text-slate-600 text-sm sm:text-[15px] font-light leading-relaxed space-y-4">
                        <p>{{ __('sobre.accordion.vision_p1') }}</p>
                        <p>{{ __('sobre.accordion.vision_p2') }}</p>
                    </div>
                </div>
            </div>

            {{-- 4. Recursos Humanos --}}
            <div class="accordion-item group border border-slate-100 bg-white rounded-3xl shadow-[0_4px_20px_rgba(6,69,143,0.01)] hover:shadow-[0_12px_30px_rgba(6,69,143,0.06)] hover:border-[#06458F]/15 transition-all duration-300">
                <button type="button" 
                        class="accordion-btn w-full flex items-center justify-between p-6 sm:p-7 text-left font-bold text-[#06458F] uppercase text-xs sm:text-sm tracking-widest outline-none"
                        onclick="toggleAccordion(this)">
                    <span class="flex items-center gap-3 transition-transform duration-300 group-hover:translate-x-1">
                        <span class="acc-dot w-2.5 h-2.5 bg-[#06458F] transition-transform duration-300 group-hover:scale-125 shrink-0"></span>
                        {{ __('sobre.accordion.hr') }}
                    </span>
                    <svg class="acc-arrow w-5 h-5 text-[#06458F] transition-transform ease-out transform" style="transition-duration: 300ms;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div class="accordion-content max-h-0 overflow-hidden transition-all ease-out" style="transition-duration: 350ms; opacity: 0;">
                    <div class="p-6 sm:p-7 pt-0 border-t border-slate-50 text-slate-600 text-sm sm:text-[15px] font-light leading-relaxed space-y-4">
                        <p>{{ __('sobre.accordion.hr_p1') }}</p>
                        <p>{{ __('sobre.accordion.hr_p2') }}</p>
                        <p>{{ __('sobre.accordion.hr_p3') }}</p>
                        <p class="font-bold text-[#06458F] mt-3">{{ __('sobre.accordion.hr_p4') }}</p>
                        <p class="font-bold text-[#06458F] mt-4">{{ __('sobre.accordion.hr_title_talent') }}</p>
                        <ul class="space-y-2 pl-5 list-disc text-slate-600 font-light">
                            <li>{{ __('sobre.accordion.hr_item1') }}</li>
                            <li>{{ __('sobre.accordion.hr_item2') }}</li>
                            <li>{{ __('sobre.accordion.hr_item3') }}</li>
                            <li>{{ __('sobre.accordion.hr_item4') }}</li>
                            <li>{{ __('sobre.accordion.hr_item5') }}</li>
                            <li>{{ __('sobre.accordion.hr_item6') }}</li>
                            <li>{{ __('sobre.accordion.hr_item7') }}</li>
                        </ul>
                    </div>
                </div>
            </div>

            {{-- 5. Equipamentos --}}
            <div class="accordion-item group border border-slate-100 bg-white rounded-3xl shadow-[0_4px_20px_rgba(6,69,143,0.01)] hover:shadow-[0_12px_30px_rgba(6,69,143,0.06)] hover:border-[#06458F]/15 transition-all duration-300">
                <button type="button" 
                        class="accordion-btn w-full flex items-center justify-between p-6 sm:p-7 text-left font-bold text-[#06458F] uppercase text-xs sm:text-sm tracking-widest outline-none"
                        onclick="toggleAccordion(this)">
                    <span class="flex items-center gap-3 transition-transform duration-300 group-hover:translate-x-1">
                        <span class="acc-dot w-2.5 h-2.5 bg-[#06458F] transition-transform duration-300 group-hover:scale-125 shrink-0"></span>
                        {{ __('sobre.accordion.equip') }}
                    </span>
                    <svg class="acc-arrow w-5 h-5 text-[#06458F] transition-transform ease-out transform" style="transition-duration: 300ms;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div class="accordion-content max-h-0 overflow-hidden transition-all ease-out" style="transition-duration: 350ms; opacity: 0;">
                    <div class="p-6 sm:p-7 pt-0 border-t border-slate-50 text-slate-600 text-sm sm:text-[15px] font-light leading-relaxed space-y-4">
                        <p>{{ __('sobre.accordion.equip_p1') }}</p>
                        <p class="font-bold text-[#06458F] mt-3">{{ __('sobre.accordion.equip_title_list') }}</p>
                        <ul class="space-y-2 pl-5 list-disc text-slate-600 font-light">
                            <li>{{ __('sobre.accordion.equip_item1') }}</li>
                            <li>{{ __('sobre.accordion.equip_item2') }}</li>
                            <li>{{ __('sobre.accordion.equip_item3') }}</li>
                            <li>{{ __('sobre.accordion.equip_item4') }}</li>
                            <li>{{ __('sobre.accordion.equip_item5') }}</li>
                        </ul>
                    </div>
                </div>
            </div>

            {{-- 6. Softwares --}}
            <div class="accordion-item group border border-slate-100 bg-white rounded-3xl shadow-[0_4px_20px_rgba(6,69,143,0.01)] hover:shadow-[0_12px_30px_rgba(6,69,143,0.06)] hover:border-[#06458F]/15 transition-all duration-300">
                <button type="button" 
                        class="accordion-btn w-full flex items-center justify-between p-6 sm:p-7 text-left font-bold text-[#06458F] uppercase text-xs sm:text-sm tracking-widest outline-none"
                        onclick="toggleAccordion(this)">
                    <span class="flex items-center gap-3 transition-transform duration-300 group-hover:translate-x-1">
                        <span class="acc-dot w-2.5 h-2.5 bg-[#06458F] transition-transform duration-300 group-hover:scale-125 shrink-0"></span>
                        {{ __('sobre.accordion.software') }}
                    </span>
                    <svg class="acc-arrow w-5 h-5 text-[#06458F] transition-transform ease-out transform" style="transition-duration: 300ms;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div class="accordion-content max-h-0 overflow-hidden transition-all ease-out" style="transition-duration: 350ms; opacity: 0;">
                    <div class="p-6 sm:p-7 pt-0 border-t border-slate-50 text-slate-600 text-sm sm:text-[15px] font-light leading-relaxed space-y-4">
                        <p>{{ __('sobre.accordion.software_p1') }}</p>
                        <p class="font-bold text-[#06458F] mt-3">{{ __('sobre.accordion.software_title_list') }}</p>
                        <ul class="space-y-2 pl-5 list-disc text-slate-600 font-light">
                            <li>{{ __('sobre.accordion.software_item1') }}</li>
                            <li>{{ __('sobre.accordion.software_item2') }}</li>
                            <li>{{ __('sobre.accordion.software_item3') }}</li>
                            <li>{{ __('sobre.accordion.software_item4') }}</li>
                        </ul>
                    </div>
                </div>
            </div>

            {{-- 7. Parceiros --}}
            <div class="accordion-item group border border-slate-100 bg-white rounded-3xl shadow-[0_4px_20px_rgba(6,69,143,0.01)] hover:shadow-[0_12px_30px_rgba(6,69,143,0.06)] hover:border-[#06458F]/15 transition-all duration-300">
                <button type="button" 
                        class="accordion-btn w-full flex items-center justify-between p-6 sm:p-7 text-left font-bold text-[#06458F] uppercase text-xs sm:text-sm tracking-widest outline-none"
                        onclick="toggleAccordion(this)">
                    <span class="flex items-center gap-3 transition-transform duration-300 group-hover:translate-x-1">
                        <span class="acc-dot w-2.5 h-2.5 bg-[#06458F] transition-transform duration-300 group-hover:scale-125 shrink-0"></span>
                        {{ __('sobre.accordion.partners') }}
                    </span>
                    <svg class="acc-arrow w-5 h-5 text-[#06458F] transition-transform ease-out transform" style="transition-duration: 300ms;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div class="accordion-content max-h-0 overflow-hidden transition-all ease-out" style="transition-duration: 350ms; opacity: 0;">
                    <div class="p-6 sm:p-7 pt-0 border-t border-slate-50 text-slate-600 text-sm sm:text-[15px] font-light leading-relaxed space-y-4">
                        <p>{{ __('sobre.accordion.partners_p1') }}</p>
                        <ul class="space-y-2 pl-5 list-disc text-slate-600 font-light">
                            <li><strong class="font-semibold text-[#06458F]">TOPO-ANGOLA</strong></li>
                            <li><strong class="font-semibold text-[#06458F]">GRUPO KDYNAMIC</strong></li>
                            <li><strong class="font-semibold text-[#06458F]">STRYDOM &amp; ASSOCIATES LAND SURVEYORS</strong></li>
                            <li><strong class="font-semibold text-[#06458F]">NAAHI</strong></li>
                            <li><strong class="font-semibold text-[#06458F]">MRT ANGOLA</strong></li>
                            <li><strong class="font-semibold text-[#06458F]">ASSOCIAÇÃO DOS TOPÓGRAFOS DE ANGOLA</strong></li>
                            <li><strong class="font-semibold text-[#06458F]">GOVERNO PROVINCIAL DE LUANDA</strong></li>
                            <li><strong class="font-semibold text-[#06458F]">GOVERNO PROVINCIAL DO CUANDO CUBANGO</strong></li>
                        </ul>
                        <p class="text-xs sm:text-sm font-light text-slate-500 italic mt-3">
                            {{ __('sobre.accordion.partners_more') }}
                        </p>
                    </div>
                </div>
            </div>

            {{-- 8. Clientes --}}
            <div class="accordion-item group border border-slate-100 bg-white rounded-3xl shadow-[0_4px_20px_rgba(6,69,143,0.01)] hover:shadow-[0_12px_30px_rgba(6,69,143,0.06)] hover:border-[#06458F]/15 transition-all duration-300">
                <button type="button" 
                        class="accordion-btn w-full flex items-center justify-between p-6 sm:p-7 text-left font-bold text-[#06458F] uppercase text-xs sm:text-sm tracking-widest outline-none"
                        onclick="toggleAccordion(this)">
                    <span class="flex items-center gap-3 transition-transform duration-300 group-hover:translate-x-1">
                        <span class="acc-dot w-2.5 h-2.5 bg-[#06458F] transition-transform duration-300 group-hover:scale-125 shrink-0"></span>
                        {{ __('sobre.accordion.clients') }}
                    </span>
                    <svg class="acc-arrow w-5 h-5 text-[#06458F] transition-transform ease-out transform" style="transition-duration: 300ms;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div class="accordion-content max-h-0 overflow-hidden transition-all ease-out" style="transition-duration: 350ms; opacity: 0;">
                    <div class="p-6 sm:p-7 pt-0 border-t border-slate-50 text-slate-600 text-sm sm:text-[15px] font-light leading-relaxed space-y-4">
                        <p>{{ __('sobre.accordion.clients_p1') }}</p>
                        <ul class="space-y-2 pl-5 list-disc text-slate-600 font-light">
                            <li><strong class="font-semibold text-[#06458F]">{{ __('sobre.accordion.clients_item1') }}</strong></li>
                            <li><strong class="font-semibold text-[#06458F]">{{ __('sobre.accordion.clients_item2') }}</strong></li>
                            <li><strong class="font-semibold text-[#06458F]">{{ __('sobre.accordion.clients_item3') }}</strong></li>
                            <li><strong class="font-semibold text-[#06458F]">{{ __('sobre.accordion.clients_item4') }}</strong></li>
                            <li><strong class="font-semibold text-[#06458F]">{{ __('sobre.accordion.clients_item5') }}</strong></li>
                            <li><strong class="font-semibold text-[#06458F]">{{ __('sobre.accordion.clients_item6') }}</strong></li>
                            <li><strong class="font-semibold text-[#06458F]">{{ __('sobre.accordion.clients_item7') }}</strong></li>
                            <li><strong class="font-semibold text-[#06458F]">{{ __('sobre.accordion.clients_item8') }}</strong></li>
                        </ul>
                        <p class="text-xs sm:text-sm font-light text-slate-500 italic mt-3">
                            {{ __('sobre.accordion.clients_note') }}
                        </p>
                    </div>
                </div>
            </div>

        </div>

        {{-- Init: abre o primeiro item --}}
        <script>
            (function() {
                const firstItem = document.querySelector('.accordion-item');
                if (!firstItem) return;
                const content = firstItem.querySelector('.accordion-content');
                const arrow = firstItem.querySelector('.acc-arrow');
                if (content && arrow) {
                    content.style.maxHeight = content.scrollHeight + 'px';
                    content.style.opacity = '1';
                    arrow.style.transform = 'rotate(180deg)';
                }
            })();
        </script>

    </div>
</section>

{{-- ============================================================ --}}
{{-- SECÇÃO: EQUIPA / LIDERANÇA (FUNDO BRANCO COM RITMO VISUAL)  --}}
{{-- ============================================================ --}}
<section class="relative bg-white py-16 sm:py-20 overflow-hidden">
    <div class="max-w-[1440px] mx-auto px-6 md:px-12">
        
        {{-- Cabeçalho da Equipa - Descrição aumentada em ~1px --}}
        <div class="max-w-2xl mb-16 reveal">
            {{-- span decorativo removido --}}
            <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-[#06458F] leading-tight mb-4 uppercase">
                {{ __('sobre.team.title') }}
            </h2>
            <p class="text-[15px] sm:text-[17px] text-slate-500 leading-relaxed font-light">
                {{ __('sobre.team.subtitle') }}
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @forelse($equipa as $membro)
            <div class="group bg-white rounded-3xl border border-slate-100 hover:border-[#06458F]/10 overflow-hidden shadow-[0_10px_30px_rgba(6,69,143,0.02)] hover:shadow-xl hover:-translate-y-1.5 hover:scale-[1.01] reveal transition-all duration-300 ease-out">
                <div class="aspect-[4/5] bg-gradient-to-br from-[#06458F]/5 to-[#A9B8C9]/10 flex items-center justify-center overflow-hidden relative">
                    @if($membro->foto_url)
                        <img src="{{ $membro->foto_url }}" alt="{{ $membro->nome }}"
                             class="absolute inset-0 w-full h-full object-cover object-top transition-transform duration-500 ease-out group-hover:scale-105">
                    @else
                        <div class="text-center p-8">
                            <svg class="w-20 h-20 text-[#06458F]/20 mx-auto mb-4" fill="none" stroke="currentColor" stroke-width="1" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
                            </svg>
                            <span class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Foto em Breve</span>
                        </div>
                    @endif
                </div>
                <div class="p-6 sm:p-7">
                    <h3 class="text-base font-bold text-[#06458F] uppercase tracking-tight">{{ $membro->nome }}</h3>
                    @if($membro->cargo)
                    <span class="text-[10px] font-bold uppercase tracking-widest text-[#A9B8C9] block mt-1 mb-3">{{ $membro->cargo }}</span>
                    @endif
                    @if($membro->biografia)
                    <p class="text-sm text-slate-500 font-light leading-relaxed">
                        {{ $membro->biografia }}
                    </p>
                    @endif
                </div>
            </div>
            @empty
            {{-- Bloco alternativo institucional premium com grafismo SVG de mapa topográfico (fallback de equipa em construção) --}}
            <div class="col-span-full py-16 px-8 text-center border border-slate-100 rounded-3xl bg-[#F8FAFC] shadow-[0_10px_30px_rgba(6,69,143,0.02)] max-w-3xl mx-auto reveal">
                <div class="w-20 h-20 bg-gradient-to-br from-[#06458F]/10 to-[#A9B8C9]/20 rounded-full flex items-center justify-center mx-auto mb-6">
                    <svg class="w-10 h-10 text-[#06458F]" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
                    </svg>
                </div>
                <h4 class="text-[#06458F] font-bold uppercase tracking-wider text-base mb-3">{{ __('sobre.team.fallback_title') }}</h4>
                <p class="text-slate-600 text-[15px] sm:text-[17px] font-light leading-relaxed max-w-xl mx-auto">
                    {{ __('sobre.team.fallback_desc') }}
                </p>
                <div class="mt-6 flex flex-wrap justify-center gap-3">
                    <span class="px-3.5 py-1.5 bg-white border border-slate-200 text-[#06458F] text-[10px] font-bold uppercase tracking-wider rounded-full shadow-sm">{{ __('sobre.team.tag1') }}</span>
                    <span class="px-3.5 py-1.5 bg-white border border-slate-200 text-[#06458F] text-[10px] font-bold uppercase tracking-wider rounded-full shadow-sm">{{ __('sobre.team.tag2') }}</span>
                    <span class="px-3.5 py-1.5 bg-white border border-slate-200 text-[#06458F] text-[10px] font-bold uppercase tracking-wider rounded-full shadow-sm">{{ __('sobre.team.tag3') }}</span>
                </div>
            </div>
            @endforelse
        </div>
    </div>
</section>

{{-- ============================================================ --}}
{{-- CTA: FALE CONNOSCO (FUNDO AZUL MARINHO COM PADRÃO SUTIL)    --}}
{{-- ============================================================ --}}
<section class="relative bg-[#06458F] py-16 sm:py-20 overflow-hidden">
    {{-- Linhas topográficas sutis de fundo (SVG no CTA) --}}
    <div class="absolute inset-0 pointer-events-none opacity-[0.03] mix-blend-overlay">
        <svg class="w-full h-full" viewBox="0 0 1440 600" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
            <path d="M-100 120C200 80 400 220 700 150C1000 80 1200 250 1540 180" stroke="white" stroke-width="1.5" stroke-dasharray="3 3"/>
            <path d="M-100 220C200 180 350 320 750 250C1150 180 1250 350 1540 280" stroke="white" stroke-width="2"/>
            <path d="M-100 320C250 280 450 420 800 350C1150 280 1300 450 1540 380" stroke="white" stroke-width="1.5" stroke-dasharray="3 3"/>
            <path d="M-100 420C300 380 500 520 850 450C1200 380 1350 550 1540 480" stroke="white" stroke-width="2"/>
            <path d="M-100 520C350 480 600 620 900 550C1200 480 1400 650 1540 580" stroke="white" stroke-width="1.5" stroke-dasharray="3 3"/>
            
            <path d="M200 450C250 420 300 450 350 480C400 510 380 550 320 560C260 570 180 540 200 450Z" stroke="white" stroke-width="1.5"/>
            <path d="M220 460C260 435 290 460 330 485C370 510 350 535 305 545C260 555 205 530 220 460Z" stroke="white" stroke-width="1"/>
            <path d="M240 475C270 455 290 475 315 495C340 515 325 530 290 535C255 540 225 520 240 475Z" stroke="white" stroke-width="0.8"/>
            
            <path d="M1100 150C1150 120 1200 150 1250 180C1300 210 1280 250 1220 260C1160 270 1080 240 1100 150Z" stroke="white" stroke-width="1.5"/>
            <path d="M1120 160C1160 135 1190 160 1230 185C1270 210 1250 235 1205 245C1160 255 1105 230 1120 160Z" stroke="white" stroke-width="1"/>
        </svg>
    </div>
    <div class="absolute inset-0 pointer-events-none">
        <div class="absolute -top-40 -right-40 w-80 h-80 bg-white/5 rounded-full blur-3xl"></div>
    </div>

    <div class="relative z-10 max-w-[1440px] mx-auto px-6 md:px-12 text-center reveal">
        {{-- span decorativo removido --}}
        <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-white leading-tight mb-6 max-w-3xl mx-auto">
            {!! __('sobre.cta.title') !!}
        </h2>
        <p class="text-sm sm:text-base text-slate-300 font-light max-w-xl mx-auto mb-10 leading-relaxed">
            {{ __('sobre.cta.subtitle') }}
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="{{ route('contactos.create') }}"
               class="inline-flex items-center justify-center gap-2.5 px-10 py-4 bg-white text-[#06458F] font-bold text-xs uppercase tracking-widest rounded-xl hover:bg-slate-50 hover:scale-[1.02] hover:shadow-2xl transition-all duration-300 shadow-lg">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
                </svg>
                <span>{{ __('sobre.cta.btn_contact') }}</span>
            </a>
            <a href="https://wa.me/{{ preg_replace('/\D/', '', $empresaConfig->telefone ?? '+244 948 944 582') }}" target="_blank"
               class="inline-flex items-center justify-center gap-2.5 px-10 py-4 bg-transparent border border-white/30 text-white font-bold text-xs uppercase tracking-widest rounded-xl hover:bg-white/10 hover:border-white/50 transition-all duration-300">
                <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
                    <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.724-1.457L0 24zm6.59-4.846c1.6.95 3.588 1.45 5.416 1.451 5.4 0 9.794-4.397 9.797-9.799.002-2.618-1.017-5.08-2.87-6.934C17.135 2.02 14.67 1 12.005 1 6.602 1 2.206 5.397 2.204 10.8c-.001 1.93.52 3.82 1.508 5.485l-.994 3.633 3.722-.976-.002-.008zm10.274-5.267c-.273-.135-1.613-.797-1.863-.888-.25-.09-.432-.136-.613.136-.18.272-.7.884-.858 1.066-.158.182-.317.204-.59.068-.272-.136-1.15-.424-2.19-1.354-.809-.722-1.356-1.614-1.515-1.886-.158-.272-.017-.42.12-.556.122-.12.272-.318.408-.477.136-.16.18-.272.272-.454.09-.18.045-.34-.022-.477-.068-.136-.613-1.477-.84-2.02-.22-.53-.443-.458-.613-.467-.16-.008-.344-.01-.527-.01-.18 0-.476.067-.726.34-.25.272-.953.93-.953 2.27 0 1.338.975 2.63 1.11 2.81.136.18 1.92 2.927 4.65 4.103.65.28 1.157.447 1.553.573.654.207 1.25.178 1.72.108.523-.078 1.613-.658 1.84-1.293.227-.635.227-1.18.158-1.293-.068-.113-.25-.18-.523-.315z"/>
                </svg>
                <span>{{ __('sobre.cta.btn_whatsapp') }}</span>
            </a>
        </div>
    </div>
</section>

@endsection

@section('scripts')
<script>
    function toggleAccordion(button) {
        const item = button.closest('.accordion-item');
        const content = item.querySelector('.accordion-content');
        const arrow = button.querySelector('.acc-arrow');
        const isExpanded = content.style.maxHeight && content.style.maxHeight !== '0px';

        const container = button.closest('.accordion-container');
        container.querySelectorAll('.accordion-item').forEach(el => {
            const c = el.querySelector('.accordion-content');
            const a = el.querySelector('.acc-arrow');
            if (a) a.style.transform = 'rotate(0deg)';
            if (c) { c.style.maxHeight = '0px'; c.style.opacity = '0'; }
        });

        if (!isExpanded) {
            content.style.maxHeight = content.scrollHeight + 'px';
            content.style.opacity = '1';
            if (arrow) arrow.style.transform = 'rotate(180deg)';
        }
    }

    // Contador animado nas estatísticas com Intersection Observer e Easing
    document.addEventListener('DOMContentLoaded', () => {
        const statNumbers = document.querySelectorAll('.stat-number');
        if (statNumbers.length === 0) return;

        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver((entries, obs) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const target = entry.target;
                    const targetVal = parseInt(target.getAttribute('data-target'), 10);
                    const suffix = target.getAttribute('data-suffix') || '';
                    const prefix = target.getAttribute('data-prefix') || '';
                    
                    let start = 0;
                    const duration = 1200; // ms
                    const startTime = performance.now();

                    function updateCount(currentTime) {
                        const elapsed = currentTime - startTime;
                        const progress = Math.min(elapsed / duration, 1);
                        
                        // Easing out quadratic
                        const easeProgress = progress * (2 - progress);
                        const currentVal = Math.floor(easeProgress * targetVal);
                        
                        target.textContent = prefix + currentVal + suffix;

                        if (progress < 1) {
                            requestAnimationFrame(updateCount);
                        } else {
                            target.textContent = prefix + targetVal + suffix;
                        }
                    }

                    requestAnimationFrame(updateCount);
                    obs.unobserve(target);
                }
            });
        }, observerOptions);

        statNumbers.forEach(num => observer.observe(num));
    });
</script>
@endsection