@extends('layouts.frontend')

@section('title', 'Study Destinations - Trade Plus Education')
@section('meta_description', 'Explore top study abroad destinations including Korea, USA, Germany, and Australia. Find
the perfect country for your higher education journey.')

@section('content')
<!-- Hero Section -->
<div class="bg-gradient-to-r from-blue-600 to-blue-800 text-white py-20">
    <div class="container mx-auto px-4">
        <div class="max-w-3xl mx-auto text-center">
            <h1 class="text-5xl font-bold mb-6">Study Destinations</h1>
            <p class="text-xl text-blue-100">Choose from world-class education destinations</p>
        </div>
    </div>
</div>

<!-- Destinations Grid -->
<section class="py-20">
    <div class="container mx-auto px-4">
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            @forelse($destinations as $destination)
            <div
                class="group relative bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
                @if($destination->image)
                <div class="h-56 overflow-hidden relative">
                    <img src="{{ asset('storage/' . $destination->image) }}" alt="{{ $destination->country_name_en }}"
                        class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>

                    @if($destination->flag_emoji)
                    <div class="absolute top-4 right-4 text-5xl">{{ $destination->flag_emoji }}</div>
                    @endif

                    @if($destination->is_featured)
                    <div
                        class="absolute top-4 left-4 bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-sm font-bold">
                        Featured
                    </div>
                    @endif
                </div>
                @endif

                <div class="p-6">
                    <h3 class="text-2xl font-bold text-gray-900 mb-3">{{ $destination->country_name_en }}</h3>

                    <p class="text-gray-600 mb-4 line-clamp-3">{{ Str::limit($destination->description_en, 120) }}</p>

                    @if($destination->visa_processing_time)
                    <div class="flex items-center text-sm text-gray-500 mb-4">
                        <svg class="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <span>Visa: {{ $destination->visa_processing_time }}</span>
                    </div>
                    @endif

                    @if($destination->popular_courses)
                    <div class="flex flex-wrap gap-2 mb-4">
                        @foreach(explode(',', $destination->popular_courses) as $course)
                        <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">{{ trim($course) }}</span>
                        @endforeach
                    </div>
                    @endif

                    <a href="{{ route('destinations.show', $destination->slug) }}"
                        class="inline-flex items-center text-blue-600 font-semibold hover:text-blue-800 transition mt-2">
                        Explore {{ $destination->country_name_en }}
                        <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M17 8l4 4m0 0l-4 4m4-4H3" />
                        </svg>
                    </a>
                </div>
            </div>
            @empty
            <div class="col-span-full text-center py-12">
                <p class="text-gray-500 text-lg">No destinations available at the moment.</p>
            </div>
            @endforelse
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="bg-gradient-to-r from-blue-600 to-blue-800 text-white py-16">
    <div class="container mx-auto px-4 text-center">
        <h2 class="text-4xl font-bold mb-6">Can't Decide Where to Study?</h2>
        <p class="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">Let our expert counselors help you choose the best
            destination for your goals</p>
        <div class="flex flex-wrap gap-4 justify-center">
            <a href="{{ route('apply') }}"
                class="bg-white text-blue-600 px-8 py-4 rounded-lg font-semibold hover:bg-blue-50 transition">
                Get Free Consultation
            </a>
            <a href="{{ route('contact') }}"
                class="bg-transparent border-2 border-white text-white px-8 py-4 rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition">
                Contact Us
            </a>
        </div>
    </div>
</section>
@endsection