@props(['prompt'])

@php
    $locked = $prompt->is_premium && ! $prompt->isUnlockedFor(auth()->user());
    $thumb = $prompt->thumbnail
        ? (Str::startsWith($prompt->thumbnail, ['http://', 'https://'])
            ? $prompt->thumbnail
            : Storage::url($prompt->thumbnail))
        : null;
@endphp

<article class="group surface overflow-hidden transition hover:-translate-y-1 hover:border-brand-500/50">
    <a href="{{ route('prompts.show', $prompt) }}" class="block">
        <div class="relative aspect-video overflow-hidden bg-ink-900">
            @if ($thumb)
                <img src="{{ $thumb }}" alt="{{ $prompt->title }}" loading="lazy"
                     class="h-full w-full object-cover transition duration-500 group-hover:scale-105 {{ $locked ? 'blur-[3px] brightness-50' : '' }}">
            @else
                <div class="grid h-full w-full place-items-center bg-gradient-to-br from-ink-800 to-ink-700 text-4xl">
                    {{ $prompt->category?->icon ?: '🎬' }}
                </div>
            @endif

            @if ($locked)
                <div class="absolute inset-0 grid place-items-center">
                    <span class="rounded-full border border-white/20 bg-black/60 px-3 py-1.5 text-xs font-bold text-white backdrop-blur">
                        🔒 Members only
                    </span>
                </div>
            @endif

            <div class="absolute left-3 top-3 flex gap-1.5">
                @if ($prompt->is_premium)
                    <span class="rounded-md bg-gradient-to-r from-brand-600 to-fuchsia-600 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-white">Premium</span>
                @else
                    <span class="rounded-md bg-emerald-500/90 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-white">Free</span>
                @endif

                @if ($prompt->is_featured)
                    <span class="rounded-md bg-amber-400/90 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-black">★ Featured</span>
                @endif
            </div>
        </div>
    </a>

    <div class="p-4">
        <div class="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
            @if ($prompt->category)
                <span>{{ $prompt->category->icon }} {{ $prompt->category->name }}</span>
            @endif
            @if ($prompt->tool)
                <span class="text-slate-600">•</span>
                <span>{{ $prompt->tool }}</span>
            @endif
        </div>

        <h3 class="mt-2 line-clamp-2 font-bold leading-snug text-white">
            <a href="{{ route('prompts.show', $prompt) }}" class="hover:text-brand-300">{{ $prompt->title }}</a>
        </h3>

        @if ($prompt->excerpt)
            <p class="mt-1.5 line-clamp-2 text-sm text-slate-400">{{ $prompt->excerpt }}</p>
        @endif

        <div class="mt-4 flex items-center justify-between">
            <span class="text-xs text-slate-500">{{ number_format($prompt->views) }} views</span>
            <a href="{{ route('prompts.show', $prompt) }}"
               class="text-xs font-bold {{ $locked ? 'text-brand-300' : 'text-emerald-400' }}">
                {{ $locked ? 'Join to unlock →' : 'View prompt →' }}
            </a>
        </div>
    </div>
</article>