
<div x-show="showPopup" 
     x-transition:enter="transition ease-out duration-700" 
     x-transition:enter-start="opacity-0 transform translate-y-full" 
     x-transition:enter-end="opacity-100 transform translate-y-0" 
     x-transition:leave="transition ease-in duration-300" 
     x-transition:leave-start="opacity-100 transform translate-y-0" 
     x-transition:leave-end="opacity-0 transform translate-y-full" 
     class="fixed inset-x-0 bottom-0 z-50 flex justify-center pb-8 pointer-events-none" 
     style="display: none;" 
     aria-live="assertive">

    <div class="relative w-full max-w-2xl mx-4 pointer-events-auto">
        <div class="relative p-1 rounded-2xl bg-gradient-to-r from-blue-600 via-primary to-orange-500 shadow-2xl">
            <div class="relative flex items-center justify-between gap-4 bg-[#1e2125] text-white p-4 rounded-xl">
                
                <div class="flex items-center gap-4">
                    <div class="flex-shrink-0">
                        
                        <img src="images/hero/ashok.png" alt="Ashok KC" class="w-16 h-16 rounded-full border-2 border-primary object-cover">
                    </div>
                    <div class="flex-grow">
                        <h4 class="text-lg font-bold leading-tight">I'm available for collaboration and consultation.</h4>
                        <p class="text-xs text-white/60 mt-1">Availability: Maximum: 30 min</p>
                    </div>
                </div>

                <div class="flex-shrink-0">
                    <a href="#contact" @click="showPopup = false" class="block px-5 py-3 text-center bg-[#292d32] rounded-lg hover:bg-[#3d4248] transition-colors">
                        <span class="font-semibold text-sm">Schedule<br>Appointment</span>
                    </a>
                </div>

            </div>
        </div>

        <button @click="showPopup = false" class="absolute -top-2 -right-2 w-7 h-7 flex items-center justify-center bg-white dark:bg-gray-800 rounded-full shadow-lg text-primary dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700 transition-all">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </button>
    </div>
</div><?php /**PATH /home2/kcashok/public_html/portfolio/resources/views/components/availability-popup.blade.php ENDPATH**/ ?>