{{--
    PRO Profile list card.
    Mobile:  vertical — photo banner top, info below (single column).
    Desktop: horizontal — photo left (fixed width), info right (2-column grid).

    Required:
      $proProfile  — App\Models\ProProfile
      $mainPhoto   — App\Models\ProfilePhoto|null

    Optional:
      $cardLink    — string  (defaults to pro.show)
--}}
@php
    $name     = trim(($proProfile->first_name ?? '') . ' ' . ($proProfile->last_name ?? ''));
    $cardLink = $cardLink ?? route('pro.show', $proProfile);

    // Support form categories
    $catPills  = [];
    $totalCats = 0;
    if (!empty($proProfile->support_forms)) {
        foreach (\App\Models\ProProfile::supportFormTaxonomy() as $cat) {
            $catSlugs = collect($cat['subcats'])->flatMap(fn($s) => array_keys($s['tags']))->all();
            if (array_intersect($catSlugs, $proProfile->support_forms)) {
                $totalCats++;
                if (count($catPills) < 4) {
                    $catPills[] = ['emoji' => $cat['emoji'], 'label' => $cat['label']];
                }
            }
        }
    }

    // Specific support form tag labels for right column "Ondersteuningsvormen" (max 5)
    $tagItems = [];
    $tagExtra  = 0;
    if (!empty($proProfile->support_forms)) {
        $allTags  = collect(\App\Models\ProProfile::supportFormTaxonomy())
            ->flatMap(fn($c) => collect($c['subcats'])->flatMap(fn($s) => $s['tags']))
            ->all();
        foreach (array_slice($proProfile->support_forms, 0, 5) as $slug) {
            if ($lbl = $allTags[$slug] ?? null) $tagItems[] = __($lbl);
        }
        $tagExtra = max(0, count($proProfile->support_forms) - 5);
    }

    // Target groups (max 4 to display)
    $targetBadges = [];
    if (!empty($proProfile->target_groups)) {
        $opts = \App\Models\ProProfile::targetGroupOptions();
        foreach (array_slice($proProfile->target_groups, 0, 4) as $key) {
            if ($lbl = $opts[$key] ?? null) $targetBadges[] = __($lbl);
        }
        $targetExtra = max(0, count($proProfile->target_groups) - 4);
    } else {
        $targetExtra = 0;
    }

    // Support for / expertise (max 4)
    $expertiseBadges = [];
    if (!empty($proProfile->support_for)) {
        $opts = \App\Models\ProProfile::supportForOptions();
        foreach (array_slice($proProfile->support_for, 0, 4) as $key) {
            if ($lbl = $opts[$key] ?? null) $expertiseBadges[] = __($lbl);
        }
        $expertiseExtra = max(0, count($proProfile->support_for) - 4);
    } else {
        $expertiseExtra = 0;
    }

    // About me snippet
    $about = $proProfile->about_me
        ? \Illuminate\Support\Str::limit(strip_tags($proProfile->about_me), 160)
        : null;

    // Mobile right panel: logo takes priority; fall back to a second photo
    $allPhotos   = $proProfile->user->photos ?? collect();
    $secondPhoto = $mainPhoto
        ? $allPhotos->where('id', '!=', $mainPhoto->id)->first()
        : null;
    $hasRightPanel = $proProfile->logoUrl() || $secondPhoto;
@endphp

