@php
  $footerData = app(\App\Services\Front\FooterDataService::class);
  $footerCities = $footerData->popularCities(5);
  $footerEvents = $footerData->popularEvents(5);
@endphp

<footer class="mt-20 border-t border-slate-200 bg-slate-950 text-slate-200">
  <div class="mx-auto grid w-full max-w-7xl gap-10 px-4 py-14 md:grid-cols-[1.2fr_1fr_1fr_1fr_1fr] md:px-8">
    <div class="space-y-4">
      <a class="brand-logo brand-logo--footer" href="/" aria-label="mariachis.co">
        <span class="brand-logo-copy">
          <span class="brand-logo-word">
            <img src="assets/logo-wordmark-390.webp" alt="Mariachis.co" class="brand-logo-image" width="390" height="128" decoding="async" />
          </span>
          <span class="brand-logo-sub">marketplace colombiano</span>
        </span>
      </a>
      <p class="max-w-lg text-sm text-slate-300">Marketplace para contratar mariachis en Colombia con perfiles reales, contacto directo y búsqueda por ciudad.</p>
    </div>
    <div>
      <h3 class="text-sm font-bold uppercase tracking-[0.18em] text-slate-400">Ciudades populares</h3>
      <ul class="mt-4 grid gap-2 text-sm text-slate-200">
        @forelse($footerCities as $city)
          <li><a href="{{ route('seo.landing.slug', ['slug' => $city['slug']]) }}" class="hover:text-white">Mariachis en {{ $city['name'] }}</a></li>
        @empty
          <li><span class="text-slate-400">Sin ciudades activas todavía</span></li>
        @endforelse
      </ul>
    </div>
    <div>
      <h3 class="text-sm font-bold uppercase tracking-[0.18em] text-slate-400">Eventos destacados</h3>
      <ul class="mt-4 grid gap-2 text-sm text-slate-200">
        @forelse($footerEvents as $event)
          <li><a href="{{ route('seo.landing.slug', ['slug' => $event['slug']]) }}" class="hover:text-white">Mariachis para {{ mb_strtolower($event['name']) }}</a></li>
        @empty
          <li><span class="text-slate-400">Próximamente más eventos destacados</span></li>
        @endforelse
      </ul>
    </div>
    <div>
      <h3 class="text-sm font-bold uppercase tracking-[0.18em] text-slate-400">Recursos</h3>
      <ul class="mt-4 grid gap-2 text-sm text-slate-200">
        <li><a href="{{ route('blog.index') }}" class="hover:text-white">Blog</a></li>
        <li><a href="{{ route('static.help') }}" class="hover:text-white">Ayuda</a></li>
        <li><a href="{{ route('contact.show') }}" class="hover:text-white">Contacto</a></li>
        <li><a href="{{ route('seo.html-sitemap') }}" class="hover:text-white">Mapa del sitio</a></li>
      </ul>
    </div>
    <div>
      <h3 class="text-sm font-bold uppercase tracking-[0.18em] text-slate-400">Para mariachis</h3>
      <ul class="mt-4 grid gap-2 text-sm text-slate-200">
        <li><a href="{{ route('mariachi.register') }}" class="hover:text-white">Publica tu anuncio</a></li>
        <li><a href="{{ \App\Support\PortalHosts::absoluteUrl(\App\Support\PortalHosts::partner(), '/login') }}" class="hover:text-white">Acceso partner</a></li>
      </ul>
    </div>
  </div>
  <div class="mx-auto flex w-full max-w-7xl flex-wrap items-center justify-between gap-4 border-t border-white/10 px-4 py-6 text-sm text-slate-300">
    <span>© {{ now()->year }} ❤️ Hecho con amor en Colombia 🇨🇴</span>
    <nav class="ml-auto flex flex-wrap items-center justify-end gap-4">
      <a href="{{ route('static.terms') }}" class="hover:text-white">Términos y condiciones</a>
      <a href="{{ route('static.privacy') }}" class="hover:text-white">Política de privacidad</a>
    </nav>
  </div>
</footer>