@php
    $icons = ['Avocats' => '⚖️', 'Notaires' => '📜', 'Mandataires & experts' => '🧑‍⚖️', 'Santé' => '🩺', 'TPE / PME' => '🏢', 'Externalisation' => '📞'];
    $icon = $icons[$post->category] ?? '📞';
@endphp
<article class="group flex flex-col overflow-hidden rounded-2xl bg-white border border-navy-50 hover:shadow-lg hover:border-orange-400 transition">
    <a href="{{ route('blog.show', $post) }}" class="block">
        @if($post->image)
            @php $postRemote = \Illuminate\Support\Str::startsWith($post->image, 'http'); @endphp
            <picture>
                @unless($postRemote)
                    <source srcset="{{ asset('img/' . preg_replace('/\.(png|jpe?g)$/i', '.webp', $post->image)) }}" type="image/webp">
                @endunless
                <img src="{{ $postRemote ? $post->image : asset('img/' . $post->image) }}" alt="{{ $post->title }}" class="h-44 w-full object-cover" loading="lazy" decoding="async">
            </picture>
        @else
            <div class="pp-article-thumb h-44 w-full grid place-items-center text-5xl">
                <span class="drop-shadow">{{ $icon }}</span>
            </div>
        @endif
    </a>
    <div class="flex flex-1 flex-col p-6">
        <div class="flex items-center gap-2 text-xs font-medium text-orange-500">
            <span>{{ $post->category }}</span>
            <span class="text-navy-700/40">· {{ $post->readingMinutes() }} min</span>
        </div>
        <h3 class="mt-2 font-bold text-navy-900 leading-snug line-clamp-2">
            <a href="{{ route('blog.show', $post) }}" class="hover:text-orange-500">{{ $post->title }}</a>
        </h3>
        <p class="mt-2 text-sm text-navy-700/70 line-clamp-3 flex-1">{{ $post->excerpt }}</p>
        <a href="{{ route('blog.show', $post) }}" class="mt-4 text-sm font-semibold text-orange-500 hover:text-orange-600">Lire l'article →</a>
    </div>
</article>