@php
  $cardPalettes = [
    ['surface' => '#f0f0f0', 'logo' => '#8373d9', 'logo_text' => '#ffffff'],
    ['surface' => '#f1f1f1', 'logo' => '#090909', 'logo_text' => '#ffffff'],
    ['surface' => '#fbf7e9', 'logo' => '#f1c40f', 'logo_text' => '#1a1a1a'],
    ['surface' => '#eef3fb', 'logo' => '#2b5ed9', 'logo_text' => '#ffffff'],
    ['surface' => '#f5efec', 'logo' => '#d86a42', 'logo_text' => '#ffffff'],
    ['surface' => '#eff5f1', 'logo' => '#2c8d58', 'logo_text' => '#ffffff'],
  ];

  $categoryIcons = [
    'recommend' => [
      'type' => 'heart',
      'color' => '#e62e43',
    ],
    'svod' => [
      'icon' => 'fa-solid fa-tv',
      'color' => '#f1b22d',
    ],
    'streaming' => [
      'icon' => 'fa-solid fa-tv',
      'color' => '#f1b22d',
    ],
    'music' => [
      'icon' => 'fa-solid fa-music',
      'color' => '#76a7ff',
    ],
    'security' => [
      'icon' => 'fa-solid fa-lock',
      'color' => '#d87e2d',
    ],
    'software' => [
      'icon' => 'fa-solid fa-laptop-code',
      'color' => '#6e9dcf',
    ],
    'reading' => [
      'icon' => 'fa-solid fa-book-open',
      'color' => '#8b78d4',
    ],
    'cloud' => [
      'icon' => 'fa-solid fa-cloud',
      'color' => '#a09e9b',
    ],
    'health' => [
      'icon' => 'fa-solid fa-user-doctor',
      'color' => '#f1a42d',
    ],
    'video games' => [
      'icon' => 'fa-solid fa-gamepad',
      'color' => '#2c2c2c',
    ],
    'gaming' => [
      'icon' => 'fa-solid fa-gamepad',
      'color' => '#2c2c2c',
    ],
    'e-learning' => [
      'icon' => 'fa-solid fa-graduation-cap',
      'color' => '#4f4f4f',
    ],
    'education' => [
      'icon' => 'fa-solid fa-graduation-cap',
      'color' => '#4f4f4f',
    ],
  ];
@endphp

