@extends('layouts.frontend')

@section('title', 'Our Services - Trade Plus Education')
@section('meta_description', 'Explore our comprehensive study abroad services including visa consultancy, university
applications, language training, and pre-departure guidance.')

@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">Our Services</h1>
            <p class="text-xl text-blue-100">Comprehensive solutions for your study abroad journey</p>
        </div>
    </div>
</div>

<!-- Services Grid -->
<section class="py-20">
    <div class="container mx-auto px-4">
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            @forelse($services as $service)
            <div
                class="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
                @if($service->image)
                <div class="h-48 overflow-hidden">
                    <img src="{{ asset('storage/' . $service->image) }}" alt="{{ $service->title_en }}"
                        class="w-full h-full object-cover">
                </div>
                @endif

                <div class="p-8">
                    <div class="flex items-center mb-4">
                        @if($service->icon)
                        <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-4">
                            <i class="{{ $service->icon }} text-2xl text-blue-600"></i>
                        </div>
                        @endif
                        <h3 class="text-2xl font-bold text-gray-900">{{ $service->title_en }}</h3>
                    </div>

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

                    @if($service->features_en && is_array($service->features_en) && count($service->features_en) > 0)
                    <ul class="space-y-2 mb-6">
                        @foreach(array_slice($service->features_en, 0, 3) as $feature)
                        <li class="flex items-center text-gray-700">
                            <svg class="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd"
                                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                                    clip-rule="evenodd" />
                            </svg>
                            <span class="text-sm">{{ $feature }}</span>
                        </li>
                        @endforeach
                    </ul>
                    @endif

                    <a href="{{ route('services.show', $service->slug) }}"
                        class="inline-flex items-center text-blue-600 font-semibold hover:text-blue-800 transition">
                        Learn More
                        <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 services 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">Ready to Start Your Journey?</h2>
        <p class="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">Let us help you achieve your study abroad dreams with
            our comprehensive services</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">
                Apply Now
            </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