@props(['post', 'featured' => false])

<article class="{{ $featured ? 'group relative overflow-hidden rounded-3xl bg-white shadow-xl' : 'group' }}">
    @if($featured)
        <!-- Featured Post Card -->
        <a href="{{ route('post.show', $post) }}" class="block">
            <div class="aspect-[4/5] sm:aspect-[3/4] relative overflow-hidden">
                @if($post->display_image)
                    <img src="{{ Storage::url($post->display_image) }}" 
                         alt="{{ $post->title }}"
                         class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
                @else
                    <div class="w-full h-full bg-gradient-to-br from-rose-100 via-fuchsia-100 to-indigo-100 flex items-center justify-center">
                        <svg class="w-16 h-16 text-fuchsia-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                    </div>
                @endif
                
                <!-- Overlay -->
                <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
                
                <!-- Content -->
                <div class="absolute bottom-0 left-0 right-0 p-6 sm:p-8">
                    @if($post->category)
                        <span class="inline-block px-3 py-1 text-xs font-medium bg-white/20 backdrop-blur-md text-white rounded-full mb-3">
                            {{ $post->category->name }}
                        </span>
                    @endif
                    <h3 class="text-xl sm:text-2xl font-serif font-semibold text-white mb-2 line-clamp-2">{{ $post->title }}</h3>
                    <p class="text-stone-300 text-sm line-clamp-2 mb-4">{{ $post->excerpt }}</p>
                    <div class="flex items-center text-stone-400 text-sm">
                        <span>{{ $post->published_at?->format('Y年m月d日') }}</span>
                        <span class="mx-2">·</span>
                        <span>{{ $post->reading_time }} 分钟阅读</span>
                    </div>
                </div>
            </div>
        </a>
    @else
        <!-- Regular Post Card -->
        <a href="{{ route('post.show', $post) }}" class="block">
            <div class="aspect-square relative overflow-hidden rounded-2xl bg-stone-100 mb-4">
                @if($post->display_image)
                    <img src="{{ Storage::url($post->display_image) }}" 
                         alt="{{ $post->title }}"
                         class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
                @else
                    <div class="w-full h-full bg-gradient-to-br from-rose-50 via-fuchsia-50 to-indigo-50 flex items-center justify-center">
                        <svg class="w-12 h-12 text-fuchsia-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                    </div>
                @endif
                
                <!-- Gallery indicator -->
                @if($post->gallery && count($post->gallery) > 1)
                    <div class="absolute top-3 right-3 p-2 bg-black/40 backdrop-blur-sm rounded-lg">
                        <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                    </div>
                @endif
                
                <!-- Hover overlay -->
                <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-300"></div>
            </div>
            
            <div class="space-y-2">
                @if($post->category)
                    <span class="inline-block text-xs font-medium text-fuchsia-600 uppercase tracking-wider">
                        {{ $post->category->name }}
                    </span>
                @endif
                <h3 class="font-serif text-lg font-medium text-stone-900 line-clamp-2 group-hover:text-fuchsia-700 transition-colors">
                    {{ $post->title }}
                </h3>
                <p class="text-sm text-stone-500 line-clamp-2">{{ $post->excerpt }}</p>
                <div class="flex items-center text-xs text-stone-400 pt-1">
                    <span>{{ $post->published_at?->format('Y/m/d') }}</span>
                    @if($post->views_count > 0)
                        <span class="mx-2">·</span>
                        <span>{{ number_format($post->views_count) }} 阅读</span>
                    @endif
                </div>
            </div>
        </a>
    @endif
</article>