@extends('layouts.app')

@section('content')
<div class="p-6 max-w-4xl mx-auto space-y-6">

    <div class="rounded-2xl p-6 text-white shadow-sm" style="background:#1c1d56;">
        <h2 class="text-xl font-bold">Selamat Datang 👋</h2>
        <p class="text-white/80 mt-1 text-sm">
            Halo, {{ Auth::user()->name }}. Selamat datang di panel layanan mandiri LPKA.
        </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        
        <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-200 flex flex-col justify-between min-h-[160px]">
            <div>
                <div class="flex items-center gap-2 text-[#1c1d56] font-bold text-base mb-2">
                    📅 Layanan Kunjungan
                </div>
                <p class="text-xs text-gray-500 leading-relaxed">
                    Daftarkan kunjungan baru secara mandiri atau pantau riwayat serta status persetujuan izin kunjungan Anda.
                </p>
            </div>
            <div class="flex gap-2 mt-6">
                {{-- Menggunakan URL langsung agar anti-error --}}
                <a href="{{ url('user/kunjungan') }}" class="text-xs bg-slate-100 text-[#1c1d56] font-bold px-4 py-2 rounded-lg hover:bg-slate-200 transition">
                    Riwayat
                </a>
                <a href="{{ url('user/kunjungan/create') }}" class="text-xs bg-[#1c1d56] text-white font-bold px-4 py-2 rounded-lg hover:opacity-90 transition">
                    + Daftar Kunjungan
                </a>
            </div>
        </div>

        <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-200 flex flex-col justify-between min-h-[160px]">
            <div>
                <div class="flex items-center gap-2 text-[#1c1d56] font-bold text-base mb-2">
                    🔍 Tracking Anak Binaan
                </div>
                <p class="text-xs text-gray-500 leading-relaxed">
                    Pantau informasi aktif masa tahanan, kalkulasi remisi, dan sisa hari anak binaan secara cepat.
                </p>
            </div>
            
            <div class="mt-6 flex justify-end">
                {{-- Menggunakan URL langsung ke halaman tracking awal --}}
                <a href="{{ url('user/tracking') }}" class="w-full md:w-auto text-center text-xs bg-[#1c1d56] text-white font-bold px-4 py-2 rounded-lg hover:opacity-90 transition">
                    Buka Tracking →
                </a>
            </div>
        </div>

    </div>

</div>
@endsection