{{--
    Org profile list card.
    Mobile:  vertical — logo top, info below.
    Desktop: horizontal — logo left (fixed width), info right (2-column grid).

    Required:
      $org — App\Models\OrgProfile (with 'user' relation loaded)
--}}
@php
    $about = $org->about_me
        ? \Illuminate\Support\Str::limit(strip_tags($org->about_me), 140)
        : null;

    $supportForOpts = \App\Models\ProProfile::supportForOptions();
    $tgOpts         = \App\Models\ProProfile::targetGroupOptions();

    $supportBadges = [];
    foreach (array_slice($org->support_for ?? [], 0, 4) as $key) {
        if ($lbl = $supportForOpts[$key] ?? null) $supportBadges[] = __($lbl);
    }
    $supportExtra = max(0, count($org->support_for ?? []) - 4);

    $tgBadges = [];
    foreach (array_slice($org->target_groups ?? [], 0, 4) as $key) {
        if ($lbl = $tgOpts[$key] ?? null) $tgBadges[] = __($lbl);
    }
    $tgExtra = max(0, count($org->target_groups ?? []) - 4);

    $actTax  = \App\Models\OrgProfile::activityFormTaxonomy();
    $actLabels = collect($actTax)
        ->flatMap(fn($c) => collect($c['tags'])->mapWithKeys(fn($lbl, $slug) => [$slug => $lbl]))
        ->all();
    $actPills = [];
    foreach ($actTax as $cat) {
        $catSlugs = array_keys($cat['tags']);
        if (array_intersect($catSlugs, $org->activity_forms ?? [])) {
            $actPills[] = ['emoji' => $cat['emoji'], 'label' => $cat['label']];
            if (count($actPills) >= 4) break;
        }
    }
    $actExtra = max(0, count(array_unique(array_merge(...array_map(
        fn($p) => array_filter(array_keys($actLabels), fn($s) => in_array($s, $org->activity_forms ?? [])),
        $actPills ?: [[]]
    )))) - count($actPills));
@endphp

