@php
    use function Modules\Core\Settings\Helpers\setting;
    $terms = setting('site.terms', null);
    $return_policy = setting('site.return_policy', null);
    $shipping_methods = setting('site.shipping_methods', null);
    $payment_methods = setting('site.payment_methods', null);
    $whatsapps = setting('social.whatsapps');
    $whatsapp = $whatsapps ? current($whatsapps) : null;
@endphp
<footer class="bg-zinc-950 text-white text-sm">
    @if ($whatsapp)
        <div>aqui whats 2</div>
        <x-whatsapp :number="$whatsapp->number" />
    @endif
    <div class="max-w-7xl mx-auto px-6 lg:px-8 py-14">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-10 text-center md:text-left">

            {{-- Columna 1 - logo --}}
            <div class="md:col-span-1 lg:col-span-4">
                <a href="{{ route('home') }}" class="inline-block">
                    @if (setting('site.logo_footer'))
                        <img src="{{ Storage::url(setting('site.logo_footer')) }}" alt="{{ setting('site.title') }}"
                            class="max-h-8 sm:max-h-14 xl:max-h-max mx-auto md:mx-0">
                    @else
                        <x-quim-quimaira class="h-8 text-white mx-auto md:mx-0"></x-quim-quimaira>
                    @endif
                </a>

                <h4 class="font-semibold text-sm mb-2 mt-3">
                    Ubicación:
                </h4>

                <p class="text-zinc-300 text-sm leading-relaxed">
                    Blvd. Manuel Ávila Camacho #2999 Bis.<br>
                    Colonia: Las Rosas C.P. 54060<br>
                    México, Tlalnepantla de Baz
                </p>

                <div class="flex items-center justify-center md:justify-start gap-3 mt-8">
                    <div class="flex justify-center md:justify-start">
                        @if (setting('social.social_networks'))
                            @foreach (setting('social.social_networks') as $sn)
                                <a href="{{ $sn->url }}" target="_blank"
                                    class="flex justify-center items-center ml-1 h-6 mx-1 bg-secundario rounded-full aspect-square">
                                    @svg($sn->icon, 'h-4 text-black')
                                </a>
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>

            {{-- Empresa --}}
            <div class="md:col-span-1 lg:col-span-3">
                <div class="h-6"></div>
                <ul class="space-y-4 text-zinc-300">
                    <li>
                        <a href="{{ route('nosotros') }}" class="hover:text-white hover:font-bold uppercase">
                            Nuestra empresa
                        </a>
                    </li>
                    <li>
                        <a href="{{ route('faqs') }}" class="hover:text-white hover:font-bold uppercase">
                            Preguntas frecuentes
                        </a>
                    </li>

                    <li>
                        <a href="{{ route('faqs') }}#proveedor" class="hover:text-white hover:font-bold uppercase">
                            Quiero ser proveedor
                        </a>
                    </li>

                    <li>
                        <a href="{{ route('faqs') }}#distribuidor" class="hover:text-white hover:font-bold uppercase">
                            Quiero ser distribuidor
                        </a>
                    </li>
                </ul>
            </div>

            {{-- Contacto --}}
            <div class="md:col-span-1 lg:col-span-2 pt-[24px]">
                <h4 class="font-bold mb-1">
                    Contacto:
                </h4>

                <div class="text-zinc-300">
                    @php
                        $phones = setting('social.phones') ?? [];
                    @endphp

                    @if (count($phones) > 0)
                        <div class="flex flex-col items-center md:items-start gap-2">
                            @foreach ($phones as $phone)
                                <a href="tel:{{ $phone->number }}" target="_blank">{{ $phone->text }}</a>
                            @endforeach
                        </div>
                        <div class="h-1"></div>
                    @endif
                </div>

                <div class="mt-8">
                    <p class="text-zinc-300">
                        WA
                        @php
                            $whatsapps = setting('social.whatsapps') ?? [];
                        @endphp

                        @if (count($whatsapps) > 0)
                            <div class="flex items-center justify-center md:justify-start gap-4">
                                @foreach ($whatsapps as $whatsapp)
                                    <a href="https://wa.me/+52{{ $whatsapp->number }}" target="_blank">{{ $whatsapp->text }}</a>
                                @endforeach
                            </div>
                            <div class="h-5"></div>
                        @endif
                    </p>
                </div>
            </div>

            {{-- Atención --}}
            <div class="md:col-span-1 lg:col-span-3 flex flex-col justify-between pt-[24px]">
                <div>
                    <h4 class="font-bold mb-2">
                        Atención especializada:
                    </h4>

                    <div class="flex items-center justify-center md:justify-start">
                        @svg('fas-envelope', 'h-4 text-white mr-2')
                        <a href="mailto:{{ setting('email.email') }}" target="_blank"
                            class="block">{{ setting('email.email') }}</a>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="max-w-7xl mx-auto px-6 lg:px-8 py-14">
        <p class="mt-8 text-zinc-400 text-sm text-center md:text-left">
            SeguriHigiene© 2026. Todos los derechos reservados
        </p>
    </div>

    {{-- Barra inferior --}}
    <div class="border-t border-zinc-800">
        <div class="max-w-7xl mx-auto px-6 lg:px-8 py-5">
            <div class="flex flex-col lg:flex-row justify-between items-center gap-4">

                <div class="w-full lg:w-1/2 flex flex-wrap justify-center lg:justify-start gap-4 text-sm text-zinc-400 text-center lg:text-left">

                    <a href="{{ route('privacy') }}" class="text-sm font-regular">Aviso de privacidad</a>
                    @if ($terms)
                        <span>|</span>
                        <a href="{{ route('terms') }}" target="_blank">Terminos y condiciones</a>
                    @endif
                    @if ($return_policy)
                        <span>|</span>
                        <a href="{{ route('return-policy') }}" target="_blank">Devoluciones y cambios</a>
                    @endif
                    @if ($shipping_methods)
                        <span>|</span>
                        <a href="{{ route('shipping-methods') }}" target="_blank">Formas de envio</a>
                    @endif
                    @if ($payment_methods)
                        <span>|</span>
                        <a href="{{ route('payment-methods') }}" target="_blank">Formas de pago</a>
                    @endif
                </div>

                <div class="w-full lg:w-1/2 flex justify-center lg:justify-end">
                    <a href="https://www.quimaira.com/web/index.html" target="_blank"
                        class="flex justify-center items-end">
                        <x-quim-name class="h-4" />
                    </a>
                </div>

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

    @include('layout.footer.bottom_menu')
</footer>