{{-- Outer <a> makes the entire card a single clickable link --}}
<a href="{{ $cardLink }}"
   class="profile-card group flex flex-col sm:flex-row sm:h-72
          bg-white dark:bg-gray-800 rounded-2xl
          border border-gray-100 dark:border-gray-700
          shadow-sm hover:shadow-md hover:border-indigo-200 dark:hover:border-indigo-700
          transition-all duration-200 overflow-hidden">

    {{-- ── Photo + logo column ───────────────────────────────────────── --}}
    {{-- Mobile: nd-pro-media is flex-row; nd-pro-split constrains photo to square so the right half can show logo/extra-photo.
         Desktop (sm+): flex-col via Tailwind, photo fills remaining height, logo strip below. --}}
    <div class="nd-pro-media {{ $hasRightPanel ? 'nd-pro-split' : '' }} flex flex-col shrink-0 sm:w-52">

        {{-- Photo --}}
        <div class="nd-pro-media-photo relative sm:h-auto sm:flex-1
                    overflow-hidden bg-gray-100 dark:bg-gray-700">
            @if ($mainPhoto)
                <img src="{{ $mainPhoto->thumbUrl() }}"
                     alt="{{ $name }}"
                     class="w-full h-full object-cover object-top
                            group-hover:scale-105 transition-transform duration-300"/>
            @else
                <div class="w-full h-full flex items-center justify-center text-gray-300 dark:text-gray-600">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
                              d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                    </svg>
                </div>
            @endif
        </div>

        {{-- Right panel — logo (priority) or second photo (fallback), mobile only.
             On desktop: logo shown as strip below photo; second photo not shown. --}}
        @if ($proProfile->logoUrl())
            <div class="nd-pro-media-logo sm:flex sm:w-auto sm:border-l-0
                        items-center justify-center p-3
                        bg-gray-50 dark:bg-gray-900/40
                        border-gray-100 dark:border-gray-700
                        sm:border-t">
                <img src="{{ $proProfile->logoUrl() }}"
                     alt="{{ $proProfile->organization_name }}"
                     class="w-20 h-20 sm:w-16 sm:h-16 object-contain rounded-lg"/>
            </div>
        @elseif ($secondPhoto)
            {{-- Second photo: mobile right panel only, hidden on desktop --}}
            <div class="nd-pro-media-photo2 sm:hidden
                        border-gray-100 dark:border-gray-700">
                <img src="{{ $secondPhoto->thumbUrl() }}"
                     alt=""
                     class="w-full h-full object-cover object-top"/>
            </div>
        @endif
    </div>

    {{-- ── Info column ────────────────────────────────────────────────── --}}
    <div class="flex flex-col gap-4 p-5 flex-1 min-w-0 overflow-hidden">

        {{-- 2-column info grid --}}
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-3 flex-1">

            {{-- LEFT: naam · praktijk · locatie · kernactiviteit · expertise --}}
            <div class="flex flex-col gap-2.5">

                {{-- Naam --}}
                <div class="flex flex-wrap items-center gap-2">
                    <p class="font-semibold text-base text-gray-900 dark:text-white leading-snug">
                        {{ $name ?: '—' }}
                    </p>
                    @if ($proProfile->is_neurodivergent)
                        <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs
                                     bg-violet-50 dark:bg-violet-900/30
                                     border border-violet-200 dark:border-violet-700
                                     text-violet-700 dark:text-violet-300 shrink-0">
                            🧠 {{ __('Neurodivergent') }}
                        </span>
                    @endif
                </div>

                {{-- Praktijk --}}
                @if ($proProfile->organization_name)
                    <p class="text-lg text-gray-600 dark:text-gray-300 font-bold -mt-1">
                        {{ $proProfile->organization_name }}
                    </p>
                @endif

                {{-- ZIP · woonplaats · land --}}
                @if ($proProfile->zip_code || $proProfile->city || $proProfile->country)
                    <p class="text-xs text-gray-400 dark:text-gray-500">
                        {{ collect([
                            collect([$proProfile->zip_code, $proProfile->city])->filter()->implode(' '),
                            $proProfile->country ? __(\App\Helpers\CountryHelper::name($proProfile->country)) : null,
                        ])->filter()->implode(' — ') }}
                    </p>
                @endif

                {{-- Kernactiviteit (vrij tekstveld) --}}
                @if ($proProfile->core_activity)
                    <p class="text-lg text-indigo-700 dark:text-indigo-300 font-medium">
                        {{ $proProfile->core_activity }}
                    </p>
                @endif

                {{-- Expertise — diagnoses / conditions --}}
                @if ($expertiseBadges)
                    <div class="mt-0.5">
                        <p class="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-1.5">
                            {{ __('Expertise') }}
                        </p>
                        <div class="flex flex-wrap gap-1.5">
                            @foreach ($expertiseBadges as $badge)
                                <span class="text-xs px-2 py-0.5 rounded-full
                                             bg-gray-100 dark:bg-gray-700
                                             border border-gray-200 dark:border-gray-600
                                             text-gray-700 dark:text-gray-300">{{ $badge }}</span>
                            @endforeach
                            @if ($expertiseExtra > 0)
                                <span class="text-xs text-gray-400 dark:text-gray-500 self-center">+{{ $expertiseExtra }}</span>
                            @endif
                        </div>
                    </div>
                @endif
            </div>

            {{-- RIGHT: doelgroep · ondersteuningsvormen (hoofdcategorieën) --}}
            <div class="flex flex-col gap-3">

                @if ($targetBadges)
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-1.5">
                            {{ __('Target group') }}
                        </p>
                        <div class="flex flex-wrap gap-1.5">
                            @foreach ($targetBadges as $badge)
                                <span class="text-xs px-2 py-0.5 rounded-full
                                             bg-gray-100 dark:bg-gray-700
                                             border border-gray-200 dark:border-gray-600
                                             text-gray-700 dark:text-gray-300">{{ $badge }}</span>
                            @endforeach
                            @if ($targetExtra > 0)
                                <span class="text-xs text-gray-400 dark:text-gray-500 self-center">+{{ $targetExtra }}</span>
                            @endif
                        </div>
                    </div>
                @endif

                @if ($catPills)
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-1.5">
                            {{ __('Forms of support') }}
                        </p>
                        <div class="flex flex-wrap gap-1.5">
                            @foreach ($catPills as $pill)
                                <span class="text-xs px-2 py-0.5 rounded-full
                                             bg-amber-50 dark:bg-amber-900/30
                                             border border-amber-200 dark:border-amber-700
                                             text-amber-800 dark:text-amber-300">
                                    {{ $pill['emoji'] }} {{ __($pill['label']) }}
                                </span>
                            @endforeach
                            @if ($totalCats > 4)
                                <span class="text-xs text-gray-400 dark:text-gray-500 self-center">+{{ $totalCats - 4 }}</span>
                            @endif
                        </div>
                    </div>
                @endif
            </div>
        </div>

        {{-- About me + booking CTA --}}
        @if ($about || $proProfile->booking_url)
            <div class="flex items-end justify-between gap-4 pt-3 border-t border-gray-100 dark:border-gray-700 mt-auto">
                @if ($about)
                    <p class="text-xs text-gray-400 dark:text-gray-500 leading-relaxed line-clamp-2 flex-1">
                        {{ $about }}
                    </p>
                @endif

                @if ($proProfile->booking_url)
                    <span class="shrink-0 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg
                                 bg-indigo-600 group-hover:bg-indigo-700 text-white text-xs font-semibold transition">
                        📅 {{ __('Book a session') }}
                    </span>
                @endif
            </div>
        @endif

    </div>
</a>