@php $isDraft = !$org->is_visible && auth()->id() === $org->user_id; @endphp
<a href="{{ $isDraft ? route('org.edit') : route('org.show', $org) }}"
   class="group flex flex-col sm:flex-row sm:h-64
          bg-white dark:bg-gray-800 rounded-2xl
          border {{ $isDraft ? 'border-amber-200 dark:border-amber-700' : 'border-gray-100 dark:border-gray-700' }}
          shadow-sm hover:shadow-md {{ $isDraft ? 'hover:border-amber-300 dark:hover:border-amber-600' : 'hover:border-indigo-200 dark:hover:border-indigo-700' }}
          transition-all duration-200 overflow-hidden relative">

    @if ($isDraft)
        <div class="absolute top-0 inset-x-0 flex items-center justify-between gap-2 px-3 py-1.5
                    bg-amber-50 dark:bg-amber-900/30 border-b border-amber-200 dark:border-amber-700 z-10">
            <span class="text-xs font-medium text-amber-700 dark:text-amber-400">
                ✏️ {{ __('Draft — not visible yet') }}
            </span>
            <span class="text-xs font-semibold text-amber-600 dark:text-amber-300 underline underline-offset-2">
                {{ __('Edit & publish →') }}
            </span>
        </div>
        <div class="sm:h-8"></div>{{-- spacer for the banner --}}
    @endif

    {{-- ── Logo kolom ───────────────────────────────────────────────── --}}
    <div class="shrink-0 sm:w-44 flex items-center justify-center
                bg-gray-50 dark:bg-gray-700/50 p-5 sm:p-6
                border-b sm:border-b-0 sm:border-r border-gray-100 dark:border-gray-700">
        @if ($org->logoUrl())
            <img src="{{ $org->logoUrl() }}"
                 alt="{{ $org->organization_name }}"
                 class="max-h-28 max-w-full object-contain
                        group-hover:scale-105 transition-transform duration-300">
        @else
            <div class="flex flex-col items-center gap-1 text-gray-300 dark:text-gray-600">
                <span class="text-5xl">🏢</span>
            </div>
        @endif
    </div>

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

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

            {{-- LINKS: naam · kernactiviteit · locatie · regio's --}}
            <div class="flex flex-col gap-2">

                <div class="flex flex-wrap items-center gap-2">
                    <p class="font-semibold text-base text-gray-900 dark:text-white leading-snug">
                        {{ $org->organization_name }}
                    </p>
                    @if ($org->isVerified())
                        <span class="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-xs
                                     bg-green-50 dark:bg-green-900/30
                                     border border-green-200 dark:border-green-700
                                     text-green-700 dark:text-green-300 shrink-0">
                            <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                            </svg>
                            {{ __('Verified') }}
                        </span>
                    @endif
                </div>

                @if ($org->core_activity)
                    <p class="text-sm text-indigo-600 dark:text-indigo-400 font-medium -mt-1">
                        {{ $org->core_activity }}
                    </p>
                @endif

                @if ($org->city || $org->country)
                    <p class="text-xs text-gray-400 dark:text-gray-500">
                        📍 {{ collect([$org->city, $org->country])->filter()->implode(', ') }}
                    </p>
                @endif

                @if (!empty($org->operating_regions))
                    @php
                        $regionOpts = \App\Models\OrgProfile::operatingRegionOptions();
                    @endphp
                    <div class="flex flex-wrap gap-1">
                        @foreach (array_slice($org->operating_regions, 0, 3) as $r)
                            @if ($rlbl = $regionOpts[$r] ?? null)
                                <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-600 dark:text-gray-300">{{ $rlbl }}</span>
                            @endif
                        @endforeach
                        @if (count($org->operating_regions) > 3)
                            <span class="text-xs text-gray-400 dark:text-gray-500 self-center">
                                +{{ count($org->operating_regions) - 3 }}
                            </span>
                        @endif
                    </div>
                @endif
            </div>

            {{-- RECHTS: ondersteunt · doelgroep · activiteiten --}}
            <div class="flex flex-col gap-2.5">

                @if ($supportBadges)
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-1">
                            {{ __('Supports') }}
                        </p>
                        <div class="flex flex-wrap gap-1">
                            @foreach ($supportBadges as $badge)
                                <span class="text-xs px-2 py-0.5 rounded-full
                                             bg-indigo-50 dark:bg-indigo-900/30
                                             border border-indigo-100 dark:border-indigo-800
                                             text-indigo-700 dark:text-indigo-300">{{ $badge }}</span>
                            @endforeach
                            @if ($supportExtra > 0)
                                <span class="text-xs text-gray-400 self-center">+{{ $supportExtra }}</span>
                            @endif
                        </div>
                    </div>
                @endif

                @if ($tgBadges)
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-1">
                            {{ __('Target group') }}
                        </p>
                        <div class="flex flex-wrap gap-1">
                            @foreach ($tgBadges 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-600 dark:text-gray-300">{{ $badge }}</span>
                            @endforeach
                            @if ($tgExtra > 0)
                                <span class="text-xs text-gray-400 self-center">+{{ $tgExtra }}</span>
                            @endif
                        </div>
                    </div>
                @endif

                @if ($actPills)
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500 mb-1">
                            {{ __('Activities') }}
                        </p>
                        <div class="flex flex-wrap gap-1">
                            @foreach ($actPills 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
                        </div>
                    </div>
                @endif

            </div>
        </div>

        {{-- About snippet --}}
        @if ($about)
            <div class="pt-2.5 border-t border-gray-100 dark:border-gray-700 mt-auto">
                <p class="text-xs text-gray-400 dark:text-gray-500 leading-relaxed line-clamp-2">
                    {{ $about }}
                </p>
            </div>
        @endif

    </div>
</a>