@props([
    'posts' => collect(),
    'mediaRatioClass' => 'aspect-[16/9]',
])

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

@if ($posts->isNotEmpty())
    <section class="space-y-4">
        <div
            class="-mx-4 overflow-hidden px-4 md:-mx-6 md:px-6 lg:-mx-8 lg:px-8"
            data-hero-spotlight
        >
            <div
                class="swiper"
                data-hero-carousel
            >
                <div class="swiper-wrapper bg-surface">
                    @foreach ($posts as $post)
                        @php
                            $tenantName = $post->tenant?->name ?: $post->tenant_key;
                            $tags = collect($post->tags ?? []);
                            $publishedDate = optional($post->published_at)->format('Y.m.d H:i') ?? '-';
                        @endphp

                       <div class="swiper-slide ">
                            <article class="group relative flex h-full flex-col overflow-hidden bg-card">
                                <a
                                    href="{{ method_exists($post, 'resolvePostUrl') ? $post->resolvePostUrl() : '' }}"
                                    target="_blank"
                                    rel="noopener"
                                    class="grid h-full flex-1 lg:grid-cols-[1.1fr_minmax(0,0.9fr)] lg:min-h-full"
                                >
                                    <div class="relative overflow-hidden bg-surface {{ $mediaRatioClass }} lg:aspect-auto lg:h-full ">
                                        @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-8 py-12">
                                                <div class="max-w-md text-center text-white">
                                                    <div class="mb-4 text-xs font-semibold uppercase tracking-[0.24em] text-white/70">
                                                        {{ $post->source_board_title }}
                                                    </div>

                                                    <div class="text-2xl font-semibold leading-tight tracking-[-0.04em] sm:text-3xl">
                                                        {{ $post->title }}
                                                    </div>
                                                </div>
                                            </div>
                                        @endif

                                    </div>

                                    <div class="flex min-w-0 flex-col justify-between bg-surface px-6 py-6 c-main sm:px-10 sm:py-8 lg:px-[6%] lg:py-[7%] h-[16rem] lg:h-[24rem]">
                                        <div>
                                            <div class="mb-5 flex flex-wrap items-center gap-x-3 gap-y-2 text-xs c-muted sm:mb-8">
                                                <span class="font-semibold uppercase tracking-[0.18em]">
                                                    {{ $tenantName }}
                                                </span>

                                                <span class="h-1 w-1 rounded-full bg-surface2"></span>

                                                <span>
                                                    {{ $publishedDate }}
                                                </span>

                                            </div>

                                            <div class="max-w-lg">
                                                <h3 class="line-clamp-2 text-[1.75rem] leading-[1.08] lg:text-[2.4rem]">
                                                    {{ $post->title }}
                                                </h3>

                                                @if ($post->meta_description)
                                                    <p class="mt-4 line-clamp-2 text-sm leading-7 c-muted sm:mt-5 sm:text-base sm:leading-8">
                                                        {{ $post->meta_description }}
                                                    </p>
                                                @endif
                                            </div>
                                        </div>

                                        <div class="mt-6 border-t border-muted pt-4 sm:mt-8">
                                            <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
                                                @foreach ($tags->take(5) as $tag)
                                                    <span class="text-xs font-medium c-muted">
                                                        #{{ ltrim($tag, '#') }}
                                                    </span>
                                                @endforeach
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </article>
                        </div>
                    @endforeach
                </div>

                <div
                    class="swiper-pagination !static !mt-4 !pb-4"
                    data-hero-pagination
                ></div>
            </div>
        </div>
    </section>
@endif