@extends('front.layouts.marketplace')

@section('title', $seoTitle . ' | Mariachis.co')
@section('meta_description', $seoDescription)
@section('body_page', 'blog-city')

@push('styles')
<style>
  .marketplace-pagination { display:flex; flex-direction:column; gap:1rem; }
  .marketplace-pagination__summary { color:#64748b; font-size:.94rem; line-height:1.6; }
  .marketplace-pagination__controls { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.85rem; }
  .marketplace-pagination__pages { display:flex; flex-wrap:wrap; gap:.55rem; align-items:center; }
  .marketplace-pagination__button,
  .marketplace-pagination__page,
  .marketplace-pagination__ellipsis {
    display:inline-flex; align-items:center; justify-content:center;
    min-height:2.75rem; padding:.72rem 1rem; border-radius:999px;
    border:1px solid rgba(203,213,225,.95); background:#fff; color:#0f172a;
    font-size:.95rem; font-weight:700; text-decoration:none;
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  .marketplace-pagination__button:hover,
  .marketplace-pagination__page:hover {
    transform:translateY(-1px); border-color:rgba(22,101,52,.34);
    box-shadow:0 14px 26px -22px rgba(15,23,42,.35); text-decoration:none;
  }
  .marketplace-pagination__button--disabled { opacity:.45; cursor:default; pointer-events:none; }
  .marketplace-pagination__page--active {
    border-color:#166534;
    background:linear-gradient(135deg,#166534 0%,#16a34a 100%);
    color:#fff; box-shadow:0 18px 28px -20px rgba(22,101,52,.46);
  }
</style>
@endpush

@section('content')
<main>

  {{-- Hero de ciudad --}}
  <section class="layout-shell py-12 md:py-16">
    <div class="mb-2 flex flex-wrap items-center gap-2 text-sm text-slate-500">
      <a href="{{ route('blog.index') }}" class="hover:text-brand-600 transition-colors">Blog</a>
      <span>›</span>
      @if(isset($zone) && $zone)
        @if($city)
          <a href="{{ route('blog.city', ['citySlug' => $city->slug]) }}" class="hover:text-brand-600 transition-colors">{{ $city->name }}</a>
          <span>›</span>
        @endif
        <span class="text-slate-800 font-semibold">{{ $zone->name }}</span>
      @else
        <span class="text-slate-800 font-semibold">{{ $city?->name }}</span>
      @endif
    </div>

    <div class="flex flex-wrap items-end justify-between gap-6 mb-10">
      <div>
        <p class="text-xs font-bold uppercase tracking-[0.14em] text-brand-600 mb-3">
          {{ isset($zone) && $zone ? 'Zona' : 'Ciudad' }}
        </p>
        <h1 class="text-4xl md:text-5xl font-extrabold tracking-[-0.02em] text-slate-900 leading-tight">
          Mariachis en<br>
          <span style="color: var(--brand-600);">
            {{ isset($zone) && $zone ? $zone->name : $city?->name }}
          </span>
        </h1>
        <p class="mt-4 max-w-2xl text-base leading-7 text-slate-600">
          @if(isset($zone) && $zone)
            Guías, consejos y recursos para contratar mariachis en {{ $zone->name }}{{ $city ? ', '.$city->name : '' }}.
          @else
            Guías, consejos y recursos para contratar mariachis en {{ $city?->name }}. Encuentra el grupo ideal para tu evento.
          @endif
        </p>
      </div>

      <div class="flex flex-wrap gap-3">
        <a href="{{ route('seo.landing.slug', ['slug' => $city?->slug ?? '']) }}"
           class="inline-flex items-center gap-2 bg-brand-600 hover:bg-brand-700 text-white font-bold text-sm px-5 py-2.5 rounded-xl transition-colors">
          <span>Ver mariachis aquí</span>
          <span>→</span>
        </a>
        <a href="{{ route('blog.index') }}"
           class="inline-flex items-center gap-2 border border-slate-200 hover:border-brand-600 text-slate-700 hover:text-brand-600 font-semibold text-sm px-5 py-2.5 rounded-xl transition-colors">
          Todo el blog
        </a>
      </div>
    </div>

    {{-- Zonas de esta ciudad --}}
    @if($zones->isNotEmpty())
      <div class="mb-10">
        <p class="text-xs font-bold uppercase tracking-[0.12em] text-slate-500 mb-3">Explorar por zona</p>
        <div class="flex flex-wrap gap-2">
          @foreach($zones as $zone)
            <a href="{{ route('blog.zone', ['zoneSlug' => $zone->slug]) }}"
               class="inline-flex items-center gap-1.5 bg-white border border-slate-200 hover:border-brand-600 hover:text-brand-600 text-slate-700 text-sm font-semibold px-4 py-2 rounded-full transition-colors shadow-sm">
              {{ $zone->name }}
              <span class="text-xs text-slate-400 font-normal">({{ $zone->posts_count }})</span>
            </a>
          @endforeach
        </div>
      </div>
    @endif
  </section>

  {{-- Artículos --}}
  <section class="layout-shell pb-16">
    @if($posts->isNotEmpty())
      <div style="display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; align-items:stretch;">
        @foreach($posts as $post)
          @php
            $cityLabel   = $post->primary_city_name ?: (isset($city) ? $city?->name : 'Colombia');
            $zoneLabel   = $post->primary_zone_name;
            $eventLabel  = $post->eventTypes->pluck('name')->take(2)->join(' · ') ?: 'Recurso';
            $cardImage   = $post->featuredImageUrlForVariant('medium')
                         ?: $post->featuredImageUrlForVariant('thumb')
                         ?: asset('marketplace/img/2.webp');
          @endphp
          <article class="featured-promo-card blog-post-card">
            <a href="{{ route('blog.show', ['slug' => $post->slug]) }}" class="featured-promo-media">
              <img
                src="{{ $cardImage }}"
                alt="{{ $post->title }}"
                loading="lazy"
                decoding="async"
                width="960"
                height="576"
              />
              <span class="featured-promo-chip">{{ $cityLabel }}</span>
              <span class="featured-promo-score">{{ optional($post->published_at)->format('d/m/Y') ?: optional($post->created_at)->format('d/m/Y') }}</span>
            </a>
            <div class="featured-promo-body">
              <p class="featured-promo-kicker">{{ $eventLabel }}{{ $zoneLabel ? ' · '.$zoneLabel : '' }}</p>
              <h2 class="featured-promo-title">{{ $post->title }}</h2>
            </div>
            <div class="featured-promo-footer">
              <p class="featured-promo-meta">{{ $post->excerpt ?: 'Guía y recursos para contratar mariachis en tu zona.' }}</p>
              <div class="featured-promo-bottom">
                <strong>Leer artículo</strong>
                <a href="{{ route('blog.show', ['slug' => $post->slug]) }}">Ver más</a>
              </div>
            </div>
          </article>
        @endforeach
      </div>

      @if($posts->hasPages())
        <div class="mt-10">
          {{ $posts->links('vendor.pagination.marketplace') }}
        </div>
      @endif


    @else
      <div class="surface rounded-3xl p-10 text-center">
        <p class="text-2xl font-bold text-slate-900 mb-3">
          Pronto habrá artículos aquí
        </p>
        <p class="text-slate-500 text-sm max-w-md mx-auto mb-6">
          Estamos preparando guías y recursos específicos para
          {{ isset($zone) && $zone ? $zone->name : $city?->name }}.
          Mientras tanto, explora todos los artículos del blog.
        </p>
        <a href="{{ route('blog.index') }}"
           class="inline-block bg-brand-600 hover:bg-brand-700 text-white font-bold px-6 py-3 rounded-xl transition-colors">
          Ver todos los artículos
        </a>
      </div>
    @endif
  </section>

  {{-- Otras ciudades con contenido --}}
  @php
    $otherCities = \App\Models\BlogCity::query()
      ->whereHas('blogPosts', fn ($q) => $q->published())
      ->when($city, fn ($q) => $q->where('id', '!=', $city->id))
      ->withCount(['blogPosts as posts_count' => fn ($q) => $q->published()])
      ->orderByDesc('posts_count')
      ->limit(6)
      ->get();
  @endphp

  @if($otherCities->isNotEmpty())
  <section class="layout-shell pb-16">
    <div class="surface rounded-3xl p-8">
      <h2 class="text-xl font-bold text-slate-900 mb-5">Más ciudades en el blog</h2>
      <div class="flex flex-wrap gap-3">
        @foreach($otherCities as $otherCity)
          <a href="{{ route('blog.city', ['citySlug' => $otherCity->slug]) }}"
             class="inline-flex items-center gap-1.5 bg-white border border-slate-200 hover:border-brand-600 hover:text-brand-600 text-slate-700 font-semibold text-sm px-4 py-2 rounded-full transition-colors shadow-sm">
            Mariachis en {{ $otherCity->name }}
            <span class="text-xs text-slate-400">({{ $otherCity->posts_count }})</span>
          </a>
        @endforeach
      </div>
    </div>
  </section>
  @endif

</main>
@endsection