<x-app-layout>
    <div class="py-12 px-6 lg:px-12 min-h-screen">
        <div class="max-w-7xl mx-auto space-y-16">
            
            <!-- Phase 15: Elite Enterprise Hub Hero (Dark Edition) -->
            <div class="relative group">
                <div class="absolute -inset-1 bg-gradient-to-r from-indigo-500/20 to-emerald-500/20 rounded-[48px] blur-2xl opacity-20 group-hover:opacity-40 transition duration-1000"></div>
                <div class="relative bg-white/5 border border-white/5 rounded-[48px] p-8 md:p-20 shadow-[0_40px_100px_-20px_rgba(0,0,0,0.6)] overflow-hidden">
                    <!-- Mesh Gradient Ambient -->
                    <div class="absolute top-0 right-0 w-1/2 h-full bg-gradient-to-bl from-indigo-500/10 via-transparent to-transparent pointer-events-none"></div>
                    
                    <div class="relative z-10 flex flex-col lg:flex-row lg:items-center justify-between gap-12">
                        <div class="max-w-2xl space-y-8">
                            <div class="space-y-6">
                                <div class="inline-flex items-center gap-3 px-4 py-2 bg-indigo-500/10 rounded-full border border-indigo-500/20">
                                    <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full animate-pulse"></span>
                                    <span class="text-[9px] font-black text-indigo-400 uppercase tracking-[0.2em] italic">Portal Mitra Enterprise v2.5</span>
                                </div>
                                <h1 class="text-3xl md:text-7xl font-display font-black text-white tracking-tighter leading-[0.9] italic uppercase">
                                    Pusat Kendali<br>
                                    <span class="text-indigo-500">Terpadu Digital</span>
                                </h1>
                                <p class="text-lg text-slate-400 font-medium leading-relaxed max-w-lg italic">
                                    Selamat bekerja, <span class="text-white font-bold underline decoration-indigo-500/30 decoration-4 underline-offset-4">{{ auth()->user()->name }}</span>. Kelola seluruh aset operasional <span class="text-slate-300 font-semibold italic">{{ auth()->user()->leasing_profile->company_name }}</span> dalam satu portal elit.
                                </p>
                            </div>

                            <div class="flex flex-wrap items-center gap-8 pt-4">
                                <div class="flex items-center">
                                    <div class="w-12 h-12 rounded-[20px] bg-white text-slate-950 flex items-center justify-center text-xs font-black shadow-2xl transform hover:rotate-6 transition-transform">
                                        {{ substr(auth()->user()->name, 0, 2) }}
                                    </div>
                                </div>
                                <div class="h-10 w-px bg-white/5"></div>
                                <div class="flex flex-col">
                                    <span class="text-[9px] font-black text-slate-500 uppercase tracking-widest italic leading-none">Token Mitra Digital</span>
                                    <span class="text-sm font-black text-white tracking-tight mt-1 uppercase italic">LP-{{ str_pad(auth()->id(), 5, '0', STR_PAD_LEFT) }}</span>
                                </div>
                            </div>
                        </div>

                        <!-- Premium Subscription Micro-Module -->
                        <div class="w-full lg:w-96">
                            <div class="p-10 bg-white/5 border border-white/10 rounded-[40px] relative overflow-hidden group/sub shadow-2xl">
                                <div class="absolute top-0 right-0 w-32 h-32 bg-indigo-500/10 blur-3xl rounded-full -mr-16 -mt-16 group-hover/sub:scale-150 transition-transform duration-1000"></div>
                                
                                <div class="relative z-10 space-y-8">
                                    <div class="flex items-center justify-between">
                                        <p class="text-[9px] font-black uppercase tracking-[0.4em] text-slate-500 italic">Status Lisensi</p>
                                        <div class="w-8 h-8 rounded-xl bg-white/5 flex items-center justify-center border border-white/5">
                                            <svg class="w-4 h-4 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
                                        </div>
                                    </div>

                                    @if($stats['active_subscription'])
                                        <div class="space-y-2">
                                            <div class="text-3xl font-display font-black tracking-tighter italic uppercase text-indigo-400 leading-none">{{ $stats['active_subscription']->plan->name }}</div>
                                            <p class="text-[10px] font-bold text-slate-500 uppercase tracking-widest italic">Paket Enterprise Aktif</p>
                                        </div>
                                        <div class="pt-6 border-t border-white/5 flex items-center justify-between">
                                            <div class="text-[9px] font-black text-slate-500 uppercase tracking-widest italic">Hingga:</div>
                                            <div class="text-[10px] font-black text-white italic uppercase tracking-widest">{{ $stats['active_subscription']->end_date->format('d/m/Y') }}</div>
                                        </div>
                                    @else
                                        <div class="space-y-6">
                                            <div class="text-2xl font-display font-black tracking-tight italic uppercase text-rose-500 leading-tight">Layanan<br>Non-Aktif</div>
                                            <a href="{{ route('leasing.plans.index') }}" class="flex items-center justify-center w-full py-5 bg-white text-slate-950 rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-indigo-600 hover:text-white transition-all duration-500 shadow-2xl italic">Upgrade Sekarang →</a>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Impact Metrics (Impact Tracking) -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
                <!-- Branch Network -->
                <div class="bg-white/5 border border-white/5 rounded-[48px] p-8 md:p-12 group hover:border-white/10 transition-all duration-700 shadow-2xl">
                    <div class="flex flex-col h-full justify-between gap-12">
                        <div class="space-y-2">
                            <p class="text-[10px] font-black text-slate-500 uppercase tracking-[0.3em] italic">Jaringan Distribusi</p>
                            <h3 class="text-sm font-black text-white uppercase italic tracking-wider">Cabang Regional</h3>
                        </div>
                        <div class="flex items-end justify-between">
                            <div class="text-7xl font-display font-black text-white tracking-tighter leading-none italic group-hover:text-indigo-400 transition-colors duration-500">{{ $stats['total_branches'] }}</div>
                            <div class="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center text-slate-500 group-hover:bg-indigo-600 group-hover:text-white transition-all duration-500 shadow-xl border border-white/5">
                                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Live Records -->
                <div class="bg-white/5 border border-white/5 rounded-[48px] p-8 md:p-12 group hover:border-emerald-500/20 transition-all duration-700 shadow-2xl">
                    <div class="flex flex-col h-full justify-between gap-12">
                        <div class="space-y-2">
                            <p class="text-[10px] font-black text-slate-500 uppercase tracking-[0.3em] italic">Keamanan Aset</p>
                            <h3 class="text-sm font-black text-white uppercase italic tracking-wider">Data Terverifikasi</h3>
                        </div>
                        <div class="flex items-end justify-between">
                            <div class="text-7xl font-display font-black text-white tracking-tighter leading-none italic group-hover:text-emerald-400 transition-colors duration-500">{{ number_format($stats['total_records']) }}</div>
                            <div class="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center text-emerald-500/50 group-hover:bg-emerald-600 group-hover:text-white transition-all duration-500 shadow-xl border border-white/5">
                                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Integration Speed -->
                <div class="bg-white/5 border border-white/5 rounded-[48px] p-8 md:p-12 group hover:border-amber-500/20 transition-all duration-700 shadow-2xl">
                    <div class="flex flex-col h-full justify-between gap-12">
                        <div class="space-y-2">
                            <p class="text-[10px] font-black text-slate-500 uppercase tracking-[0.3em] italic">Sinkronisasi Cloud</p>
                            <h3 class="text-sm font-black text-white uppercase italic tracking-wider">Aktifitas Batch</h3>
                        </div>
                        <div class="flex items-end justify-between">
                            <div class="text-7xl font-display font-black text-white tracking-tighter leading-none italic group-hover:text-amber-400 transition-colors duration-500">{{ $stats['total_uploads'] }}</div>
                            <div class="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center text-amber-500/50 group-hover:bg-amber-500 group-hover:text-white transition-all duration-500 shadow-xl border border-white/5">
                                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Tactical Operational Panel -->
            <div class="space-y-10">
                <div class="flex items-center justify-between px-2">
                    <div class="space-y-2 border-l-4 border-white/20 pl-6">
                        <h2 class="text-3xl font-display font-black text-white uppercase italic tracking-tighter">Pusat Aksi Operasional</h2>
                        <p class="text-[10px] font-black text-slate-500 uppercase tracking-[0.4em] italic leading-none">Antarmuka Pusat Komando</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                    <a href="{{ route('leasing.records.create') }}" class="bg-white/5 border border-white/5 rounded-[40px] p-12 group flex flex-col justify-between aspect-square hover:-translate-y-2 transition-all duration-700 shadow-2xl">
                        <div class="w-16 h-16 bg-white/5 rounded-[24px] flex items-center justify-center text-slate-500 group-hover:bg-indigo-600 group-hover:text-white transition-all duration-500 shadow-xl border border-white/5">
                            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 4v16m8-8H4"></path></svg>
                        </div>
                        <div class="space-y-4">
                            <h4 class="text-md font-black text-white uppercase italic tracking-wider group-hover:text-indigo-400 transition-colors">Registrasi Unit</h4>
                            <p class="text-[10px] font-bold text-slate-500 uppercase tracking-widest leading-relaxed italic">Pencatatan Aset Kendaraan Tunggal Baru</p>
                        </div>
                    </a>

                    <a href="{{ route('leasing.uploads.create') }}" class="bg-white/5 border border-white/5 rounded-[40px] p-12 group flex flex-col justify-between aspect-square hover:-translate-y-2 transition-all duration-700 shadow-2xl">
                        <div class="w-16 h-16 bg-white/5 rounded-[24px] flex items-center justify-center text-slate-500 group-hover:bg-emerald-600 group-hover:text-white transition-all duration-500 shadow-xl border border-white/5">
                            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
                        </div>
                        <div class="space-y-4">
                            <h4 class="text-md font-black text-white uppercase italic tracking-wider group-hover:text-emerald-400 transition-colors">Integrasi Massal</h4>
                            <p class="text-[10px] font-bold text-slate-500 uppercase tracking-widest leading-relaxed italic">Ekstraksi Inventaris Melalui Batch Upload</p>
                        </div>
                    </a>

                    <a href="{{ route('leasing.branches.index') }}" class="bg-white/5 border border-white/5 rounded-[40px] p-12 group flex flex-col justify-between aspect-square hover:-translate-y-2 transition-all duration-700 shadow-2xl">
                        <div class="w-16 h-16 bg-white/5 rounded-[24px] flex items-center justify-center text-slate-500 group-hover:bg-white group-hover:text-slate-950 transition-all duration-500 shadow-xl border border-white/5">
                            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
                        </div>
                        <div class="space-y-4">
                            <h4 class="text-md font-black text-white uppercase italic tracking-wider group-hover:text-white transition-colors">Mapping Cabang</h4>
                            <p class="text-[10px] font-bold text-slate-500 uppercase tracking-widest leading-relaxed italic">Pengaturan Jaringan Operasional Wilayah</p>
                        </div>
                    </a>

                    <a href="{{ route('notifications.index') }}" class="bg-white/5 border border-white/5 rounded-[40px] p-12 group flex flex-col justify-between aspect-square hover:-translate-y-2 transition-all duration-700 shadow-2xl">
                        <div class="w-16 h-16 bg-white/5 rounded-[24px] flex items-center justify-center text-slate-500 group-hover:bg-rose-600 group-hover:text-white transition-all duration-500 shadow-xl border border-white/5">
                            <div class="relative">
                                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
                                @php $unread = auth()->user()->unreadNotifications->count(); @endphp
                                @if($unread > 0)
                                    <span class="absolute top-0 right-0 w-3 h-3 bg-rose-500 border-2 border-slate-900 rounded-full group-hover:border-white"></span>
                                @endif
                            </div>
                        </div>
                        <div class="space-y-4">
                            <h4 class="text-md font-black text-white uppercase italic tracking-wider group-hover:text-rose-400 transition-colors">Arsip Notifikasi</h4>
                            <p class="text-[10px] font-bold text-slate-500 uppercase tracking-widest leading-relaxed italic">Laporan Kesalahan & Log Aktivitas Sistem</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
