@props(['projects'])

<div class="swiper" data-aos="fade-up">
    <div class="swiper-wrapper">
        @foreach($projects as $project)
            <div class="swiper-slide">
                <div class="bg-white rounded-lg overflow-hidden shadow hover:shadow-lg transition-all duration-300">
                    <img src="{{ $project['thumbnail'] }}" alt="{{ $project['title'] }}" class="w-full h-48 object-cover" width="400" height="192" loading="lazy" />
                    <div class="p-4">
                        <h3 class="text-lg font-semibold mb-2">{{ $project['title'] }}</h3>
                        <p class="text-gray-600 text-sm">{{ $project['description'] }}</p>
                        <a href="{{ route('projects.show', $project['slug']) }}" class="mt-3 inline-block text-ibs-accent hover:underline text-sm font-medium">
                            View Project →
                        </a>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    <div class="swiper-pagination mt-6"></div>
</div>