@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'],
  ];
@endphp

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

    <div class="d-flex justify-content-between align-items-center category-head">
      <h4 class="category-title">{{ $categoryName }}</h4>
      <a href="{{ route('subscriptions.index', $viewAllParams) }}" class="category-view-all">View all &gt;&gt;</a>
    </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;
        @endphp

        <div class="col-lg-4 col-md-6 col-12 d-flex">
          <a
            href="{{ route('subscriptions.show', ['subscription' => $card['target_subscription_id'], 'country' => $selectedCountry ?? null]) }}"
            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">
              <div class="service-logo {{ ! empty($card['logo']) ? 'has-image' : '' }}">
                <div class="service-logo-inner">
                  <span class="service-logo-fallback" aria-hidden="{{ ! empty($card['logo']) ? 'true' : 'false' }}">
                    @foreach($serviceLogoChunks as $chunk)
                      <span>{{ $chunk }}</span>
                    @endforeach
                  </span>
                  @if(! empty($card['logo']))
                    <img src="{{ asset($card['logo']) }}" alt="{{ $card['service_name'] }}" onerror="this.remove()">
                  @endif
                </div>
              </div>

              <div class="market-card-surface">
                <div class="market-card-top">
                <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>
              </div>

                <div class="market-card-bottom">
                  <div class="market-card-copy">
                    <div class="market-card-title" title="{{ $card['service_name'] }}">{{ $card['service_name'] }}</div>
                    <p class="minimum-text">Minimum per month</p>
                  </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'] ?? 'EUR' }}</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>