@props(['post'])

<div class="group relative rounded-2xl overflow-hidden bg-gray-950 min-h-[460px] md:min-h-[540px] flex flex-col">
    {{-- Background image --}}
    <div class="absolute inset-0">
        <img src="{{ asset($post->featurePhoto) }}" alt="{{ $post->photo_alt_text }}"
            class="w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-700">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-950 via-gray-950/55 to-gray-950/5"></div>
    </div>

    {{-- Headline badge --}}
    <div class="relative z-10 p-6 md:p-8">
        <span class="inline-flex items-center gap-1.5 bg-red-600 text-white text-[11px] font-black uppercase tracking-widest px-3 py-1.5 rounded-full shadow">
            <span class="w-1.5 h-1.5 bg-white rounded-full animate-pulse"></span>
            Headline
        </span>
    </div>

    {{-- Content at bottom --}}
    <div class="relative z-10 mt-auto p-6 md:p-8">
        @if($post->categories->count())
        <div class="flex flex-wrap gap-2 mb-3">
            @foreach($post->categories as $cat)
                <a href="{{ route('filamentblog.category.post', ['category' => $cat->slug]) }}"
                    class="text-[11px] font-black text-red-400 uppercase tracking-widest hover:text-red-300 transition-colors">
                    {{ $cat->name }}
                </a>
            @endforeach
        </div>
        @endif

        <a href="{{ route('filamentblog.post.show', ['post' => $post->slug]) }}">
            <h2 class="text-white text-2xl md:text-3xl lg:text-[2rem] font-extrabold leading-tight mb-4 hover:text-red-200 transition-colors line-clamp-3 tracking-tight">
                {{ $post->title }}
            </h2>
        </a>

        @if($post->sub_title)
        <p class="text-gray-300 text-sm leading-relaxed mb-5 line-clamp-2 max-w-xl hidden sm:block">
            {{ Str::limit($post->sub_title, 160) }}
        </p>
        @endif

        <div class="flex items-center justify-between gap-4">
            <div class="flex items-center gap-3">
                <img src="{{ $post->user->avatar }}" alt="{{ $post->user->name() }}"
                    class="w-9 h-9 rounded-full object-cover ring-2 ring-white/20 bg-gray-700 shrink-0">
                <div>
                    <p class="text-white text-sm font-semibold leading-tight">{{ $post->user->name() }}</p>
                    <p class="text-gray-400 text-xs mt-0.5">{{ $post->formattedPublishedDate() }}</p>
                </div>
            </div>

            <a href="{{ route('filamentblog.post.show', ['post' => $post->slug]) }}"
                class="hidden sm:inline-flex items-center gap-2 bg-white/10 hover:bg-red-600 border border-white/20 hover:border-red-600 text-white text-xs font-bold px-5 py-2.5 rounded-full backdrop-blur-sm transition-all duration-200">
                Baca Selengkapnya
                <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
                </svg>
            </a>
        </div>
    </div>
</div>