@if($prompt->isTextual())
<a href="{{ route('prompts.show', $prompt->slug) }}" class="card-lift text-prompt-card group block relative rounded-2xl overflow-hidden bg-[#fffcf7] border border-[#ddd6c8]">
    <div class="text-prompt-card__accent"></div>
    <div class="p-5 flex flex-col min-h-[240px]">
        <div class="flex items-center justify-between gap-2 mb-4">
            <span class="px-2.5 py-1 bg-[#fef3c7] border border-[#fcd34d]/50 rounded-lg text-[0.65rem] font-bold text-[#92400e]">
                {{ $prompt->structureLabel() }}
            </span>
            @if($prompt->aiModel)
                <span class="px-2.5 py-1 bg-[#f6f3ec] border border-[#ddd6c8] rounded-lg text-[0.65rem] font-bold text-[#6b6459]">
                    {{ $prompt->aiModel->name_fa }}
                </span>
            @endif
        </div>

        <div class="flex items-start gap-3 mb-3">
            <span class="text-prompt-card__icon shrink-0" aria-hidden="true">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6M7 4h7l5 5v11a2 2 0 01-2 2H7a2 2 0 01-2-2V6a2 2 0 012-2z"/></svg>
            </span>
            <h3 class="text-[#1c1917] font-bold text-[0.95rem] leading-snug line-clamp-3 group-hover:text-[#b45309] transition-colors">
                {{ $prompt->displayTitle() }}
            </h3>
        </div>

        @if($prompt->description_fa)
            <p class="text-[#6b6459] text-sm leading-7 line-clamp-3 flex-1">
                {{ $prompt->description_fa }}
            </p>
        @endif

        <div class="mt-4 pt-3 border-t border-[#eee8dc] flex items-center justify-between gap-2">
            @php $len = $prompt->details_fa['length'] ?? null; @endphp
            <span class="text-[0.7rem] text-[#a39e94] truncate">{{ $len ?: 'قالب نوشتاری' }}</span>
            <span class="text-[#b45309] text-xs font-semibold opacity-70 group-hover:opacity-100 transition-opacity">
                مشاهده ←
            </span>
        </div>
    </div>
</a>
@else
<a href="{{ route('prompts.show', $prompt->slug) }}" class="card-lift block group relative rounded-2xl overflow-hidden bg-[#fffcf7] border border-[#ddd6c8]">
    <div class="relative aspect-[4/5] overflow-hidden">
        <img src="{{ $prompt->thumbUrl() }}"
            alt="{{ $prompt->image_alt_fa ?? $prompt->displayTitle() }}"
            width="400" height="500"
            loading="lazy"
            decoding="async"
            class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.03]">

        @if($prompt->aiModel)
            <span class="absolute top-3 left-3 px-2.5 py-1 bg-[#fffcf7]/90 backdrop-blur-sm border border-[#ddd6c8] rounded-lg text-[0.65rem] font-bold text-[#1c1917] tracking-wide">
                {{ $prompt->aiModel->name_fa }}
            </span>
        @endif

        <div class="card-overlay absolute inset-0 flex flex-col justify-end p-4">
            <h3 class="text-white font-semibold text-sm leading-snug line-clamp-2 drop-shadow-sm">
                {{ $prompt->displayTitle() }}
            </h3>
            <span class="text-white/60 text-xs mt-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                مشاهده و کپی ←
            </span>
        </div>
    </div>
</a>
@endif