@props(['data' => []])

@php $studies = \Apex\Modules\CaseStudies\Models\CaseStudy::query()->where('status', 'published')->limit(6)->get(); @endphp

<section class="section-padding bg-section">
    <div class="container-page">
        <div class="flex flex-wrap items-end justify-between gap-6">
            <div>
                <span class="home-eyebrow">Results</span>
                <h2 class="section-heading mt-6">{{ $data['title'] ?? 'Case studies' }}</h2>
            </div>
            <a href="{{ route('case-studies.index') }}" class="text-sm font-semibold text-primary hover:underline">View all →</a>
        </div>
        <div class="swiper mt-12" data-swiper>
            <div class="swiper-wrapper">
                @forelse($studies as $study)
                    <div class="swiper-slide h-auto">
                        <a href="{{ route('case-studies.show', $study->slug) }}" class="premium-card block h-full p-8 transition hover:-translate-y-1 hover:border-primary/20">
                            <span class="text-[11px] font-bold uppercase tracking-wider text-primary">Case study</span>
                            <h3 class="mt-4 text-xl font-bold tracking-tight text-secondary">{{ $study->title }}</h3>
                            @if($study->summary)
                                <p class="mt-3 line-clamp-3 text-sm leading-relaxed text-muted">{{ $study->summary }}</p>
                            @endif
                            <span class="mt-6 inline-flex items-center gap-1 text-sm font-semibold text-primary">
                                Read story
                                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                            </span>
                        </a>
                    </div>
                @empty
                    <div class="swiper-slide"><div class="premium-card p-8"><p class="text-muted">Case studies coming soon.</p></div></div>
                @endforelse
            </div>
            <div class="swiper-pagination mt-8"></div>
        </div>
    </div>
</section>