@extends('front.layouts.marketplace')

@section('title', $seoTitle)
@section('meta_description', $seoDescription)
@section('body_page', 'provider-profile')
@section('body_class', 'font-sans text-slate-900 antialiased bg-slate-50')

@push('head')
@php
  $schemaImage = $coverImage ? asset('storage/'.$coverImage) : null;
  if (!$schemaImage && isset($profile) && $profile->shouldShowProfilePhoto() && filled($profile->logoPathForVariant('large'))) {
      $schemaImage = $profile->logoUrlForVariant('large');
  }

  $profileSchema = [
    '@context'   => 'https://schema.org',
    '@type'      => 'MusicGroup',
    'name'       => $profileName,
    'url'        => $canonicalUrl,
    'address'    => ['@type' => 'PostalAddress', 'addressLocality' => $cityName, 'addressCountry' => 'CO'],
  ];
  if ($schemaImage)        $profileSchema['image']  = $schemaImage;
  if (!empty($publicSameAs ?? [])) $profileSchema['sameAs'] = $publicSameAs;

  if ($reviewsTotal > 0) {
    $profileSchema['aggregateRating'] = [
      '@type'       => 'AggregateRating',
      'ratingValue' => number_format((float) $avgRating, 1),
      'reviewCount' => $reviewsTotal,
      'bestRating'  => '5',
      'worstRating' => '1',
    ];

    // Include individual Review items so Google can verify authenticity
    $schemaReviews = ($publicReviews ?? collect())->take(5)->map(function ($r) {
      $author = $r->clientUser?->first_name
        ? trim($r->clientUser->first_name.' '.($r->clientUser->last_name ?? ''))
        : 'Cliente verificado';

      $item = [
        '@type'        => 'Review',
        'reviewRating' => ['@type' => 'Rating', 'ratingValue' => (string) $r->rating, 'bestRating' => '5'],
        'author'       => ['@type' => 'Person', 'name' => $author],
      ];
      if (filled($r->comment))
          $item['reviewBody'] = \Illuminate\Support\Str::limit(strip_tags($r->comment), 500);
      if ($r->created_at)
          $item['datePublished'] = $r->created_at->toDateString();

      return $item;
    })->values()->all();

    if (!empty($schemaReviews)) {
      $profileSchema['review'] = $schemaReviews;
    }
  }
