@extends('layouts.app')

@section('title', 'Dashboard Pelanggan - MY HUB Mataram')

@section('content')
<div class="space-y-8 pb-12">
    <!-- Welcome Header Card with Warm Luxury Theme -->
    <div class="bg-surface-container-lowest border border-outline-variant/80 rounded-3xl p-6 sm:p-8 shadow-sm relative overflow-hidden">
        <div class="absolute -top-24 -right-24 w-80 h-80 bg-secondary/10 rounded-full blur-3xl pointer-events-none"></div>

        <div class="relative z-10 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
            <div>
                <h1 class="text-2xl sm:text-3xl font-extrabold text-on-surface tracking-tight mt-1">
                    Halo, {{ auth()->user()->name }}! 
                </h1>
                <p class="text-xs sm:text-sm text-on-surface-variant mt-1 leading-relaxed">
                    Selamat datang di MY HUB 
                </p>
            </div>
            <div>
                <a href="{{ route('customer.bookings.create') }}"
                    class="inline-flex items-center justify-center gap-1.5 rounded-xl bg-gradient-to-r from-[#D9A72A] to-[#C59B27] hover:from-[#C59B27] hover:to-[#B48818] text-slate-950 px-5 py-2.5 text-xs sm:text-sm font-bold shadow-md shadow-[#C59B27]/25 transition-all">
                    <span class="material-symbols-outlined text-[18px]">add</span>
                    <span>Reservasi Cuci Kendaraan</span>
                </a>
            </div>
        </div>
    </div>

    <!-- Quick Navigation Shortcuts (Pillar Cards) -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
        <a href="{{ route('customer.bookings.create') }}"
            class="bg-surface-container-lowest border border-outline-variant/80 hover:border-secondary rounded-2xl p-6 transition-all group flex flex-col justify-between shadow-sm hover:shadow-md">
            <div>
                <div class="w-12 h-12 rounded-xl bg-secondary/15 border border-secondary/30 text-secondary flex items-center justify-center text-2xl mb-4 group-hover:scale-105 transition-transform">
                    <span class="material-symbols-outlined text-[26px]">local_car_wash</span>
                </div>
                <h3 class="text-base font-bold text-on-surface group-hover:text-secondary transition-colors">
                    Booking Jadwal Cuci Kendaraan →
                </h3>
                <p class="text-xs text-on-surface-variant mt-1.5 leading-relaxed">
                    Reservasikan jadwal cuci kendaraan anda.
                </p>
            </div>
            <span class="text-xs text-secondary font-bold mt-4 block">Pilih Waktu &bull; Cepat &amp; Praktis</span>
        </a>

        <a href="{{ route('customer.bookings.index') }}"
            class="bg-surface-container-lowest border border-outline-variant/80 hover:border-secondary rounded-2xl p-6 transition-all group flex flex-col justify-between shadow-sm hover:shadow-md">
            <div>
                <div class="w-12 h-12 rounded-xl bg-secondary/15 border border-secondary/30 text-secondary flex items-center justify-center text-2xl mb-4 group-hover:scale-105 transition-transform">
                    <span class="material-symbols-outlined text-[26px]">receipt_long</span>
                </div>
                <h3 class="text-base font-bold text-on-surface group-hover:text-secondary transition-colors">
                    Riwayat &amp; Tiket Booking →
                </h3>
                <p class="text-xs text-on-surface-variant mt-1.5 leading-relaxed">
                    Pantau progres status pengerjaan kendaraan Anda dan booking code.
                </p>
            </div>
            <span class="text-xs text-secondary font-bold mt-4 block">Status &bull; Tracker</span>
        </a>

        <a href="{{ route('services.index') }}"
            class="bg-surface-container-lowest border border-outline-variant/80 hover:border-secondary rounded-2xl p-6 transition-all group flex flex-col justify-between shadow-sm hover:shadow-md">
            <div>
                <div class="w-12 h-12 rounded-xl bg-secondary/15 border border-secondary/30 text-secondary flex items-center justify-center text-2xl mb-4 group-hover:scale-105 transition-transform">
                    <span class="material-symbols-outlined text-[26px]">diamond</span>
                </div>
                <h3 class="text-base font-bold text-on-surface group-hover:text-secondary transition-colors">
                    Daftar Cuci Mobil →
                </h3>
                <p class="text-xs text-on-surface-variant mt-1.5 leading-relaxed">
                    Daftar lengkap harga dan informasi cuci mobil pada my hub.
                </p>
            </div>
            <span class="text-xs text-secondary font-bold mt-4 block">Informasi &bull; Transparan</span>
        </a>
    </div>

    <!-- Helpful Tips & SOP Card -->
    <div class="rounded-2xl bg-surface-container-lowest border border-outline-variant/80 p-6 space-y-4 shadow-sm">
        <h2 class="text-base font-bold text-on-surface flex items-center gap-2">
            <span class="material-symbols-outlined text-[20px] text-secondary">tips_and_updates</span>
            <span>Panduan Kunjungan ke MY HUB Mataram</span>
        </h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs text-on-surface-variant">
            <div class="flex items-start gap-2.5">
                <span class="w-5 h-5 rounded-full bg-secondary-container text-on-secondary-container font-bold flex items-center justify-center shrink-0">1</span>
                <p><strong class="text-on-surface">Tiba 10 menit lebih awal:</strong> Berikan waktu petugas inspeksi fisik kendaraan dan serah terima kunci kontak.</p>
            </div>
            <div class="flex items-start gap-2.5">
                <span class="w-5 h-5 rounded-full bg-secondary-container text-on-secondary-container font-bold flex items-center justify-center shrink-0">2</span>
                <p><strong class="text-on-surface">Tunjukkan Kode Booking:</strong> Siapkan tiket digital atau sebutkan kode booking saat tiba di pintu masuk bay cuci.</p>
            </div>
            <div class="flex items-start gap-2.5">
                <span class="w-5 h-5 rounded-full bg-secondary-container text-on-secondary-container font-bold flex items-center justify-center shrink-0">3</span>
                <p><strong class="text-on-surface">Santai di Kafe:</strong> Anda bisa memesan makanan dan minuman mandiri dari meja kafe sambil menunggu kendaraan selesai.</p>
            </div>
            <div class="flex items-start gap-2.5">
                <span class="w-5 h-5 rounded-full bg-secondary-container text-on-secondary-container font-bold flex items-center justify-center shrink-0">4</span>
                <p><strong class="text-on-surface">Pembayaran Fleksibel:</strong> Selesaikan tagihan cuci dan pesanan kafe sekaligus di kasir kami (Tunai &amp; QRIS).</p>
            </div>
        </div>
    </div>
</div>
@endsection