@extends('front.layouts.marketplace')

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

@push('styles')
  <style>
    body[data-page="blog-index"] .hero-split-grid--editorial,
    body[data-page="blog-index"] .hero-split-left--editorial {
      min-height: clamp(18rem, 21vw, 22rem) !important;
    }

    body[data-page="blog-index"] .hero-split-left--editorial {
      padding-top: 1.1rem !important;
      padding-bottom: 0.8rem !important;
    }

    body[data-page="blog-index"] .hero-blog-title {
      max-width: 10ch;
      font-size: clamp(3rem, 4.8vw, 4.45rem);
      line-height: 0.9;
    }

    body[data-page="blog-index"] .hero-blog-stage__spotlight {
      gap: 0 !important;
      width: auto;
      max-width: calc(100% - 1.8rem);
      min-width: min(11rem, calc(100% - 1.8rem));
      padding-top: 0.82rem;
      padding-bottom: 0.82rem;
    }

    body[data-page="blog-index"] .hero-blog-stage__spotlight strong {
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.05;
      text-wrap: nowrap;
    }

    body[data-page="blog-index"] .hero-split-right--editorial,
    body[data-page="blog-index"] .hero-blog-stage {
      min-height: clamp(18rem, 21vw, 22rem) !important;
    }

    body[data-page="blog-index"] .blog-post-grid {
      display: grid;
      gap: 1.5rem;
      align-items: stretch;
    }

    body[data-page="blog-index"] .blog-post-grid--single {
      max-width: 44rem;
      margin-inline: auto;
    }

    body[data-page="blog-index"] .blog-post-grid--double {
      max-width: 72rem;
      margin-inline: auto;
    }

    body[data-page="blog-index"] .blog-post-card .featured-promo-media {
      height: auto;
      min-height: 14rem;
      aspect-ratio: 5 / 3;
    }

    body[data-page="blog-index"] .blog-post-grid--single .blog-post-card .featured-promo-media {
      min-height: 18rem;
    }

    body[data-page="blog-index"] .blog-post-card .featured-promo-title {
      min-height: 3.8rem;
    }

    body[data-page="blog-index"] .marketplace-pagination {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    body[data-page="blog-index"] .marketplace-pagination__summary {
      color: #64748b;
      font-size: 0.94rem;
      line-height: 1.6;
    }

    body[data-page="blog-index"] .marketplace-pagination__controls {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.85rem;
    }

    body[data-page="blog-index"] .marketplace-pagination__pages {
      display: flex;
      flex-wrap: wrap;
      gap: 0.55rem;
      align-items: center;
    }

    body[data-page="blog-index"] .marketplace-pagination__button,
    body[data-page="blog-index"] .marketplace-pagination__page,
    body[data-page="blog-index"] .marketplace-pagination__ellipsis {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 2.75rem;
      padding: 0.72rem 1rem;
      border-radius: 999px;
      border: 1px solid rgba(203, 213, 225, 0.95);
      background: #fff;
      color: #0f172a;
      font-size: 0.95rem;
      font-weight: 700;
      text-decoration: none;
      transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
    }

    body[data-page="blog-index"] .marketplace-pagination__button:hover,
    body[data-page="blog-index"] .marketplace-pagination__page:hover {
      transform: translateY(-1px);
      border-color: rgba(22, 101, 52, 0.34);
      box-shadow: 0 14px 26px -22px rgba(15, 23, 42, 0.35);
      text-decoration: none;
    }

    body[data-page="blog-index"] .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, 0.46);
    }

    body[data-page="blog-index"] .marketplace-pagination__button--disabled,
    body[data-page="blog-index"] .marketplace-pagination__ellipsis {
      color: #94a3b8;
      background: #f8fafc;
      box-shadow: none;
    }

    @media (max-width: 767px) {
      body[data-page="blog-index"] .hero-split-grid--editorial,
      body[data-page="blog-index"] .hero-split-left--editorial {
        min-height: auto !important;
      }

      body[data-page="blog-index"] .hero-blog-title {
        font-size: clamp(2.7rem, 9vw, 3.35rem);
      }

      body[data-page="blog-index"] .hero-split-right--editorial,
      body[data-page="blog-index"] .hero-blog-stage,
      body[data-page="blog-index"] .hero-split-left--editorial {
        min-height: 13rem !important;
      }

      body[data-page="blog-index"] .blog-post-card .featured-promo-media,
      body[data-page="blog-index"] .blog-post-grid--single .blog-post-card .featured-promo-media {
        min-height: 13rem;
      }

      body[data-page="blog-index"] .marketplace-pagination__controls {
        flex-direction: column;
        align-items: stretch;
      }

      body[data-page="blog-index"] .marketplace-pagination__pages {
        justify-content: center;
      }

      body[data-page="blog-index"] .marketplace-pagination__button {
        width: 100%;
      }
    }

    @media (min-width: 768px) {
      body[data-page="blog-index"] .blog-post-grid--double,
      body[data-page="blog-index"] .blog-post-grid--triple {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (min-width: 1280px) {
      body[data-page="blog-index"] .blog-post-grid--triple {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }
  </style>
@endpush

@section('content')
    @php
      $heroPrimary = $heroPosts->first();
      $heroFallbackImage = asset('marketplace/img/portada-960.webp');
      $heroImageLarge = $heroPrimary?->featuredImageUrlForVariant('large') ?: $heroFallbackImage;
      $heroImageMedium = $heroPrimary?->featuredImageUrlForVariant('medium') ?: $heroImageLarge;
      $heroImageThumb = $heroPrimary?->featuredImageUrlForVariant('thumb') ?: $heroImageMedium;
      $heroImageSrcset = collect([
        ['url' => $heroImageThumb, 'width' => 640],
        ['url' => $heroImageMedium, 'width' => 960],
        ['url' => $heroImageLarge, 'width' => 1600],
      ])->unique('url')->map(fn (array $candidate): string => $candidate['url'].' '.$candidate['width'].'w')->implode(', ');
      $heroImageSizes = '(max-width: 767px) 100vw, (max-width: 1279px) 50vw, 580px';
      $heroAlt = $heroPrimary?->title ?: 'Mariachis en vivo durante un evento';
      $heroSpotlightLabel = $heroPrimary?->primary_event_type_name ?: 'Guías, ideas y recursos';
      $postsCount = $posts->count();
      $postsGridClass = match (true) {
        $postsCount <= 1 => 'blog-post-grid blog-post-grid--single',
        $postsCount === 2 => 'blog-post-grid blog-post-grid--double',
        default => 'blog-post-grid blog-post-grid--triple',
      };
    @endphp

    <main>
      <section class="hero-split-shell hero-split-shell--flush hero-split-shell--editorial">
        <div class="hero-split-grid hero-split-grid--editorial">
          <div class="hero-split-left hero-split-left--editorial">
            <span class="hero-blog-kicker">Comunidad editorial</span>
            <h1 class="hero-blog-title">{{ $h1 }}</h1>
          </div>

          <div class="hero-split-right hero-split-right--editorial">
            <article class="hero-blog-stage">
              <img
                src="{{ $heroImageMedium }}"
                srcset="{{ $heroImageSrcset }}"
                sizes="{{ $heroImageSizes }}"
                alt="{{ $heroAlt }}"
                class="hero-blog-stage__image"
                width="1600"
                height="960"
                loading="eager"
                decoding="async"
                fetchpriority="high"
              />
              <div class="hero-blog-stage__veil" aria-hidden="true"></div>

              @if($heroPrimary)
                <a
                  href="{{ route('blog.show', ['slug' => $heroPrimary->slug]) }}"
                  class="hero-blog-stage__spotlight"
                  target="_blank"
                  rel="noopener noreferrer"
                  title="{{ $heroSpotlightLabel }}"
                >
                  <strong>{{ $heroSpotlightLabel }}</strong>
                </a>
              @else
                <div class="hero-blog-stage__spotlight" title="{{ $heroSpotlightLabel }}">
                  <strong>{{ $heroSpotlightLabel }}</strong>
                </div>
              @endif
            </article>
          </div>
        </div>
      </section>

      {{-- Explorar por ciudad --}}
      @php
        $blogCities = \App\Models\BlogCity::query()
          ->whereHas('blogPosts', fn ($q) => $q->published())
          ->withCount(['blogPosts as posts_count' => fn ($q) => $q->published()])
          ->orderByDesc('posts_count')
          ->get();
      @endphp
      @if($blogCities->isNotEmpty())
      <section class="layout-shell pb-8">
        <div class="surface rounded-3xl p-6">
          <p class="text-xs font-bold uppercase tracking-[0.12em] text-slate-500 mb-4">Explorar por ciudad</p>
          <div class="flex flex-wrap gap-2">
            @foreach($blogCities as $blogCity)
              <a href="{{ route('blog.city', ['citySlug' => $blogCity->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 {{ $blogCity->name }}
                <span class="text-xs text-slate-400 font-normal">({{ $blogCity->posts_count }})</span>
              </a>
            @endforeach
          </div>
        </div>
      </section>
      @endif

      <section id="articulos" class="layout-shell py-12">
        @if($posts->isNotEmpty())
          <div class="{{ $postsGridClass }}">
            @foreach($posts as $post)
              <article class="featured-promo-card blog-post-card">
                @php
                  $cityLabel = $post->primary_city_name ?: 'Colombia';
                  $zoneLabel = $post->primary_zone_name;
                  $eventLabel = $post->eventTypes->pluck('name')->take(2)->join(' · ') ?: ($post->primary_event_type_name ?: 'Recurso');
                  $postCardImage = $post->featuredImageUrlForVariant('medium')
                    ?: $post->featuredImageUrlForVariant('thumb')
                    ?: $heroFallbackImage;
                  $postCardImageSrcset = $post->featuredImageSrcset()
                    ?: "{$postCardImage} 960w";
                @endphp
                <a href="{{ route('blog.show', ['slug' => $post->slug]) }}" class="featured-promo-media">
                  <img
                    src="{{ $postCardImage }}"
                    srcset="{{ $postCardImageSrcset }}"
                    sizes="(max-width: 767px) 100vw, (max-width: 1279px) 50vw, 360px"
                    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 ?: 'Contenido editorial para posicionamiento SEO local y ayuda al cliente.' }}</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>

          <div class="mt-8">
            {{ $posts->links('vendor.pagination.marketplace') }}
          </div>
        @else
          <div class="surface rounded-3xl p-8">
            <h2 class="text-2xl font-bold text-slate-900">Aún no hay publicaciones públicas</h2>
            <p class="mt-2 text-sm text-slate-600">Cuando el equipo publique artículos desde el panel admin, aparecerán aquí automáticamente.</p>
          </div>
        @endif
      </section>
    </main>
@endsection