<div class="market-results-frame">
  @forelse($servicesByCategory as $categoryId => $serviceCards)
    @php
      $categoryName = (string) ($categoryId === 'recommend' ? 'Recommend' : ($serviceCards->first()['category_name'] ?? 'More'));
      $categoryKey = strtolower(trim($categoryName));
      $categoryFilterId = is_numeric($categoryId) ? (int) $categoryId : 0;
      $viewAllParams = $categoryFilterId > 0 ? ['category_id' => $categoryFilterId] : ['q' => $categoryName];
      if (! empty($selectedCountry ?? null)) {
        $viewAllParams['country'] = $selectedCountry;
      }
      $catMeta = $categoryIcons[$categoryKey] ?? null;
    @endphp

    <div class="d-flex justify-content-between align-items-center category-head">
      <h4 class="category-title">
        @if($categoryKey === 'recommend')
          <span class="category-head-icon category-icon-recommend" style="display: inline-flex; align-items: center;">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#E62E43"/>
              <path d="M6 7l.7 1.5L8.2 9.2l-1.5.7L6 11.4l-.7-1.5-1.5-.7 1.5-.7L6 7z" fill="#FFD700"/>
              <path d="M17.5 12l.6 1.3 1.3.6-1.3.6-.6 1.3-.6-1.3-1.3-.6 1.3-.6.6-1.3z" fill="#FFD700"/>
            </svg>
          </span>
        @elseif($catMeta && !empty($catMeta['icon']))
          <span class="category-head-icon" style="color: {{ $catMeta['color'] }}; font-size: 1.15rem; display: inline-flex; align-items: center;">
            <i class="{{ $catMeta['icon'] }}"></i>
          </span>
        @endif
        <span>{{ $categoryName }}</span>
      </h4>
      @if($categoryKey !== 'recommend' && empty($isCategoryFiltered))
        <a href="{{ route('subscriptions.index', $viewAllParams) }}" 
           class="category-view-all"
           data-category-id="{{ $categoryFilterId > 0 ? $categoryFilterId : '' }}"
           data-category-name="{{ $categoryName }}"
           data-category-query="{{ $categoryFilterId <= 0 ? $categoryName : '' }}">View all &gt;&gt;</a>
      @endif
    </div>

    <div class="row g-3 mb-4 market-results-grid">
      @foreach($serviceCards as $card)
        @php
          $palette = $cardPalettes[abs(crc32((string) $card['service_name'])) % count($cardPalettes)];
          $serviceName = strtoupper((string) $card['service_name']);
          $compactLogoLabel = preg_replace('/[^A-Z0-9]/', '', $serviceName) ?: 'APP';
          $serviceLogoChunks = collect();

          if (preg_match('/\s/', trim($serviceName))) {
            $serviceLogoChunks = collect(preg_split('/[\s\-_]+/', $serviceName))
              ->map(fn ($chunk) => preg_replace('/[^A-Z0-9]/', '', (string) $chunk))
              ->filter()
              ->map(fn ($chunk) => substr($chunk, 0, 5))
              ->take(3)
              ->values();
          }

          if ($serviceLogoChunks->isEmpty()) {
            $compactLogoLength = strlen($compactLogoLabel);

            if ($compactLogoLength <= 5) {
              $serviceLogoChunks = collect([$compactLogoLabel]);
            } elseif ($compactLogoLength <= 8) {
              $serviceLogoChunks = collect([substr($compactLogoLabel, 0, 3), substr($compactLogoLabel, 3)]);
            } elseif ($compactLogoLength <= 10) {
              $serviceLogoChunks = collect([substr($compactLogoLabel, 0, 5), substr($compactLogoLabel, 5)]);
            } else {
              $serviceLogoChunks = collect([
                substr($compactLogoLabel, 0, 5),
                substr($compactLogoLabel, 5, 5),
                substr($compactLogoLabel, 10, 5),
              ]);
            }
          }

          $profilesCollection = collect($card['profiles'] ?? []);
          $extraProfiles = (int) ($card['extra_profiles'] ?? 0);
          $extraProfilesLabel = $extraProfiles > 99 ? '99+' : (string) $extraProfiles;
          $cardLogo = marketplaceImageUrl($card['logo'] ?? null);
          $hasPackage = !empty($card['has_package']) || ((int) ($card['listings_count'] ?? 0) > 0);
          $seekingCount = (int) ($card['seeking_count'] ?? (
              !empty($card['active_seekers'])
                ? $card['active_seekers']
                : ((abs(crc32(strtolower((string) $card['service_name']))) % 5) + 2)
          ));
        @endphp

        @php
          $targetSubId = (int) ($card['target_subscription_id'] ?? 0);
          $serviceId = (int) ($card['service_id'] ?? 0);
          $cardUrl = $targetSubId > 0
            ? route('subscriptions.show', array_filter(['subscription' => $targetSubId, 'country' => $selectedCountry ?? null]))
            : ($serviceId > 0 ? route('subscriptions.service.show', array_filter(['service' => $serviceId, 'country' => $selectedCountry ?? null])) : route('subscriptions.index'));
        @endphp

        <div class="col-lg-4 col-md-6 col-12 d-flex">
          <a
            href="{{ $cardUrl }}"
            class="market-card w-100"
            style="--market-card-bg: {{ $palette['surface'] }}; --market-logo-bg: {{ $palette['logo'] }}; --market-logo-color: {{ $palette['logo_text'] }};"
          >
            <div class="market-card-shell">
              {{-- Top-Right: Show 'Share for incentive' ONLY when there is NO package --}}
              @if(! $hasPackage)
                <span
                  class="incentive-badge"
                  title="Share for incentive"
                  onclick="event.preventDefault(); event.stopPropagation(); window.location.href='{{ route('subscriptions.create', array_filter(['service_id' => $serviceId])) }}';"
                >
                  <span class="incentive-icon"><b>$</b></span>
                  <span class="incentive-label">Share for incentive</span>
                </span>
              @endif

              <div class="service-logo {{ $cardLogo ? 'has-image' : '' }}">
                <div class="service-logo-inner">
                  <span class="service-logo-fallback" aria-hidden="{{ $cardLogo ? 'true' : 'false' }}">
                    @foreach($serviceLogoChunks as $chunk)
                      <span>{{ $chunk }}</span>
                    @endforeach
                  </span>
                  @if($cardLogo)
                    <img src="{{ $cardLogo }}" alt="{{ $card['service_name'] }}" onerror="this.remove()">
                  @endif
                </div>
              </div>

              <div class="market-card-surface">
                <div class="market-card-top">
                  @if(! $hasPackage)
                    {{-- When NO package: show orange 'X person(s) seeking' with red bell --}}
                    <div class="seeking-badge" title="{{ $seekingCount }} person(s) seeking">
                      <span class="seeking-text">{{ $seekingCount }} person(s) seeking</span>
                      <span class="seeking-bell-btn">
                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
                          <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
                          <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
                        </svg>
                      </span>
                    </div>
                  @else
                    {{-- When AT LEAST ONE package exists: show profile stack --}}
                    <div class="profile-stack {{ $profilesCollection->isEmpty() && $extraProfiles === 0 ? 'is-empty' : '' }}">
                      @foreach($profilesCollection as $profile)
                        @php
                          $avatar = trim((string) ($profile['avatar'] ?? ''));
                          $avatarSrc = $avatar !== ''
                            ? (preg_match('/^https?:\/\//', $avatar) ? $avatar : asset($avatar))
                            : '';
                        @endphp

                        <span class="profile-dot" title="{{ $profile['name'] }}">
                          @if($avatarSrc !== '')
                            <img src="{{ $avatarSrc }}" alt="{{ $profile['name'] }}" onerror="this.remove()">
                          @endif
                          <span class="profile-initial">{{ $profile['initials'] }}</span>
                        </span>
                      @endforeach

                      @if($extraProfiles > 0)
                        <span class="profile-more">+{{ $extraProfilesLabel }}</span>
                      @endif
                    </div>
                  @endif
                </div>

                <div class="market-card-bottom align-items-end">
                  <div class="market-card-copy">
                    <div class="market-card-title" title="{{ $card['service_name'] }}">{{ $card['service_name'] }}</div>
                    <div class="minimum-text">Minimum per month</div>
                  </div>

                  <div class="minimum-price">
                    <span class="minimum-price-value">{{ number_format($card['min_price'], 2) }}</span>
                    <span class="minimum-price-symbol">{{ $card['currency_symbol'] }}</span>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </div>
      @endforeach
    </div>
  @empty
    <div class="card">
      <div class="card-body py-5 text-center">
        No subscriptions found.
      </div>
    </div>
  @endforelse
</div>