<x-app-layout>
    <div class="py-20 px-8 min-h-screen">
        <div class="max-w-7xl mx-auto space-y-16">
            <!-- Strategic Value Header -->
            <div class="text-center space-y-6">
                <div class="inline-flex items-center gap-3 px-5 py-2.5 bg-indigo-500/10 rounded-full border border-indigo-500/20">
                    <span class="w-2 h-2 bg-indigo-500 rounded-full animate-pulse"></span>
                    <span class="text-[10px] font-black text-indigo-400 uppercase tracking-[0.3em] italic">Intelligence Access Network v2.5</span>
                </div>
                <h1 class="text-5xl md:text-7xl font-display font-black text-white tracking-tighter italic uppercase leading-tight">
                    Pilih Paket<br>
                    <span class="text-indigo-500">Layanan Global</span>
                </h1>
                <p class="text-lg text-slate-500 font-medium max-w-2xl mx-auto italic leading-relaxed">
                    Dapatkan akses intelijen data kendaraan nasional secara akurat dan real-time melalui infrastruktur federasi <span class="text-white font-bold italic border-b-2 border-indigo-500/30">Leasing Pro Elite</span>.
                </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-indigo-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-indigo-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-indigo-400 transition-colors">{{ $plan->name }}</h3>
                                    <div class="text-[10px] font-black text-slate-600 uppercase tracking-[0.4em] leading-none italic mt-2">Subscription License</div>
                                </div>
                                
                                <div class="text-center mb-12">
                                    <div class="text-5xl font-display font-black text-indigo-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">All-Inclusive Enterprise 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 Validitas</span>
                                            <span class="text-[12px] font-black text-white italic uppercase tracking-[0.2em]">{{ $plan->duration_days }} Hari Kalender</span>
                                        </div>
                                    </li>
                                </ul>

                                <form action="{{ route('member.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-indigo-600 hover:text-white transition-all duration-700 italic transform active:scale-95 group-hover:shadow-indigo-500/20">
                                        Pilih Paket Member →
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</x-app-layout>
