@extends('front.layouts.marketplace')

@section('title', $seoTitle . ' | Mariachis.co')
@section('meta_description', $seoDescription)
@section('body_page', 'city')
@section('body_class', 'font-sans text-slate-900 antialiased city-viator')

@push('head')
@php
  $itemListElements = [];
  $pageOffset = ($profiles->currentPage() - 1) * $profiles->perPage();
  foreach ($profiles->getCollection() as $ilIdx => $ilItem) {
    $ilName  = $ilItem->business_name ?: $ilItem->user?->display_name;
    $ilUrl   = route('mariachi.public.show', ['slug' => $ilItem->slug]);
    $ilPhoto = $ilItem->photos->firstWhere('is_featured', true) ?? $ilItem->photos->first();
    $ilImg   = $ilPhoto?->urlForVariant('medium');
    $ilCount = (int) ($ilItem->reviews_count ?? 0);
    $ilRating = $ilCount > 0 ? round((float) ($ilItem->avg_rating ?? 0), 1) : null;

    $ilEntry = [
      '@type'    => 'ListItem',
      'position' => $pageOffset + $ilIdx + 1,
      'item'     => array_filter([
        '@type'           => 'MusicGroup',
        '@id'             => $ilUrl,
        'name'            => $ilName,
        'url'             => $ilUrl,
        'genre'           => 'Mariachi',
        'address'         => ['@type' => 'PostalAddress', 'addressLocality' => $ilItem->publicCityLabel(), 'addressCountry' => 'CO'],
        'description'     => $ilItem->short_description ?: null,
        'image'           => $ilImg ?: null,
        'priceRange'      => $ilItem->base_price
          ? 'Desde $'.number_format((float) $ilItem->base_price, 0, ',', '.')
          : null,
        'aggregateRating' => $ilRating ? [
          '@type'       => 'AggregateRating',
          'ratingValue' => (string) $ilRating,
          'reviewCount' => $ilCount,
          'bestRating'  => '5',
          'worstRating' => '1',
        ] : null,
      ], fn ($v) => $v !== null),
    ];
    $itemListElements[] = $ilEntry;
  }
