<div>
    @if ($call !== null)

        <div class="relative flex flex-col justify-end overflow-hidden bg-theme-background my-9">
            <a class="relative flex cursor-pointer flex-col justify-end overflow-hidden bg-{{ $call['tag_color'] ?? 'gray' }}-400"
               href="{{ route('call.show', ['id' => $call['id']]) }}">

                <!-- Tag color background + overlay -->
                <div class="absolute inset-0 z-0 bg-{{ $call['tag_color'] ?? 'gray' }}-400"></div>
                <div class="absolute inset-0 z-10 bg-black/50"></div>

                <!-- Card content -->
                <div class="relative z-20 flex h-full flex-col justify-between px-6 md:px-10 lg:px-14 py-14 md:py-14 lg:py-20 text-white">
                    <div class="space-y-3">

                        {{-- Deepest tag category badge only --}}
                        @php $deepestCat = !empty($call['tag_categories']) ? last($call['tag_categories']) : null; @endphp
                        @if ($deepestCat)
                            <div class="flex flex-wrap items-center gap-2 pr-16 md:pr-20">
                                <span class="bg-{{ $deepestCat['color'] ?? 'gray' }}-400 inline-flex items-center rounded-md px-2 py-1 text-sm font-normal text-black">
                                    {{ $deepestCat['name'] }}
                                </span>
                            </div>
                        @endif

                        {{-- Title --}}
                        <h2 class="text text-3xl lg:text-4xl font-semibold leading-tight pr-16 md:pr-20 line-clamp-2">
                            {{ $call['title'] }}
                        </h2>

                        {{-- Location + expiry badges --}}
                        @if (!empty($call['location']) || !empty($call['expiry_badge_text']))
                            <div class="flex flex-wrap items-center gap-2">
                                @if (!empty($call['location']))
                                    <h4 class="inline-block items-center rounded-sm bg-black px-2 pb-1 pt-0.5 text-sm lg:text-base font-normal uppercase text-white">
                                        {{ $call['location'] }}
                                    </h4>
                                @endif
                                @if (!empty($call['expiry_badge_text']))
                                    <h4 class="inline-block items-center rounded-sm bg-black px-2 pb-1 pt-0.5 text-sm lg:text-base font-normal uppercase text-white">
                                        {{ $call['expiry_badge_text'] }}
                                    </h4>
                                @endif
                            </div>
                        @endif
                    </div>

                    {{-- Excerpt --}}
                    @if (!empty($call['excerpt']))
                        <div class="mx-6 my-4 flex items-center justify-center">
                            <p class="w-full text-base md:text-xl font-normal leading-relaxed line-clamp-2">
                                {{ $call['excerpt'] }}
                            </p>
                        </div>
                    @endif

                    {{-- Callable avatar + name + location --}}
                    @if (!empty($call['callable_name']))
                        <div class="flex flex-wrap items-end gap-4 mt-4">
                            <div class="flex items-center gap-3">
                                @if (!empty($call['photo']))
                                    <div class="h-16 w-16 flex-shrink-0 rounded-full outline outline-1 outline-offset-1 outline-white/50 overflow-hidden">
                                        <img src="{{ $call['photo'] }}"
                                             alt="{{ $call['callable_name'] }}"
                                             class="h-full w-full object-cover" />
                                    </div>
                                @endif
                                <div class="flex flex-col gap-1 text-sm">
                                    <span class="font-medium">{{ $call['callable_name'] }}</span>
                                    @if (!empty($call['callable_location']))
                                        <span class="text-white/80">{{ $call['callable_location'] }}</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </a>

            <!-- Like button positioned absolutely outside anchor tag -->
            <div class="absolute top-14 right-4 md:right-10 lg:right-14 z-30">
                @livewire('reaction-button', [
                    'typeName'        => 'like',
                    'showCounter'     => true,
                    'reactionCounter' => $call['like_count'],
                    'modelClass'      => $call['model'],
                    'modelId'         => $call['id'],
                    'size'            => 'w-10 h-10',
                    'inverseColors'   => true,
                ], key('like-call-main-' . $call['id']))
            </div>
        </div>

    @endif
</div>
