
<section class="relative bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-900 overflow-hidden py-20 lg:py-28">
    <!-- Animated Background -->
    <div class="absolute inset-0">
        <div class="absolute top-0 -left-40 w-96 h-96 bg-purple-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"></div>
        <div class="absolute top-0 -right-40 w-96 h-96 bg-yellow-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
        <div class="absolute -bottom-40 left-1/3 w-96 h-96 bg-pink-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"></div>
    </div>
    
    <!-- Grid Pattern -->
    <div class="absolute inset-0 opacity-5">
        <svg class="w-full h-full" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <pattern id="cta-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(#cta-grid)"/>
        </svg>
    </div>
    
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div class="grid lg:grid-cols-2 gap-12 items-center">
            
            <!-- CTA Content -->
            <div class="text-white">
                <div class="flex items-center gap-2 mb-6">
                    <span class="inline-flex items-center px-4 py-1.5 bg-white/10 backdrop-blur-sm rounded-full border border-white/30">
                        <span class="w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse"></span>
                        <span class="text-white font-semibold text-sm uppercase tracking-wider">Limited Time Offer</span>
                    </span>
                </div>
                
                <h2 class="text-4xl lg:text-5xl xl:text-6xl font-bold leading-tight mb-6">
                    Ready to Start Your 
                    <span class="text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 to-yellow-300">
                        Study Abroad
                    </span> 
                    Journey?
                </h2>
                
                <p class="text-xl text-indigo-100 mb-8 leading-relaxed">
                    Get free consultation from our expert advisors. We'll help you find the perfect university, course, and scholarship.
                </p>
                
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
                    <div class="flex items-center bg-white/10 backdrop-blur-sm rounded-xl p-3 border border-white/20">
                        <div class="flex-shrink-0 w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center">
                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                        </div>
                        <span class="ml-3 text-sm font-medium">Free Consultation</span>
                    </div>
                    <div class="flex items-center bg-white/10 backdrop-blur-sm rounded-xl p-3 border border-white/20">
                        <div class="flex-shrink-0 w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center">
                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                        </div>
                        <span class="ml-3 text-sm font-medium">Visa Assistance</span>
                    </div>
                    <div class="flex items-center bg-white/10 backdrop-blur-sm rounded-xl p-3 border border-white/20">
                        <div class="flex-shrink-0 w-8 h-8 bg-yellow-500 rounded-full flex items-center justify-center">
                            <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                        </div>
                        <span class="ml-3 text-sm font-medium">Scholarship Guidance</span>
                    </div>
                </div>
                
                <!-- Trust Badges -->
                <div class="flex items-center space-x-4">
                    <div class="flex -space-x-2">
                        <div class="w-8 h-8 bg-white/20 backdrop-blur-sm rounded-full border-2 border-white flex items-center justify-center">
                            <span class="text-white text-xs font-bold">QS</span>
                        </div>
                        <div class="w-8 h-8 bg-white/20 backdrop-blur-sm rounded-full border-2 border-white flex items-center justify-center">
                            <span class="text-white text-xs font-bold">THE</span>
                        </div>
                        <div class="w-8 h-8 bg-white/20 backdrop-blur-sm rounded-full border-2 border-white flex items-center justify-center">
                            <span class="text-white text-xs font-bold">ARWU</span>
                        </div>
                    </div>
                    <span class="text-sm text-indigo-200">Trusted by top ranking agencies</span>
                </div>
            </div>
            
            <!-- Consultation Form -->
            <div class="bg-white/10 backdrop-blur-xl rounded-3xl p-8 shadow-2xl border border-white/20" 
                 x-data="{
                    name: '',
                    email: '',
                    phone: '',
                    country: '',
                    submitted: false,
                    loading: false,
                    
                    async submitForm() {
                        this.loading = true;
                        // Simulate API call
                        await new Promise(resolve => setTimeout(resolve, 1500));
                        this.loading = false;
                        this.submitted = true;
                    }
                 }">
                
                <h3 class="text-2xl font-bold text-white mb-6 flex items-center">
                    <svg class="w-6 h-6 mr-2 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                    Book Free Consultation
                </h3>
                
                <template x-if="!submitted">
                    <form @submit.prevent="submitForm" class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-white/80 mb-2">Your Name</label>
                            <input type="text" 
                                   x-model="name"
                                   required 
                                   class="w-full px-4 py-3 bg-white/10 backdrop-blur-sm border border-white/30 rounded-xl text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent transition"
                                   placeholder="John Doe">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-white/80 mb-2">Email Address</label>
                            <input type="email" 
                                   x-model="email"
                                   required 
                                   class="w-full px-4 py-3 bg-white/10 backdrop-blur-sm border border-white/30 rounded-xl text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent transition"
                                   placeholder="john@example.com">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-white/80 mb-2">Phone Number</label>
                            <input type="tel" 
                                   x-model="phone"
                                   required 
                                   class="w-full px-4 py-3 bg-white/10 backdrop-blur-sm border border-white/30 rounded-xl text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent transition"
                                   placeholder="+1 234 567 8900">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-white/80 mb-2">Country of Interest</label>
                            <select x-model="country" 
                                    required 
                                    class="w-full px-4 py-3 bg-white/10 backdrop-blur-sm border border-white/30 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent transition">
                                <option value="" class="bg-gray-900 text-white">Select a country</option>
                                <option value="usa" class="bg-gray-900 text-white">United States</option>
                                <option value="uk" class="bg-gray-900 text-white">United Kingdom</option>
                                <option value="canada" class="bg-gray-900 text-white">Canada</option>
                                <option value="australia" class="bg-gray-900 text-white">Australia</option>
                                <option value="germany" class="bg-gray-900 text-white">Germany</option>
                                <option value="france" class="bg-gray-900 text-white">France</option>
                                <option value="new-zealand" class="bg-gray-900 text-white">New Zealand</option>
                            </select>
                        </div>
                        
                        <button type="submit" 
                                :disabled="loading"
                                class="w-full bg-gradient-to-r from-yellow-500 to-yellow-600 hover:from-yellow-600 hover:to-yellow-700 text-white font-semibold py-3 px-6 rounded-xl transition shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center">
                            <template x-if="!loading">
                                <span>
                                    Get Free Consultation
                                    <svg class="w-4 h-4 inline ml-2" 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>
                                </span>
                            </template>
                            <template x-if="loading">
                                <span>
                                    <svg class="animate-spin w-5 h-5 mr-2 inline" 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>
                                    Processing...
                                </span>
                            </template>
                        </button>
                        
                        <p class="text-xs text-white/60 text-center mt-4">
                            No spam. We respect your privacy and will never share your information.
                        </p>
                    </form>
                </template>
                
                <template x-if="submitted">
                    <div class="text-center py-8">
                        <div class="w-20 h-20 bg-gradient-to-br from-green-500 to-emerald-600 rounded-full flex items-center justify-center mx-auto mb-6 animate-bounce">
                            <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                            </svg>
                        </div>
                        <h4 class="text-2xl font-bold text-white mb-3">Thank You!</h4>
                        <p class="text-white/80 mb-6">Your consultation request has been sent. Our advisor will contact you within 24 hours.</p>
                        <button @click="submitted = false; name = ''; email = ''; phone = ''; country = ''" 
                                class="px-6 py-2 bg-white/20 hover:bg-white/30 text-white font-medium rounded-xl transition">
                            Book Another
                        </button>
                    </div>
                </template>
                
                <!-- Trust Indicators -->
                <div class="mt-6 pt-6 border-t border-white/20 text-center">
                    <div class="flex items-center justify-center space-x-2">
                        <svg class="w-4 h-4 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"></path>
                        </svg>
                        <span class="text-sm text-white/80">100% Secure & Confidential</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Wave Divider -->
    <div class="absolute bottom-0 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"></path>
        </svg>
    </div>
</section><?php /**PATH D:\Sasi\resources\views\home\partials\consultation-cta.blade.php ENDPATH**/ ?>