@endphp
@if(count($itemListElements) > 0)
<script type="application/ld+json">
{!! json_encode([
  '@context'       => 'https://schema.org',
  '@type'          => 'ItemList',
  'name'           => $h1,
  'numberOfItems'  => $profiles->total(),
  'itemListElement' => $itemListElements,
], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}
</script>
@endif
@endpush

@push('head')
@php
  $bcCountryLabel = $countryName ?: 'Colombia';
  $bcCountrySlug  = $countrySlug ?: \Illuminate\Support\Str::slug($bcCountryLabel);
  $bcItems = [
    ['@type' => 'ListItem', 'position' => 1, 'name' => 'Inicio', 'item' => route('home')],
    ['@type' => 'ListItem', 'position' => 2, 'name' => 'Mariachis en '.$bcCountryLabel, 'item' => route('seo.landing.slug', ['slug' => $bcCountrySlug])],
  ];
  $bcPos = 3;
  if ($cityName && $citySlug) {
    $bcItems[] = ['@type' => 'ListItem', 'position' => $bcPos++, 'name' => 'Mariachis en '.$cityName, 'item' => route('seo.landing.slug', ['slug' => $citySlug])];
  }
  if ($zoneName) {
    $bcItems[] = ['@type' => 'ListItem', 'position' => $bcPos, 'name' => $zoneName];
  } elseif ($eventType) {
    $bcItems[] = ['@type' => 'ListItem', 'position' => $bcPos, 'name' => $eventType->name];
  }
@endphp
<script type="application/ld+json">
{!! json_encode([
  '@context'        => 'https://schema.org',
  '@type'           => 'BreadcrumbList',
  'itemListElement' => $bcItems,
], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}
</script>
@if(!empty($faqItems))
<script type="application/ld+json">
{!! json_encode([
  '@context'   => 'https://schema.org',
  '@type'      => 'FAQPage',
  'mainEntity' => array_map(fn (array $faq): array => [
    '@type' => 'Question',
    'name'  => $faq['question'],
    'acceptedAnswer' => [
      '@type' => 'Answer',
      'text'  => $faq['answer'],
    ],
  ], $faqItems),
], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}
</script>
@endif
@php
  $clpAreaName = $zoneName ?: ($cityName ?: ($eventType?->name ?: $countryLabel));
@endphp
<script type="application/ld+json">
{!! json_encode(array_filter([
  '@context'   => 'https://schema.org',
  '@type'      => 'CollectionPage',
  'name'       => $h1,
  'description' => $seoDescription,
  'url'        => request()->url(),
  'dateModified' => $lastUpdatedAt?->toAtomString(),
  'about'      => [
    '@type'       => 'Service',
    'name'        => 'Contratación de mariachis en '.$clpAreaName,
    'serviceType' => 'Mariachi',
    'areaServed'  => ['@type' => 'City', 'name' => $clpAreaName, 'addressCountry' => 'CO'],
    'provider'    => [
      '@type' => 'Organization',
      '@id'   => route('home').'#organization',
      'name'  => 'Mariachis.co',
      'url'   => route('home'),
    ],
  ],
], fn ($v) => $v !== null), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}
</script>
@endpush

@section('content')
    @push('styles')
      <style>
        .marketplace-pagination {
          display: flex;
          flex-direction: column;
          gap: 1rem;
        }

        .marketplace-pagination__summary {
          color: #64748b;
          font-size: 0.94rem;
          line-height: 1.6;
        }

        .marketplace-pagination__controls {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: space-between;
          gap: 0.85rem;
        }

        .marketplace-pagination__pages {
          display: flex;
          flex-wrap: wrap;
          gap: 0.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: 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;
        }

        .marketplace-pagination__button:hover,
        .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;
        }

        .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);
        }

        .marketplace-pagination__button--disabled,
        .marketplace-pagination__ellipsis {
          color: #94a3b8;
          background: #f8fafc;
          box-shadow: none;
        }

        @media (max-width: 767px) {
          .marketplace-pagination__controls {
            flex-direction: column;
            align-items: stretch;
          }

          .marketplace-pagination__pages {
            justify-content: center;
          }

          .marketplace-pagination__button {
            width: 100%;
          }
        }

        /* ── A1: Hero contextualizado ── */
        body.city-viator .city-results-shell--viator {
          background: linear-gradient(
            180deg,
            #f0f9f4 0%,
            #f8fdf9 28%,
            #ffffff 58%
          );
        }

        body.city-viator .city-results-eyebrow {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          gap: 0.4rem;
          margin-bottom: 0.72rem;
        }

        body.city-viator .city-results-eyebrow__pill {
          border-radius: 999px;
          border: 1.5px solid rgba(22, 101, 52, 0.28);
          background: rgba(22, 101, 52, 0.07);
          color: #14532d;
          font-size: 0.67rem;
          font-weight: 800;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          padding: 0.22rem 0.62rem;
        }

        body.city-viator .city-results-eyebrow__count {
          font-size: 0.72rem;
          font-weight: 600;
          color: #4b7a5a;
        }

        body.city-viator .city-results-intro h1 {
          font-family: 'Playfair Display', Georgia, serif;
          font-size: clamp(2rem, 4vw, 3.1rem);
          font-weight: 800;
          letter-spacing: -0.022em;
          line-height: 1.1;
          color: #0a1a0d;
        }

        body.city-viator .city-zone-description {
          margin-top: 0.75rem;
          font-size: 1rem;
          line-height: 1.6;
          color: #374151;
          max-width: 56ch;
        }

        body.city-viator .city-hero-trust {
          display: flex;
          flex-wrap: wrap;
          gap: 0.3rem 1.5rem;
          margin-top: 0.9rem;
          padding-top: 0.85rem;
          border-top: 1px solid rgba(10, 26, 13, 0.1);
        }

        body.city-viator .city-hero-trust__item {
          display: inline-flex;
          align-items: center;
          gap: 0.3rem;
          font-size: 0.79rem;
          color: #4a5e4d;
        }

        body.city-viator .city-hero-trust__item strong {
          color: #0a2e15;
          font-weight: 800;
        }

        body.city-viator .city-hero-trust__icon {
          width: 0.78rem;
          height: 0.78rem;
          flex-shrink: 0;
          opacity: 0.65;
        }

        /* ── A2: Cards — trust signals ── */
        body.city-viator .city-result-chip--vip {
          background: #f5f0ff;
          color: #5b21b6;
        }

        body.city-viator .city-result-chip--complete {
          background: #dcfce7;
          color: #14532d;
        }

        body.city-viator .city-result-chip--new {
          background: #f8fafc;
          color: #64748b;
        }

        body.city-viator .city-result-cta-pill {
          display: inline-flex;
          align-items: center;
          border-radius: 999px;
          background: #115e59;
          color: #fff;
          font-size: 0.71rem;
          font-weight: 800;
          letter-spacing: 0.03em;
          padding: 0.38rem 0.9rem;
          text-decoration: none;
          white-space: nowrap;
          transition: background 0.18s ease;
        }

        @media (hover: hover) {
          body.city-viator .city-result-card--viator:hover .city-result-cta-pill {
            background: #0a3d38;
          }
        }

        /* ── B1: Quick filter chips ── */
        body.city-viator .city-quick-chips {
          display: flex;
          flex-wrap: wrap;
          gap: 0.42rem;
          margin-bottom: 0.8rem;
        }

        body.city-viator .city-quick-chip {
          border-radius: 999px;
          border: 1.5px solid rgba(15, 23, 42, 0.16);
          background: #fff;
          color: #334155;
          font-size: 0.74rem;
          font-weight: 700;
          padding: 0.34rem 0.82rem;
          text-decoration: none;
          transition:
            border-color 0.16s ease,
            background 0.16s ease,
            color 0.16s ease;
        }

        body.city-viator .city-quick-chip:hover {
          border-color: rgba(17, 94, 89, 0.4);
          background: rgba(17, 94, 89, 0.06);
          color: #115e59;
        }

        body.city-viator .city-quick-chip.is-active {
          border-color: #115e59;
          background: #115e59;
          color: #fff;
        }

        body.city-viator .city-quick-chip--clear {
          border-color: rgba(185, 28, 28, 0.25);
          color: #991b1b;
        }

        body.city-viator .city-quick-chip--clear:hover {
          background: rgba(185, 28, 28, 0.06);
          border-color: rgba(185, 28, 28, 0.4);
        }

        /* ── B2: FAQ chevron + transición suave ── */
        body.city-viator .city-faq-chevron {
          width: 1.05rem;
          height: 1.05rem;
          color: #115e59;
          flex-shrink: 0;
          transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
        }

        [data-accordion-trigger][aria-expanded="true"] .city-faq-chevron {
          transform: rotate(180deg);
        }

        /* Override Tailwind hidden para habilitar transición CSS sin tocar ui.min.js */
        [data-accordion-item] > [id^="city-faq-"] {
          display: block !important;
          overflow: hidden;
          transition:
            max-height 0.28s cubic-bezier(0.22, 1, 0.36, 1),
            padding-top 0.28s cubic-bezier(0.22, 1, 0.36, 1),
            padding-bottom 0.28s cubic-bezier(0.22, 1, 0.36, 1);
        }

        /* Cerrado: colapsar incluyendo padding (py-3 no se colapsa solo con max-height) */
        [data-accordion-item] > [id^="city-faq-"].hidden {
          max-height: 0 !important;
          padding-top: 0 !important;
          padding-bottom: 0 !important;
          border-top-width: 0 !important;
        }

        /* Abierto: altura natural */
        [data-accordion-item] > [id^="city-faq-"]:not(.hidden) {
          max-height: 40rem;
        }

        /* ── B3: Reviews redesign ── */
        body.city-viator .city-reviews-section {
          background: #fdf8f0;
          border-radius: 1rem;
          padding: 1.25rem;
        }

        @media (min-width: 768px) {
          body.city-viator .city-reviews-section {
            padding: 1.5rem 1.75rem;
          }
        }

        body.city-viator .city-review-card {
          background: #fff;
          border-radius: 0.875rem;
          border: 1px solid rgba(15, 23, 42, 0.09);
          padding: 1rem;
          display: flex;
          flex-direction: column;
          gap: 0.6rem;
        }

        body.city-viator .city-review-header {
          display: flex;
          align-items: flex-start;
          gap: 0.65rem;
        }

        body.city-viator .city-review-avatar {
          width: 2.2rem;
          height: 2.2rem;
          border-radius: 999px;
          background: #115e59;
          color: #fff;
          font-size: 0.9rem;
          font-weight: 800;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }

        body.city-viator .city-review-who {
          flex: 1;
          min-width: 0;
        }

        body.city-viator .city-review-name {
          font-size: 0.83rem;
          font-weight: 800;
          color: #0f172a;
          margin: 0;
          line-height: 1.25;
        }

        body.city-viator .city-review-date {
          font-size: 0.68rem;
          color: #94a3b8;
          margin: 0.1rem 0 0;
        }

        body.city-viator .city-review-stars {
          display: flex;
          gap: 0.1rem;
          flex-shrink: 0;
          padding-top: 0.15rem;
        }

        body.city-viator .city-review-stars svg {
          width: 0.82rem;
          height: 0.82rem;
        }

        body.city-viator .city-review-star--filled { color: #f59e0b; }
        body.city-viator .city-review-star--empty  { color: #e2e8f0; }

        body.city-viator .city-review-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 0.3rem;
        }

        body.city-viator .city-review-tag {
          border-radius: 999px;
          background: #dcfce7;
          color: #166534;
          font-size: 0.64rem;
          font-weight: 700;
          padding: 0.16rem 0.5rem;
        }

        body.city-viator .city-review-tag--event {
          background: #fef3c7;
          color: #92400e;
        }

        body.city-viator .city-review-title {
          font-size: 0.84rem;
          font-weight: 800;
          color: #1e293b;
          margin: 0;
          line-height: 1.3;
        }

        body.city-viator .city-review-body {
          font-size: 0.81rem;
          line-height: 1.6;
          color: #475569;
          margin: 0;
        }

        body.city-viator .city-review-footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 0.5rem;
          padding-top: 0.5rem;
          border-top: 1px solid rgba(15, 23, 42, 0.07);
          margin-top: auto;
        }

        body.city-viator .city-review-artist {
          font-size: 0.68rem;
          font-weight: 700;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          color: #64748b;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        body.city-viator .city-review-open {
          font-size: 0.72rem;
          font-weight: 800;
          color: #115e59;
          text-decoration: none;
          white-space: nowrap;
          flex-shrink: 0;
        }

        body.city-viator .city-review-open:hover { color: #0f766e; }

        body.city-viator .city-review-reply {
          border-radius: 0.5rem;
          background: #f8fafc;
          border: 1px solid rgba(15, 23, 42, 0.07);
          padding: 0.55rem 0.7rem;
        }

        body.city-viator .city-review-reply__label {
          font-size: 0.62rem;
          font-weight: 800;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: #94a3b8;
          margin: 0 0 0.22rem;
        }

        body.city-viator .city-review-reply__text {
          font-size: 0.77rem;
          color: #475569;
          line-height: 1.5;
          margin: 0;
        }

        /* ── C1: FAQ section — slate tint para ritmo visual ── */
        body.city-viator .city-faq-wrap {
          background: #f8fafc;
          border: 1px solid rgba(15, 23, 42, 0.07);
          border-radius: 1rem;
          padding: 1.25rem;
        }

        @media (min-width: 768px) {
          body.city-viator .city-faq-wrap {
            padding: 1.5rem 1.75rem;
          }
        }

        /* ── C2: Banner contextual ── */
        body.city-viator .city-context-banner {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: space-between;
          gap: 0.85rem;
          border-radius: 0.875rem;
          background: #0a2e1a;
          padding: 1.1rem 1.3rem;
          margin-bottom: 0;
        }

        body.city-viator .city-context-banner__copy {
          display: flex;
          flex-direction: column;
          gap: 0.22rem;
        }

        body.city-viator .city-context-banner__title {
          font-size: 0.9rem;
          font-weight: 800;
          color: #fff;
          margin: 0;
        }

        body.city-viator .city-context-banner__sub {
          font-size: 0.77rem;
          color: rgba(255, 255, 255, 0.6);
          margin: 0;
        }

        body.city-viator .city-context-banner__cta {
          display: inline-flex;
          align-items: center;
          gap: 0.4rem;
          border-radius: 999px;
          background: #16a34a;
          color: #fff;
          font-size: 0.78rem;
          font-weight: 800;
          letter-spacing: 0.02em;
          padding: 0.5rem 1.1rem;
          text-decoration: none;
          white-space: nowrap;
          transition: background 0.18s ease;
          flex-shrink: 0;
        }

        body.city-viator .city-context-banner__cta:hover {
          background: #15803d;
        }

        /* ── C3: Mobile filter toggle ── */
        body.city-viator .city-mobile-filter-btn {
          display: none;
        }

        @media (max-width: 899.98px) {
          body.city-viator .city-mobile-filter-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            width: 100%;
            border-radius: 999px;
            border: 1.5px solid rgba(15, 23, 42, 0.18);
            background: #fff;
            color: #334155;
            font-size: 0.82rem;
            font-weight: 800;
            padding: 0.55rem 1rem;
            margin-bottom: 0.65rem;
            cursor: pointer;
            transition: border-color 0.16s ease;
          }

          body.city-viator .city-mobile-filter-btn:hover {
            border-color: rgba(17, 94, 89, 0.4);
            color: #115e59;
          }

          body.city-viator .city-mobile-filter-badge {
            border-radius: 999px;
            background: #115e59;
            color: #fff;
            font-size: 0.65rem;
            font-weight: 900;
            padding: 0.1rem 0.45rem;
            min-width: 1.2rem;
            text-align: center;
          }

          body.city-viator .city-sticky-filters[data-mobile-hidden] {
            display: none !important;
          }
        }

        body.city-viator .city-mobile-filter-icon,
        body.city-viator .city-mobile-filter-chevron {
          width: 1rem;
          height: 1rem;
          flex-shrink: 0;
        }

        body.city-viator .city-mobile-filter-btn[aria-expanded="true"] .city-mobile-filter-chevron {
          transform: rotate(180deg);
        }

        body.city-viator .city-context-banner__cta svg {
          width: 1rem;
          height: 1rem;
          flex-shrink: 0;
        }

        /* ══════════════════════════════════════
           MOBILE FIXES  (max-width: 767px)
           ══════════════════════════════════════ */
        @media (max-width: 767px) {

          /* ── Hero: trust items más compactos ── */
          body.city-viator .city-hero-trust {
            gap: 0.25rem 0.9rem;
          }

          body.city-viator .city-hero-trust__item {
            font-size: 0.73rem;
          }

          /* ── H1 más pequeño para caber en 1-2 líneas ── */
          body.city-viator .city-results-intro h1 {
            font-size: clamp(1.65rem, 7vw, 2.4rem);
          }

          /* ── Reviews: contener el overflow ── */
          body.city-viator .city-reviews-section {
            overflow: hidden;
          }

          /* grid item en reviews necesita min-width: 0 */
          body.city-viator .city-review-card {
            min-width: 0;
            overflow: hidden;
          }

          /* artist span: ellipsis necesita min-width: 0 en el flex item */
          body.city-viator .city-review-artist {
            min-width: 0;
            flex: 1;
          }

          /* footer también necesita min-width: 0 para comprimir */
          body.city-viator .city-review-footer {
            min-width: 0;
          }

          /* ── Context banner: stack vertical en móvil ── */
          body.city-viator .city-context-banner {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.75rem;
          }

          body.city-viator .city-context-banner__cta {
            width: 100%;
            justify-content: center;
          }

          /* ── Quick chips: font más compacto ── */
          body.city-viator .city-quick-chip {
            font-size: 0.7rem;
            padding: 0.3rem 0.7rem;
          }

          /* ── FAQ: padding compacto ── */
          body.city-viator .city-faq-wrap {
            padding: 1rem;
          }
        }

        /* ── Rating row ── */
        body.city-viator .city-result-stars-row {
          display: inline-flex;
          align-items: center;
          gap: 0.22rem;
          margin-bottom: 0.3rem;
        }

        body.city-viator .city-result-stars-icon {
          color: #f59e0b;
          display: flex;
          align-items: center;
        }

        body.city-viator .city-result-stars-value {
          font-size: 0.82rem;
          font-weight: 800;
          color: #0a2e15;
        }

        body.city-viator .city-result-stars-count {
          font-size: 0.76rem;
          color: #64748b;
        }

        /* ── Activo dot ── */
        body.city-viator .city-result-active-dot {
          display: inline-block;
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: #22c55e;
          box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.22);
          flex-shrink: 0;
          align-self: center;
        }

        /* ── WhatsApp card button ── */
        body.city-viator .city-result-wa-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 2rem;
          height: 2rem;
          border-radius: 50%;
          background: #dcfce7;
          color: #16a34a;
          border: 1.5px solid rgba(22, 163, 74, 0.3);
          flex-shrink: 0;
          transition: background 0.15s ease, border-color 0.15s ease;
          text-decoration: none;
        }

        body.city-viator .city-result-wa-btn:hover {
          background: #bbf7d0;
          border-color: rgba(22, 163, 74, 0.55);
        }

        body.city-viator .city-result-wa-btn svg {
          width: 13px;
          height: 13px;
          flex-shrink: 0;
        }

        /* ── Card actions row ── */
        body.city-viator .city-result-card-actions {
          display: flex;
          align-items: center;
          gap: 0.45rem;
          flex-shrink: 0;
        }

        /* ── Cotizar select button ── */
        body.city-viator .mq-select-btn {
          display: inline-flex;
          align-items: center;
          gap: 0.25rem;
          border-radius: 999px;
          border: 1.5px solid rgba(17, 94, 89, 0.4);
          background: #fff;
          color: #115e59;
          font-size: 0.7rem;
          font-weight: 800;
          letter-spacing: 0.025em;
          padding: 0.35rem 0.75rem;
          cursor: pointer;
          transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
          white-space: nowrap;
        }

        body.city-viator .mq-select-btn:hover {
          background: rgba(17, 94, 89, 0.07);
          border-color: #115e59;
        }

        body.city-viator .mq-select-btn__icon {
          width: 11px;
          height: 11px;
          flex-shrink: 0;
        }

        body.city-viator .mq-select-btn__icon--check {
          display: none;
        }

        body.city-viator .mq-select-btn[aria-pressed="true"] {
          background: #115e59;
          border-color: #115e59;
          color: #fff;
        }

        body.city-viator .mq-select-btn[aria-pressed="true"] .mq-select-btn__icon--add {
          display: none;
        }

        body.city-viator .mq-select-btn[aria-pressed="true"] .mq-select-btn__icon--check {
          display: block;
        }

        body.city-viator .mq-select-btn[aria-pressed="true"] .mq-select-btn__label::before {
          content: 'Añadido';
        }

        body.city-viator .mq-select-btn[aria-pressed="false"] .mq-select-btn__label::before {
          content: 'Cotizar';
        }

        body.city-viator .mq-select-btn__label {
          font-size: 0;
        }

        body.city-viator .mq-select-btn__label::before {
          font-size: 0.7rem;
        }

        body.city-viator .mq-select-btn[disabled] {
          opacity: 0.4;
          cursor: not-allowed;
          pointer-events: none;
        }

        /* card selected ring */
        body.city-viator .city-result-card--selected {
          outline: 2.5px solid #115e59;
          outline-offset: 2px;
        }

        /* ── Sticky bar ── */
        .mq-bar {
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          z-index: 120;
          background: #0a2e1a;
          padding: 0.85rem 1rem;
          transform: translateY(100%);
          transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
          will-change: transform;
        }

        .mq-bar[aria-hidden="false"] {
          transform: translateY(0);
        }

        .mq-bar__inner {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 1rem;
        }

        .mq-bar__left {
          display: flex;
          align-items: center;
          gap: 0.55rem;
        }

        .mq-bar__bubble {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          min-width: 1.6rem;
          height: 1.6rem;
          border-radius: 999px;
          background: #22c55e;
          color: #fff;
          font-size: 0.85rem;
          font-weight: 800;
          padding: 0 0.35rem;
        }

        .mq-bar__text {
          color: rgba(255,255,255,0.8);
          font-size: 0.85rem;
        }

        .mq-bar__right {
          display: flex;
          align-items: center;
          gap: 0.55rem;
        }

        .mq-bar__cta {
          display: inline-flex;
          align-items: center;
          gap: 0.4rem;
          background: #22c55e;
          color: #fff;
          font-size: 0.85rem;
          font-weight: 800;
          padding: 0.55rem 1.1rem;
          border-radius: 999px;
          border: none;
          cursor: pointer;
          white-space: nowrap;
          transition: background 0.15s ease;
        }

        .mq-bar__cta:hover { background: #16a34a; }

        .mq-bar__cta-icon {
          width: 14px;
          height: 14px;
          flex-shrink: 0;
          fill: #fff;
        }

        .mq-bar__clear {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 2rem;
          height: 2rem;
          border-radius: 999px;
          border: 1px solid rgba(255,255,255,0.22);
          background: transparent;
          color: rgba(255,255,255,0.7);
          cursor: pointer;
          transition: background 0.15s ease;
        }

        .mq-bar__clear:hover { background: rgba(255,255,255,0.1); color: #fff; }
        .mq-bar__clear svg { width: 14px; height: 14px; }

        /* ── Modal ── */
        .mq-modal {
          position: fixed;
          inset: 0;
          z-index: 200;
          display: flex;
          align-items: flex-end;
          justify-content: center;
          pointer-events: none;
        }

        .mq-modal[aria-hidden="false"] {
          pointer-events: auto;
        }

        .mq-modal__backdrop {
          position: fixed;
          inset: 0;
          background: rgba(10, 26, 13, 0.6);
          backdrop-filter: blur(3px);
          opacity: 0;
          transition: opacity 0.22s ease;
        }

        .mq-modal[aria-hidden="false"] .mq-modal__backdrop {
          opacity: 1;
        }

        .mq-modal__panel {
          position: relative;
          z-index: 1;
          background: #fff;
          width: 100%;
          max-width: 540px;
          max-height: 92vh;
          overflow-y: auto;
          border-radius: 20px 20px 0 0;
          padding: 0 0 2rem;
          transform: translateY(100%);
          transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @media (min-width: 640px) {
          .mq-modal {
            align-items: center;
            padding: 1rem;
          }
          .mq-modal__panel {
            border-radius: 20px;
            transform: translateY(20px) scale(0.97);
            opacity: 0;
            transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
                        opacity 0.18s ease;
          }
          .mq-modal[aria-hidden="false"] .mq-modal__panel {
            transform: translateY(0) scale(1);
            opacity: 1;
          }
        }

        .mq-modal[aria-hidden="false"] .mq-modal__panel {
          transform: translateY(0);
        }

        .mq-modal__head {
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          gap: 1rem;
          padding: 1.4rem 1.4rem 0.8rem;
          border-bottom: 1px solid rgba(15,23,42,0.08);
          position: sticky;
          top: 0;
          background: #fff;
          z-index: 1;
        }

        .mq-modal__kicker {
          font-size: 0.68rem;
          font-weight: 800;
          letter-spacing: 0.1em;
          text-transform: uppercase;
          color: #4a7a5a;
          margin: 0 0 0.2rem;
        }

        .mq-modal__title {
          font-family: 'Playfair Display', Georgia, serif;
          font-size: 1.35rem;
          font-weight: 800;
          color: #0a1a0d;
          margin: 0;
          line-height: 1.2;
        }

        .mq-modal__close {
          flex-shrink: 0;
          width: 2rem;
          height: 2rem;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border-radius: 999px;
          border: 1px solid rgba(15,23,42,0.12);
          background: transparent;
          color: #64748b;
          cursor: pointer;
          margin-top: 0.1rem;
        }

        .mq-modal__close:hover { background: #f1f5f9; color: #0f172a; }
        .mq-modal__close svg { width: 14px; height: 14px; }

        .mq-modal__chips {
          display: flex;
          flex-wrap: wrap;
          gap: 0.4rem;
          padding: 0.9rem 1.4rem;
          border-bottom: 1px solid rgba(15,23,42,0.06);
          min-height: 2.5rem;
        }

        .mq-chip {
          display: inline-flex;
          align-items: center;
          gap: 0.3rem;
          background: #f0fdf4;
          border: 1px solid rgba(22,101,52,0.22);
          color: #14532d;
          font-size: 0.72rem;
          font-weight: 700;
          padding: 0.25rem 0.6rem;
          border-radius: 999px;
        }

        .mq-chip__remove {
          background: none;
          border: none;
          padding: 0;
          margin: 0;
          cursor: pointer;
          color: #4a7a5a;
          display: inline-flex;
          line-height: 1;
        }

        .mq-chip__remove svg { width: 10px; height: 10px; }

        /* ── Form ── */
        .mq-form {
          padding: 1.1rem 1.4rem 0;
        }

        .mq-form__grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 0.85rem;
        }

        .mq-form__field { display: flex; flex-direction: column; gap: 0.3rem; }
        .mq-form__field--full { grid-column: 1 / -1; }

        .mq-form__label {
          font-size: 0.75rem;
          font-weight: 700;
          color: #374151;
        }

        .mq-form__req { color: #dc2626; }
        .mq-form__opt { color: #94a3b8; font-weight: 400; }

        .mq-form__input,
        .mq-form__textarea {
          border: 1.5px solid rgba(15,23,42,0.14);
          border-radius: 10px;
          padding: 0.6rem 0.75rem;
          font-size: 0.88rem;
          color: #0f172a;
          background: #fff;
          outline: none;
          transition: border-color 0.15s ease;
          font-family: inherit;
          width: 100%;
          box-sizing: border-box;
        }

        .mq-form__input:focus,
        .mq-form__textarea:focus {
          border-color: #115e59;
          box-shadow: 0 0 0 3px rgba(17, 94, 89, 0.1);
        }

        .mq-form__input.is-invalid,
        .mq-form__textarea.is-invalid {
          border-color: #dc2626;
        }

        .mq-form__textarea { resize: vertical; min-height: 80px; }

        .mq-form__note {
          font-size: 0.72rem;
          color: #94a3b8;
          line-height: 1.5;
          margin: 0.8rem 0 0.5rem;
        }

        .mq-form__error {
          font-size: 0.8rem;
          color: #dc2626;
          min-height: 1.2rem;
          margin-bottom: 0.5rem;
        }

        .mq-form__submit {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 0.5rem;
          background: #115e59;
          color: #fff;
          font-size: 0.95rem;
          font-weight: 800;
          padding: 0.85rem 1.5rem;
          border-radius: 999px;
          border: none;
          cursor: pointer;
          margin-top: 1rem;
          transition: background 0.15s ease;
        }

        .mq-form__submit:hover:not(:disabled) { background: #0a4540; }
        .mq-form__submit:disabled { opacity: 0.6; cursor: not-allowed; }

        .mq-submit-spinner {
          width: 18px;
          height: 18px;
          animation: mq-spin 0.8s linear infinite;
        }

        @keyframes mq-spin { to { transform: rotate(360deg); } }

        /* ── Success state ── */
        .mq-success {
          padding: 2.5rem 1.4rem;
          text-align: center;
        }

        .mq-success__icon {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 3.5rem;
          height: 3.5rem;
          border-radius: 50%;
          background: #dcfce7;
          color: #16a34a;
          margin: 0 auto 1rem;
        }

        .mq-success__icon svg { width: 1.75rem; height: 1.75rem; }

        .mq-success__title {
          font-family: 'Playfair Display', Georgia, serif;
          font-size: 1.5rem;
          font-weight: 800;
          color: #0a1a0d;
          margin: 0 0 0.5rem;
        }

        .mq-success__body {
          font-size: 0.9rem;
          color: #4b5563;
          margin: 0 0 1.5rem;
          line-height: 1.6;
        }

        .mq-success__close {
          display: inline-block;
          background: #f1f5f9;
          color: #374151;
          font-size: 0.85rem;
          font-weight: 700;
          padding: 0.6rem 1.5rem;
          border-radius: 999px;
          border: none;
          cursor: pointer;
        }

        /* ── Mobile overrides ── */
        @media (max-width: 479px) {
          .mq-form__grid { grid-template-columns: 1fr; }
          .mq-form__field--full { grid-column: 1; }
          body.city-viator .mq-select-btn { padding: 0.35rem 0.6rem; }
        }

        /* ── CTA publicar evento ── */
        .pe-landing-cta {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 1.5rem;
          background: #0a2e1a;
          border-radius: 18px;
          padding: 1.75rem 2rem;
          flex-wrap: wrap;
        }
        .pe-landing-cta__copy { flex: 1; min-width: 220px; }
        .pe-landing-cta__eyebrow {
          font-size: 0.7rem;
          font-weight: 800;
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: #86efac;
          margin: 0 0 0.35rem;
        }
        .pe-landing-cta__title {
          font-family: 'Playfair Display', Georgia, serif;
          font-size: 1.45rem;
          font-weight: 800;
          color: #f0fdf4;
          margin: 0 0 0.5rem;
          line-height: 1.2;
        }
        .pe-landing-cta__body {
          font-size: 0.88rem;
          color: #86efac;
          line-height: 1.55;
          margin: 0;
        }
        .pe-landing-cta__body strong { color: #d1fae5; }
        .pe-landing-cta__btn {
          display: inline-flex;
          align-items: center;
          gap: 0.5rem;
          background: #ffffff;
          color: #006847;
          font-size: 0.9rem;
          font-weight: 800;
          padding: 0.8rem 1.4rem;
          border-radius: 12px;
          text-decoration: none;
          white-space: nowrap;
          flex-shrink: 0;
          transition: background 0.15s;
        }
        .pe-landing-cta__btn:hover { background: #f0fdf4; }

        @media (max-width: 560px) {
          .pe-landing-cta { padding: 1.35rem 1.25rem; }
          .pe-landing-cta__btn { width: 100%; justify-content: center; }
        }
        /* ── Main: flex column para anclar bottom al fondo sin importar contenido ── */
        body.city-viator .city-result-main--viator {
          flex: 1;
          display: flex;
          flex-direction: column;
          gap: 0.38rem;
        }
        /* ── Bottom: siempre al fondo de la card, precio arriba, botones abajo ── */
        body.city-viator .city-result-bottom--viator {
          margin-top: auto;
          flex-direction: column;
          align-items: flex-start;
          gap: 0.55rem;
        }
        body.city-viator .city-result-card-actions {
          width: 100%;
          justify-content: flex-start;
        }
        body.city-viator .city-result-cta-pill {
          margin-left: auto;
        }

        /* ── CTA inline "Publicar evento" entre resultados ── */
        .city-pe-inline {
          grid-column: 1 / -1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 1rem;
          background: linear-gradient(135deg, #022c22 0%, #064e3b 100%);
          border-radius: 1rem;
          padding: 1.1rem 1.35rem;
          flex-wrap: wrap;
        }
        .city-pe-inline__copy { flex: 1; min-width: 180px; }
        .city-pe-inline__eyebrow {
          font-size: 0.67rem;
          font-weight: 800;
          letter-spacing: 0.09em;
          text-transform: uppercase;
          color: #6ee7b7;
          margin: 0 0 0.15rem;
        }
        .city-pe-inline__title {
          font-size: 1rem;
          font-weight: 800;
          color: #fff;
          margin: 0;
          line-height: 1.3;
        }
        .city-pe-inline__body {
          font-size: 0.8rem;
          color: #a7f3d0;
          margin: 0.22rem 0 0;
          line-height: 1.45;
        }
        .city-pe-inline__btn {
          display: inline-flex;
          align-items: center;
          gap: 0.4rem;
          border-radius: 999px;
          background: #fff;
          color: #064e3b;
          font-size: 0.8rem;
          font-weight: 800;
          padding: 0.6rem 1.25rem;
          text-decoration: none;
          white-space: nowrap;
          flex-shrink: 0;
          transition: background 0.15s ease;
        }
        .city-pe-inline__btn:hover { background: #d1fae5; }
        @media (max-width: 640px) {
          .city-pe-inline { flex-direction: column; align-items: flex-start; }
          .city-pe-inline__btn { width: 100%; justify-content: center; }
        }

      </style>
    @endpush

    @php
      $isCountry = $mode === 'country';
      $isZone = $mode === 'zone';
      $isCity = in_array($mode, ['city', 'city_category', 'zone'], true);
      $countryLabel = $countryName ?: 'Colombia';
      $countrySlugValue = $countrySlug ?: \Illuminate\Support\Str::slug($countryLabel);
      $countryLandingUrl = route('seo.landing.slug', ['slug' => $countrySlugValue]);
      $citySlugValue = $citySlug ?: ($cityName ? \Illuminate\Support\Str::slug($cityName) : null);

      $heroContextLabel = $isZone
        ? 'Zona local'
        : ($isCountry ? 'Pais' : ($isCity ? 'Ciudad' : 'Categoria'));

      $heroContextName = $isZone
        ? ($zoneName ? $zoneName.', '.$cityName : $cityName)
        : ($cityName ?: ($eventType?->name ?: $countryLabel));

      $scopeLabel = $zoneName ?: ($cityName ?: ($eventType?->name ?: $countryLabel));

      $currentPath = request()->url();
      $resultsDisplay = $totalResults >= 600 ? '600+' : number_format($totalResults, 0, ',', '.');
      $activeFilterCount = collect([
        $selectedFilters['event'] ?? null,
        $selectedFilters['city'] ?? null,
        $selectedFilters['service'] ?? null,
        $selectedFilters['budget'] ?? null,
      ])->filter()->count();
      $showCityFilter = ! $isCity && ! $isZone && $filterOptions['cities']->isNotEmpty();
@endphp

@php
  $publicFallbackLogoImage = asset('marketplace/assets/logo-wordmark-390.webp');
@endphp

    <main class="city-hero">
      <section class="city-results-shell city-results-shell--viator pt-4 pb-10 md:pt-5">
        <nav class="city-breadcrumbs" aria-label="Migas de pan" data-reveal>
          <a href="{{ route('home') }}">Inicio</a>
          <span class="city-breadcrumb-sep">/</span>
          <a href="{{ $countryLandingUrl }}">Mariachis en {{ $countryLabel }}</a>
          @if($cityName && $citySlugValue)
            <span class="city-breadcrumb-sep">/</span>
            <a href="{{ route('seo.landing.slug', ['slug' => $citySlugValue]) }}">Mariachis en {{ $cityName }}</a>
          @endif
          @if($zoneName)
            <span class="city-breadcrumb-sep">/</span>
            <span>{{ $zoneName }}</span>
          @elseif($eventType)
            <span class="city-breadcrumb-sep">/</span>
            <span>{{ $eventType->name }}</span>
          @endif
        </nav>

        <div class="city-results-intro" data-reveal>
          <div>
            @php
              $heroMinPrice = $profiles->getCollection()->whereNotNull('base_price')->min('base_price');
            @endphp

            <div class="city-results-eyebrow">
              @if($eventType)
                <span class="city-results-eyebrow__pill">{{ $eventType->name }}</span>
              @endif
              @if($cityName)
                <span class="city-results-eyebrow__pill">{{ $cityName }}</span>
              @endif
              @if($contextResults > 0)
                <span class="city-results-eyebrow__count">{{ $contextResults }} {{ $contextResults === 1 ? 'grupo disponible' : 'grupos disponibles' }}</span>
              @endif
              @if($lastUpdatedAt)
                <span class="city-results-eyebrow__count" title="Fecha del último anuncio actualizado en esta página">Actualizado el {{ $lastUpdatedAt->translatedFormat('d \d\e F \d\e Y') }}</span>
              @endif
            </div>

            <h1>{{ $h1 }}</h1>

            @if(isset($catalogZone) && $catalogZone && filled($catalogZone->description))
              <p class="city-zone-description">{{ $catalogZone->description }}</p>
            @endif

            <div class="city-hero-trust">
              @if($heroMinPrice)
                <span class="city-hero-trust__item">
                  <svg class="city-hero-trust__icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M1 3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1H1zm7 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/><path d="M0 5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V7a2 2 0 0 1-2-2H3z"/></svg>
                  Desde <strong>${{ number_format((float) $heroMinPrice, 0, ',', '.') }}</strong>
                </span>
              @endif
              <span class="city-hero-trust__item">
                <svg class="city-hero-trust__icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592z"/></svg>
                Contacto directo por WhatsApp
              </span>
              <span class="city-hero-trust__item">
                <svg class="city-hero-trust__icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M10.067.87a2.89 2.89 0 0 0-4.134 0l-.622.638-.89-.011a2.89 2.89 0 0 0-2.924 2.924l.01.89-.636.622a2.89 2.89 0 0 0 0 4.134l.637.622-.011.89a2.89 2.89 0 0 0 2.924 2.924l.89-.01.622.636a2.89 2.89 0 0 0 4.134 0l.622-.637.89.011a2.89 2.89 0 0 0 2.924-2.924l-.01-.89.636-.622a2.89 2.89 0 0 0 0-4.134l-.637-.622.011-.89a2.89 2.89 0 0 0-2.924-2.924l-.89.01-.622-.636zm.287 5.984-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708.708z"/></svg>
                Sin comisiones
              </span>
            </div>
          </div>
        </div>

        @if($filterOptions['events']->isNotEmpty())
          <div class="city-quick-chips" data-reveal>
            @foreach($filterOptions['events']->take(6) as $chip)
              <a
                href="{{ $currentPath }}?event={{ $chip['slug'] }}"
                class="city-quick-chip {{ ($selectedFilters['event'] ?? null) === $chip['slug'] ? 'is-active' : '' }}"
              >{{ $chip['name'] }}</a>
            @endforeach
            @if($activeFilterCount > 0)
              <a href="{{ $currentPath }}" class="city-quick-chip city-quick-chip--clear">Limpiar filtros</a>
            @endif
          </div>
        @endif

        <div class="city-filters-sentinel" data-city-filters-sentinel aria-hidden="true"></div>

        <button class="city-mobile-filter-btn" id="city-mobile-filter-toggle" type="button" aria-expanded="false" aria-controls="city-filter-panel">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="city-mobile-filter-icon"><path fill-rule="evenodd" d="M2.628 1.601C5.028 1.206 7.49 1 10 1s4.973.206 7.372.601a.75.75 0 0 1 .628.74v2.288a2.25 2.25 0 0 1-.659 1.59l-4.682 4.683a2.25 2.25 0 0 0-.659 1.59v3.037c0 .684-.31 1.33-.844 1.757l-1.937 1.55A.75.75 0 0 1 8 18.25v-5.757a2.25 2.25 0 0 0-.659-1.591L2.659 6.22A2.25 2.25 0 0 1 2 4.629V2.34a.75.75 0 0 1 .628-.74z" clip-rule="evenodd"/></svg>
          <span class="city-mobile-filter-label">Filtros</span>
          @if($activeFilterCount > 0)
            <span class="city-mobile-filter-badge">{{ $activeFilterCount }}</span>
          @endif
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="city-mobile-filter-chevron"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06z" clip-rule="evenodd"/></svg>
        </button>

        <div class="city-sticky-filters" id="city-filter-panel" data-reveal data-city-sticky-filters>
          <form method="GET" action="{{ $currentPath }}" class="city-controls-form">
            <div class="city-control">
              <label for="city-filter-event">Categoria</label>
              <select id="city-filter-event" name="event">
                <option value="">Todas</option>
                @foreach($filterOptions['events']->take(30) as $eventOption)
                  <option value="{{ $eventOption['slug'] }}" @selected($selectedFilters['event'] === $eventOption['slug'])>
                    {{ $eventOption['name'] }} ({{ $eventOption['count'] }})
                  </option>
                @endforeach
              </select>
            </div>

            @if($showCityFilter)
              <div class="city-control">
                <label for="city-filter-city">Ciudad</label>
                <select id="city-filter-city" name="city">
                  <option value="">Todas</option>
                  @foreach($filterOptions['cities']->take(30) as $cityOption)
                    <option value="{{ $cityOption['slug'] }}" @selected($selectedFilters['city'] === $cityOption['slug'])>
                      {{ $cityOption['name'] }} ({{ $cityOption['count'] }})
                    </option>
                  @endforeach
                </select>
              </div>
            @endif

            <div class="city-control">
              <label for="city-filter-service">Tipo</label>
              <select id="city-filter-service" name="service">
                <option value="">Todos</option>
                @foreach($filterOptions['services']->take(30) as $serviceOption)
                  <option value="{{ $serviceOption['slug'] }}" @selected($selectedFilters['service'] === $serviceOption['slug'])>
                    {{ $serviceOption['name'] }} ({{ $serviceOption['count'] }})
                  </option>
                @endforeach
              </select>
            </div>

            <div class="city-control">
              <label for="city-filter-budget">Precio</label>
              <select id="city-filter-budget" name="budget">
                <option value="">Todos</option>
                @foreach($filterOptions['budgets']->take(30) as $budgetOption)
                  <option value="{{ $budgetOption['slug'] }}" @selected($selectedFilters['budget'] === $budgetOption['slug'])>
                    {{ $budgetOption['name'] }} ({{ $budgetOption['count'] }})
                  </option>
                @endforeach
              </select>
            </div>

            <div class="city-controls-actions">
              <button type="submit" class="city-controls-submit">Aplicar</button>
              <a href="{{ $currentPath }}" class="city-reset-link">Limpiar</a>
            </div>
          </form>
        </div>

        <div class="city-controls-footer" data-reveal>
          <div class="city-controls-footer__meta">
            <p class="city-results-count">{{ $resultsDisplay }} resultados</p>
            <p class="city-results-note">Los ingresos pueden influir en este orden de clasificacion.</p>
          </div>

          <form method="GET" action="{{ $currentPath }}" class="city-sort-form">
            @if($selectedFilters['event'])
              <input type="hidden" name="event" value="{{ $selectedFilters['event'] }}">
            @endif
            @if($selectedFilters['city'])
              <input type="hidden" name="city" value="{{ $selectedFilters['city'] }}">
            @endif
            @if($selectedFilters['service'])
              <input type="hidden" name="service" value="{{ $selectedFilters['service'] }}">
            @endif
            @if($selectedFilters['budget'])
              <input type="hidden" name="budget" value="{{ $selectedFilters['budget'] }}">
            @endif

            <label for="city-sort">Ordenar por:</label>
            <select id="city-sort" name="sort" onchange="this.form.submit()">
              @foreach($sortOptions as $sortValue => $sortLabel)
                <option value="{{ $sortValue }}" @selected($selectedSort === $sortValue)>{{ $sortLabel }}</option>
              @endforeach
            </select>
          </form>
        </div>

        @php
          $ctaUrl = route('publish-event.create', array_filter([
            'ciudad' => $citySlug,
            'evento' => $eventType?->id,
          ]));
        @endphp

        <div data-results-panel class="city-results-panel city-results-panel--viator" data-view-mode="gallery" data-reveal>
          <div data-results-cards>
            <div class="city-results-grid city-results-grid--viator" data-results-grid>
              @forelse($profiles as $profile)
                @php
                  $profileName = $profile->business_name ?: $profile->user?->display_name;
                  $photo = $profile->photos->firstWhere('is_featured', true) ?? $profile->photos->first();
                  $photoUrl = $photo?->urlForVariant('thumb') ?: $publicFallbackLogoImage;
                  $profileUrl = route('mariachi.public.show', ['slug' => $profile->slug]);
                  $coverage = $profile->serviceAreas->pluck('city_name')->take(2)->join(' · ');
                  $priceLabel = $profile->base_price
                    ? 'Desde $'.number_format((float) $profile->base_price, 0, ',', '.')
                    : 'Cotizacion directa';
                  $isVip = $profile->hasPremiumMarketplaceBadge();
                  $reviewsCount = (int) ($profile->reviews_count ?? 0);
                  $avgRating = $reviewsCount > 0 ? round((float) ($profile->avg_rating ?? 0), 1) : null;
                  $isRecent = $profile->updated_at && $profile->updated_at->diffInDays(now()) <= 90;
                  $cardWaDigits = \App\Models\MariachiListing::normalizePhoneForUrl($profile->public_whatsapp);
                  $cardWaText = 'Hola, vi tu anuncio en Mariachis.co' . ($eventType ? ' para ' . mb_strtolower($eventType->name) : '') . ' y quiero cotizar.';
                  $cardWaUrl = $cardWaDigits ? 'https://wa.me/' . $cardWaDigits . '?text=' . rawurlencode($cardWaText) : null;
                @endphp

                <article
                  class="city-result-card city-result-card--viator {{ $isVip ? 'city-result-card--vip' : '' }}"
                  data-favorite-id="city-{{ $profile->id }}"
                  data-compare-id="{{ $profile->id }}"
                  data-listing-id="{{ $profile->id }}"
                  data-listing-name="{{ e($profileName) }}"
                  data-card-url="{{ $profileUrl }}"
                  role="link"
                  tabindex="0"
                  aria-label="Abrir anuncio de {{ $profileName }}"
                >
                  <a href="{{ $profileUrl }}" class="city-result-media city-result-media--viator">
                    <img src="{{ $photoUrl }}" alt="{{ $profileName }}" class="h-full w-full object-cover"
                      width="480" height="300"
                      loading="{{ $loop->first ? 'eager' : 'lazy' }}"
                      fetchpriority="{{ $loop->first ? 'high' : 'auto' }}"
                      decoding="{{ $loop->first ? 'sync' : 'async' }}"
                    />
                    @if($isVip)
                      <span class="city-result-ribbon">{{ $profile->marketplaceBadgeLabel() }}</span>
                    @endif
                    <span class="city-result-badge">{{ $profile->publicCityLabel() }}</span>
                  </a>

                  <button data-favorite="city-{{ $profile->id }}" class="favorite-btn city-result-favorite" aria-label="Guardar en favoritos" aria-pressed="false">
                    <svg data-fav-icon xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" /></svg>
                  </button>

                  <div class="city-result-main city-result-main--viator">
                    <div class="city-result-topline">
                      @if($isVip)
                        <span class="city-result-chip city-result-chip--vip">Destacado</span>
                      @elseif($profile->profile_completion >= 75)
                        <span class="city-result-chip city-result-chip--complete">Perfil completo</span>
                      @else
                        <span class="city-result-chip city-result-chip--new">Nuevo</span>
                      @endif
                      @if($isRecent)
                        <span class="city-result-active-dot" title="Actualizado recientemente"></span>
                      @endif
                    </div>

                    <h3><a href="{{ $profileUrl }}" class="hover:underline">{{ $profileName }}</a></h3>

                    @if($avgRating !== null)
                      <div class="city-result-stars-row">
                        <span class="city-result-stars-icon" aria-hidden="true">
                          <svg viewBox="0 0 12 12" fill="currentColor" width="11" height="11"><path d="M6 .5l1.545 3.13 3.455.502-2.5 2.437.59 3.44L6 8.385l-3.09 1.624.59-3.44L1 4.132l3.455-.502z"/></svg>
                        </span>
                        <span class="city-result-stars-value">{{ number_format($avgRating, 1, '.', '') }}</span>
                        <span class="city-result-stars-count">({{ $reviewsCount }} {{ $reviewsCount === 1 ? 'reseña' : 'reseñas' }})</span>
                      </div>
                    @endif

                    <p class="city-result-description">{{ $profile->short_description ?: 'Mariachi disponible para serenatas, bodas y eventos privados.' }}</p>
                    <p class="city-result-coverage">{{ $coverage ?: $profile->publicCityLabel('Cobertura nacional') }}</p>

                    <div class="city-result-meta">
                      @forelse($profile->eventTypes->take(2) as $eventTypeItem)
                        <span>{{ $eventTypeItem->name }}</span>
                      @empty
                        <span>Eventos varios</span>
                      @endforelse
                    </div>

                    <div class="city-result-bottom city-result-bottom--viator">
                      <div class="city-result-price-wrap">
                        <p class="city-result-price">{{ $priceLabel }}</p>
                      </div>
                      <div class="city-result-card-actions">
                        @if($cardWaUrl)
                          <a
                            href="{{ $cardWaUrl }}"
                            target="_blank"
                            rel="noopener noreferrer"
                            class="city-result-wa-btn"
                            aria-label="WhatsApp de {{ e($profileName) }}"
                            title="Contactar por WhatsApp"
                            onclick="event.stopPropagation()"
                          >
                            <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592z"/></svg>
                          </a>
                        @endif
                        <button
                          type="button"
                          class="mq-select-btn"
                          data-mq-select
                          aria-pressed="false"
                          aria-label="Añadir {{ e($profileName) }} a cotización múltiple"
                        >
                          <svg class="mq-select-btn__icon mq-select-btn__icon--add" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 2a.75.75 0 0 1 .75.75v4.5h4.5a.75.75 0 0 1 0 1.5h-4.5v4.5a.75.75 0 0 1-1.5 0v-4.5h-4.5a.75.75 0 0 1 0-1.5h4.5v-4.5A.75.75 0 0 1 8 2z"/></svg>
                          <svg class="mq-select-btn__icon mq-select-btn__icon--check" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207z" clip-rule="evenodd"/></svg>
                          <span class="mq-select-btn__label">Cotizar</span>
                        </button>
                        <a href="{{ $profileUrl }}" class="city-result-cta-pill" tabindex="-1" aria-hidden="true">Ver perfil</a>
                      </div>
                    </div>
                  </div>
                </article>

                @if($loop->index === 3 && $contextResults >= 4)
                  <div class="city-pe-inline" role="complementary">
                    <div class="city-pe-inline__copy">
                      <p class="city-pe-inline__eyebrow">¿Ya tienes fecha?</p>
                      <p class="city-pe-inline__title">Publica tu evento gratis</p>
                      <p class="city-pe-inline__body">Describe lo que necesitas y los grupos de <strong style="color:#d1fae5">{{ $heroContextName ?: 'tu ciudad' }}</strong> te contactan directamente por WhatsApp.</p>
                    </div>
                    <button type="button" class="city-pe-inline__btn" data-open-pe-modal onclick="event.stopPropagation()">
                      Publicar mi evento
                      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                    </button>
                  </div>
                @endif

              @empty
                <div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-5 text-sm text-slate-600">
                  No encontramos anuncios en este momento para {{ $heroContextName ?: 'esta zona' }}.
                </div>
              @endforelse
            </div>

            @if($profiles->hasPages())
              <div class="mt-6 border-t border-slate-200 pt-4">
                {{ $profiles->onEachSide(1)->links('vendor.pagination.marketplace') }}
              </div>
            @endif
          </div>
        </div>
      </section>

      @if($isCountry)
        <section class="layout-shell pb-10" data-reveal>
          <div class="surface rounded-2xl border border-slate-200 px-4 py-5 md:px-6">
            <div class="mb-4">
              <p class="text-xs font-bold uppercase tracking-[0.12em] text-brand-600">Exploracion nacional</p>
              <h2 class="mt-1 text-2xl font-extrabold text-slate-900 md:text-3xl">Ciudades destacadas en {{ $countryLabel }}</h2>
            </div>

            @if($featuredCountryCities->isNotEmpty())
              <div class="artist-seo-chip-cloud">
                @foreach($featuredCountryCities as $city)
                  <a href="{{ route('seo.landing.slug', ['slug' => $city['slug']]) }}" class="artist-seo-chip">Mariachis en {{ $city['name'] }} ({{ $city['count'] }})</a>
                @endforeach
              </div>
            @else
              <div class="rounded-xl border border-slate-200 bg-slate-50 px-4 py-4 text-sm text-slate-600">
                Aun no hay suficientes ciudades publicadas para destacar.
              </div>
            @endif
          </div>
        </section>

        <section class="layout-shell pb-10" data-reveal>
          <div class="surface rounded-2xl border border-slate-200 px-4 py-5 md:px-6">
            <div class="mb-4">
              <p class="text-xs font-bold uppercase tracking-[0.12em] text-brand-600">Cobertura por ciudad</p>
              <h2 class="mt-1 text-2xl font-extrabold text-slate-900 md:text-3xl">Nuestras ciudades en {{ $countryLabel }}</h2>
            </div>

            @if($countryCitiesByLetter->isNotEmpty())
              <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
                @foreach($countryCitiesByLetter as $letter => $cities)
                  <article class="rounded-xl border border-slate-200 bg-white px-4 py-4">
                    <h3 class="text-sm font-extrabold uppercase tracking-[0.12em] text-brand-700">{{ $letter }}</h3>
                    <div class="mt-3 flex flex-wrap gap-2">
                      @foreach($cities as $city)
                        <a href="{{ route('seo.landing.slug', ['slug' => $city['slug']]) }}" class="artist-seo-chip">{{ $city['name'] }}</a>
                      @endforeach
                    </div>
                  </article>
                @endforeach
              </div>
            @else
              <div class="rounded-xl border border-slate-200 bg-slate-50 px-4 py-4 text-sm text-slate-600">
                No hay ciudades disponibles para construir el indice.
              </div>
            @endif
          </div>
        </section>
      @elseif($nearbyZones->isNotEmpty() && $citySlugValue)
        <section class="layout-shell pb-10" data-reveal>
          <div class="surface rounded-2xl border border-slate-200 px-4 py-5 md:px-6">
            <div class="mb-4 flex flex-wrap items-end justify-between gap-3">
              <div>
                <p class="text-xs font-bold uppercase tracking-[0.12em] text-brand-600">Exploracion local</p>
                <h2 class="mt-1 text-2xl font-extrabold text-slate-900 md:text-3xl">Otras zonas cercanas</h2>
              </div>
              @if($citySlugValue)
                <a href="{{ route('seo.landing.slug', ['slug' => $citySlugValue]) }}" class="text-sm font-bold text-brand-700 hover:text-brand-600">Ver toda {{ $cityName }}</a>
              @endif
            </div>

            <div class="artist-seo-chip-cloud">
              @foreach($nearbyZones as $zone)
                <a href="{{ route('seo.landing.city-category', ['citySlug' => $citySlugValue, 'scopeSlug' => $zone['slug']]) }}" class="artist-seo-chip">{{ $zone['name'] }} ({{ $zone['count'] }})</a>
              @endforeach
            </div>
          </div>
        </section>
      @endif

      {{-- $ctaUrl definido antes del grid de resultados --}}
      @if($eventType && $contextResults > 0)
        <section class="layout-shell pb-6" data-reveal>
          <div class="city-context-banner">
            <div class="city-context-banner__copy">
              <p class="city-context-banner__title">{{ $contextResults }} mariachis disponibles en {{ $cityName }} para {{ mb_strtolower($eventType->name) }}</p>
              <p class="city-context-banner__sub">Publica tu evento y recibe contacto directo por WhatsApp.</p>
            </div>
            <button type="button" class="city-context-banner__cta" data-open-pe-modal>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/></svg>
              Publicar mi evento
            </button>
          </div>
        </section>
      @endif
      <section class="layout-shell pb-8" data-reveal>
        <div class="pe-landing-cta">
          <div class="pe-landing-cta__copy">
            <p class="pe-landing-cta__eyebrow">¿Prefieres que ellos lleguen a ti?</p>
            <h2 class="pe-landing-cta__title">Publica tu evento gratis</h2>
            <p class="pe-landing-cta__body">
              Describe lo que necesitas y los grupos disponibles en
              <strong>{{ $heroContextName ?: 'tu ciudad' }}</strong> te contactan directamente por WhatsApp.
              Sin intermediarios, sin comisión.
            </p>
          </div>
          <button type="button" class="pe-landing-cta__btn" data-open-pe-modal>
            Publicar mi evento
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
          </button>
        </div>
      </section>

      <section class="layout-shell pb-10" data-reveal>
        <div class="city-reviews-section">
          <div class="mb-5">
            <p class="text-xs font-bold uppercase tracking-[0.12em] text-brand-600">Confianza local</p>
            <h2 class="mt-1 text-2xl font-extrabold text-slate-900 md:text-3xl">Opiniones en {{ $scopeLabel }}</h2>
            <p class="mt-1 text-sm text-slate-500">Experiencias reales de clientes que contrataron mariachis para sus eventos.</p>
          </div>

          @if($cityReviews->isNotEmpty())
            <div class="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
              @foreach($cityReviews as $review)
                @php
                  $reviewerName    = $review->clientUser?->display_name ?: 'Cliente';
                  $reviewerInitial = strtoupper(mb_substr($reviewerName, 0, 1));
                  $reviewMariachiName = $review->mariachiListing?->title
                    ?: $review->mariachiProfile?->business_name
                    ?: $review->mariachiProfile?->user?->display_name;
                  $defaultReviewListing = $review->mariachiProfile?->resolveDefaultListing();
                  $reviewProfileUrl = $review->mariachiListing?->slug
                    ? route('mariachi.public.show', ['slug' => $review->mariachiListing->slug])
                    : ($defaultReviewListing?->isApprovedForMarketplace() && $defaultReviewListing?->slug
                      ? route('mariachi.public.show', ['slug' => $defaultReviewListing->slug])
                      : null);
                @endphp

                <article class="city-review-card">
                  {{-- Header: avatar + nombre + fecha + estrellas --}}
                  <div class="city-review-header">
                    <span class="city-review-avatar" aria-hidden="true">{{ $reviewerInitial }}</span>
                    <div class="city-review-who">
                      <p class="city-review-name">{{ $reviewerName }}</p>
                      <p class="city-review-date">{{ $review->created_at->format('d M, Y') }}</p>
                    </div>
                    <div class="city-review-stars" aria-label="{{ $review->rating }} de 5 estrellas">
                      @for($i = 1; $i <= 5; $i++)
                        <svg class="{{ $i <= $review->rating ? 'city-review-star--filled' : 'city-review-star--empty' }}" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
                          @if($i <= $review->rating)
                            <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
                          @else
                            <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
                          @endif
                        </svg>
                      @endfor
                    </div>
                  </div>

                  {{-- Tags de verificación y evento --}}
                  @if($review->verification_label || $review->event_type)
                    <div class="city-review-tags">
                      @if($review->verification_label)
                        <span class="city-review-tag">{{ $review->verification_label }}</span>
                      @endif
                      @if($review->event_type)
                        <span class="city-review-tag city-review-tag--event">{{ $review->event_type }}</span>
                      @endif
                    </div>
                  @endif

                  {{-- Título y cuerpo --}}
                  @if($review->title)
                    <p class="city-review-title">{{ $review->title }}</p>
                  @endif
                  <p class="city-review-body">{{ \Illuminate\Support\Str::limit($review->comment, 200) }}</p>

                  {{-- Fotos --}}
                  @if($review->photos->isNotEmpty())
                    <div class="grid grid-cols-3 gap-1.5">
                      @foreach($review->photos->take(3) as $photo)
                        <a href="{{ asset('storage/'.$photo->path) }}" target="_blank" rel="noopener" class="block overflow-hidden rounded-lg">
                          <img src="{{ asset('storage/'.$photo->path) }}" alt="Foto de evento" class="h-16 w-full object-cover" loading="lazy" />
                        </a>
                      @endforeach
                    </div>
                  @endif

                  {{-- Respuesta del mariachi --}}
                  @if($review->mariachi_reply && $review->mariachi_reply_visible)
                    <div class="city-review-reply">
                      <p class="city-review-reply__label">Respuesta del mariachi</p>
                      <p class="city-review-reply__text">{{ \Illuminate\Support\Str::limit($review->mariachi_reply, 140) }}</p>
                    </div>
                  @endif

                  {{-- Footer: nombre del mariachi + link --}}
                  <div class="city-review-footer">
                    <span class="city-review-artist">{{ $reviewMariachiName ?: 'Mariachi' }}</span>
                    @if($reviewProfileUrl)
                      <a href="{{ $reviewProfileUrl }}" class="city-review-open">Ver perfil</a>
                    @endif
                  </div>
                </article>
              @endforeach
            </div>
          @else
            <div class="rounded-xl border border-amber-100 bg-white px-4 py-4">
              <p class="text-sm font-bold text-slate-900">Aun no hay opiniones publicas aqui</p>
              <p class="mt-1 text-sm text-slate-500">Las resenas aparecen despues de ser verificadas. Contacta directamente a los grupos para consultar sus referencias.</p>
            </div>
          @endif
        </div>
      </section>

      <section class="layout-shell pb-10" data-reveal data-listing-recents-shell data-resolve-url="{{ route('public.listings.resolve') }}" data-current-listing-id="0" data-account-url="{{ route('public.collections.recents') }}" data-has-server-items="{{ $recentViews->isNotEmpty() ? 'true' : 'false' }}">
        <div class="surface rounded-2xl border border-slate-200 px-4 py-5 md:px-6">
          <div class="mb-4 flex flex-wrap items-end justify-between gap-3">
            <div>
              <p class="text-xs font-bold uppercase tracking-[0.12em] text-brand-600">Personalizacion</p>
              <h2 class="mt-1 text-2xl font-extrabold text-slate-900 md:text-3xl">Vistos recientemente</h2>
            </div>
            <a href="{{ route('public.collections.recents') }}" class="text-sm font-bold text-brand-600 hover:text-brand-700">Abrir historial</a>
          </div>

          @if($recentViews->isNotEmpty())
            <div class="featured-carousel-shell mt-4" data-featured-carousel-shell data-recent-carousel-wrap>
              <button type="button" class="featured-carousel-btn featured-carousel-btn--left" data-featured-scroll="left" aria-label="Desplazar vistos recientemente a la izquierda">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
                </svg>
              </button>
              <button type="button" class="featured-carousel-btn featured-carousel-btn--right" data-featured-scroll="right" aria-label="Desplazar vistos recientemente a la derecha">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                </svg>
              </button>

              <div data-featured-carousel class="featured-carousel-track" data-recent-track>
              @foreach($recentViews as $recentView)
                @php
                  $recentListing = $recentView->mariachiListing ?: $recentView->mariachiProfile?->resolveDefaultListing();
                  $recentName = $recentListing?->business_name ?: $recentListing?->user?->display_name;
                  $recentPhoto = $recentListing?->photos?->firstWhere('is_featured', true) ?? $recentListing?->photos?->first();
                  $recentPhotoUrl = $recentPhoto?->urlForVariant('thumb') ?: $publicFallbackLogoImage;
                  $recentEvents = $recentListing?->eventTypes?->pluck('name')->take(2)->join(' · ');
                @endphp
                @if($recentListing?->slug)
                  <article class="featured-promo-card featured-promo-card--listing is-clickable-card">
                    <a class="featured-promo-media" href="{{ route('mariachi.public.show', ['slug' => $recentListing->slug]) }}">
                      <img src="{{ $recentPhotoUrl }}" alt="{{ $recentName }}" loading="lazy" />
                      <span class="featured-promo-chip">{{ $recentListing->publicCityLabel() }}</span>
                    </a>
                    <div class="featured-promo-body">
                      <p class="featured-promo-kicker">{{ $recentEvents ?: 'Disponible para eventos' }}</p>
                      <h3 class="featured-promo-title">{{ $recentName }}</h3>
                      @if($recentListing->short_description)
                        <p style="font-size:0.78rem;color:#64748b;margin:0.25rem 0 0;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">{{ $recentListing->short_description }}</p>
                      @endif
                    </div>
                    <div class="featured-promo-footer">
                      <div class="featured-promo-bottom">
                        <strong>{{ $recentListing->base_price ? 'Desde $'.number_format((float) $recentListing->base_price, 0, ',', '.') : 'Cotizacion directa' }}</strong>
                        <a href="{{ route('mariachi.public.show', ['slug' => $recentListing->slug]) }}">Ver anuncio</a>
                      </div>
                    </div>
                  </article>
                  @endif
              @endforeach
              </div>
            </div>
            <article class="listing-opinion-empty mt-4 hidden" data-listing-recents-empty>
              <p class="text-sm font-bold text-slate-900">Aun no hay historial reciente en este navegador</p>
              <p class="mt-1 text-sm text-slate-600">Cuando visites otros anuncios activos, apareceran aqui automaticamente.</p>
            </article>
          @else
            <div class="featured-carousel-shell mt-4 hidden" data-featured-carousel-shell data-recent-carousel-wrap>
              <button type="button" class="featured-carousel-btn featured-carousel-btn--left" data-featured-scroll="left" aria-label="Desplazar vistos recientemente a la izquierda">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
                </svg>
              </button>
              <button type="button" class="featured-carousel-btn featured-carousel-btn--right" data-featured-scroll="right" aria-label="Desplazar vistos recientemente a la derecha">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
                </svg>
              </button>
              <div data-featured-carousel class="featured-carousel-track" data-recent-track></div>
            </div>
            <article class="listing-opinion-empty mt-4" data-listing-recents-empty>
              <p class="text-sm font-bold text-slate-900">Aun no hay historial reciente en este navegador</p>
              <p class="mt-1 text-sm text-slate-600">Cuando visites otros anuncios activos, apareceran aqui automaticamente.</p>
            </article>
          @endif
        </div>
      </section>

      <section class="layout-shell pb-10" data-reveal>
        <div class="city-faq-wrap">
          <div class="mb-4">
            <p class="text-xs font-bold uppercase tracking-[0.12em] text-brand-600">Ayuda rapida</p>
            <h2 class="mt-1 text-2xl font-extrabold text-slate-900 md:text-3xl">Preguntas frecuentes</h2>
          </div>

          <div data-accordion class="space-y-3">
            @foreach($faqItems as $index => $faq)
              <div data-accordion-item class="overflow-hidden rounded-xl border border-slate-200 bg-white">
                <button data-accordion-trigger aria-expanded="false" aria-controls="city-faq-{{ $index }}" class="flex w-full items-center justify-between gap-3 px-4 py-3.5 text-left text-sm font-bold text-slate-900" type="button">
                  {{ $faq['question'] }}
                  <svg data-accordion-icon class="city-faq-chevron" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                    <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06z" clip-rule="evenodd"/>
                  </svg>
                </button>
                <div id="city-faq-{{ $index }}" class="hidden border-t border-slate-200 px-4 py-3 text-sm text-slate-600">
                  {{ $faq['answer'] }}
                </div>
              </div>
            @endforeach
          </div>
        </div>
      </section>

      <section class="layout-shell pb-10" data-reveal>
        <div class="artist-seo-hub">
          <div class="artist-seo-hub__head">
            <div>
              <p class="text-xs font-bold uppercase tracking-[0.15em] text-brand-600">Más búsquedas</p>
              <h2 class="mt-2 text-3xl font-extrabold tracking-[-0.01em] text-slate-900 md:text-4xl">Busquedas populares de mariachis</h2>
            </div>
          </div>

          <div class="artist-seo-tabs" data-tabs>
            <div class="artist-seo-tabs__nav" role="tablist" aria-label="Busquedas populares">
              <button type="button" class="artist-seo-tab tab-idle" data-tab-target="seo-cities">Ciudades populares</button>
              <button type="button" class="artist-seo-tab tab-idle" data-tab-target="seo-events">Eventos frecuentes</button>
              <button type="button" class="artist-seo-tab tab-idle" data-tab-target="seo-price">Por presupuesto</button>
            </div>

            <div data-tab-panel="seo-cities" class="artist-seo-tabs__panel">
              <div class="artist-seo-chip-cloud">
                @forelse($popularCities as $city)
                  <a href="{{ route('seo.landing.slug', ['slug' => $city['slug']]) }}" class="artist-seo-chip">Mariachis en {{ $city['name'] }}</a>
                @empty
                  <span class="artist-seo-chip opacity-70">Sin datos suficientes todavia</span>
                @endforelse
              </div>
            </div>

            <div data-tab-panel="seo-events" class="artist-seo-tabs__panel hidden">
              <div class="artist-seo-chip-cloud">
                @forelse($popularEvents->where('active_profiles_count', '>', 0) as $event)
                  <a href="{{ route('seo.landing.slug', ['slug' => \Illuminate\Support\Str::slug($event->name)]) }}" class="artist-seo-chip">{{ $event->name }} ({{ $event->active_profiles_count }})</a>
                @empty
                  <span class="artist-seo-chip opacity-70">Sin datos suficientes todavia</span>
                @endforelse
              </div>
            </div>

            <div data-tab-panel="seo-price" class="artist-seo-tabs__panel hidden">
              <div class="artist-seo-chip-cloud">
                @forelse($popularBudgetRanges->where('active_profiles_count', '>', 0) as $range)
                  <span class="artist-seo-chip">{{ $range->name }} ({{ $range->active_profiles_count }})</span>
                @empty
                  <span class="artist-seo-chip opacity-70">Sin datos suficientes todavia</span>
                @endforelse
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="layout-shell pb-14" data-reveal>
        <div class="surface rounded-2xl border border-slate-200 px-4 py-5 md:px-6">
          <div class="mb-4 flex flex-wrap items-end justify-between gap-3">
            <div>
              <p class="text-xs font-bold uppercase tracking-[0.12em] text-brand-600">Contenido editorial</p>
              <h2 class="mt-1 text-2xl font-extrabold text-slate-900 md:text-3xl">Artículos sobre mariachis en {{ $scopeLabel }}</h2>
            </div>
            <a href="{{ route('blog.index') }}" class="text-sm font-bold text-brand-700 hover:text-brand-600">Ver blog completo</a>
          </div>

          @if($relatedBlogPosts->isNotEmpty())
            <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
              @foreach($relatedBlogPosts as $post)
                @php
                  $cityLabel = $post->primary_city_name ?: ($cityName ?: 'Colombia');
                  $zoneLabel = $post->primary_zone_name;
                  $eventLabel = $post->eventTypes->pluck('name')->take(2)->join(' · ') ?: ($post->primary_event_type_name ?: 'Blog');
                @endphp
                <article class="featured-promo-card">
                  <a href="{{ route('blog.show', ['slug' => $post->slug]) }}" class="featured-promo-media">
                    <img src="{{ $post->featured_image ? asset('storage/'.$post->featured_image) : $publicFallbackLogoImage }}" alt="{{ $post->title }}" />
                    <span class="featured-promo-chip">{{ $cityLabel }}</span>
                  </a>
                  <div class="featured-promo-body">
                    <p class="featured-promo-kicker">{{ $eventLabel }}{{ $zoneLabel ? ' · '.$zoneLabel : '' }}</p>
                    <h3 class="featured-promo-title">{{ $post->title }}</h3>
                  </div>
                  <div class="featured-promo-footer">
                    <p class="featured-promo-meta">{{ $post->excerpt ?: 'Recurso local para planear y contratar mariachis con mejor contexto.' }}</p>
                    <div class="featured-promo-bottom">
                      <strong>Articulo</strong>
                      <a href="{{ route('blog.show', ['slug' => $post->slug]) }}">Leer</a>
                    </div>
                  </div>
                </article>
              @endforeach
            </div>
          @else
            <div class="rounded-xl border border-slate-200 bg-slate-50 px-4 py-4">
              <p class="text-sm font-bold text-slate-900">Aun no hay articulos para este contexto</p>
              <p class="mt-1 text-sm text-slate-600">Cuando publiquemos contenidos locales como "Los mejores mariachis para bodas en {{ $scopeLabel }}", apareceran aqui.</p>
            </div>
          @endif
        </div>
      </section>
    </main>

    {{-- ── Cotización múltiple: sticky bar ── --}}
    <div id="mq-bar" class="mq-bar" aria-hidden="true" aria-live="polite">
      <div class="mq-bar__inner layout-shell">
        <div class="mq-bar__left">
          <span class="mq-bar__bubble" id="mq-bar-count">0</span>
          <span class="mq-bar__text">grupo<span id="mq-bar-plural">s</span> seleccionado<span id="mq-bar-plural2">s</span></span>
        </div>
        <div class="mq-bar__right">
          <button type="button" class="mq-bar__cta" id="mq-open-modal">
            <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="mq-bar__cta-icon"><path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326z"/></svg>
            Pedir cotización
          </button>
          <button type="button" class="mq-bar__clear" id="mq-clear" aria-label="Deseleccionar todos">
            <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>
          </button>
        </div>
      </div>
    </div>

    {{-- ── Cotización múltiple: modal ── --}}
    <div id="mq-modal" class="mq-modal" role="dialog" aria-modal="true" aria-hidden="true" aria-labelledby="mq-modal-title">
      <div class="mq-modal__backdrop" id="mq-modal-backdrop"></div>
      <div class="mq-modal__panel">

        {{-- Head --}}
        <div class="mq-modal__head">
          <div>
            <p class="mq-modal__kicker">Cotización múltiple</p>
            <h2 class="mq-modal__title" id="mq-modal-title">Pedir precio a <span id="mq-modal-count">0</span> grupo<span id="mq-modal-count-plural">s</span></h2>
          </div>
          <button type="button" class="mq-modal__close" id="mq-modal-close" aria-label="Cerrar">
            <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>
          </button>
        </div>

        {{-- Selected chips --}}
        <div class="mq-modal__chips" id="mq-modal-chips" aria-label="Grupos seleccionados"></div>

        {{-- Form --}}
        <form id="mq-form" novalidate class="mq-form" autocomplete="off">
          @csrf
          <div class="mq-form__grid">
            <div class="mq-form__field mq-form__field--full">
              <label class="mq-form__label" for="mq-name">Tu nombre <span class="mq-form__req" aria-hidden="true">*</span></label>
              <input type="text" id="mq-name" name="client_name" class="mq-form__input" placeholder="Ej: María González" required maxlength="100" autocomplete="name" />
            </div>
            <div class="mq-form__field">
              <label class="mq-form__label" for="mq-phone">WhatsApp / Teléfono <span class="mq-form__req" aria-hidden="true">*</span></label>
              <input type="tel" id="mq-phone" name="client_phone" class="mq-form__input" placeholder="Ej: 3001234567" required maxlength="30" autocomplete="tel" />
            </div>
            <div class="mq-form__field">
              <label class="mq-form__label" for="mq-email">Correo electrónico <span class="mq-form__opt">(opcional)</span></label>
              <input type="email" id="mq-email" name="client_email" class="mq-form__input" placeholder="tu@correo.com" maxlength="200" autocomplete="email" />
            </div>
            <div class="mq-form__field">
              <label class="mq-form__label" for="mq-date">Fecha del evento</label>
              <input type="date" id="mq-date" name="event_date" class="mq-form__input" />
            </div>
            <div class="mq-form__field">
              <label class="mq-form__label" for="mq-city">Ciudad del evento</label>
              <input type="text" id="mq-city" name="event_city" class="mq-form__input" placeholder="{{ $cityName ?? 'Ej: Bogotá' }}" maxlength="120" value="{{ $cityName ?? '' }}" />
            </div>
            <div class="mq-form__field mq-form__field--full">
              <label class="mq-form__label" for="mq-event-type">Tipo de evento</label>
              <input type="text" id="mq-event-type" name="event_type_label" class="mq-form__input" placeholder="{{ $eventType?->name ?? 'Ej: Boda, Serenata, Quinceañera' }}" maxlength="100" value="{{ $eventType?->name ?? '' }}" />
            </div>
            <div class="mq-form__field mq-form__field--full">
              <label class="mq-form__label" for="mq-message">Cuéntanos más sobre tu evento</label>
              <textarea id="mq-message" name="message" class="mq-form__textarea" rows="3" placeholder="Ej: Necesito mariachi para boda de 80 personas, 2 horas, repertorio romántico..." maxlength="1000"></textarea>
            </div>
          </div>

          <p class="mq-form__note">Al enviar, cada grupo recibirá tus datos de contacto para responderte directamente. Sin comisiones.</p>

          <div id="mq-form-error" class="mq-form__error" aria-live="polite"></div>

          <button type="submit" class="mq-form__submit" id="mq-submit">
            <span id="mq-submit-text">Enviar cotización</span>
            <svg id="mq-submit-spinner" class="mq-submit-spinner hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"/></svg>
          </button>
        </form>

        {{-- Success state --}}
        <div id="mq-success" class="mq-success hidden" aria-live="polite">
          <div class="mq-success__icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z"/></svg>
          </div>
          <h3 class="mq-success__title" id="mq-success-title">¡Solicitudes enviadas!</h3>
          <p class="mq-success__body" id="mq-success-body">Los mariachis se pondrán en contacto contigo directamente.</p>
          <button type="button" class="mq-success__close" id="mq-success-close">Cerrar</button>
        </div>

      </div>
    </div>

{{-- ── Modal "Publicar evento" ── --}}
<div id="pe-modal" role="dialog" aria-modal="true" aria-labelledby="pe-modal-title" style="display:none" class="pe-modal">
  <div class="pe-modal__backdrop" data-close-pe-modal></div>
  <div class="pe-modal__panel">
    <div class="pe-modal__header">
      <div>
        <p class="pe-modal__eyebrow">Gratis · Sin registro · Sin comisión</p>
        <h2 id="pe-modal-title" class="pe-modal__title">Publica tu evento gratis</h2>
      </div>
      <button type="button" class="pe-modal__close" data-close-pe-modal aria-label="Cerrar">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
      </button>
    </div>

    {{-- Formulario --}}
    <form id="pe-modal-form" class="pe-modal__form" novalidate>
      @csrf
      <input type="hidden" name="event_city" id="pe-modal-event-city" value="{{ $cityName ?: '' }}" />

      <div class="pe-modal__row pe-modal__row--2">
        <div class="pe-modal__field">
          <label for="pe-modal-name">Nombre <span>*</span></label>
          <input type="text" id="pe-modal-name" name="client_name" class="pe-modal__input" placeholder="Tu nombre" required maxlength="120" autocomplete="name" />
        </div>
        <div class="pe-modal__field">
          <label for="pe-modal-phone">Celular <span>*</span></label>
          <input type="tel" id="pe-modal-phone" name="client_phone" class="pe-modal__input" placeholder="3XX XXX XXXX" required maxlength="30" autocomplete="tel" />
        </div>
      </div>

      <div class="pe-modal__row pe-modal__row--2">
        <div class="pe-modal__field">
          <label for="pe-modal-city">Ciudad <span>*</span></label>
          <input type="text" id="pe-modal-city" name="event_city_display" class="pe-modal__input" placeholder="Tu ciudad" required maxlength="80" value="{{ $cityName ?: '' }}" />
        </div>
        <div class="pe-modal__field">
          <label for="pe-modal-date">Fecha del evento <span class="pe-modal__opt">(opcional)</span></label>
          <input type="date" id="pe-modal-date" name="event_date" class="pe-modal__input" min="{{ now()->addDay()->format('Y-m-d') }}" />
        </div>
      </div>

      <div class="pe-modal__field">
        <label for="pe-modal-message">Cuéntanos más <span class="pe-modal__opt">(opcional)</span></label>
        <textarea id="pe-modal-message" name="message" class="pe-modal__textarea" placeholder="Ej: Serenata sorpresa, cumpleaños, boda... repertorio, horario, lugar..." maxlength="800" rows="3"></textarea>
      </div>

      <div id="pe-modal-error" class="pe-modal__error" style="display:none"></div>

      <button type="submit" id="pe-modal-submit" class="pe-modal__submit">
        Publicar mi evento y recibir cotizaciones
      </button>
      <p class="pe-modal__note">Tus datos solo se comparten con los grupos de tu ciudad.</p>
    </form>

    {{-- Éxito --}}
    <div id="pe-modal-success" class="pe-modal__success" style="display:none">
      <div class="pe-modal__success-icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
      </div>
      <h3 class="pe-modal__success-title">¡Tu evento fue publicado!</h3>
      <p class="pe-modal__success-body" id="pe-modal-success-msg">Los grupos disponibles en tu ciudad te contactarán directamente por WhatsApp.</p>
      <button type="button" class="pe-modal__success-close" data-close-pe-modal>Seguir buscando</button>
    </div>
  </div>
</div>

@push('styles')
<style>
  /* ── Modal "Publicar evento" ── */
  .pe-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }
  .pe-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 26, 13, 0.55);
    backdrop-filter: blur(3px);
    cursor: pointer;
  }
  .pe-modal__panel {
    position: relative;
    background: #fff;
    border-radius: 1.25rem;
    width: 100%;
    max-width: 560px;
    max-height: 92svh;
    overflow-y: auto;
    box-shadow: 0 32px 64px -24px rgba(10, 26, 13, 0.45);
    padding: 1.75rem 1.75rem 1.5rem;
  }
  .pe-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .pe-modal__eyebrow {
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #16a34a;
    margin: 0 0 0.2rem;
  }
  .pe-modal__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.45rem;
    font-weight: 800;
    color: #0a1a0d;
    margin: 0;
    line-height: 1.2;
  }
  .pe-modal__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    border: 1.5px solid rgba(15, 23, 42, 0.15);
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    margin-top: 0.15rem;
  }
  .pe-modal__close:hover { background: #f1f5f9; border-color: rgba(15,23,42,0.25); }
  .pe-modal__form { display: grid; gap: 1rem; }
  .pe-modal__row { display: grid; gap: 0.85rem; }
  .pe-modal__row--2 { grid-template-columns: 1fr 1fr; }
  .pe-modal__field { display: flex; flex-direction: column; gap: 0.3rem; }
  .pe-modal__field label { font-size: 0.82rem; font-weight: 700; color: #374151; }
  .pe-modal__opt { font-weight: 500; color: #94a3b8; }
  .pe-modal__field label span:not(.pe-modal__opt) { color: #e11d48; }
  .pe-modal__input, .pe-modal__textarea {
    border: 1.5px solid rgba(15,23,42,0.16);
    border-radius: 0.65rem;
    padding: 0.6rem 0.8rem;
    font-size: 0.92rem;
    color: #0f172a;
    background: #fdfdfd;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .pe-modal__input:focus, .pe-modal__textarea:focus {
    border-color: #006847;
    box-shadow: 0 0 0 3px rgba(0, 104, 71, 0.1);
    background: #fff;
  }
  .pe-modal__textarea { resize: vertical; min-height: 76px; }
  .pe-modal__error {
    background: #fef2f2;
    border: 1px solid rgba(185,28,28,0.2);
    border-radius: 0.6rem;
    padding: 0.7rem 0.9rem;
    font-size: 0.85rem;
    color: #991b1b;
  }
  .pe-modal__submit {
    width: 100%;
    background: #006847;
    color: #fff;
    border: none;
    border-radius: 0.75rem;
    padding: 0.85rem 1.5rem;
    font-size: 0.97rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    margin-top: 0.25rem;
  }
  .pe-modal__submit:hover { background: #00563b; }
  .pe-modal__submit:active { transform: scale(0.98); }
  .pe-modal__submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
  .pe-modal__note { font-size: 0.76rem; color: #94a3b8; text-align: center; margin: 0; line-height: 1.5; }
  /* éxito */
  .pe-modal__success { text-align: center; padding: 1rem 0 0.5rem; }
  .pe-modal__success-icon { color: #16a34a; margin-bottom: 0.75rem; }
  .pe-modal__success-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.4rem; font-weight: 800; color: #0a1a0d; margin: 0 0 0.55rem; }
  .pe-modal__success-body { font-size: 0.95rem; color: #475569; margin: 0 0 1.5rem; line-height: 1.6; }
  .pe-modal__success-close {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: #f0fdf4; color: #166534; border: 1.5px solid #bbf7d0;
    border-radius: 999px; padding: 0.6rem 1.4rem; font-size: 0.88rem; font-weight: 700;
    font-family: inherit; cursor: pointer; transition: background 0.15s;
  }
  .pe-modal__success-close:hover { background: #dcfce7; }
  @media (max-width: 560px) {
    .pe-modal__panel { padding: 1.35rem 1.2rem 1.25rem; border-radius: 1rem; }
    .pe-modal__row--2 { grid-template-columns: 1fr; }
    .pe-modal__title { font-size: 1.2rem; }
  }
</style>
@endpush

@endsection

@push('scripts')
  <script src="js/public-listing-collections.js?v=20260311-listing-collections-v1"></script>
  <script>
    (function () {
      var btn = document.getElementById('city-mobile-filter-toggle');
      var panel = document.getElementById('city-filter-panel');
      if (!btn || !panel) return;
      panel.setAttribute('data-mobile-hidden', '');
      btn.addEventListener('click', function () {
        var hidden = panel.hasAttribute('data-mobile-hidden');
        if (hidden) {
          panel.removeAttribute('data-mobile-hidden');
          btn.setAttribute('aria-expanded', 'true');
        } else {
          panel.setAttribute('data-mobile-hidden', '');
          btn.setAttribute('aria-expanded', 'false');
        }
      });
    })();
  </script>
  <script>
  (function () {
    'use strict';

    var MAX_SELECT = 4;
    var selected = {}; // { id: name }

    // DOM refs
    var bar       = document.getElementById('mq-bar');
    var barCount  = document.getElementById('mq-bar-count');
    var barPlural = document.getElementById('mq-bar-plural');
    var barPlural2= document.getElementById('mq-bar-plural2');
    var btnOpen   = document.getElementById('mq-open-modal');
    var btnClear  = document.getElementById('mq-clear');
    var modal     = document.getElementById('mq-modal');
    var backdrop  = document.getElementById('mq-modal-backdrop');
    var btnClose  = document.getElementById('mq-modal-close');
    var modalCount= document.getElementById('mq-modal-count');
    var modalPlural=document.getElementById('mq-modal-count-plural');
    var chipsWrap = document.getElementById('mq-modal-chips');
    var form      = document.getElementById('mq-form');
    var formError = document.getElementById('mq-form-error');
    var submitBtn = document.getElementById('mq-submit');
    var submitTxt = document.getElementById('mq-submit-text');
    var spinner   = document.getElementById('mq-submit-spinner');
    var successEl = document.getElementById('mq-success');
    var successTitle = document.getElementById('mq-success-title');
    var successBody  = document.getElementById('mq-success-body');
    var successClose = document.getElementById('mq-success-close');

    if (!bar || !modal || !form) return;

    // ── helpers ──────────────────────────────────
    function count() { return Object.keys(selected).length; }

    function updateBar() {
      var n = count();
      barCount.textContent = n;
      barPlural.textContent  = n === 1 ? '' : 's';
      barPlural2.textContent = n === 1 ? '' : 's';
      bar.setAttribute('aria-hidden', n === 0 ? 'true' : 'false');
    }

    function updateModalCount() {
      var n = count();
      modalCount.textContent  = n;
      modalPlural.textContent = n === 1 ? '' : 's';
    }

    function renderChips() {
      chipsWrap.innerHTML = '';
      Object.keys(selected).forEach(function (id) {
        var name = selected[id];
        var chip = document.createElement('span');
        chip.className = 'mq-chip';
        chip.innerHTML =
          '<span>' + escHtml(name) + '</span>' +
          '<button type="button" class="mq-chip__remove" data-chip-id="' + id + '" aria-label="Quitar ' + escHtml(name) + '">' +
          '<svg viewBox="0 0 16 16" fill="currentColor"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>' +
          '</button>';
        chipsWrap.appendChild(chip);
      });
    }

    function escHtml(str) {
      var d = document.createElement('div');
      d.appendChild(document.createTextNode(str));
      return d.innerHTML;
    }

    function setCardSelected(id, on) {
      var card = document.querySelector('[data-listing-id="' + id + '"]');
      if (!card) return;
      var btn = card.querySelector('[data-mq-select]');
      card.classList.toggle('city-result-card--selected', on);
      if (btn) btn.setAttribute('aria-pressed', on ? 'true' : 'false');
    }

    function syncSelectBtns() {
      var n = count();
      document.querySelectorAll('[data-mq-select]').forEach(function (btn) {
        var card = btn.closest('[data-listing-id]');
        var id = card ? card.getAttribute('data-listing-id') : null;
        var isSelected = id && !!selected[id];
        if (!isSelected && n >= MAX_SELECT) {
          btn.disabled = true;
        } else {
          btn.disabled = false;
        }
      });
    }

    // ── select / deselect ─────────────────────────
    function selectListing(id, name) {
      if (count() >= MAX_SELECT) return;
      selected[id] = name;
      setCardSelected(id, true);
      updateBar();
      syncSelectBtns();
    }

    function deselectListing(id) {
      delete selected[id];
      setCardSelected(id, false);
      updateBar();
      syncSelectBtns();
      if (modal.getAttribute('aria-hidden') === 'false') {
        renderChips();
        updateModalCount();
        if (count() === 0) closeModal();
      }
    }

    function clearAll() {
      Object.keys(selected).forEach(function (id) { setCardSelected(id, false); });
      selected = {};
      updateBar();
      syncSelectBtns();
    }

    // ── modal ──────────────────────────────────────
    function openModal() {
      renderChips();
      updateModalCount();
      successEl.classList.add('hidden');
      form.classList.remove('hidden');
      modal.setAttribute('aria-hidden', 'false');
      document.body.style.overflow = 'hidden';
      var firstInput = form.querySelector('input');
      if (firstInput) setTimeout(function () { firstInput.focus(); }, 300);
    }

    function closeModal() {
      modal.setAttribute('aria-hidden', 'true');
      document.body.style.overflow = '';
    }

    // ── form submit ────────────────────────────────
    function setLoading(on) {
      submitBtn.disabled = on;
      spinner.classList.toggle('hidden', !on);
      submitTxt.textContent = on ? 'Enviando...' : 'Enviar cotización';
    }

    form.addEventListener('submit', function (e) {
      e.preventDefault();
      formError.textContent = '';

      var name  = form.querySelector('#mq-name');
      var phone = form.querySelector('#mq-phone');
      var valid = true;

      [name, phone].forEach(function (el) { el.classList.remove('is-invalid'); });

      if (!name.value.trim()) { name.classList.add('is-invalid'); valid = false; }
      if (!phone.value.trim()) { phone.classList.add('is-invalid'); valid = false; }

      if (!valid) {
        formError.textContent = 'Por favor completa los campos obligatorios.';
        return;
      }

      var ids = Object.keys(selected).map(Number);
      if (ids.length === 0) {
        formError.textContent = 'Selecciona al menos un grupo antes de enviar.';
        return;
      }

      var data = new FormData(form);
      ids.forEach(function (id) { data.append('listing_ids[]', id); });

      var csrf = document.querySelector('meta[name="csrf-token"]');
      if (csrf) data.append('_token', csrf.getAttribute('content'));

      setLoading(true);

      fetch('{{ route("multi-quote.store") }}', {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
        body: data,
      })
      .then(function (r) { return r.json(); })
      .then(function (json) {
        setLoading(false);
        if (json.ok) {
          successTitle.textContent = json.message;
          successBody.textContent  = json.total === 1
            ? 'El grupo se pondrá en contacto contigo directamente.'
            : 'Los ' + json.total + ' grupos seleccionados se pondrán en contacto contigo directamente.';
          form.classList.add('hidden');
          successEl.classList.remove('hidden');
          clearAll();
        } else {
          formError.textContent = json.message || 'Ocurrió un error. Intenta de nuevo.';
        }
      })
      .catch(function () {
        setLoading(false);
        formError.textContent = 'Error de conexión. Intenta de nuevo.';
      });
    });

    // ── events ─────────────────────────────────────
    document.addEventListener('click', function (e) {
      // select btn
      var selectBtn = e.target.closest('[data-mq-select]');
      if (selectBtn) {
        e.stopPropagation();
        var card = selectBtn.closest('[data-listing-id]');
        if (!card) return;
        var id   = card.getAttribute('data-listing-id');
        var name = card.getAttribute('data-listing-name') || 'Grupo ' + id;
        if (selected[id]) { deselectListing(id); } else { selectListing(id, name); }
        return;
      }

      // chip remove
      var chipRemove = e.target.closest('[data-chip-id]');
      if (chipRemove) {
        deselectListing(chipRemove.getAttribute('data-chip-id'));
        return;
      }
    });

    btnOpen.addEventListener('click', openModal);
    btnClear.addEventListener('click', clearAll);
    btnClose.addEventListener('click', closeModal);
    backdrop.addEventListener('click', closeModal);
    successClose.addEventListener('click', closeModal);

    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape' && modal.getAttribute('aria-hidden') === 'false') closeModal();
    });

    updateBar();
  })();
  </script>

  {{-- ── Modal "Publicar evento" JS ── --}}
  <script>
  (function () {
    var modal   = document.getElementById('pe-modal');
    var form    = document.getElementById('pe-modal-form');
    var success = document.getElementById('pe-modal-success');
    var errorEl = document.getElementById('pe-modal-error');
    var submit  = document.getElementById('pe-modal-submit');
    var cityDisplay = document.getElementById('pe-modal-city');
    var cityHidden  = document.getElementById('pe-modal-event-city');
    var successMsg  = document.getElementById('pe-modal-success-msg');

    if (!modal) return;

    function openModal() {
      modal.style.display = 'flex';
      document.body.style.overflow = 'hidden';
      modal.querySelector('.pe-modal__input, .pe-modal__textarea') && modal.querySelector('#pe-modal-name').focus();
    }

    function closeModal() {
      modal.style.display = 'none';
      document.body.style.overflow = '';
    }

    // Sync city display → hidden field
    if (cityDisplay) {
      cityDisplay.addEventListener('input', function () {
        cityHidden.value = cityDisplay.value.trim();
      });
      cityHidden.value = cityDisplay.value.trim();
    }

    // Open triggers
    document.querySelectorAll('[data-open-pe-modal]').forEach(function (btn) {
      btn.addEventListener('click', function (e) { e.preventDefault(); openModal(); });
    });

    // Close triggers
    document.querySelectorAll('[data-close-pe-modal]').forEach(function (btn) {
      btn.addEventListener('click', closeModal);
    });

    // Escape key
    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape' && modal.style.display !== 'none') closeModal();
    });

    // Submit
    if (form) {
      form.addEventListener('submit', function (e) {
        e.preventDefault();
        errorEl.style.display = 'none';

        var name  = form.querySelector('#pe-modal-name');
        var phone = form.querySelector('#pe-modal-phone');
        var city  = form.querySelector('#pe-modal-city');
        var valid = true;

        [name, phone, city].forEach(function (el) {
          el.style.borderColor = '';
          if (!el.value.trim()) {
            el.style.borderColor = '#e11d48';
            valid = false;
          }
        });

        if (!valid) {
          errorEl.textContent = 'Completa los campos obligatorios (Nombre, Celular, Ciudad).';
          errorEl.style.display = 'block';
          return;
        }

        // Sync city hidden
        cityHidden.value = city.value.trim();

        var data = new FormData(form);
        // Remove the display field — backend uses event_city (hidden)
        data.delete('event_city_display');

        submit.disabled = true;
        submit.textContent = 'Publicando...';

        fetch('{{ route("publish-event.store") }}', {
          method: 'POST',
          headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
          body: data,
        })
        .then(function (r) {
          if (!r.ok) return r.json().then(function(j){ throw j; });
          return r.json();
        })
        .then(function (json) {
          if (json.ok) {
            if (successMsg && json.city) {
              successMsg.textContent = 'Los grupos disponibles en ' + json.city + ' te contactarán directamente por WhatsApp.';
            }
            form.style.display = 'none';
            success.style.display = 'block';
          } else {
            throw { message: 'Error al enviar. Inténtalo de nuevo.' };
          }
        })
        .catch(function (err) {
          submit.disabled = false;
          submit.textContent = 'Publicar mi evento y recibir cotizaciones';
          var msg = 'Error al enviar. Inténtalo de nuevo.';
          if (err && err.errors) {
            var first = Object.values(err.errors)[0];
            if (first && first[0]) msg = first[0];
          } else if (err && err.message) {
            msg = err.message;
          }
          errorEl.textContent = msg;
          errorEl.style.display = 'block';
        });
      });
    }
  })();
  </script>
@endpush