<x-app-layout>
    <x-slot name="header">
        {{ trans_with_platform('@PLATFORM_NAME@ call') }}
    </x-slot>

    <div class="py-0 md:py-12" id="custom-timebank-style">
        <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
            <div class="overflow-hidden shadow-xl sm:rounded-lg relative bg-{{ $tagColor ?? 'gray' }}-400">
                <div class="absolute inset-0 bg-black/50"></div>

                {{-- Like button absolutely positioned top-right, matching event card full view --}}
                <div class="absolute top-14 right-4 md:right-10 lg:right-14 z-30">
                    @livewire('reaction-button', [
                        'typeName'        => 'like',
                        'showCounter'     => true,
                        'reactionCounter' => $call->loveReactant?->reactionCounters->firstWhere('reaction_type_id', 3)?->count ?? 0,
                        'modelClass'      => \App\Models\Call::class,
                        'modelId'         => $call->id,
                        'size'            => 'w-10 h-10',
                        'inverseColors'   => true,
                    ], key('like-call-' . $call->id))
                </div>

                <div class="relative p-6 sm:px-20 lg:px-32 lg:py-18">

                    {{-- Tag category badges + expiry --}}
                    <div class="mb-2 mt-0 md:mt-6 lg:mt-12">
                        <div class="flex flex-wrap items-center gap-2">
                            @foreach ($tagCategories as $cat)
                                <span class="bg-{{ $cat['color'] ?? 'gray' }}-400 inline-flex items-center rounded-md px-2 py-1 text-sm font-normal text-black">
                                    {{ $cat['name'] }}
                                </span>
                            @endforeach
                        </div>
                        @if ($call->till)
                            <div class="mt-2 text-xs text-white/70">
                                {{ __('Expires') }}: {{ $call->till->translatedFormat('l d F Y') }}
                            </div>
                        @endif
                        @if ($call->is_suppressed)
                            <div class="mt-0.5 text-xs text-red-400">
                                {{ __('Publication blocked due to policy violation') }}
                            </div>
                        @else
                            <div class="mt-0.5 text-xs text-white/70">
                                <a href="{{ route('static-report-issue', [], false) . '?' . http_build_query(['subject' => __('Call reported for policy review'), 'message' => trans_with_platform('Please review this call for @PLATFORM_NAME@ policy compliance.') . "\n\n" . url()->current()]) }}"
                                   class="underline underline-offset-2 hover:text-white/90">{{ __('Report') }}</a>{{ __(' this call for policy review') }}
                            </div>
                        @endif
                    </div>

                    {{-- Title (tag name) --}}
                    <h2 class="mt-4 lg:mt-8 text-3xl lg:text-5xl font-semibold leading-tight text-white">
                        @if ($isDeleted)<span class="text-red-400">{{ __('DELETED') }}: </span>@elseif ($call->is_suppressed)<span class="text-red-400">{{ __('BLOCKED') }}: </span>@elseif ($call->is_paused)<span class="text-red-400">{{ __('PAUSED') }}: </span>@elseif ($isExpired)<span class="text-red-400">{{ __('EXPIRED') }}: </span>@endif{{ $call->tag?->translation?->name ?? $call->tag?->name }}
                    </h2>

                    {{-- Location + expiry badges --}}
                    @if ($callLocation || $expiryBadgeText)
                        <div class="mt-3 flex flex-wrap items-center gap-2">
                            @if ($callLocation)
                                <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">
                                    {{ $callLocation }}
                                </h4>
                            @endif
                            @if ($expiryBadgeText)
                                <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">
                                    {{ $expiryBadgeText }}
                                </h4>
                            @endif
                        </div>
                    @endif

                    {{-- Content --}}
                    @if ($call->translations->first()?->content)
                        <div class="mt-6">
                            <div class="px-0 py-2 text-xl lg:text-2xl leading-normal lg:leading-loose font-bold text-white">
                                {{ $call->translations->first()->content }}
                            </div>
                        </div>
                    @endif

                    {{-- Callable profile block --}}
                    <div class="my-8 lg:my-12">
                        <a href="{{ url(strtolower(class_basename($call->callable)) . '/' . $call->callable?->id) }}"
                           class="flex items-center gap-4 hover:opacity-80 cursor-pointer">
                            @if ($call->callable?->profile_photo_url)
                                <img src="{{ $call->callable->profile_photo_url }}"
                                     alt="{{ $call->callable->name }}"
                                     class="h-16 w-16 flex-shrink-0 rounded-full object-cover outline outline-1 outline-offset-1 outline-white/60">
                            @endif
                            <div>
                                <div class="font-semibold text-lg text-white">{{ $call->callable?->name }}</div>
                                @if ($callableLocation)
                                    <div class="text-sm text-white/70 mt-1">{{ $callableLocation }}</div>
                                @endif
                            </div>
                        </a>
                    </div>

                </div>

                {{-- Social share + action buttons --}}
                <div class="relative flex items-center justify-between gap-8 pl-6 sm:pl-20 lg:pl-32 pr-4 md:pr-10 lg:pr-14 mb-12">
                    {{-- Social share buttons (left, only when public) --}}
                    <div>
                        @if ($call->is_public)
                            {!! Share::mastodon()
                                ->bluesky()
                                ->linkedin()
                                ->instagram()
                                ->facebook()
                                ->whatsapp()
                                ->text($call->tag?->translation?->name ?? $call->tag?->name ?? '')
                                ->render() !!}
                        @endif
                    </div>
                    {{-- Send message button (right) --}}
                    @livewire('calls.send-message-button', ['callable' => $call->callable, 'call' => $call], key('send-message-' . $call->id))
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
