@props([
    'posts' => collect(),
])

@php
    $posts = collect($posts);
@endphp

@if ($posts->isNotEmpty())
    <section class="space-y-4">

        <div class="grid grid-cols-1 gap-4 md:grid-cols-2  md:gap-6">
            @foreach ($posts as $post)
                @php
                    $tenantName = $post->tenant?->name ?: $post->tenant_key;
                @endphp

                <a
                    href="{{ method_exists($post, 'resolvePostUrl') ? $post->resolvePostUrl() : '' }}"
                    target="_blank"
                    rel="noopener"
                    class="group grid grid-cols-[minmax(0,2fr)_minmax(0,1fr)] gap-4 transition-colors hover:bg-surface1 md:gap-6"
                >
                    <div class="min-w-0">
                        <div class="space-y-3">
                            <div class="space-y-2">
                                <div class="line-clamp-2 text-base font-bold leading-tight tracking-[-0.03em] c-main transition-colors group-hover:c-primary sm:text-lg">
                                    {{ $post->title }}
                                </div>

                                @if ($post->meta_description)
                                    <p class="line-clamp-2 text-sm leading-5 c-muted">
                                        {{ $post->meta_description }}
                                    </p>
                                @endif

                            </div>
                        </div>
                    </div>

                    <div class="relative aspect-[16/9] overflow-hidden rounded-[0.75rem] bg-surface">
                        @if ($post->thumbnail_url)
                            <img
                                src="{{ $post->thumbnail_url }}"
                                alt=""
                                class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.035]"
                            >
                        @else
                            <div class="absolute inset-0 flex items-center justify-center bg-brand-gradient px-6 text-center text-white">
                                <div class="space-y-3">
                                    <div class="text-xs font-semibold uppercase tracking-[0.22em] text-white/70">
                                        {{ $tenantName }}
                                    </div>
                                    <div class="text-lg font-semibold leading-tight tracking-[-0.03em]">
                                        {{ $post->title }}
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </a>
            @endforeach
        </div>
    </section>
@endif