
<section class="relative bg-gradient-to-br from-indigo-950 via-indigo-900 to-purple-900 overflow-hidden">
    <!-- Animated Background Orbs -->
    <div class="absolute inset-0 overflow-hidden">
        <div class="absolute -top-40 -right-40 w-80 h-80 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"></div>
        <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-yellow-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-pink-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"></div>
    </div>
    
    <!-- Grid Pattern Overlay -->
    <div class="absolute inset-0 opacity-5">
        <svg class="w-full h-full" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
                    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="white" stroke-width="1"/>
                </pattern>
            </defs>
            <rect width="100%" height="100%" fill="url(#grid)"/>
        </svg>
    </div>
    
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24 relative z-10">
        <div class="grid lg:grid-cols-2 gap-12 items-center">
            
            <!-- Hero Content -->
            <div class="text-white">
                <div class="flex items-center gap-2 mb-6" x-data="{ showBadge: true }" x-show="showBadge" x-init="setTimeout(() => showBadge = false, 5000)">
                    <span class="inline-flex items-center px-4 py-1.5 bg-yellow-500/20 backdrop-blur-sm rounded-full border border-yellow-400/30">
                        <span class="w-2 h-2 bg-yellow-400 rounded-full mr-2 animate-pulse"></span>
                        <span class="text-yellow-400 font-semibold text-sm uppercase tracking-wider">Global Education Consultants</span>
                    </span>
                    <span class="px-3 py-1.5 bg-green-500/20 backdrop-blur-sm rounded-full border border-green-400/30">
                        <span class="text-green-400 text-xs font-semibold">#1 Rated 2024</span>
                    </span>
                </div>
                
                <h1 class="text-4xl lg:text-5xl xl:text-6xl font-bold leading-tight mb-6">
                    Study Abroad Made 
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 via-yellow-300 to-yellow-400 animate-gradient">
                        Easy
                    </span> 
                    <br class="hidden lg:block">with Expert Guidance
                </h1>
                
                <p class="text-lg lg:text-xl text-indigo-100 mb-8 leading-relaxed">
                    Find your perfect university, get visa assistance, and secure scholarships with our comprehensive study abroad services trusted by 50,000+ students.
                </p>
                
                <!-- Dynamic Search Bar -->
                <div class="relative mb-10" x-data="searchHandler()" @click.away="results = null">
                    <div class="bg-white rounded-full p-1.5 shadow-2xl flex items-center group hover:shadow-3xl transition duration-300">
                        <div class="flex-1 flex items-center px-4">
                            <svg class="w-5 h-5 text-indigo-600 mr-2 group-hover:scale-110 transition" 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>
                            <input type="text" 
                                   x-model="query"
                                   @input.debounce.300ms="search()"
                                   @focus="results = null"
                                   class="w-full py-3 text-gray-900 placeholder-gray-500 border-0 focus:ring-0 text-base"
                                   placeholder="Search universities, courses, countries, scholarships...">
                        </div>
                        <button class="bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-semibold px-8 py-3 rounded-full transition shadow-lg hover:shadow-xl group">
                            <span class="hidden sm:inline">Search</span>
                            <svg class="w-5 h-5 sm:ml-2 inline group-hover:translate-x-1 transition" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </button>
                    </div>
                    
                    <!-- Search Results Dropdown -->
                    <div x-show="results !== null" 
                         x-transition:enter="transition ease-out duration-200"
                         x-transition:enter-start="opacity-0 translate-y-2"
                         x-transition:enter-end="opacity-100 translate-y-0"
                         class="absolute mt-2 w-full bg-white rounded-2xl shadow-2xl border border-gray-200 z-50 max-h-96 overflow-y-auto"
                         style="display: none;">
                        <div class="divide-y divide-gray-100">
                            <template x-if="loading">
                                <div class="p-8 text-center">
                                    <svg class="animate-spin w-8 h-8 mx-auto mb-3 text-indigo-600" 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>
                                    <p class="text-gray-600">Searching...</p>
                                </div>
                            </template>
                            <template x-if="!loading && results && results.length === 0">
                                <div class="p-8 text-center">
                                    <svg class="w-12 h-12 mx-auto mb-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <p class="text-gray-600">No results found for "<span x-text="query"></span>"</p>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
                
                <!-- Quick Stats with Animations -->
                <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 lg:gap-6">
                    <div class="text-center group">
                        <div class="text-3xl lg:text-4xl font-bold text-yellow-400 mb-1 group-hover:scale-110 transition">50+</div>
                        <p class="text-indigo-200 text-xs uppercase tracking-wider">Countries</p>
                        <div class="w-0 group-hover:w-full h-0.5 bg-yellow-400 mx-auto mt-2 transition-all duration-300"></div>
                    </div>
                    <div class="text-center group">
                        <div class="text-3xl lg:text-4xl font-bold text-yellow-400 mb-1 group-hover:scale-110 transition">1000+</div>
                        <p class="text-indigo-200 text-xs uppercase tracking-wider">Universities</p>
                        <div class="w-0 group-hover:w-full h-0.5 bg-yellow-400 mx-auto mt-2 transition-all duration-300"></div>
                    </div>
                    <div class="text-center group">
                        <div class="text-3xl lg:text-4xl font-bold text-yellow-400 mb-1 group-hover:scale-110 transition">5000+</div>
                        <p class="text-indigo-200 text-xs uppercase tracking-wider">Courses</p>
                        <div class="w-0 group-hover:w-full h-0.5 bg-yellow-400 mx-auto mt-2 transition-all duration-300"></div>
                    </div>
                    <div class="text-center group">
                        <div class="text-3xl lg:text-4xl font-bold text-yellow-400 mb-1 group-hover:scale-110 transition">95%</div>
                        <p class="text-indigo-200 text-xs uppercase tracking-wider">Visa Success</p>
                        <div class="w-0 group-hover:w-full h-0.5 bg-yellow-400 mx-auto mt-2 transition-all duration-300"></div>
                    </div>
                </div>
            </div>
            
            <!-- Hero Image with Floating Elements -->
            <div class="hidden lg:block relative">
                <div class="absolute inset-0 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full filter blur-3xl opacity-20 animate-pulse"></div>
                
                <!-- Floating Cards -->
                <div class="absolute -top-10 -left-10 bg-white/90 backdrop-blur-sm rounded-2xl p-4 shadow-2xl animate-float-slow">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-xl flex items-center justify-center">
                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                            </svg>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">Accepted to</p>
                            <p class="font-bold text-gray-900">Harvard University</p>
                        </div>
                    </div>
                </div>
                
                <div class="absolute -bottom-10 -right-10 bg-white/90 backdrop-blur-sm rounded-2xl p-4 shadow-2xl animate-float-slower">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 bg-gradient-to-br from-green-400 to-green-600 rounded-xl flex items-center justify-center">
                            <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">Scholarship</p>
                            <p class="font-bold text-gray-900">$50,000 Awarded</p>
                        </div>
                    </div>
                </div>
                
                <img src="<?php echo e(asset('images/hero-student.png')); ?>" 
                     alt="Student studying abroad" 
                     class="relative z-10 w-full max-w-lg mx-auto animate-float">
            </div>
        </div>
    </div>
    
    <!-- Animated Wave Divider -->
    <div class="absolute  left-0 right-0">
        <svg class="w-full h-12 text-white fill-current" viewBox="0 0 1440 100" preserveAspectRatio="none">
            <path d="M0,64L80,58.7C160,53,320,43,480,48C640,53,800,75,960,80C1120,85,1280,75,1360,69.3L1440,64L1440,100L1360,100C1280,100,1120,100,960,100C800,100,640,100,480,100C320,100,160,100,80,100L0,100Z" 
                  class="animate-wave"></path>
        </svg>
    </div>
</section><?php /**PATH D:\Sasi\resources\views\home\partials\hero.blade.php ENDPATH**/ ?>