@endphp
<script type="application/ld+json">
{!! json_encode($profileSchema, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}
</script>
<script type="application/ld+json">
{!! json_encode([
  '@context'        => 'https://schema.org',
  '@type'           => 'BreadcrumbList',
  'itemListElement' => [
    ['@type' => 'ListItem', 'position' => 1, 'name' => 'Inicio', 'item' => route('home')],
    ['@type' => 'ListItem', 'position' => 2, 'name' => 'Mariachis en Colombia', 'item' => route('seo.landing.slug', ['slug' => 'colombia'])],
    ['@type' => 'ListItem', 'position' => 3, 'name' => $profileName, 'item' => $canonicalUrl],
  ],
], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}
</script>
@endpush

@push('styles')
  <style>
    .provider-public-shell {
      padding: 2.25rem 0 4.5rem;
    }

    .provider-profile-card,
    .provider-profile-header-card,
    .provider-profile-nav-card,
    .provider-profile-empty-card {
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 1.5rem;
      background: #fff;
      box-shadow: 0 26px 56px -42px rgba(15, 23, 42, 0.34);
    }

    .provider-profile-header-card {
      overflow: hidden;
      position: relative;
    }

    .provider-profile-header-banner {
      position: relative;
      height: 340px;
      overflow: hidden;
      background:
        radial-gradient(ellipse at 18% 60%, oklch(0.38 0.1 160 / 0.72), transparent 46%),
        radial-gradient(ellipse at 82% 28%, oklch(0.28 0.08 200 / 0.58), transparent 38%),
        radial-gradient(ellipse at 50% 100%, oklch(0.22 0.06 165 / 0.9), transparent 55%),
        linear-gradient(160deg, oklch(0.42 0.09 158) 0%, oklch(0.24 0.07 168) 100%);
    }

    .provider-profile-header-banner::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.32), transparent 40%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.06) 0%, rgba(15, 23, 42, 0.48) 100%);
    }

    .provider-profile-header-banner img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .provider-profile-header-banner__overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.35rem 1.5rem;
      pointer-events: none;
    }

    .provider-profile-header-banner__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      background: rgba(15, 23, 42, 0.36);
      padding: 0.55rem 0.85rem;
      color: #f8fafc;
      font-size: 0.8rem;
      font-weight: 800;
      backdrop-filter: blur(12px);
      box-shadow: 0 18px 30px -28px rgba(15, 23, 42, 0.72);
    }

    .provider-profile-header-banner__eyebrow svg {
      width: 0.92rem;
      height: 0.92rem;
      flex-shrink: 0;
    }

    .provider-profile-header-banner__glance {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 0.6rem;
      max-width: 48%;
    }

    .provider-profile-header-banner__glance-item {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      background: rgba(255, 255, 255, 0.16);
      padding: 0.52rem 0.82rem;
      color: #f8fafc;
      font-size: 0.8rem;
      font-weight: 800;
      line-height: 1;
      backdrop-filter: blur(12px);
    }

    .provider-profile-header-banner__glance-item svg {
      width: 0.9rem;
      height: 0.9rem;
      flex-shrink: 0;
    }

    /* Header: avatar + name side by side, overlapping banner bottom */
    .provider-profile-header {
      position: relative;
      z-index: 2;
      margin-top: -3.75rem;
      padding: 0 2rem 2rem;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1.5rem;
    }

    .provider-profile-header__identity {
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
      min-width: 0;
      flex: 1 1 0;
    }

    /* Avatar + name in the same top row */
    .provider-profile-avatar-name-row {
      display: flex;
      align-items: flex-end;
      gap: 1.1rem;
    }

    .provider-profile-avatar {
      width: 120px;
      height: 120px;
      border-radius: 1.6rem;
      border: 5px solid #fff;
      background: linear-gradient(135deg, #1d976c 0%, #155e75 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      flex-shrink: 0;
      box-shadow: 0 24px 38px -28px rgba(15, 23, 42, 0.6);
    }

    .provider-profile-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .provider-profile-avatar span {
      color: #fff;
      font-size: 2.6rem;
      font-weight: 800;
      letter-spacing: -0.06em;
    }

    .provider-profile-header__copy {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      min-width: 0;
    }

    .provider-profile-heading {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.7rem;
    }

    .provider-profile-header__copy h1,
    .provider-profile-header__identity h1 {
      margin: 0;
      font-size: clamp(1.35rem, 1.8vw, 1.75rem);
      line-height: 1.15;
      letter-spacing: -0.03em;
      font-weight: 800;
      color: #111827;
    }

    .provider-profile-header__lede {
      margin: 0;
      max-width: 48rem;
      color: #475569;
      font-size: 1rem;
      line-height: 1.68;
    }

    .provider-profile-header__chips {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.55rem;
    }

    .provider-profile-header__chip {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      border-radius: 999px;
      padding: 0.48rem 0.74rem;
      background: #f8fafc;
      color: #334155;
      font-size: 0.8rem;
      font-weight: 800;
      line-height: 1;
    }

    .provider-profile-verified-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      border: 1px solid rgba(15, 118, 110, 0.18);
      border-radius: 999px;
      background: rgba(15, 118, 110, 0.08);
      padding: 0.48rem 0.78rem;
      color: #0f766e;
      font-size: 0.8rem;
      font-weight: 800;
      line-height: 1;
      box-shadow: 0 18px 30px -28px rgba(15, 23, 42, 0.42);
    }

    .provider-profile-verified-badge svg {
      width: 0.92rem;
      height: 0.92rem;
      flex-shrink: 0;
    }

    .provider-profile-handle {
      display: inline-flex;
      align-items: center;
      align-self: flex-start;
      padding: 0.62rem 0.9rem;
      border-radius: 999px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      background: rgba(255, 255, 255, 0.96);
      color: #0f766e;
      text-decoration: none;
      font-size: 0.95rem;
      font-weight: 800;
      line-height: 1;
      box-shadow: 0 14px 28px -24px rgba(15, 23, 42, 0.45);
    }

    .provider-profile-handle:hover {
      color: #115e59;
      border-color: rgba(15, 118, 110, 0.16);
    }

    .provider-profile-header__actions {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      width: min(100%, 26rem);
      flex-shrink: 0;
    }

    /* Compact horizontal trust strip — replaces the bulky metric cards */
    .provider-profile-trust-strip {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.45rem 1rem;
      padding: 0.85rem 1rem;
      border-radius: 1rem;
      border: 1px solid rgba(15, 23, 42, 0.08);
      background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    }
    .provider-profile-trust-strip__item {
      display: inline-flex;
      align-items: center;
      gap: 0.38rem;
      font-size: 0.82rem;
      font-weight: 700;
      color: #475569;
    }
    .provider-profile-trust-strip__item svg {
      width: 0.88rem;
      height: 0.88rem;
      color: #0f766e;
      flex-shrink: 0;
    }
    .provider-profile-trust-strip__item strong {
      color: #111827;
      font-weight: 800;
    }

    /* Legacy metric — hidden on public; kept for partner panel parity */
    .provider-profile-header__metric { display: none; }

    .provider-profile-primary-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.92rem 1.25rem;
      border-radius: 0.95rem;
      background: #0f766e;
      color: #fff;
      font-weight: 800;
      font-size: 0.95rem;
      text-decoration: none;
      box-shadow: 0 22px 38px -30px rgba(15, 118, 110, 0.85);
      justify-content: center;
      width: 100%;
    }

    .provider-profile-primary-btn:hover {
      color: #fff;
      background: #115e59;
    }

    .provider-profile-nav-card {
      padding: 0.55rem;
    }

    .provider-profile-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .provider-profile-nav a {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.85rem 1.1rem;
      border-radius: 0.95rem;
      color: #475569;
      font-weight: 800;
      text-decoration: none;
      transition: all 0.2s ease;
    }

    .provider-profile-nav a:hover,
    .provider-profile-nav a.is-active {
      background: rgba(15, 118, 110, 0.08);
      color: #0f766e;
    }

    .provider-profile-nav svg {
      width: 1rem;
      height: 1rem;
    }

    .provider-profile-section-title {
      margin: 0 0 1.35rem;
      color: #111827;
      font-size: 1.75rem;
      line-height: 1.1;
      letter-spacing: -0.04em;
      font-weight: 800;
    }

    .provider-profile-grid {
      display: grid;
      gap: 1.5rem;
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .provider-profile-grid > * {
      min-width: 0;
      grid-column: span 4;
    }

    .provider-profile-card {
      height: 100%;
      overflow: hidden;
    }

    .provider-profile-card--wide {
      width: 100%;
    }

    .provider-profile-card__header,
    .provider-profile-card__body,
    .provider-profile-card__footer {
      padding: 1.5rem;
    }

    .provider-profile-card__header {
      padding-bottom: 1.1rem;
    }

    .provider-profile-card__footer {
      border-top: 1px solid rgba(15, 23, 42, 0.08);
    }

    .provider-profile-card__head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
    }

    .provider-profile-card__identity {
      display: flex;
      align-items: center;
      gap: 1rem;
      min-width: 0;
    }

    .provider-profile-card__media {
      width: 52px;
      height: 52px;
      border-radius: 999px;
      overflow: hidden;
      background: #d9efe7;
      color: #0f766e;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-weight: 800;
    }

    .provider-profile-card__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .provider-profile-card__media svg {
      width: 1.4rem;
      height: 1.4rem;
    }

    .provider-profile-card__title {
      margin: 0;
      color: #111827;
      font-size: 1.18rem;
      line-height: 1.3;
      font-weight: 800;
    }

    .provider-profile-card__client {
      margin-top: 0.28rem;
      color: #64748b;
      font-size: 0.94rem;
    }

    .provider-profile-card__action {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 999px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      background: #fff;
      color: #64748b;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      flex-shrink: 0;
    }

    .provider-profile-card__action:hover {
      color: #0f766e;
      border-color: rgba(15, 118, 110, 0.16);
    }

    .provider-profile-card__action svg {
      width: 1.05rem;
      height: 1.05rem;
    }

    .provider-profile-card__stats {
      display: flex;
      align-items: stretch;
      flex-wrap: wrap;
      gap: 1rem;
      margin-bottom: 1rem;
    }

    .provider-profile-card__stat-box {
      flex: 1 1 200px;
      min-width: 0;
      border-radius: 1rem;
      padding: 0.95rem 1rem;
      background: #f8fafc;
    }

    .provider-profile-card__stat-box p {
      margin: 0 0 0.3rem;
      color: #111827;
      font-size: 1.12rem;
      font-weight: 800;
    }

    .provider-profile-card__stat-box span {
      color: #64748b;
      font-size: 0.92rem;
      font-weight: 600;
    }

    .provider-profile-card__copy {
      margin: 0;
      color: #475569;
      line-height: 1.72;
    }

    .provider-profile-card__topline,
    .provider-profile-card__progressline,
    .provider-profile-card__bottomline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      flex-wrap: wrap;
    }

    .provider-profile-card__topline {
      margin-bottom: 1rem;
      color: #475569;
      font-size: 0.95rem;
    }

    .provider-profile-card__progressline {
      margin-bottom: 0.5rem;
      color: #64748b;
      font-size: 0.88rem;
      font-weight: 700;
    }

    .provider-profile-card__progress {
      width: 100%;
      height: 8px;
      border-radius: 999px;
      background: #e2e8f0;
      overflow: hidden;
      margin-bottom: 1rem;
    }

    .provider-profile-card__progress span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #0f766e 0%, #22c55e 100%);
    }

    .provider-profile-card__chips {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.45rem;
    }

    .provider-profile-card__chip {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 0.42rem 0.72rem;
      background: #f8fafc;
      color: #334155;
      font-size: 0.82rem;
      font-weight: 700;
      text-decoration: none;
    }

    .provider-profile-card__link {
      display: inline-flex;
      align-items: center;
      gap: 0.38rem;
      color: #475569;
      font-weight: 800;
      text-decoration: none;
    }

    .provider-profile-card__link:hover {
      color: #0f766e;
    }

    .provider-profile-status-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.38rem;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.22);
      padding: 0.36rem 0.72rem;
      background: #f8fafc;
      color: #475569;
      font-size: 0.78rem;
      font-weight: 800;
    }

    .provider-profile-status-badge svg {
      width: 0.9rem;
      height: 0.9rem;
      flex-shrink: 0;
    }

    .provider-profile-status-badge--verified {
      border-color: rgba(15, 118, 110, 0.18);
      background: rgba(15, 118, 110, 0.08);
      color: #0f766e;
    }

    .provider-profile-status-badge--vip {
      border-color: rgba(249, 115, 22, 0.16);
      background: rgba(249, 115, 22, 0.12);
      color: #c2410c;
    }

    .provider-profile-empty-card {
      padding: 1.75rem;
      color: #475569;
    }

    .provider-profile-anchor {
      scroll-margin-top: 6rem;
    }

    .provider-profile-panel[hidden] {
      display: none !important;
    }

    .provider-profile-link-list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 0.9rem;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .provider-profile-link-list a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      border-radius: 1rem;
      background: #f8fafc;
      padding: 1rem 1.05rem;
      color: #0f172a;
      text-decoration: none;
      font-weight: 800;
    }

    .provider-profile-link-list a small {
      display: block;
      margin-top: 0.25rem;
      color: #64748b;
      font-weight: 600;
    }

    @media (max-width: 1199.98px) {
      .provider-profile-grid > * {
        grid-column: span 6;
      }
    }

    @media (max-width: 991.98px) {
      .provider-profile-header-banner__overlay {
        padding: 1rem 1rem 1.15rem;
      }

      .provider-profile-header-banner__glance {
        max-width: 56%;
      }

      .provider-profile-header {
        align-items: flex-start;
        flex-direction: column;
      }

      .provider-profile-header__actions {
        width: 100%;
      }
    }

    @media (max-width: 767.98px) {
      .provider-public-shell {
        padding-top: 1.5rem;
      }

      .provider-profile-header-banner {
        height: 220px;
      }

      .provider-profile-header-banner__overlay {
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        gap: 0.7rem;
      }

      .provider-profile-header-banner__glance {
        max-width: 100%;
        justify-content: flex-start;
      }

      .provider-profile-header {
        margin-top: -3rem;
        padding: 0.5rem 1rem 1.2rem;
        flex-direction: column;
      }

      .provider-profile-avatar-name-row {
        align-items: flex-end;
      }

      .provider-profile-header__actions {
        width: 100%;
        grid-template-columns: 1fr;
      }

      .provider-profile-avatar {
        width: 96px;
        height: 96px;
      }

      .provider-profile-avatar span {
        font-size: 2rem;
      }

      .provider-profile-grid > * {
        grid-column: span 12;
      }
    }
    /* ── WhatsApp CTA button ── */
    .provider-profile-wa-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.55rem;
      padding: 0.95rem 1.2rem;
      border-radius: 0.95rem;
      background: #16a34a;
      color: #fff;
      font-size: 0.95rem;
      font-weight: 800;
      text-decoration: none;
      grid-column: 1 / -1;
      box-shadow: 0 22px 38px -24px rgba(22, 163, 74, 0.72);
      transition: background 0.18s ease;
    }
    .provider-profile-wa-btn:hover { background: #15803d; color: #fff; }
    .provider-profile-wa-btn svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }

    .provider-profile-call-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.88rem 1.2rem;
      border-radius: 0.95rem;
      border: 1.5px solid rgba(15, 23, 42, 0.12);
      background: #fff;
      color: #334155;
      font-size: 0.88rem;
      font-weight: 800;
      text-decoration: none;
      grid-column: 1 / -1;
      transition: border-color 0.18s ease, background 0.18s ease;
    }
    .provider-profile-call-btn:hover { border-color: rgba(15, 118, 110, 0.22); background: #f0fdf4; color: #0f766e; }
    .provider-profile-call-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }

    /* ── Event type chips in header ── */
    .provider-profile-event-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      margin-top: 0.2rem;
    }
    .provider-profile-event-chip {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 0.38rem 0.72rem;
      background: oklch(0.96 0.02 160);
      color: oklch(0.35 0.1 160);
      font-size: 0.78rem;
      font-weight: 700;
      border: 1px solid oklch(0.88 0.04 160);
    }

    /* ── Price chip ── */
    .provider-profile-price-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.38rem;
      border-radius: 999px;
      padding: 0.48rem 0.78rem;
      background: oklch(0.97 0.02 95);
      color: oklch(0.42 0.12 95);
      font-size: 0.82rem;
      font-weight: 800;
      border: 1px solid oklch(0.88 0.06 95);
    }

    /* ── Client-facing profile section ── */
    .provider-profile-about {
      display: grid;
      gap: 1.5rem;
    }
    .provider-profile-about__block {
      display: flex;
      flex-direction: column;
      gap: 0.65rem;
    }
    .provider-profile-about__label {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #64748b;
    }
    .provider-profile-about__label svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; }
    .provider-profile-about__text {
      margin: 0;
      color: #374151;
      line-height: 1.72;
      font-size: 1rem;
    }

    /* ── Featured review quote ── */
    .provider-profile-review-quote {
      border-radius: 1.25rem;
      background: oklch(0.98 0.01 95);
      border: 1px solid oklch(0.92 0.03 95);
      padding: 1.35rem 1.5rem;
    }
    .provider-profile-review-quote__stars {
      display: flex;
      gap: 0.18rem;
      margin-bottom: 0.7rem;
      color: #f59e0b;
    }
    .provider-profile-review-quote__stars svg { width: 0.9rem; height: 0.9rem; fill: currentColor; }
    .provider-profile-review-quote__text {
      margin: 0 0 0.9rem;
      color: #1e293b;
      font-size: 0.97rem;
      line-height: 1.7;
      font-style: italic;
    }
    .provider-profile-review-quote__meta {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      font-size: 0.82rem;
      font-weight: 700;
      color: #64748b;
    }
    .provider-profile-review-quote__avatar {
      width: 1.8rem;
      height: 1.8rem;
      border-radius: 50%;
      background: oklch(0.44 0.1 160);
      color: #fff;
      font-size: 0.72rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    /* ── Reviews section ── */
    .provider-reviews-section {
      margin-top: 2rem;
    }
    .provider-reviews-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1.25rem;
      flex-wrap: wrap;
    }
    .provider-reviews-header h3 {
      margin: 0;
      font-size: 1.2rem;
      font-weight: 800;
      color: #111827;
      letter-spacing: -0.03em;
    }
    .provider-reviews-aggregate {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      flex-wrap: wrap;
    }
    .provider-reviews-aggregate__score {
      font-size: 2.2rem;
      font-weight: 800;
      color: #111827;
      line-height: 1;
      letter-spacing: -0.05em;
    }
    .provider-reviews-aggregate__stars {
      display: flex;
      gap: 0.12rem;
      color: #f59e0b;
    }
    .provider-reviews-aggregate__stars svg { width: 1rem; height: 1rem; fill: currentColor; }
    .provider-reviews-aggregate__count {
      font-size: 0.82rem;
      color: #64748b;
      font-weight: 600;
    }
    .provider-reviews-dist {
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
      min-width: 140px;
    }
    .provider-reviews-dist__row {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .provider-reviews-dist__label {
      font-size: 0.72rem;
      font-weight: 700;
      color: #94a3b8;
      width: 1.5rem;
      text-align: right;
      flex-shrink: 0;
    }
    .provider-reviews-dist__bar {
      flex: 1;
      height: 6px;
      border-radius: 999px;
      background: #e2e8f0;
      overflow: hidden;
    }
    .provider-reviews-dist__bar span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: #f59e0b;
      transition: width 0.4s ease;
    }
    .provider-reviews-grid {
      display: grid;
      gap: 1rem;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
    .provider-review-card {
      background: #fff;
      border: 1px solid rgba(15, 23, 42, 0.08);
      border-radius: 1.25rem;
      padding: 1.25rem 1.35rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }
    .provider-review-card__top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 0.75rem;
    }
    .provider-review-card__person {
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }
    .provider-review-card__avatar {
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      background: oklch(0.44 0.1 160);
      color: #fff;
      font-size: 0.75rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .provider-review-card__name {
      font-size: 0.88rem;
      font-weight: 800;
      color: #111827;
      line-height: 1.2;
    }
    .provider-review-card__date {
      font-size: 0.75rem;
      color: #94a3b8;
    }
    .provider-review-card__stars {
      display: flex;
      gap: 0.1rem;
      color: #f59e0b;
      flex-shrink: 0;
    }
    .provider-review-card__stars svg { width: 0.82rem; height: 0.82rem; fill: currentColor; }
    .provider-review-card__text {
      margin: 0;
      color: #374151;
      font-size: 0.9rem;
      line-height: 1.65;
    }
    .provider-review-card__event {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 0.28rem 0.65rem;
      background: #f8fafc;
      color: #64748b;
      font-size: 0.75rem;
      font-weight: 700;
      align-self: flex-start;
    }

    /* ── Mobile sticky CTA ── */
    .provider-mobile-sticky-cta {
      display: none;
    }
    @media (max-width: 767.98px) {
      .provider-mobile-sticky-cta {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
        gap: 0.65rem;
        padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid rgba(15, 23, 42, 0.1);
        box-shadow: 0 -8px 32px -10px rgba(15, 23, 42, 0.14);
      }
      .provider-mobile-sticky-cta__wa {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.85rem 1rem;
        border-radius: 0.85rem;
        background: #16a34a;
        color: #fff;
        font-weight: 800;
        font-size: 0.9rem;
        text-decoration: none;
        transition: background 0.15s;
      }
      .provider-mobile-sticky-cta__wa:hover { background: #15803d; color: #fff; }
      .provider-mobile-sticky-cta__wa svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
      .provider-mobile-sticky-cta__call {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3.2rem;
        height: 3.2rem;
        border-radius: 0.85rem;
        border: 1.5px solid rgba(15, 23, 42, 0.12);
        background: #fff;
        color: #334155;
        text-decoration: none;
        flex-shrink: 0;
        transition: border-color 0.15s;
      }
      .provider-mobile-sticky-cta__call:hover { border-color: rgba(15, 118, 110, 0.3); color: #0f766e; }
      .provider-mobile-sticky-cta__call svg { width: 1.1rem; height: 1.1rem; }
      /* Compensate content for sticky bar height */
      .provider-public-shell { padding-bottom: 6rem; }
    }
  </style>
@endpush

@section('content')
  @php
    $avatarImage = $profile->shouldShowProfilePhoto() && filled($profile->logoPathForVariant('large'))
      ? $profile->logoUrlForVariant('large')
      : null;
    $bannerImage = $coverImage ? asset('storage/'.$coverImage) : null;
    $avatarInitials = $profile->avatarInitials();
    $featuredListing = $profile->activeListings->first();
    $joinedDate = $profile->user?->created_at;
    $joinedLabel = $joinedDate
      ? \Illuminate\Support\Str::ucfirst($joinedDate->translatedFormat('F Y'))
      : 'Reciente';
    $coverageAreas = collect([$cityName])
      ->merge($profile->serviceAreas->pluck('city_name'))
      ->filter()
      ->unique()
      ->values();
    $socialLinks = collect([
      ['label' => 'Sitio web', 'url' => $profile->website],
      ['label' => 'Instagram', 'url' => $profile->instagram],
      ['label' => 'Facebook', 'url' => $profile->facebook],
      ['label' => 'TikTok', 'url' => $profile->tiktok],
      ['label' => 'YouTube', 'url' => $profile->youtube],
    ])->filter(fn (array $link): bool => filled($link['url']))->values();
    $publicProfileLabel = '@'.$profile->slug;
    // Auto-generated slugs follow the m-{hash} pattern — not meaningful to clients
    $isAutoSlug = (bool) preg_match('/^m-[a-z0-9]{6,}$/', $profile->slug ?? '');
    $summaryProgress = max(12, min(100, (int) ($profile->profile_completed ? 100 : ($profile->profile_completion ?? 0))));
    $verificationUiLabel = $profile->hasActiveVerification() ? 'Perfil verificado' : 'Perfil publicado';
    $profileIntro = $profile->short_description ?: null;
    $activeSection = $activeSection ?? 'perfil';

    // WhatsApp & phone CTAs
    $profileWhatsappRaw  = $featuredListing?->getPublicWhatsappForDisplay()
      ?: ($profile->whatsapp ?: ($profile->user?->phone ?? null));
    $profileWhatsappNorm = $profileWhatsappRaw ? \App\Models\MariachiListing::normalizePhoneForUrl($profileWhatsappRaw) : null;
    $profileWhatsappUrl  = $profileWhatsappNorm
        ? 'https://wa.me/'.$profileWhatsappNorm.'?text='.rawurlencode('Hola '.$profileName.', vi tu perfil en Mariachis.co y me gustaría cotizar.')
        : null;
    $profilePhoneRaw  = $featuredListing?->getPublicPhoneForDisplay() ?: ($profile->user?->phone ?? null);
    $profilePhoneNorm = $profilePhoneRaw ? \App\Models\MariachiListing::normalizePhoneForUrl($profilePhoneRaw) : null;
    $profilePhoneUrl  = $profilePhoneNorm ? 'tel:+'.$profilePhoneNorm : null;

    // Price from featured listing
    $featuredListingPrice = $featuredListing?->base_price;

    // Event types from active listings (up to 3)
    $profileEventTypes = $profile->activeListings
        ->flatMap(fn ($l) => $l->eventTypes->pluck('name'))
        ->filter()
        ->unique()
        ->take(3)
        ->values();

    // Featured review — uses the controller-loaded collection (no N+1)
    $featuredReview = ($publicReviews ?? collect())->first();
    $profileSectionUrl = route('mariachi.provider.public.show', ['handle' => $profile->slug]);
    $announcementsSectionUrl = route('mariachi.provider.public.section', ['handle' => $profile->slug, 'section' => 'anuncios']);
    $coverageSectionUrl = route('mariachi.provider.public.section', ['handle' => $profile->slug, 'section' => 'cobertura']);
    $socialSectionUrl = route('mariachi.provider.public.section', ['handle' => $profile->slug, 'section' => 'redes']);
  @endphp

  @if(! empty($pendingActivation))
  @php $isAdminViewing = ! empty($pendingActivationIsAdmin); @endphp
  <div style="background:{{ $isAdminViewing ? '#eff6ff' : '#fefce8' }};border-bottom:1px solid {{ $isAdminViewing ? '#93c5fd' : '#fde047' }};padding:0.85rem 1.25rem;">
    <div class="layout-shell" style="display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;">
      <div style="display:flex;align-items:center;gap:0.65rem;">
        <svg style="width:1.25rem;height:1.25rem;color:{{ $isAdminViewing ? '#2563eb' : '#ca8a04' }};flex-shrink:0;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
        </svg>
        <div>
          @if($isAdminViewing)
            <p style="margin:0;font-size:.875rem;font-weight:700;color:#1e40af;">Vista admin — Perfil pendiente de activación</p>
            <p style="margin:0;font-size:.8rem;color:#1d4ed8;line-height:1.4;">Este perfil no es visible para el público. El mariachi debe completar el pago de activación para que aparezca en el marketplace.</p>
          @else
            <p style="margin:0;font-size:.875rem;font-weight:700;color:#854d0e;">Vista previa de tu perfil público</p>
            <p style="margin:0;font-size:.8rem;color:#a16207;line-height:1.4;">Esta página estará disponible para los clientes una vez que completes la activación de tu cuenta.</p>
          @endif
        </div>
      </div>
      @if(! $isAdminViewing)
        <a href="{{ route('mariachi.account.activation') }}"
           style="display:inline-flex;align-items:center;gap:.4rem;background:#ca8a04;color:#fff;font-size:.8rem;font-weight:800;padding:.5rem 1.1rem;border-radius:999px;text-decoration:none;white-space:nowrap;flex-shrink:0;">
          Activar cuenta →
        </a>
      @endif
    </div>
  </div>
  @endif

  <main class="provider-public-shell">
    <section class="layout-shell">
      <div class="provider-profile-header-card">
        <div class="provider-profile-header-banner">
          @if($bannerImage)
            <img src="{{ $bannerImage }}" alt="Portada de {{ $profileName }}" />
          @endif

          <div class="provider-profile-header-banner__overlay">
            <span class="provider-profile-header-banner__eyebrow">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                <path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" />
                <path d="M4 20a8 8 0 1 1 16 0" />
              </svg>
              {{ $profile->hasActiveVerification() ? 'Perfil verificado en Mariachis.co' : 'Perfil oficial en Mariachis.co' }}
            </span>

            <div class="provider-profile-header-banner__glance" aria-hidden="true">
              <span class="provider-profile-header-banner__glance-item">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                  <rect x="3" y="4" width="18" height="14" rx="2" />
                  <path d="M8 20h8" />
                  <path d="M12 18v2" />
                </svg>
                {{ $profile->active_listings_count }} {{ $profile->active_listings_count === 1 ? 'anuncio' : 'anuncios' }}
              </span>
              <span class="provider-profile-header-banner__glance-item">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                  <path d="M12 21s7-4.35 7-11a7 7 0 1 0-14 0c0 6.65 7 11 7 11Z" />
                  <circle cx="12" cy="10" r="2.5" />
                </svg>
                {{ $coverageAreas->count() }} {{ $coverageAreas->count() === 1 ? 'zona' : 'zonas' }}
              </span>
            </div>
          </div>
        </div>

        <div class="provider-profile-header">
          <div class="provider-profile-header__identity">

            {{-- Avatar solo — espacio libre a la derecha para nombres largos --}}
            <div class="provider-profile-avatar-name-row">
              <div class="provider-profile-avatar">
                @if($avatarImage)
                  <img src="{{ $avatarImage }}" alt="{{ $profileName }}" loading="lazy" decoding="async" width="{{ $profile->logo_width ?: 512 }}" height="{{ $profile->logo_height ?: 512 }}" />
                @else
                  <span>{{ $avatarInitials }}</span>
                @endif
              </div>
            </div>

            {{-- Nombre: fila completa debajo del avatar --}}
            <div class="provider-profile-heading">
              <h1>{{ $profileName }}</h1>
              @if($profile->hasActiveVerification())
                <span class="provider-profile-verified-badge">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" d="m9 12.75 2.25 2.25L15 9.75" />
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 3.75h6l.75 2.25 2.25.75v5.16c0 3.124-1.697 6-4.43 7.502L12 20.25l-1.57-.828A8.486 8.486 0 0 1 6 11.91V6.75L8.25 6 9 3.75Z" />
                  </svg>
                  <span>Perfil verificado</span>
                </span>
              @endif
            </div>
            @if(! $isAutoSlug)
              <a href="{{ $canonicalUrl }}" class="provider-profile-handle">
                {{ $publicProfileLabel }}
              </a>
            @endif

            <div class="provider-profile-header__chips">
              <span class="provider-profile-header__chip">{{ $verificationUiLabel }}</span>
              <span class="provider-profile-header__chip">{{ $cityName }}</span>
              @if($reviewsTotal > 0)
                <span class="provider-profile-header__chip">
                  ★ {{ number_format($avgRating, 1) }}
                  ({{ $reviewsTotal }} {{ $reviewsTotal === 1 ? 'reseña' : 'reseñas' }})
                </span>
              @endif
              @if($featuredListingPrice)
                <span class="provider-profile-price-chip">
                  Desde ${{ number_format((float)$featuredListingPrice, 0, ',', '.') }} COP
                </span>
              @endif
            </div>

            @if($profileEventTypes->isNotEmpty())
              <div class="provider-profile-event-chips">
                @foreach($profileEventTypes as $et)
                  <span class="provider-profile-event-chip">{{ $et }}</span>
                @endforeach
              </div>
            @endif
          </div>

          <div class="provider-profile-header__actions">
            @if($profileWhatsappUrl)
              <a href="{{ $profileWhatsappUrl }}" target="_blank" rel="noopener" class="provider-profile-wa-btn">
                <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
                  <path d="M11.938 1.5C6.177 1.5 1.5 6.177 1.5 11.938c0 1.888.506 3.657 1.39 5.18L1.5 22.5l5.538-1.37A10.385 10.385 0 0 0 11.938 22.5c5.761 0 10.438-4.677 10.438-10.438S17.699 1.5 11.938 1.5z" fill-rule="evenodd" clip-rule="evenodd" opacity=".18"/>
                  <path d="M11.938 3C6.977 3 3 6.977 3 11.938c0 1.79.495 3.47 1.36 4.903L3 21l4.293-1.327a8.922 8.922 0 0 0 4.645 1.264C16.9 20.937 20.875 16.9 20.875 11.938 20.875 6.977 16.9 3 11.938 3z"/>
                </svg>
                Contactar por WhatsApp
              </a>
            @endif
            @if($profilePhoneUrl && !$profileWhatsappUrl)
              <a href="{{ $profilePhoneUrl }}" class="provider-profile-call-btn">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z"/></svg>
                Llamar
              </a>
            @endif
            {{-- Compact trust strip: replaces the 3 bulky metric cards --}}
            <div class="provider-profile-trust-strip">
              <span class="provider-profile-trust-strip__item">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                  <path d="M12 21s7-4.35 7-11a7 7 0 1 0-14 0c0 6.65 7 11 7 11Z" /><circle cx="12" cy="10" r="2.5" />
                </svg>
                <strong>{{ $cityName }}</strong>
              </span>
              <span class="provider-profile-trust-strip__item" style="color:rgba(15,23,42,0.2);">·</span>
              <span class="provider-profile-trust-strip__item">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                  <path d="M8 2v4" /><path d="M16 2v4" /><rect x="3" y="6" width="18" height="15" rx="2" /><path d="M3 10h18" />
                </svg>
                Desde <strong>{{ $joinedLabel }}</strong>
              </span>
              @if($profile->active_listings_count > 0)
                <span class="provider-profile-trust-strip__item" style="color:rgba(15,23,42,0.2);">·</span>
                <span class="provider-profile-trust-strip__item">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                    <rect x="3" y="4" width="18" height="14" rx="2" /><path d="M8 20h8" /><path d="M12 18v2" />
                  </svg>
                  <strong>{{ $profile->active_listings_count }}</strong> {{ $profile->active_listings_count === 1 ? 'anuncio' : 'anuncios' }}
                </span>
              @endif
            </div>
            @if($featuredListing)
              <a href="{{ route('mariachi.public.show', ['slug' => $featuredListing->slug]) }}" class="provider-profile-primary-btn">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" style="width:1rem;height:1rem;" aria-hidden="true">
                  <rect x="3" y="4" width="18" height="14" rx="2" /><path d="M8 20h8" /><path d="M12 18v2" />
                </svg>
                Ver anuncio y cotizar
              </a>
            @endif
          </div>
        </div>
      </div>
    </section>

    <section class="layout-shell mt-6">
      <div class="provider-profile-nav-card">
        <nav class="provider-profile-nav" aria-label="Navegacion del perfil" data-provider-sections-nav>
          <a href="{{ $profileSectionUrl }}" class="{{ $activeSection === 'perfil' ? 'is-active' : '' }}" data-provider-section-link data-section="perfil">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
              <path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" />
              <path d="M4 20a8 8 0 1 1 16 0" />
            </svg>
            Perfil
          </a>
          <a href="{{ $announcementsSectionUrl }}" class="{{ $activeSection === 'anuncios' ? 'is-active' : '' }}" data-provider-section-link data-section="anuncios">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
              <rect x="3" y="4" width="18" height="14" rx="2" />
              <path d="M8 20h8" />
              <path d="M12 18v2" />
            </svg>
            Anuncios
          </a>
          <a href="{{ $coverageSectionUrl }}" class="{{ $activeSection === 'cobertura' ? 'is-active' : '' }}" data-provider-section-link data-section="cobertura">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
              <path d="M12 21s7-4.35 7-11a7 7 0 1 0-14 0c0 6.65 7 11 7 11Z" />
              <circle cx="12" cy="10" r="2.5" />
            </svg>
            Cobertura
          </a>
          <a href="{{ $socialSectionUrl }}" class="{{ $activeSection === 'redes' ? 'is-active' : '' }}" data-provider-section-link data-section="redes">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
              <path d="M9 12a3 3 0 0 0 3 3h4a3 3 0 0 0 0-6h-4a3 3 0 0 0-3 3Z" />
              <path d="M15 12a3 3 0 0 0-3-3H8a3 3 0 0 0 0 6h4a3 3 0 0 0 3-3Z" />
            </svg>
            Redes
          </a>
        </nav>
      </div>
    </section>

    <div data-provider-sections>
      <section class="layout-shell mt-8 provider-profile-anchor provider-profile-panel" id="perfil" data-provider-section-panel="perfil" @if($activeSection !== 'perfil') hidden @endif>

        {{-- Featured review: social proof above the fold --}}
        @if($featuredReview && filled($featuredReview->comment))
          @php
            $reviewerName = $featuredReview->clientUser?->first_name
              ? $featuredReview->clientUser->first_name.' '.mb_substr((string)($featuredReview->clientUser->last_name ?? ''),0,1).'.'
              : 'Cliente verificado';
            $reviewDate = $featuredReview->created_at?->diffForHumans() ?? '';
          @endphp
          <div class="provider-profile-review-quote" style="margin-bottom:1.5rem;">
            <div class="provider-profile-review-quote__stars">
              @for($i = 1; $i <= 5; $i++)
                <svg viewBox="0 0 20 20" aria-hidden="true">
                  <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
                    fill="{{ $i <= (int)($featuredReview->rating ?? 5) ? 'currentColor' : 'oklch(0.88 0.01 95)' }}" />
                </svg>
              @endfor
            </div>
            <p class="provider-profile-review-quote__text">"{{ \Illuminate\Support\Str::limit($featuredReview->comment, 220) }}"</p>
            <div class="provider-profile-review-quote__meta">
              <div class="provider-profile-review-quote__avatar">{{ mb_strtoupper(mb_substr($reviewerName, 0, 1)) }}</div>
              <span>{{ $reviewerName }}</span>
              @if($reviewDate)<span style="opacity:.6;">· {{ $reviewDate }}</span>@endif
            </div>
          </div>
        @endif

        {{-- About section: client-facing, no internal metadata --}}
        <div class="provider-profile-card provider-profile-card--wide" style="padding:1.75rem 2rem;">
          <div class="provider-profile-about">

            @if($profileIntro)
              <div class="provider-profile-about__block">
                <p class="provider-profile-about__label">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                    <path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" />
                    <path d="M4 20a8 8 0 1 1 16 0" />
                  </svg>
                  Sobre el grupo
                </p>
                <p class="provider-profile-about__text">{{ $profileIntro }}</p>
              </div>
            @endif

            @if($profileEventTypes->isNotEmpty())
              <div class="provider-profile-about__block">
                <p class="provider-profile-about__label">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                    <path d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5" />
                  </svg>
                  Ideal para
                </p>
                <div class="provider-profile-event-chips">
                  @foreach($profileEventTypes as $et)
                    <span class="provider-profile-event-chip">{{ $et }}</span>
                  @endforeach
                </div>
              </div>
            @endif

            @if($coverageAreas->count() > 1)
              <div class="provider-profile-about__block">
                <p class="provider-profile-about__label">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                    <path d="M12 21s7-4.35 7-11a7 7 0 1 0-14 0c0 6.65 7 11 7 11Z" />
                    <circle cx="12" cy="10" r="2.5" />
                  </svg>
                  Cobertura
                </p>
                <div class="provider-profile-event-chips">
                  @foreach($coverageAreas->take(6) as $area)
                    <span class="provider-profile-event-chip">{{ $area }}</span>
                  @endforeach
                  @if($coverageAreas->count() > 6)
                    <span class="provider-profile-event-chip">+{{ $coverageAreas->count() - 6 }} más</span>
                  @endif
                </div>
              </div>
            @endif

            @if($profileWhatsappUrl)
              <div style="border-top:1px solid rgba(15,23,42,0.07);padding-top:1.25rem;margin-top:.25rem;">
                <a href="{{ $profileWhatsappUrl }}" target="_blank" rel="noopener"
                   style="display:inline-flex;align-items:center;gap:.5rem;font-size:.88rem;font-weight:800;color:#16a34a;text-decoration:none;">
                  <svg viewBox="0 0 24 24" fill="currentColor" style="width:1rem;height:1rem;" aria-hidden="true">
                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
                    <path d="M11.938 3C6.977 3 3 6.977 3 11.938c0 1.79.495 3.47 1.36 4.903L3 21l4.293-1.327a8.922 8.922 0 0 0 4.645 1.264C16.9 20.937 20.875 16.9 20.875 11.938 20.875 6.977 16.9 3 11.938 3z"/>
                  </svg>
                  Contactar por WhatsApp
                </a>
              </div>
            @endif

          </div>
        </div>

        {{-- Reviews section --}}
        @if($reviewsTotal > 0)
          <div class="provider-reviews-section">
            <div class="provider-reviews-header">
              <h3>{{ $reviewsTotal === 1 ? '1 reseña verificada' : $reviewsTotal.' reseñas verificadas' }}</h3>
              <div class="provider-reviews-aggregate">
                <span class="provider-reviews-aggregate__score">{{ number_format($avgRating, 1) }}</span>
                <div>
                  <div class="provider-reviews-aggregate__stars">
                    @for($i = 1; $i <= 5; $i++)
                      <svg viewBox="0 0 20 20" aria-hidden="true">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
                          fill="{{ $i <= round($avgRating) ? 'currentColor' : 'oklch(0.88 0.01 95)' }}" />
                      </svg>
                    @endfor
                  </div>
                  <p class="provider-reviews-aggregate__count">Basado en {{ $reviewsTotal }} {{ $reviewsTotal === 1 ? 'reseña' : 'reseñas' }}</p>
                </div>
                @if($reviewsTotal >= 3)
                  <div class="provider-reviews-dist">
                    @foreach([5, 4, 3, 2, 1] as $star)
                      <div class="provider-reviews-dist__row">
                        <span class="provider-reviews-dist__label">{{ $star }}</span>
                        <div class="provider-reviews-dist__bar">
                          <span style="width:{{ $reviewsTotal > 0 ? round(($ratingDist[$star] / $reviewsTotal) * 100) : 0 }}%"></span>
                        </div>
                      </div>
                    @endforeach
                  </div>
                @endif
              </div>
            </div>

            <div class="provider-reviews-grid">
              @foreach($publicReviews as $review)
                @php
                  $rName = $review->clientUser?->first_name
                    ? $review->clientUser->first_name.' '.mb_substr((string)($review->clientUser->last_name ?? ''),0,1).'.'
                    : 'Cliente verificado';
                  $rDate  = $review->created_at?->diffForHumans() ?? '';
                  $rEvent = $review->event_type ?? null;
                @endphp
                <article class="provider-review-card">
                  <div class="provider-review-card__top">
                    <div class="provider-review-card__person">
                      <div class="provider-review-card__avatar">{{ mb_strtoupper(mb_substr($rName, 0, 1)) }}</div>
                      <div>
                        <p class="provider-review-card__name">{{ $rName }}</p>
                        @if($rDate)<p class="provider-review-card__date">{{ $rDate }}</p>@endif
                      </div>
                    </div>
                    <div class="provider-review-card__stars" aria-label="{{ $review->rating }} de 5 estrellas">
                      @for($i = 1; $i <= 5; $i++)
                        <svg viewBox="0 0 20 20" aria-hidden="true">
                          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
                            fill="{{ $i <= $review->rating ? 'currentColor' : 'oklch(0.88 0.01 95)' }}" />
                        </svg>
                      @endfor
                    </div>
                  </div>
                  @if(filled($review->comment))
                    <p class="provider-review-card__text">{{ \Illuminate\Support\Str::limit($review->comment, 280) }}</p>
                  @endif
                  @if($rEvent)
                    <span class="provider-review-card__event">{{ $rEvent }}</span>
                  @endif
                </article>
              @endforeach
            </div>
          </div>
        @endif

      </section>

      <section class="layout-shell mt-10 provider-profile-anchor provider-profile-panel" id="anuncios" data-provider-section-panel="anuncios" @if($activeSection !== 'anuncios') hidden @endif>
        <h2 class="provider-profile-section-title">Anuncios</h2>

        @if($profile->activeListings->isNotEmpty())
          <div class="provider-profile-grid">
            @foreach($profile->activeListings as $listing)
              @php
                $featuredPhoto = $listing->photos->firstWhere('is_featured', true) ?? $listing->photos->first();
                $cardAvatar = $featuredPhoto?->urlForVariant('thumb') ?: $avatarImage;
                $listingProgress = max(8, min(100, (int) $listing->listing_completion));
                $coverageSummary = $listing->zone_name ?: ($listing->service_areas_count > 0 ? $listing->service_areas_count.' zona(s)' : ($listing->city_name ?: $cityName));
                $planLabel = $listing->selected_plan_code ? \Illuminate\Support\Str::headline((string) $listing->selected_plan_code) : 'Plan por definir';
                $statusLabel = $listing->hasPremiumMarketplaceBadge() ? ($listing->marketplaceBadgeLabel() ?: 'VIP') : 'Activo';
                $eventLabels = $listing->eventTypes->pluck('name')->take(3);
              @endphp

              <article class="provider-profile-card">
                <div class="provider-profile-card__header">
                  <div class="provider-profile-card__head">
                    <div class="provider-profile-card__identity">
                      <div class="provider-profile-card__media">
                        @if($cardAvatar)
                          <img src="{{ $cardAvatar }}" alt="{{ $listing->title }}" loading="lazy" decoding="async" width="{{ $featuredPhoto?->width ?: ($profile->logo_width ?: 512) }}" height="{{ $featuredPhoto?->height ?: ($profile->logo_height ?: 512) }}" />
                        @else
                          {{ $avatarInitials }}
                        @endif
                      </div>
                      <div class="min-w-0">
                        <h3 class="provider-profile-card__title">{{ $listing->title }}</h3>
                        <div class="provider-profile-card__client">
                          <span class="font-semibold">Ciudad:</span>
                          <span>{{ $listing->city_name ?: $cityName }}</span>
                        </div>
                      </div>
                    </div>

                    <a href="{{ route('mariachi.public.show', ['slug' => $listing->slug]) }}" class="provider-profile-card__action" aria-label="Ver anuncio">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                        <path d="M3 12s3-6 9-6 9 6 9 6-3 6-9 6-9-6-9-6Z" />
                        <circle cx="12" cy="12" r="3" />
                      </svg>
                    </a>
                  </div>
                </div>

                <div class="provider-profile-card__body">
                  <div class="provider-profile-card__stats">
                    <div class="provider-profile-card__stat-box">
                      <p>{{ $listing->base_price ? '$'.number_format((float) $listing->base_price, 0, ',', '.') : 'Por cotizar' }}</p>
                      <span>Precio base</span>
                    </div>
                    <div class="provider-profile-card__stat-box">
                      <p>{{ $coverageSummary }}</p>
                      <span>{{ $planLabel }}</span>
                    </div>
                  </div>

                  <p class="provider-profile-card__copy">
                    {{ \Illuminate\Support\Str::limit($listing->short_description ?: 'Anuncio publicado dentro del perfil oficial del grupo en Mariachis.co.', 138) }}
                  </p>
                </div>

                <div class="provider-profile-card__footer">
                  <div class="provider-profile-card__topline">
                    <p class="mb-0"><span class="font-extrabold text-slate-900">Activo desde:</span> {{ optional($listing->activated_at ?: $listing->updated_at)->format('d/m/Y') }}</p>
                    <span class="provider-profile-status-badge {{ $listing->hasPremiumMarketplaceBadge() ? 'provider-profile-status-badge--vip' : '' }}">{{ $statusLabel }}</span>
                  </div>

                  <div class="provider-profile-card__progressline">
                    <small>{{ $listing->photos_count }} foto(s) · {{ $listing->videos_count }} video(s)</small>
                    <small>{{ $listingProgress }}% completado</small>
                  </div>

                  <div class="provider-profile-card__progress">
                    <span style="width: {{ $listingProgress }}%"></span>
                  </div>

                  <div class="provider-profile-card__bottomline">
                    <div class="provider-profile-card__chips">
                      @forelse($eventLabels as $label)
                        <span class="provider-profile-card__chip">{{ $label }}</span>
                      @empty
                        <span class="provider-profile-card__chip">Evento privado</span>
                      @endforelse
                    </div>

                    <a href="{{ route('mariachi.public.show', ['slug' => $listing->slug]) }}" class="provider-profile-card__link">
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="18" height="18">
                        <path d="M3 12s3-6 9-6 9 6 9 6-3 6-9 6-9-6-9-6Z" />
                        <circle cx="12" cy="12" r="3" />
                      </svg>
                      Ver anuncio
                    </a>
                  </div>
                </div>
              </article>
            @endforeach
          </div>
        @else
          <div class="provider-profile-empty-card">
            {{ $profileName }} aun no tiene anuncios publicados en este momento.
          </div>
        @endif
      </section>

      <section class="layout-shell mt-10 provider-profile-anchor provider-profile-panel" id="cobertura" data-provider-section-panel="cobertura" @if($activeSection !== 'cobertura') hidden @endif>
        <h2 class="provider-profile-section-title">Cobertura</h2>

        <article class="provider-profile-card provider-profile-card--wide">
          <div class="provider-profile-card__header">
            <div class="provider-profile-card__head">
              <div class="provider-profile-card__identity">
                <div class="provider-profile-card__media">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                    <path d="M12 21s7-4.35 7-11a7 7 0 1 0-14 0c0 6.65 7 11 7 11Z" />
                    <circle cx="12" cy="10" r="2.5" />
                  </svg>
                </div>
                <div class="min-w-0">
                  <h3 class="provider-profile-card__title">Cobertura del grupo</h3>
                  <div class="provider-profile-card__client">Ciudad principal: {{ $cityName }}</div>
                </div>
              </div>
            </div>
          </div>

          <div class="provider-profile-card__body">
            <div class="provider-profile-card__stats">
              <div class="provider-profile-card__stat-box">
                <p>{{ $coverageAreas->count() }}</p>
                <span>Zona(s) visibles</span>
              </div>
              <div class="provider-profile-card__stat-box">
                <p>{{ $coverageAreas->first() ?: $cityName }}</p>
                <span>Base del grupo</span>
              </div>
            </div>

            <p class="provider-profile-card__copy">
              {{ $profileName }} aparece con base en {{ $cityName }} y puede mostrar cobertura adicional segun sus anuncios activos.
            </p>
          </div>

          <div class="provider-profile-card__footer">
            <div class="provider-profile-card__bottomline">
              <div class="provider-profile-card__chips">
                @forelse($coverageAreas->take(10) as $area)
                  <span class="provider-profile-card__chip">{{ $area }}</span>
                @empty
                  <span class="provider-profile-card__chip">{{ $cityName }}</span>
                @endforelse
              </div>
            </div>
          </div>
        </article>
      </section>

      <section class="layout-shell mt-10 provider-profile-anchor provider-profile-panel" id="redes" data-provider-section-panel="redes" @if($activeSection !== 'redes') hidden @endif>
        <h2 class="provider-profile-section-title">Redes</h2>

        <article class="provider-profile-card provider-profile-card--wide">
          <div class="provider-profile-card__header">
            <div class="provider-profile-card__head">
              <div class="provider-profile-card__identity">
                <div class="provider-profile-card__media">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                    <path d="M10 14a3 3 0 0 1 0-4.24l2.12-2.12a3 3 0 0 1 4.24 4.24l-1.41 1.41" />
                    <path d="M14 10a3 3 0 0 1 0 4.24l-2.12 2.12a3 3 0 1 1-4.24-4.24l1.41-1.41" />
                  </svg>
                </div>
                <div class="min-w-0">
                  <h3 class="provider-profile-card__title">Web y redes</h3>
                  <div class="provider-profile-card__client">{{ $socialLinks->count() }} enlace(s) publicado(s)</div>
                </div>
              </div>
            </div>
          </div>

          <div class="provider-profile-card__body">
            @if($socialLinks->isNotEmpty())
              <ul class="provider-profile-link-list">
                @foreach($socialLinks as $link)
                  <li>
                    <a href="{{ $link['url'] }}" target="_blank" rel="noopener noreferrer">
                      <span>
                        {{ $link['label'] }}
                        <small>Abrir enlace</small>
                      </span>
                      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" width="18" height="18">
                        <path d="M7 17 17 7" />
                        <path d="M8 7h9v9" />
                      </svg>
                    </a>
                  </li>
                @endforeach
              </ul>
            @else
              <p class="provider-profile-card__copy">Este perfil aun no ha agregado enlaces web o redes sociales.</p>
            @endif
          </div>
        </article>
      </section>
    </div>
  </main>

  <script>
    (function () {
      const nav = document.querySelector('[data-provider-sections-nav]');
      if (!nav) {
        return;
      }

      const links = Array.from(nav.querySelectorAll('[data-provider-section-link]'));
      const panels = Array.from(document.querySelectorAll('[data-provider-section-panel]'));
      const sections = new Set(['perfil', 'anuncios', 'cobertura', 'redes']);

      const setActiveSection = (section, nextUrl) => {
        if (!sections.has(section)) {
          return;
        }

        links.forEach((link) => {
          link.classList.toggle('is-active', link.dataset.section === section);
        });

        panels.forEach((panel) => {
          panel.hidden = panel.dataset.providerSectionPanel !== section;
        });

        if (nextUrl && window.location.href !== nextUrl) {
          window.history.pushState({ section }, '', nextUrl);
        }
      };

      links.forEach((link) => {
        link.addEventListener('click', (event) => {
          const section = link.dataset.section || 'perfil';
          if (!sections.has(section)) {
            return;
          }

          event.preventDefault();
          setActiveSection(section, link.href);
        });
      });

      window.addEventListener('popstate', () => {
        const path = window.location.pathname;
        const section = path.endsWith('/anuncios')
          ? 'anuncios'
          : path.endsWith('/cobertura')
            ? 'cobertura'
            : path.endsWith('/redes')
              ? 'redes'
              : 'perfil';

        setActiveSection(section);
      });
    })();
  </script>

  {{-- Mobile sticky CTA -- only when contact info is available --}}
  @if($profileWhatsappUrl || $profilePhoneUrl)
  <div class="provider-mobile-sticky-cta" role="region" aria-label="Contactar al grupo">
    @if($profileWhatsappUrl)
      <a href="{{ $profileWhatsappUrl }}" target="_blank" rel="noopener" class="provider-mobile-sticky-cta__wa">
        <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" style="width:1.1rem;height:1.1rem;">
          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
          <path d="M11.938 3C6.977 3 3 6.977 3 11.938c0 1.79.495 3.47 1.36 4.903L3 21l4.293-1.327a8.922 8.922 0 0 0 4.645 1.264C16.9 20.937 20.875 16.9 20.875 11.938 20.875 6.977 16.9 3 11.938 3z"/>
        </svg>
        WhatsApp
      </a>
    @endif
    @if($profilePhoneUrl)
      <a href="{{ $profilePhoneUrl }}" class="provider-mobile-sticky-cta__call" aria-label="Llamar">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" aria-hidden="true" style="width:1.15rem;height:1.15rem;">
          <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z"/>
        </svg>
      </a>
    @endif
  </div>
  @endif
@endsection