@extends('layouts.frontend')

@section('title', '404 - Page Not Found')

@section('content')
<section class="py-20 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="max-w-3xl mx-auto text-center">
            <!-- Error Icon -->
            <div class="mb-8">
                <i class="fas fa-exclamation-circle text-9xl text-blue-600"></i>
            </div>

            <!-- Error Code -->
            <h1 class="text-8xl font-bold text-gray-800 mb-4">404</h1>

            <!-- Error Message -->
            <h2 class="text-3xl font-semibold text-gray-700 mb-6">Page Not Found</h2>

            <p class="text-xl text-gray-600 mb-8">
                Sorry, the page you are looking for doesn't exist or has been moved.
            </p>

            <!-- Action Buttons -->
            <div class="flex flex-col sm:flex-row gap-4 justify-center">
                <a href="{{ route('home') }}"
                    class="bg-blue-600 text-white px-8 py-4 rounded-lg font-semibold hover:bg-blue-700 transition inline-flex items-center justify-center">
                    <i class="fas fa-home mr-2"></i>
                    Go to Homepage
                </a>
                <button onclick="history.back()"
                    class="bg-gray-600 text-white px-8 py-4 rounded-lg font-semibold hover:bg-gray-700 transition inline-flex items-center justify-center">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Go Back
                </button>
            </div>

            <!-- Helpful Links -->
            <div class="mt-12 pt-8 border-t border-gray-300">
                <p class="text-gray-600 mb-4">You might be interested in:</p>
                <div class="flex flex-wrap gap-4 justify-center">
                    <a href="{{ route('services.index') }}" class="text-blue-600 hover:text-blue-800 font-semibold">
                        Our Services
                    </a>
                    <span class="text-gray-400">•</span>
                    <a href="{{ route('destinations.index') }}" class="text-blue-600 hover:text-blue-800 font-semibold">
                        Study Destinations
                    </a>
                    <span class="text-gray-400">•</span>
                    <a href="{{ route('apply') }}" class="text-blue-600 hover:text-blue-800 font-semibold">
                        Apply Now
                    </a>
                    <span class="text-gray-400">•</span>
                    <a href="{{ route('contact') }}" class="text-blue-600 hover:text-blue-800 font-semibold">
                        Contact Us
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection