<x-app-layout>
    <div class="min-h-screen">
        <div class="max-w-5xl mx-auto space-y-16">
            @if(session('success'))
                <div class="mb-12 bg-emerald-500/10 border border-emerald-500/20 rounded-[32px] p-8 flex items-center justify-between group animate-in slide-in-from-top-4 duration-1000">
                    <div class="flex items-center gap-6">
                        <div class="w-14 h-14 bg-emerald-500 rounded-2xl flex items-center justify-center text-white shadow-lg shadow-emerald-500/20">
                            <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path></svg>
                        </div>
                        <div>
                            <h4 class="text-white font-black uppercase italic tracking-wider text-sm">{{ session('success') }}</h4>
                            <p class="text-[10px] font-bold text-emerald-500/60 uppercase tracking-widest mt-1 italic">Data Akun Telah Terverifikasi Sistem</p>
                        </div>
                    </div>
                </div>
            @endif

            <!-- Strategic Enterprise Header -->
            <div class="text-center space-y-6">
                <div class="inline-flex items-center gap-3 px-5 py-2.5 bg-emerald-500/10 rounded-full border border-emerald-500/20">
                    <span class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></span>
                    <span class="text-[10px] font-black text-emerald-400 uppercase tracking-[0.3em] italic">Enterprise Partner Network v2.5</span>
                </div>
                <h1 class="text-5xl md:text-7xl font-display font-black text-white tracking-tighter italic uppercase leading-tight">
                    Aktivasi Jalur<br>
                    <span class="text-emerald-500">Data Strategis</span>
                </h1>
                <p class="text-lg text-slate-500 font-medium max-w-2xl mx-auto italic leading-relaxed">
                    Selamat datang, <span class="text-white font-bold italic border-b-2 border-emerald-500/30">{{ auth()->user()->leasing_profile->company_name ?? 'Mitra Strategis' }}</span>. Pilih kuota operasional Anda untuk mulai mengakses jaringan data nasional.
                </p>
            </div>
            
            <div class="flex flex-wrap justify-center gap-10">
                @foreach($plans as $plan)
                    <div class="relative group h-auto w-full md:w-[400px] min-w-[320px]">
                        <div class="absolute -inset-1 bg-gradient-to-b from-emerald-500/20 to-transparent rounded-[48px] blur-xl opacity-0 group-hover:opacity-100 transition duration-1000"></div>
                        <div class="relative h-full bg-white/5 border border-white/5 rounded-[48px] px-10 py-14 flex flex-col items-center hover:bg-white/10 transition-all duration-700 shadow-3xl overflow-hidden">
                            <!-- Background Mesh -->
                            <div class="absolute top-0 right-0 w-32 h-32 bg-emerald-500/5 blur-3xl rounded-full -mr-16 -mt-16 group-hover:scale-150 transition-transform duration-1000"></div>
                            
                            <div class="relative z-10 w-full flex flex-col h-full">
                                <div class="text-center space-y-4 mb-10">
                                    <h3 class="text-3xl font-display font-black text-white uppercase italic tracking-tighter leading-none group-hover:text-emerald-400 transition-colors">{{ $plan->name }}</h3>
                                    <div class="text-[10px] font-black text-slate-600 uppercase tracking-[0.4em] leading-none italic mt-2">B2B Enterprise License</div>
                                </div>
                                
                                <div class="text-center mb-12">
                                    <div class="text-5xl font-display font-black text-emerald-400 tracking-tighter group-hover:scale-105 transition-transform duration-500 italic whitespace-nowrap">Rp {{ number_format($plan->price, 0, ',', '.') }}</div>
                                    <div class="mt-4 text-[9px] font-black text-slate-500 uppercase tracking-[0.4em] italic leading-none">Enterprise Operational Rate</div>
                                </div>
                                
                                <ul class="text-left space-y-6 mb-12 flex-grow">
                                    <li class="pt-8 border-t border-white/5">
                                        <div class="flex items-center justify-between">
                                            <span class="text-[10px] font-black text-slate-500 uppercase tracking-[0.4em] italic leading-none">Masa Operasional</span>
                                            <span class="text-[12px] font-black text-white italic uppercase tracking-[0.2em]">{{ $plan->duration_days }} Hari Aktif</span>
                                        </div>
                                    </li>
                                </ul>

                                <form action="{{ route('leasing.plans.select', $plan) }}" method="POST" class="w-full mt-auto">
                                    @csrf
                                    <button type="submit" class="w-full py-7 bg-white text-slate-950 font-black text-[11px] uppercase tracking-[0.4em] rounded-[24px] shadow-2xl hover:bg-emerald-600 hover:text-white transition-all duration-700 italic transform active:scale-95 group-hover:shadow-emerald-500/20">
                                        Aktivasi Paket Sekarang →
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</x-app-layout>
