{{-- Blog card component — featured and compact variants (Story 5.8) --}}
@props([
'article',
'variant' => 'compact',
'locale' => app()->getLocale(),
])

@php
$articleUrl = localized_route('blog.show', ['article' => $article->slug]);

// Extract excerpt from first paragraph block, strip HTML, truncate 120 chars
$excerpt = '';
if (!empty($article->blocks) && is_array($article->blocks)) {
foreach ($article->blocks as $block) {
if (($block['type'] ?? '') === 'paragraph' && !empty($block['data']['content'])) {
$excerpt = \Illuminate\Support\Str::limit(strip_tags($block['data']['content']), 120);
break;
}
}
}

// Resolve thumbnail: OG image or first image block
$thumbnail = null;
if ($article->og_image) {
$thumbnail = \Illuminate\Support\Facades\Storage::disk('blog_images')->url($article->og_image);
} elseif (!empty($article->blocks) && is_array($article->blocks)) {
foreach ($article->blocks as $block) {
if (($block['type'] ?? '') === 'image') {
$imgPath = $block['data']['path'] ?? $block['data']['url'] ?? '';
if (is_array($imgPath)) { $imgPath = $imgPath[0] ?? ''; }
if ($imgPath) {
$thumbnail = str_starts_with($imgPath, 'http')
? $imgPath
: \Illuminate\Support\Facades\Storage::disk('public')->url($imgPath);
}
break;
}
}
}
@endphp

@if($variant === 'featured')
{{-- Featured variant: large card, image beside text, full-width --}}
<div class="mb-12" data-animate="appear">
    <span class="inline-block text-xs font-semibold uppercase tracking-wider text-primary mb-4">
        {{ __('blog.featured') }}
    </span>
    <a href="{{ $articleUrl }}"
        class="block group bg-card rounded-xl overflow-hidden border border-border/30 hover:border-primary transition-all duration-300 hover:-translate-y-1 hover:shadow-lg">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-0">
            <div class="aspect-video lg:aspect-auto overflow-hidden">
                @if($thumbnail)
                <img src="{{ $thumbnail }}"
                    alt="{{ $article->meta_title ?: $article->title }}"
                    class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                    loading="eager">
                @else
                <div class="w-full h-full min-h-[200px] bg-muted flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" class="text-muted-foreground/30">
                        <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
                        <circle cx="9" cy="9" r="2" />
                        <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
                    </svg>
                </div>
                @endif
            </div>
            <div class="p-6 lg:p-10 flex flex-col justify-center space-y-4">
                <div class="flex items-center gap-3 flex-wrap">
                    @if($article->tags->isNotEmpty())
                    @foreach($article->tags->take(2) as $tag)
                    <span class="text-xs px-3 py-1 rounded-full bg-primary/20 text-primary font-medium">
                        {{ $tag->name }}
                    </span>
                    @endforeach
                    @endif
                    @if($article->published_at)
                    <time class="text-xs text-muted-foreground" datetime="{{ $article->published_at->toIso8601String() }}">
                        {{ $article->published_at->translatedFormat('d F Y') }}
                    </time>
                    @endif
                    <span class="text-xs text-muted-foreground">{{ $article->read_time }} min</span>
                </div>
                <h2 class="text-2xl lg:text-3xl font-semibold text-foreground group-hover:text-primary transition-colors">
                    {{ $article->title }}
                </h2>
                @if($excerpt)
                <p class="text-foreground/60 text-base line-clamp-3">{{ $excerpt }}</p>
                @endif
                <span class="inline-flex items-center text-primary text-sm font-medium">
                    {{ __('blog.read_more') }}
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-2 group-hover:translate-x-1 transition-transform">
                        <polyline points="9 18 15 12 9 6"></polyline>
                    </svg>
                </span>
            </div>
        </div>
    </a>
</div>
@else
{{-- Compact variant: standard card for grid layout --}}
<article class="bg-card rounded-xl overflow-hidden group border border-border/30 hover:border-primary transition-all duration-300 hover:-translate-y-1 hover:shadow-lg"
    data-animate="appear">
    <a href="{{ $articleUrl }}" class="block">
        <div class="aspect-video overflow-hidden">
            @if($thumbnail)
            <img src="{{ $thumbnail }}"
                alt="{{ $article->meta_title ?: $article->title }}"
                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                loading="lazy">
            @else
            <div class="w-full h-full bg-muted flex items-center justify-center aspect-video">
                <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" class="text-muted-foreground/30">
                    <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
                    <circle cx="9" cy="9" r="2" />
                    <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
                </svg>
            </div>
            @endif
        </div>
        <div class="p-6 space-y-3">
            <div class="flex items-center gap-2 flex-wrap">
                @if($article->tags->isNotEmpty())
                @foreach($article->tags->take(2) as $tag)
                <span class="text-xs px-2 py-1 rounded-full bg-primary/20 text-primary font-medium">
                    {{ $tag->name }}
                </span>
                @endforeach
                @endif
                @if($article->published_at)
                <time class="text-xs text-muted-foreground" datetime="{{ $article->published_at->toIso8601String() }}">
                    {{ $article->published_at->translatedFormat('d F Y') }}
                </time>
                @endif
                <span class="text-xs text-muted-foreground">{{ $article->read_time }} min</span>
            </div>
            <h3 class="text-lg font-semibold text-foreground line-clamp-2 group-hover:text-primary transition-colors">
                {{ $article->title }}
            </h3>
            @if($excerpt)
            <p class="text-muted-foreground text-sm line-clamp-3">{{ $excerpt }}</p>
            @endif
        </div>
    </a>
</article>
@endif