@extends('layouts.app')

@section('title', 'Explore Cities Around the World')

@section('content')
<div class="relative">
    <!-- Hero Section -->
    <div class="relative bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-500 text-white overflow-hidden">
        <!-- Animated background shapes -->
        <div class="absolute inset-0 opacity-20">
            <div class="absolute top-0 left-1/4 w-96 h-96 bg-white rounded-full mix-blend-overlay filter blur-3xl animate-pulse"></div>
            <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-yellow-300 rounded-full mix-blend-overlay filter blur-3xl animate-pulse" style="animation-delay: 1s;"></div>
        </div>

        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32">
            <div class="text-center">
                <h1 class="text-5xl md:text-7xl font-bold mb-6 animate-fade-in-up">
                    Explore Cities Around the World
                </h1>
                <p class="text-xl md:text-2xl mb-12 text-purple-100 max-w-3xl mx-auto animate-fade-in-up" style="animation-delay: 0.2s;">
                    Discover hidden gems, plan unforgettable trips, and explore destinations like never before
                </p>

                <!-- City Search Component -->
                <div x-data="citySearch()" class="max-w-2xl mx-auto animate-fade-in-up" style="animation-delay: 0.4s;">
                    <div class="relative group">
                        <div class="absolute -inset-1 bg-gradient-to-r from-pink-400 via-purple-400 to-indigo-400 rounded-2xl blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-200"></div>
                        <input
                            type="text"
                            x-model="query"
                            @input.debounce.300ms="search()"
                            @focus="showResults = true"
                            placeholder="Search for a city..."
                            class="relative w-full px-8 py-5 text-lg text-gray-900 bg-white rounded-xl shadow-2xl focus:outline-none focus:ring-4 focus:ring-purple-300 transition-all duration-200"
                        >

                        <!-- Search Results Dropdown -->
                        <div
                            x-show="showResults && (results.local.length > 0 || results.wikipedia.length > 0)"
                            @click.away="showResults = false"
                            class="absolute z-10 w-full mt-2 bg-white rounded-lg shadow-xl max-h-96 overflow-y-auto"
                        >
                            <!-- Local Results -->
                            <template x-if="results.local.length > 0">
                                <div class="border-b border-gray-200">
                                    <div class="px-4 py-2 bg-gray-50 text-xs font-semibold text-gray-600 uppercase">
                                        Saved Cities
                                    </div>
                                    <template x-for="city in results.local" :key="city.id">
                                        <a
                                            :href="`/cities/${city.slug}`"
                                            class="block px-4 py-3 hover:bg-blue-50 cursor-pointer border-b border-gray-100"
                                        >
                                            <div class="font-semibold text-gray-900" x-text="city.name"></div>
                                            <div class="text-sm text-gray-600" x-text="city.country"></div>
                                        </a>
                                    </template>
                                </div>
                            </template>

                            <!-- Wikipedia Results -->
                            <template x-if="results.wikipedia.length > 0">
                                <div>
                                    <div class="px-4 py-2 bg-gray-50 text-xs font-semibold text-gray-600 uppercase">
                                        Wikipedia Results
                                    </div>
                                    <template x-for="city in results.wikipedia" :key="city.title">
                                        <div class="px-4 py-3 hover:bg-blue-50 cursor-pointer border-b border-gray-100">
                                            <div class="font-semibold text-gray-900" x-text="city.title"></div>
                                            <div class="text-sm text-gray-600" x-text="city.description"></div>
                                        </div>
                                    </template>
                                </div>
                            </template>

                            <!-- Loading State -->
                            <div x-show="loading" class="px-4 py-3 text-center text-gray-500">
                                <svg class="animate-spin h-5 w-5 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Popular Destinations Section -->
    <div class="bg-gray-50 py-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-4xl font-bold text-gray-900 mb-4">Popular Destinations</h2>
                <p class="text-xl text-gray-600">Start exploring these trending cities</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                @forelse($popularCities as $city)
                    <a href="{{ route('cities.show', $city->slug) }}" class="group relative overflow-hidden rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
                        <div class="relative h-64 overflow-hidden @if(!$city->thumbnail_url) bg-gradient-to-br from-blue-400 to-blue-600 @endif">
                            @if($city->thumbnail_url)
                                <img
                                    src="{{ $city->thumbnail_url }}"
                                    alt="{{ $city->name }}"
                                    class="w-full h-full object-cover"
                                    loading="lazy"
                                >
                            @endif
                            <div class="absolute inset-0 bg-black bg-opacity-30 group-hover:bg-opacity-50 transition-all duration-300"></div>
                            <div class="absolute inset-0 flex flex-col justify-end p-6 text-white">
                                <h3 class="text-2xl font-bold mb-1 drop-shadow-lg">{{ $city->name }}</h3>
                                <p class="text-sm text-gray-200 drop-shadow-md">{{ $city->country }}</p>
                            </div>
                        </div>
                    </a>
                @empty
                    <!-- Fallback if no cities are available -->
                    <a href="#" class="group relative overflow-hidden rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
                        <div class="aspect-w-16 aspect-h-12 bg-gradient-to-br from-blue-400 to-blue-600 h-64">
                            <div class="absolute inset-0 bg-black bg-opacity-20 group-hover:bg-opacity-40 transition-all duration-300"></div>
                            <div class="absolute inset-0 flex flex-col justify-end p-6 text-white">
                                <h3 class="text-2xl font-bold mb-1">Start Exploring</h3>
                                <p class="text-sm text-gray-200">Search for cities above</p>
                            </div>
                        </div>
                    </a>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Features Section -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <div class="text-center mb-12">
            <h2 class="text-4xl font-bold text-gray-900 mb-4">Why Choose Wiki Travel</h2>
            <p class="text-xl text-gray-600">Everything you need to plan your perfect journey</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="group text-center p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
                <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-blue-400 to-blue-600 text-white rounded-2xl mb-6 group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                    </svg>
                </div>
                <h3 class="text-2xl font-bold mb-3 text-gray-900">Discover Cities</h3>
                <p class="text-gray-600 leading-relaxed">Search and explore cities worldwide with comprehensive Wikipedia data and local insights</p>
            </div>

            <div class="group text-center p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
                <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-purple-400 to-pink-600 text-white rounded-2xl mb-6 group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                    </svg>
                </div>
                <h3 class="text-2xl font-bold mb-3 text-gray-900">Find Attractions</h3>
                <p class="text-gray-600 leading-relaxed">Explore museums, restaurants, historic sites, and countless points of interest around the globe</p>
            </div>

            <div class="group text-center p-8 bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2">
                <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-green-400 to-teal-600 text-white rounded-2xl mb-6 group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                    </svg>
                </div>
                <h3 class="text-2xl font-bold mb-3 text-gray-900">Plan Trips</h3>
                <p class="text-gray-600 leading-relaxed">Create detailed itineraries, save your favorite destinations, and organize the perfect journey</p>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    function citySearch() {
        return {
            query: '',
            results: { local: [], wikipedia: [] },
            showResults: false,
            loading: false,

            async search() {
                if (this.query.length < 2) {
                    this.results = { local: [], wikipedia: [] };
                    return;
                }

                this.loading = true;

                try {
                    const response = await fetch(`/api/cities/search?q=${encodeURIComponent(this.query)}`);
                    const data = await response.json();

                    this.results = {
                        local: data.local || [],
                        wikipedia: data.wikipedia || []
                    };
                    this.showResults = true;
                } catch (error) {
                    console.error('Search error:', error);
                } finally {
                    this.loading = false;
                }
            }
        }
    }
</script>
@endpush
@endsection