<div class="border border-t">
    <footer class="mt-auto w-full max-w-[85rem] py-10 px-4 sm:px-6 lg:px-8 mx-auto">
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6 mb-10">
            <div class="col-span-full hidden lg:col-span-1 lg:block">
                <a class="flex-none font-semibold text-xl text-black focus:outline-none focus:opacity-80" href="#"
                    aria-label="Brand">
                    <img src="{{ asset('img/logo2.png') }}" class="size-20 rounded-full" alt="Logo img">

                    SHECL<span class="text-yellow-500">JA</span>
                </a>
                <p class="mt-3 text-xs sm:text-sm text-gray-600">
                    &copy; {{ Date('Y') }} SHECLJA. All rights reserved.
                </p>
            </div>


            <div>
                <h4 class="text-xs font-semibold text-gray-900 uppercase">Company</h4>

                <div class="mt-3 grid space-y-3 text-sm">
                    <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800"
                            href="/about">About us</a></p>
                    <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800"
                            href="/careers">Careers</a><span class="inline text-yellow-600"> — We're hiring</span></p>
                    <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800"
                            href="javascript:void(0)">Privacy Policy</a> </p>

                    <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800"
                            href="javascript:void(0)">Terms &amp; Conditions</a></p>

                </div>
            </div>

            <div>
                <h4 class="text-xs font-semibold text-gray-900 uppercase">Services</h4>

                <div class="mt-3 grid space-y-3 text-sm">
                    <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800"
                            href="/equipment-rentals" wire:navigate.hover>Equipment for Rent</a></p>
                    <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800"
                            href="/products" wire:navigate.hover>Equipment for Sale</a></p>
                    <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800"
                            href="/projects" wire.navigate>Projects</a></p>

                    <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800"
                            href="/blog">Blog</a></p>

                </div>
            </div>


            <div>
                <h4 class="text-xs font-semibold text-gray-900 uppercase">Contact</h4>

                <div class="mt-3 grid space-y-3 text-sm">
                    <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800"
                            href="javascript:void(0)">info@sheclja.com
                        </a></p>
                    <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800"
                            href="javascript:void(0)">5 Clarks Town Mandeville Manchester
                        </a></p>
                    <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800"
                            href="javascript:void(0)">1-876-543-0747
                        </a></p>

                </div>
            </div>

            <div>
                <h4 class="text-xs font-semibold text-gray-900 uppercase">Socials</h4>

                <div class="mt-3 grid space-y-3 text-sm">
                    <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800"
                            href="/contact">Help</a>
                    <p><a class="inline-flex gap-x-2 text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800"
                            href="#">Newsletter</a> <span class="inline text-yellow-600">— Coming soon</span></p>
                </div>

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