<footer class="bg-[#00477D] border-t border-white/10">
    {{-- Main footer --}}
    <x-container class="py-12 lg:py-16">
        <div class="grid gap-10 sm:grid-cols-2 lg:grid-cols-4">
            {{-- Brand --}}
            <div class="sm:col-span-2 lg:col-span-1">
                <a href="/" class="inline-block no-underline">
                    <img src="{{ asset('images/logo-mangole.png') }}" alt="Mangolê" class="h-12 w-auto object-contain" loading="lazy">
                </a>
                <p class="mt-3 text-sm text-slate-300 leading-relaxed max-w-xs">
                    O seu supermercado de confiança em Angola. Qualidade, variedade e o melhor preço para a sua família.
                </p>
                <div class="mt-5 flex items-center gap-3">
                    <a href="https://facebook.com/mwangole" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center w-9 h-9 rounded-xl bg-white/10 text-slate-300 hover:bg-[#FFC72C] hover:text-[#00477D] transition duration-150" aria-label="Facebook">
                        <x-mg-icon name="facebook" size="sm" />
                    </a>
                    <a href="https://instagram.com/mwangole" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center w-9 h-9 rounded-xl bg-white/10 text-slate-300 hover:bg-[#FFC72C] hover:text-[#00477D] transition duration-150" aria-label="Instagram">
                        <x-mg-icon name="instagram" size="sm" />
                    </a>
                    <a href="https://youtube.com/@mwangole" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center w-9 h-9 rounded-xl bg-white/10 text-slate-300 hover:bg-[#FFC72C] hover:text-[#00477D] transition duration-150" aria-label="YouTube">
                        <x-mg-icon name="youtube" size="sm" />
                    </a>
                    <a href="https://linkedin.com/company/mwangole" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center w-9 h-9 rounded-xl bg-white/10 text-slate-300 hover:bg-[#FFC72C] hover:text-[#00477D] transition duration-150" aria-label="LinkedIn">
                        <x-mg-icon name="linkedin" size="sm" />
                    </a>
                </div>
            </div>

            {{-- Navegação --}}
            <div>
                <h3 class="text-sm font-semibold text-[#FFC72C]">Navegação</h3>
                <ul class="mt-4 space-y-3">
                    <li><a href="{{ url('lojas') }}" class="text-sm text-slate-300 hover:text-white transition duration-150">Lojas</a></li>
                    <li><a href="{{ url('produtos') }}" class="text-sm text-slate-300 hover:text-white transition duration-150">Produtos</a></li>
                    <li><a href="{{ url('campanhas') }}" class="text-sm text-slate-300 hover:text-white transition duration-150">Campanhas</a></li>
                    <li><a href="{{ url('sobre') }}" class="text-sm text-slate-300 hover:text-white transition duration-150">Sobre Nós</a></li>
                </ul>
            </div>

            {{-- Contacto --}}
            <div>
                <h3 class="text-sm font-semibold text-[#FFC72C]">Contacto</h3>
                <ul class="mt-4 space-y-3">
                    <li>
                        <a href="tel:+244923000000" class="inline-flex items-center gap-2 text-sm text-slate-300 hover:text-white transition duration-150">
                            <x-mg-icon name="phone" size="sm" class="text-slate-400" />
                            +244 923 000 000
                        </a>
                    </li>
                    <li>
                        <a href="mailto:info@mwangole.co.ao" class="inline-flex items-center gap-2 text-sm text-slate-300 hover:text-white transition duration-150">
                            <x-mg-icon name="mail" size="sm" class="text-slate-400" />
                            info@mwangole.co.ao
                        </a>
                    </li>
                    <li class="inline-flex items-start gap-2 text-sm text-slate-300">
                        <x-mg-icon name="location" size="sm" class="mt-0.5 shrink-0 text-slate-400" />
                        <span>Rua Principal, Talatona<br>Luanda, Angola</span>
                    </li>
                </ul>
            </div>

            {{-- Negócios --}}
            <div>
                <h3 class="text-sm font-semibold text-[#FFC72C]">Para Negócios</h3>
                <ul class="mt-4 space-y-3">
                    <li><a href="{{ url('negocios') }}" class="text-sm text-slate-300 hover:text-white transition duration-150">Parcerias B2B</a></li>
                    <li><a href="{{ url('negocios') }}#fornecedores" class="text-sm text-slate-300 hover:text-white transition duration-150">Fornecedores</a></li>
                    <li><a href="{{ url('negocios') }}#imoveis" class="text-sm text-slate-300 hover:text-white transition duration-150">Espaços Comerciais</a></li>
                    <li><a href="{{ url('vagas') }}" class="text-sm text-slate-300 hover:text-white transition duration-150">Trabalhe Connosco</a></li>
                </ul>
            </div>
        </div>
    </x-container>

    {{-- Bottom bar --}}
    <div class="border-t border-white/10">
        <x-container class="flex flex-col sm:flex-row items-center justify-between gap-4 py-6 text-sm text-slate-400">
            <p>&copy; {{ date('Y') }} Mangolê, Lda. Todos os direitos reservados.</p>
            <div class="flex items-center gap-6">
                <a href="#" class="hover:text-white transition duration-150">Privacidade</a>
                <a href="#" class="hover:text-white transition duration-150">Termos</a>
                <a href="#" class="hover:text-white transition duration-150">Cookies</a>
            </div>
        </x-container>
    </div>
</footer>
