<x-app-layout>
    <div class="py-20 px-6 lg:px-12 bg-brand-50/30 min-h-screen flex flex-col items-center justify-center">
        <div class="max-w-5xl w-full mx-auto text-center space-y-16">
            <!-- Professional Gating Hero -->
            <div class="bg-brand-950 rounded-[56px] p-12 md:p-20 text-white relative overflow-hidden shadow-2xl shadow-brand-200 group">
                <div class="relative z-10 space-y-8">
                    <div class="flex justify-center flex-col md:flex-row items-center gap-6 mb-4">
                        @if(auth()->user()->account_status === 'pending')
                            <span class="px-8 py-2 bg-primary-600 text-white text-[9px] font-black uppercase rounded-full tracking-[0.3em] shadow-2xl shadow-primary-950/50 italic animate-pulse">Menunggu Verifikasi</span>
                        @elseif(auth()->user()->account_status === 'suspended')
                            <span class="px-8 py-2 bg-red-600 text-white text-[9px] font-black uppercase rounded-full tracking-[0.3em] shadow-2xl shadow-red-950/20 italic">Akses Ditangguhkan</span>
                        @endif
                        <span class="text-white/30 text-[9px] font-black uppercase tracking-[0.3em] italic">Keamanan Enterprise v1.0</span>
                    </div>
                    
                    <div class="space-y-4">
                        <h2 class="font-display text-4xl md:text-6xl font-black tracking-tight uppercase italic leading-none">
                            Halo, <br>
                            <span class="text-primary-500">{{ auth()->user()->name }}</span>
                        </h2>
                        <p class="max-w-2xl mx-auto text-white/50 text-[13px] font-medium leading-relaxed uppercase tracking-wider">
                            Akun Anda telah terdaftar dalam ekosistem Leasing Pro. Untuk mengaktifkan dashboard operasional dan akses database, silakan lakukan konfigurasi paket layanan di bawah ini.
                        </p>
                    </div>
                </div>

                <!-- Abstract Decor -->
                <div class="absolute inset-0 bg-gradient-to-br from-primary-600/5 to-transparent pointer-events-none"></div>
                <div class="absolute left-[-10%] top-[-10%] opacity-[0.05] pointer-events-none group-hover:scale-110 transition-transform duration-1000">
                    <svg class="w-[500px] h-[500px]" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"></path></svg>
                </div>
            </div>

            <!-- Elite Plan Selection -->
            <div class="grid md:grid-cols-2 gap-10">
                @foreach($plans as $plan)
                    <div class="premium-card p-12 flex flex-col group hover:border-primary-100 transition-all duration-700 bg-white relative overflow-hidden">
                        <div class="mb-10 flex justify-between items-start relative z-10">
                            <span class="px-6 py-2 bg-brand-50 text-brand-400 group-hover:bg-primary-50 group-hover:text-primary-600 rounded-2xl text-[9px] font-black uppercase tracking-widest transition-all italic">{{ $plan->role_type }} Access</span>
                            <div class="w-1.5 h-1.5 bg-brand-100 rounded-full group-hover:bg-primary-500 transition-all"></div>
                        </div>

                        <div class="space-y-2 mb-10 relative z-10">
                            <h4 class="text-4xl font-display font-black text-brand-950 uppercase italic tracking-tighter group-hover:text-primary-600 transition-colors leading-none">{{ $plan->name }}</h4>
                            <p class="text-[10px] font-black text-brand-300 uppercase tracking-widest">Enterprise Edition</p>
                        </div>

                        <div class="mb-12 relative z-10">
                            <div class="text-6xl font-display font-black text-brand-950 tracking-tighter group-hover:scale-110 transition-transform origin-left duration-700 leading-none">
                                <span class="text-xl align-top text-brand-300">Rp</span>{{ number_format($plan->price, 0, ',', '.') }}
                            </div>
                            <p class="mt-4 text-[10px] font-black text-brand-300 uppercase tracking-widest italic">Siklus Pembayaran Sekali Pakai</p>
                        </div>

                        <div class="space-y-6 mb-12 flex-1 relative z-10">
                            <div class="h-px bg-brand-50 w-full group-hover:bg-primary-50 transition-all"></div>
                            <ul class="space-y-5">
                                @foreach($plan->features_json as $feature)
                                    <li class="flex items-center gap-4 group/item">
                                        <div class="w-6 h-6 rounded-lg bg-emerald-50 text-emerald-600 flex items-center justify-center group-hover/item:bg-emerald-500 group-hover/item:text-white transition-all shadow-sm">
                                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
                                        </div>
                                        <span class="text-[13px] font-bold text-brand-600 group-hover/item:text-brand-950 transition-colors">{{ $feature }}</span>
                                    </li>
                                @endforeach
                                <li class="flex items-center gap-4 group/item">
                                    <div class="w-6 h-6 rounded-lg bg-indigo-50 text-indigo-600 flex items-center justify-center group-hover/item:bg-indigo-500 group-hover/item:text-white transition-all shadow-sm">
                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                    </div>
                                    <span class="text-[13px] font-bold text-brand-600 group-hover/item:text-brand-950 transition-colors">Validitas: {{ $plan->duration_days }} Hari</span>
                                </li>
                            </ul>
                        </div>

                        <a href="{{ auth()->user()->isLeasing() ? route('leasing.plans.index') : route('member.plans.index') }}" class="w-full btn-primary !py-5 text-[10px] uppercase tracking-[0.2em] shadow-2xl shadow-primary-200 group-hover:shadow-primary-300 transition-all relative z-10 italic">
                            Konfigurasi Layanan Sekarang →
                        </a>

                        <div class="absolute right-[-20%] bottom-[-20%] opacity-[0.02] pointer-events-none group-hover:scale-125 transition-transform duration-1000">
                            <svg class="w-64 h-64" fill="currentColor" viewBox="0 0 20 20"><path d="M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859 1.515-1.204 1.515-3.078 0-4.282-.555-.441-.861-1.121-.861-1.838 0-1.657-1.119-3.021-2.5-3.021s-2.5 1.364-2.5 3.021c0 .717-.306 1.397-.861 1.838-1.515 1.204-1.515 3.078 0 4.282.269.213.462.519.477.859h5z"></path></svg>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Footer Help -->
            <div class="pt-10 flex flex-col items-center gap-6">
                <div class="w-12 h-1 bg-brand-100 rounded-full"></div>
                <p class="text-[11px] font-black text-brand-300 uppercase tracking-widest italic group">
                    Butuh Bantuan Aktivasi? 
                    <a href="https://wa.me/XXXXXXXXXX" target="_blank" class="text-primary-600 hover:text-brand-950 transition-colors border-b-2 border-primary-50 hover:border-brand-950 ml-2">WhatsApp Enterprise Support →</a>
                </p>
            </div>
        </div>
    </div>
</x-app-layout>
