@props([
    'job',
])

@php
    $category = filled($job->category)
        ? \Illuminate\Support\Str::headline(str_replace(['-', '_'], ' ', (string) $job->category))
        : 'Remote role';

    $source = $job->source?->name ?: $job->attribution();
    $skills = collect($job->skills ?? [])->filter()->take(5);
    $tags = collect($job->tags ?? [])->filter()->take(4);
    $visibleTags = $tags->isNotEmpty() ? $tags : $skills->take(4);
    $location = collect([
        filled($job->location_type) ? \Illuminate\Support\Str::headline(str_replace(['-', '_'], ' ', (string) $job->location_type)) : 'Remote',
        filled($job->country_code) ? \Illuminate\Support\Str::upper((string) $job->country_code) : null,
        filled($job->timezone) ? (string) $job->timezone : null,
    ])->filter()->implode(' / ');
    $posted = $job->posted_at?->diffForHumans() ?? 'Recently posted';

    $salary = $job->salaryLabel() ?: 'Salary not listed';
@endphp

<article {{ $attributes->merge(['class' => 'group relative flex h-full cursor-default overflow-hidden rounded-[1.65rem] border border-slate-200/80 bg-white p-1 shadow-sm shadow-slate-900/[0.04] transition duration-300 hover:-translate-y-1 hover:border-teal-200 hover:shadow-2xl hover:shadow-teal-950/[0.08]']) }} aria-label="Locked public job preview">
    <div class="absolute inset-x-0 top-0 h-24 bg-[radial-gradient(circle_at_20%_0%,rgba(20,184,166,0.18),transparent_16rem),linear-gradient(135deg,rgba(240,253,250,0.95),rgba(239,246,255,0.86))]"></div>

    <div class="relative flex min-h-full w-full flex-col rounded-[1.4rem] bg-white/90 p-5 backdrop-blur">
        <div class="flex items-start justify-between gap-4">
            <div class="flex flex-wrap items-center gap-2">
                <span class="inline-flex items-center gap-1.5 rounded-full bg-teal-700 px-3 py-1 text-xs font-semibold text-white shadow-sm shadow-teal-700/20">
                    <x-landing.icon name="briefcase" class="size-3.5" />
                    {{ $category }}
                </span>
                <span class="rounded-full border border-white/80 bg-white/80 px-3 py-1 text-xs font-medium text-slate-600 shadow-sm shadow-slate-900/[0.03]">Preview only</span>
            </div>

            <span class="flex size-10 shrink-0 items-center justify-center rounded-2xl bg-white text-amber-600 shadow-sm ring-1 ring-amber-100">
                <x-landing.icon name="lock" class="size-5" />
            </span>
        </div>

        <div class="mt-6 min-h-32">
            <h3 class="text-xl font-semibold leading-7 text-slate-950">{{ $job->title }}</h3>

            @if (filled($job->company))
                <p class="mt-2 text-sm font-medium text-slate-500">{{ $job->company }}</p>
            @endif

            <div class="mt-5 grid gap-2">
                <div class="flex items-center gap-2 text-sm font-medium text-slate-600">
                    <span class="flex size-8 shrink-0 items-center justify-center rounded-xl bg-slate-100 text-teal-700">
                        <x-landing.icon name="map-pin" class="size-4" />
                    </span>
                    <span>{{ $location ?: 'Remote' }}</span>
                </div>
                <div class="flex items-center gap-2 text-sm font-medium text-slate-600">
                    <span class="flex size-8 shrink-0 items-center justify-center rounded-xl bg-slate-100 text-teal-700">
                        <x-landing.icon name="wallet" class="size-4" />
                    </span>
                    <span>{{ $salary }}</span>
                </div>
            </div>
        </div>

        @if ($visibleTags->isNotEmpty())
            <div class="mt-5 flex flex-wrap gap-2">
                @foreach ($visibleTags as $tag)
                    <span class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-3 py-1.5 text-xs font-medium text-slate-600 shadow-sm shadow-slate-900/[0.03]">
                        <x-landing.icon name="tag" class="size-3" />
                        {{ $tag }}
                    </span>
                @endforeach
            </div>
        @endif

        <div class="mt-auto pt-5">
            <div class="grid gap-3 rounded-2xl border border-slate-200 bg-slate-50/80 p-3">
                <div class="flex flex-wrap items-center justify-between gap-2">
                    @if (filled($source))
                        <span class="inline-flex items-center gap-1.5 rounded-full bg-white px-3 py-1 text-xs font-semibold text-slate-600">
                            <x-landing.icon name="globe" class="size-3.5 text-teal-700" />
                            {{ $source }}
                        </span>
                    @endif
                    <span class="rounded-full bg-white px-3 py-1 text-xs font-medium text-slate-500">{{ $posted }}</span>
                </div>
                <div class="rounded-xl border border-amber-200 bg-amber-50 px-3 py-2 text-xs font-semibold text-amber-800">
                    Apply link locked. Unlock matched jobs after questionnaire.
                </div>
            </div>
        </div>
    </div>
</article>