   <footer class="bg-theme-brand mx-auto pt-4 lg:pt-9">

      <div class="container mx-auto max-w-7xl px-6 py-9 sm:px-6 lg:px-8">
         <div class="grid grid-cols-2 gap-y-12 gap-x-8 md:gap-12 text-base md:grid-cols-3 lg:grid-cols-4">

            @php
               $footerSections = collect(timebank_config('footer.sections', []))
                  ->where('visible', true)
                  ->sortBy('order');
            @endphp

            @foreach($footerSections as $section)
               <div>
                  <p class="text-sm font-extrabold text-theme-background md:font-semibold dark:text-theme-background">
                     {{ __($section['title']) }}
                  </p>

                  <div class="mt-1 flex flex-col items-start space-y-2 text-xs">
                     @php
                        $links = collect($section['links'] ?? [])
                           ->where('visible', true)
                           ->sortBy('order');
                     @endphp

                     @foreach($links as $link)
                        @if(isset($link['auth_required']) && $link['auth_required'])
                           @auth
                              <a class="text-theme-light hover:text-theme-accent dark:text-theme-secondary dark:hover:text-theme-accent transition-colors duration-300 hover:underline"
                                 href="{{ route($link['route']) }}">
                                 {{ __($link['title']) }}
                              </a>
                           @endauth
                        @elseif(isset($link['url']))
                           <a class="text-theme-light hover:text-theme-accent dark:text-theme-secondary dark:hover:text-theme-accent transition-colors duration-300 hover:underline"
                              href="{{ $link['url'] }}">
                              {{ __($link['title']) }}
                           </a>
                        @else
                           <a class="text-theme-light hover:text-theme-accent dark:text-theme-secondary dark:hover:text-theme-accent transition-colors duration-300 hover:underline"
                              href="{{ route($link['route']) }}">
                              {{ __($link['title']) }}
                           </a>
                        @endif
                     @endforeach
                  </div>
               </div>
            @endforeach

         </div>

         <!-- Bottom Section: Application Mark and Text -->
         <div class="my-6 flex w-full flex-col items-end justify-end space-y-2">
            <div class="invert-100 flex flex-col items-center justify-center">
                  <a href="{{ route('main') }}">
                     <x-jetstream.application-mark class="block h-9 w-auto" />
                  </a>

                  <p class="mt-2 text-2xs dark:text-theme-light font-semibold text-gray-800">
                     {{ __(timebank_config('footer.tagline','')) }}
                  </p>
            </div>
         </div>

      </div>
   </footer>
