<div class="flex flex-col items-center justify-center h-full w-full text-center px-6 py-12 md:py-20">
    <!-- Illustration Wrapper -->
    <div class="relative w-full max-w-[280px] md:max-w-[340px] aspect-square mb-10 mx-auto flex items-center justify-center">
        <!-- Floating decorative elements -->
        <div class="absolute top-10 left-4 animate-[bounce_3s_infinite]">
            <x-icon-star class="w-8 h-8 text-yellow-400 opacity-80" />
        </div>
        <div class="absolute bottom-20 left-10 animate-[pulse_4s_infinite]">
            <x-icon-sparkle class="w-6 h-6 text-pink-400 opacity-60" />
        </div>
        <div class="absolute top-20 right-10 animate-[bounce_4s_infinite_reverse]">
            <x-icon-star class="w-10 h-10 text-blue-400 opacity-70" />
        </div>
        <div class="absolute bottom-16 right-4 animate-[pulse_3s_infinite]">
            <x-icon-sparkle class="w-8 h-8 text-purple-400 opacity-80" />
        </div>
        
        <!-- Background blob glows -->
        <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
            <div class="w-48 h-48 bg-blue-100/60 rounded-full blur-3xl absolute animate-blob"></div>
            <div class="w-40 h-40 bg-pink-100/50 rounded-full blur-3xl absolute translate-x-12 animate-blob animation-delay-2000"></div>
        </div>

        <!-- Main Custom Rocket SVG -->
        <div class="relative z-10 animate-float">
            <x-icon-rocket class="w-64 h-64 md:w-72 md:h-72 drop-shadow-2xl" />
        </div>
    </div>

    <!-- Content -->
    <h1 class="text-[28px] md:text-[34px] font-extrabold text-[#1a2b49] mb-4 tracking-tight">
        Tính năng đang phát triển
    </h1>
    <p class="text-gray-500 font-medium max-w-[420px] mx-auto mb-10 leading-relaxed text-[15px]">
        Chúng tôi đang nỗ lực để mang đến trải nghiệm tốt nhất cho bạn. Vui lòng quay lại sau nhé!
    </p>

    <!-- Primary Button -->
    <a href="{{ route('user.dashboard') }}" class="inline-flex items-center justify-center gap-2.5 px-8 py-3.5 bg-[#3462f7] hover:bg-blue-700 text-white font-bold rounded-xl shadow-[0_8px_16px_-4px_rgba(52,98,247,0.4)] transition-all hover:-translate-y-1 active:translate-y-0 text-[15px]">
        <x-icon-arrow-left class="w-5 h-5 stroke-2" />
        Quay về trang chủ
    </a>
</div>

<style>
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
}
.animate-float {
    animation: float 5s ease-in-out infinite;
}
</style>
