@extends('layouts.app')

@section('title', 'MY HUB Mataram - Wash, Dine, Relax & Connect')

@section('content')
<div class="space-y-10 sm:space-y-14" x-data="{ fastBookModalOpen: false }">

    <!-- 1. Hero Section with Venue Atmospheric Background from design.md -->
    <section class="relative rounded-3xl overflow-hidden bg-surface-container-lowest border border-outline-variant/80 shadow-[0_4px_30px_rgba(0,0,0,0.5)]">
        <div class="relative h-72 sm:h-96 w-full bg-cover bg-center"
         style="background-image: url('{{ asset('images/gallery/welcome.jpg') }}');">
            <!-- Gradients -->
            <div class="absolute inset-0 bg-gradient-to-t from-[#0B0C0E] via-[#0B0C0E]/60 to-transparent"></div>
            <div class="absolute inset-0 bg-gradient-to-r from-[#0B0C0E]/90 via-transparent to-[#0B0C0E]/50"></div>

            <!-- Hero Copy -->
            <div class="absolute bottom-5 sm:bottom-8 left-4 sm:left-8 right-4 sm:right-8 max-w-3xl">
                <h1 class="text-2xl sm:text-4xl lg:text-5xl font-extrabold text-white tracking-tight drop-shadow-sm leading-tight">
                    Selamat Datang di <span class="text-secondary">MY HUB</span>
                </h1>
                <div class="flex items-center gap-2 text-xs sm:text-sm font-bold text-secondary uppercase tracking-widest mt-1">
                    <span>Clean Ride</span> &bull; <span>Great Food</span> &bull; <span>Good Vibes</span>
                </div>
                <!-- <p class="text-xs sm:text-base text-slate-200 mt-2 font-medium leading-relaxed max-w-2xl">
                    Wash, Dine, Relax &amp; Connect. Nikmati kemudahan reservasi antrean cuci mobil dan motor secara online. Sambil menunggu kendaraan selesai, bersantai di lounge ber-AC yang nyaman atau nikmati beragam pilihan hidangan dan minuman di kafe.
                </p> -->

                <!-- Quick Action Buttons -->
                <!-- <div class="mt-4 sm:mt-6 flex flex-wrap items-center gap-3">
                    <a href="{{ route('customer.bookings.create') }}"
                        class="inline-flex items-center gap-2 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]/30 transition-all">
                        <span class="material-symbols-outlined text-[18px]">calendar_month</span>
                        <span>Reservasi Jadwal Cuci</span>
                    </a>

                    <a href="{{ route('order.index') }}"
                        class="inline-flex items-center gap-2 rounded-xl bg-surface-container-high hover:bg-surface-container-highest text-on-surface px-5 py-2.5 text-xs sm:text-sm font-bold border border-outline-variant shadow transition-all">
                        <span class="material-symbols-outlined text-[18px] text-secondary">restaurant</span>
                        <span>Pesan Menu Kafe</span>
                    </a>

                    <a href="#fasilitas"
                        class="hidden sm:inline-flex items-center gap-1.5 rounded-xl bg-surface-container-high hover:bg-surface-container-highest text-slate-300 hover:text-white px-4 py-2.5 text-xs font-semibold border border-white/20 transition-all">
                        <span>Fasilitas</span>
                    </a>
                </div> -->
            </div>
        </div>
    </section>

    <!-- 2. Quick Action Hub: 2 Primary Pillar Cards (design.md line 23) -->
    <section class="space-y-4">
        <div class="flex items-center justify-between">
            <div>
                <span class="text-[11px] font-bold uppercase tracking-wider text-secondary">One-Stop Lifestyle</span>
                <h2 class="text-xl sm:text-2xl font-bold text-on-surface tracking-tight mt-0.5">Our Services</h2>
            </div>
            <span class="text-xs font-semibold text-on-surface-variant">Wash &bull; Dine</span>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6">
            <!-- Pillar Card 1: MY CAR -->
            <div class="relative rounded-2xl p-5 sm:p-6 flex flex-col justify-between min-h-[220px] shadow-[0_4px_24px_-2px_rgba(0,0,0,0.5)] border border-outline-variant/80 group overflow-hidden bg-cover bg-center transition-transform hover:-translate-y-0.5"
                style="background-image: linear-gradient(to top, rgba(11, 12, 14, 0.96) 0%, rgba(11, 12, 14, 0.65) 50%, rgba(11, 12, 14, 0.8) 100%), url('{{ asset('images/gallery/robotic_wash.jpg') }}');">
                <div class="flex items-start justify-between">
                    <span class="px-2.5 py-0.5 rounded-full bg-secondary/90 text-slate-950 text-[10px] font-bold uppercase tracking-wider shadow-sm">
                        CAR WASH
                    </span>
                    <span class="text-slate-300 text-xs font-semibold">Robotic Car Wash </span>
                </div>

                <div class="my-4">
                    <div class="text-2xl font-black text-white tracking-tight">MY CAR</div>
                    <p class="text-xs sm:text-sm text-slate-200 mt-1 leading-relaxed">
                       Nikmati pengalaman cuci mobil yang praktis dan modern. Kendaraan Anda akan dibersihkan menggunakan teknologi robot cuci otomatis.
                    </p>
                </div>

                <div class="flex items-center gap-3 pt-2 border-t border-white/20">
                    <a href="{{ route('services.index') }}"
                        class="w-full py-2.5 bg-gradient-to-r from-[#D9A72A] to-[#C59B27] hover:from-[#C59B27] hover:to-[#B48818] text-slate-950 rounded-xl text-xs sm:text-sm font-bold flex items-center justify-center gap-1.5 shadow-md shadow-[#C59B27]/30 transition-all">
                        <span>Reservasi Antrean</span>
                        <span class="material-symbols-outlined text-[16px]">arrow_forward</span>
                    </a>
                    <a href="{{ route('services.index') }}"
                        class="px-4 py-2.5 rounded-xl bg-white/10 hover:bg-white/20 text-white text-xs font-semibold border border-white/30 transition-all text-center shrink-0">
                        Katalog
                    </a>
                </div>
            </div>

            <!-- Pillar Card 2: MY MEAL -->
            <div class="relative rounded-2xl p-5 sm:p-6 flex flex-col justify-between min-h-[220px] shadow-[0_4px_24px_-2px_rgba(0,0,0,0.5)] border border-outline-variant/80 group overflow-hidden bg-cover bg-center transition-transform hover:-translate-y-0.5"
                style="background-image: linear-gradient(to top, rgba(11, 12, 14, 0.96) 0%, rgba(11, 12, 14, 0.65) 50%, rgba(11, 12, 14, 0.8) 100%), url('{{ asset('images/gallery/mymealjpeg.jpeg') }}');">
                <div class="flex items-start justify-between">
                    <span class="px-2.5 py-0.5 rounded-full bg-secondary/90 text-slate-950 text-[10px] font-bold uppercase tracking-wider shadow-sm">
                        CAFÉ &amp; RESTAURANT
                    </span>
                    <span class="text-slate-300 text-xs font-semibold">Self-Order</span>
                </div>

                <div class="my-4">
                    <div class="text-2xl font-black text-white tracking-tight">MY MEAL</div>
                    <p class="text-xs sm:text-sm text-slate-200 mt-1 leading-relaxed">
                      Bosan menunggu? Nikmati hidangan dan minuman pilihan di kafe dan restoran kami, sambil bersantai dalam suasana yang nyaman hingga kendaraan Anda siap kembali melaju.
                    </p>
                </div>

                <div class="flex items-center gap-3 pt-2 border-t border-white/20">
                    <a href="{{ route('order.index') }}"
                        class="w-full py-2.5 bg-gradient-to-r from-[#D9A72A] to-[#C59B27] hover:from-[#C59B27] hover:to-[#B48818] text-slate-950 rounded-xl text-xs sm:text-sm font-bold flex items-center justify-center gap-1.5 shadow-md shadow-[#C59B27]/30 transition-all">
                        <span>Pilih Menu Sekarang</span>
                        <span class="material-symbols-outlined text-[16px]">arrow_forward</span>
                    </a>
                    <a href="{{ route('menu.index') }}"
                        class="px-4 py-2.5 rounded-xl bg-white/10 hover:bg-white/20 text-white text-xs font-semibold border border-white/30 transition-all text-center shrink-0">
                        Menu
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- 3. Highlight Layanan Cuci & Perawatan Populer -->
    <section class="space-y-4">
        <div class="flex items-center justify-between">
            <div>
                <span class="text-[11px] font-bold uppercase tracking-wider text-secondary">Car Wash</span>
                <h2 class="text-xl sm:text-2xl font-bold text-on-surface tracking-tight mt-0.5">Layanan Cuci Populer</h2>
                <p class="text-xs sm:text-sm text-on-surface-variant">Pilihan paket car wash.</p>
            </div>
            <a href="{{ route('services.index') }}" class="text-xs font-bold text-secondary hover:underline flex items-center gap-1">
                <span>Lihat Semua</span>
                <span>&rarr;</span>
            </a>
        </div>

        <div class="flex gap-4 overflow-x-auto pb-3 -mx-4 px-4 sm:mx-0 sm:px-0 no-scrollbar snap-x">
            @forelse ($featuredServices as $service)
                <div class="min-w-[220px] max-w-[220px] sm:min-w-[250px] sm:max-w-[250px] snap-start bg-surface-container-lowest rounded-2xl p-3.5 flex flex-col justify-between shadow-[0_2px_12px_rgba(0,0,0,0.3)] border border-outline-variant/70 hover:border-secondary hover:shadow-md transition-all">
                    <div>
                        <div class="relative h-32 w-full rounded-xl overflow-hidden bg-surface-variant">
                            <img class="w-full h-full object-cover" src="{{ $service->image_url }}" alt="{{ $service->name }}">
                            <span class="absolute bottom-2 left-2 px-2 py-0.5 rounded bg-surface-bright/90 text-[10px] font-bold text-secondary shadow-sm border border-secondary/30">
                                {{ $service->vehicleCategory->name ?? 'Car Wash' }}
                            </span>
                        </div>
                        <div class="mt-3">
                            <h3 class="text-sm font-bold text-on-surface line-clamp-1">{{ $service->name }}</h3>
                            <p class="text-xs text-on-surface-variant mt-0.5 line-clamp-1">{{ $service->description ?? ($service->duration_minutes . ' Menit Pengerjaan') }}</p>
                        </div>
                    </div>
                    <div class="flex items-baseline justify-between mt-3 pt-2 border-t border-outline-variant/50">
                        <span class="text-base font-bold text-secondary">Rp {{ number_format($service->price, 0, ',', '.') }}</span>
                        <a href="{{ route('customer.bookings.create', ['service_id' => $service->id]) }}" class="text-xs font-bold text-secondary hover:text-amber-300">Pesan &rarr;</a>
                    </div>
                </div>
            @empty
                <div class="min-w-[220px] max-w-[220px] sm:min-w-[250px] sm:max-w-[250px] snap-start bg-surface-container-lowest rounded-2xl p-3.5 flex flex-col justify-between shadow-[0_2px_12px_rgba(0,0,0,0.3)] border border-outline-variant/70">
                    <div class="relative h-32 w-full rounded-xl overflow-hidden bg-surface-variant">
                        <img class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuABEPr3Aj67KpfNW3EdQJKTIZwseCmUhPyION-QXcThLOiIENH4yesZLfHKHRNZet3NBRmU5ajJ0ndTYMfBa38SbLkMylWmiTWgfze2VELiyHbZ7PIGiaBzz9sjXgKu0Jgo5qo7TSYfkHYr8SnoSJByPxlgrcq5Y8CHrhxzv7bFQNjYiRWR_EcC1W5MpN60KGTbBYBVqSKT7lBuuBNN-NMwm_3x3oHniB0rPJ9SDgB2PxvJtZMI6nw" alt="Snow Wash Hidrolik">
                        <span class="absolute bottom-2 left-2 px-2 py-0.5 rounded bg-surface-bright/90 text-[10px] font-bold text-secondary shadow-sm border border-secondary/30">Car Wash</span>
                    </div>
                    <div class="mt-3 flex flex-col">
                        <h3 class="text-sm font-bold text-on-surface line-clamp-1">Snow Wash Hidrolik</h3>
                        <span class="text-xs text-on-surface-variant mt-0.5">Shampoo pH Netral + Kolong</span>
                        <div class="flex items-baseline justify-between mt-3 pt-2 border-t border-outline-variant/50">
                            <span class="text-base font-bold text-secondary">Rp 50.000</span>
                            <a href="{{ route('customer.bookings.create') }}" class="text-xs font-bold text-secondary hover:text-amber-300">Pesan &rarr;</a>
                        </div>
                    </div>
                </div>
            @endforelse
        </div>
    </section>

    <!-- 4. Highlight Menu Makanan & Minuman Populer -->
    <section class="space-y-4">
        <div class="flex items-center justify-between">
            <div>
                <span class="text-[11px] font-bold uppercase tracking-wider text-secondary">Café &amp; Resto</span>
                <h2 class="text-xl sm:text-2xl font-bold text-on-surface tracking-tight mt-0.5">Menu Favorit</h2>
                <p class="text-xs sm:text-sm text-on-surface-variant">Nikmati pilihan makanan lezat, racikan kopi dari barista.</p>
            </div>
            <a href="{{ route('order.index') }}" class="text-xs font-bold text-secondary hover:underline flex items-center gap-1">
                <span>Lihat Menu</span>
                <span>&rarr;</span>
            </a>
        </div>

        <div class="flex gap-4 overflow-x-auto pb-3 -mx-4 px-4 sm:mx-0 sm:px-0 no-scrollbar snap-x">
            @forelse ($featuredMenuItems as $item)
                <div class="min-w-[220px] max-w-[220px] sm:min-w-[250px] sm:max-w-[250px] snap-start bg-surface-container-lowest rounded-2xl p-3.5 flex flex-col justify-between shadow-[0_2px_12px_rgba(0,0,0,0.3)] border border-outline-variant/70 hover:border-secondary hover:shadow-md transition-all">
                    <div>
                        <div class="relative h-32 w-full rounded-xl overflow-hidden bg-surface-variant">
                            <img class="w-full h-full object-cover" src="{{ $item->image_url }}" alt="{{ $item->name }}">
                            <span class="absolute bottom-2 left-2 px-2 py-0.5 rounded bg-surface-bright/90 text-[10px] font-bold text-secondary shadow-sm border border-secondary/30">
                                {{ $item->category->name ?? 'Menu Kafe' }}
                            </span>
                        </div>
                        <div class="mt-3">
                            <h3 class="text-sm font-bold text-on-surface line-clamp-1">{{ $item->name }}</h3>
                            <p class="text-xs text-on-surface-variant mt-0.5 line-clamp-1">{{ $item->description }}</p>
                        </div>
                    </div>
                    <div class="flex items-baseline justify-between mt-3 pt-2 border-t border-outline-variant/50">
                        <span class="text-base font-bold text-secondary">Rp {{ number_format($item->price, 0, ',', '.') }}</span>
                        <a href="{{ route('order.index') }}" class="text-xs font-bold text-secondary hover:text-amber-300">Pesan &rarr;</a>
                    </div>
                </div>
            @empty
                <div class="min-w-[220px] max-w-[220px] sm:min-w-[250px] sm:max-w-[250px] snap-start bg-surface-container-lowest rounded-2xl p-3.5 flex flex-col justify-between shadow-[0_2px_12px_rgba(0,0,0,0.3)] border border-outline-variant/70">
                    <div class="relative h-32 w-full rounded-xl overflow-hidden bg-surface-variant">
                        <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1513558161293-cdaf765ed2fd?auto=format&fit=crop&w=600&q=80" alt="MY HUB Sunset Mocktail">
                        <span class="absolute bottom-2 left-2 px-2 py-0.5 rounded bg-surface-bright/90 text-[10px] font-bold text-secondary shadow-sm border border-secondary/30">Mocktail</span>
                    </div>
                    <div class="mt-3 flex flex-col">
                        <h3 class="text-sm font-bold text-on-surface line-clamp-1">MY HUB Sunset Mocktail</h3>
                        <span class="text-xs text-on-surface-variant mt-0.5">Jeruk Segar, Delima &amp; Soda</span>
                        <div class="flex items-baseline justify-between mt-3 pt-2 border-t border-outline-variant/50">
                            <span class="text-base font-bold text-secondary">Rp 32.000</span>
                            <a href="{{ route('order.index') }}" class="text-xs font-bold text-secondary hover:text-amber-300">Pesan &rarr;</a>
                        </div>
                    </div>
                </div>
            @endforelse
        </div>
    </section>

    <!-- 4. Konsep Lifestyle Hub & Galeri Suasana (design.md line 159) -->
    <section class="space-y-4">
        <div class="flex items-center justify-between">
            <div>
                <span class="text-[11px] font-bold uppercase tracking-wider text-secondary">Konsep Lifestyle Hub</span>
                <h2 class="text-xl sm:text-2xl font-bold text-on-surface tracking-tight mt-0.5">Galeri</h2>
                <p class="text-xs sm:text-sm text-on-surface-variant">Jelajahi suasana, kenyamanan, dan berbagai momen di MY HUB</p>
            </div>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <div class="bg-surface-container-lowest rounded-2xl overflow-hidden shadow-[0_2px_12px_rgba(0,0,0,0.3)] border border-outline-variant/70 group">
                <div class="relative h-44 w-full overflow-hidden bg-surface-variant">
                    <img alt="Car Detailing Bay" class="w-full h-full object-cover transition-all duration-300 group-hover:scale-105" src="{{ asset('images/gallery/cuci-mobil-robotic.jpg') }}">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/30 to-transparent"></div>
                    <span class="absolute top-2.5 left-2.5 px-2 py-0.5 rounded bg-surface-bright/90 text-[10px] font-bold text-secondary shadow-sm border border-secondary/30">Detailing Bay</span>
                    <div class="absolute bottom-2.5 left-3 right-3 text-white">
                        <span class="text-sm font-bold block">Hydro Wash &amp; Finish</span>
                        <!-- <span class="text-xs text-slate-300">Pengerjaan teliti &amp; chemical ramah cat</span> -->
                    </div>
                </div>
            </div>

            <div class="bg-surface-container-lowest rounded-2xl overflow-hidden shadow-[0_2px_12px_rgba(0,0,0,0.3)] border border-outline-variant/70 group">
                <div class="relative h-44 w-full overflow-hidden bg-surface-variant">
                    <img alt="Specialty Coffee Lounge" class="w-full h-full object-cover transition-all duration-300 group-hover:scale-105" src="{{ asset('images/gallery/coffe.webp') }}">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/30 to-transparent"></div>
                    <span class="absolute top-2.5 left-2.5 px-2 py-0.5 rounded bg-surface-bright/90 text-[10px] font-bold text-secondary shadow-sm border border-secondary/30">Specialty Coffee</span>
                    <div class="absolute bottom-2.5 left-3 right-3 text-white">
                        <span class="text-sm font-bold block">Cozy Indoor AC Lounge</span>
                        <!-- <span class="text-xs text-slate-300">Suhu nyaman, WiFi kencang &amp; colokan</span> -->
                    </div>
                </div>
            </div>

            <div class="bg-surface-container-lowest rounded-2xl overflow-hidden shadow-[0_2px_12px_rgba(0,0,0,0.3)] border border-outline-variant/70 group">
                <div class="relative h-44 w-full overflow-hidden bg-surface-variant">
                    <img alt="Outdoor Garden Sunset" class="w-full h-full object-cover transition-all duration-300 group-hover:scale-105" src="{{ asset('images/gallery/patio.jpg') }}">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/30 to-transparent"></div>
                    <span class="absolute top-2.5 left-2.5 px-2 py-0.5 rounded bg-surface-bright/90 text-[10px] font-bold text-secondary shadow-sm border border-secondary/30">Garden Sunset</span>
                    <div class="absolute bottom-2.5 left-3 right-3 text-white">
                        <span class="text-sm font-bold block">Sunset Alfresco Patio</span>
                        <!-- <span class="text-xs text-slate-300">Suasana santai rindang senja Mataram</span> -->
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 5. Fasilitas Lengkap untuk Anda & Keluarga (design.md line 160) -->
    <section id="fasilitas" class="space-y-4">
        <div class="flex items-center justify-between">
            <div>
                <span class="text-[11px] font-bold uppercase tracking-wider text-secondary">Kenyamanan Pengunjung</span>
                <h2 class="text-xl sm:text-2xl font-bold text-on-surface tracking-tight mt-0.5">Fasilitas Lengkap untuk Anda &amp; Keluarga</h2>
            </div>
            <span class="hidden sm:inline-block px-3 py-1 rounded-full bg-secondary/15 text-secondary text-xs font-bold uppercase border border-secondary/30">
                10 Fasilitas
            </span>
        </div>

        <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
            <div class="bg-surface-container-lowest rounded-xl p-3 border border-outline-variant/70 shadow-sm flex items-center gap-2.5">
                <div class="w-9 h-9 rounded-lg bg-secondary/15 border border-secondary/30 flex items-center justify-center text-secondary shrink-0">
                    <span class="material-symbols-outlined text-[19px]">local_parking</span>
                </div>
                <div class="min-w-0">
                    <span class="text-xs font-bold text-on-surface block leading-tight">Area parkir luas</span>
                </div>
            </div>

            <div class="bg-surface-container-lowest rounded-xl p-3 border border-outline-variant/70 shadow-sm flex items-center gap-2.5">
                <div class="w-9 h-9 rounded-lg bg-secondary/15 border border-secondary/30 flex items-center justify-center text-secondary shrink-0">
                    <span class="material-symbols-outlined text-[19px]">ac_unit</span>
                </div>
                <div class="min-w-0">
                    <span class="text-xs font-bold text-on-surface block leading-tight">Ruangan ber-AC</span>
                </div>
            </div>

            <div class="bg-surface-container-lowest rounded-xl p-3 border border-outline-variant/70 shadow-sm flex items-center gap-2.5">
                <div class="w-9 h-9 rounded-lg bg-secondary/15 border border-secondary/30 flex items-center justify-center text-secondary shrink-0">
                    <span class="material-symbols-outlined text-[19px]">deck</span>
                </div>
                <div class="min-w-0">
                    <span class="text-xs font-bold text-on-surface block leading-tight">Area makan outdoor</span>
                </div>
            </div>

            <div class="bg-surface-container-lowest rounded-xl p-3 border border-outline-variant/70 shadow-sm flex items-center gap-2.5">
                <div class="w-9 h-9 rounded-lg bg-secondary/15 border border-secondary/30 flex items-center justify-center text-secondary shrink-0">
                    <span class="material-symbols-outlined text-[19px]">mosque</span>
                </div>
                <div class="min-w-0">
                    <span class="text-xs font-bold text-on-surface block leading-tight">Mushola</span>
                </div>
            </div>

            <div class="bg-surface-container-lowest rounded-xl p-3 border border-outline-variant/70 shadow-sm flex items-center gap-2.5">
                <div class="w-9 h-9 rounded-lg bg-secondary/15 border border-secondary/30 flex items-center justify-center text-secondary shrink-0">
                    <span class="material-symbols-outlined text-[19px]">wc</span>
                </div>
                <div class="min-w-0">
                    <span class="text-xs font-bold text-on-surface block leading-tight">Toilet bersih &amp; higienis</span>
                </div>
            </div>

            <div class="bg-surface-container-lowest rounded-xl p-3 border border-outline-variant/70 shadow-sm flex items-center gap-2.5">
                <div class="w-9 h-9 rounded-lg bg-secondary/15 border border-secondary/30 flex items-center justify-center text-secondary shrink-0">
                    <span class="material-symbols-outlined text-[19px]">restaurant</span>
                </div>
                <div class="min-w-0">
                    <span class="text-xs font-bold text-on-surface block leading-tight">Restoran dan cafe</span>
                </div>
            </div>

            <div class="bg-surface-container-lowest rounded-xl p-3 border border-outline-variant/70 shadow-sm flex items-center gap-2.5">
                <div class="w-9 h-9 rounded-lg bg-secondary/15 border border-secondary/30 flex items-center justify-center text-secondary shrink-0">
                    <span class="material-symbols-outlined text-[19px]">weekend</span>
                </div>
                <div class="min-w-0">
                    <span class="text-xs font-bold text-on-surface block leading-tight">Area tunggu yang nyaman</span>
                </div>
            </div>

            <div class="bg-surface-container-lowest rounded-xl p-3 border border-outline-variant/70 shadow-sm flex items-center gap-2.5">
                <div class="w-9 h-9 rounded-lg bg-secondary/15 border border-secondary/30 flex items-center justify-center text-secondary shrink-0">
                    <span class="material-symbols-outlined text-[19px]">park</span>
                </div>
                <div class="min-w-0">
                    <span class="text-xs font-bold text-on-surface block leading-tight">Taman yang hijau &amp; rindang</span>
                </div>
            </div>

            <div class="bg-surface-container-lowest rounded-xl p-3 border border-outline-variant/70 shadow-sm flex items-center gap-2.5">
                <div class="w-9 h-9 rounded-lg bg-secondary/15 border border-secondary/30 flex items-center justify-center text-secondary shrink-0">
                    <span class="material-symbols-outlined text-[19px]">music_note</span>
                </div>
                <div class="min-w-0">
                    <span class="text-xs font-bold text-on-surface block leading-tight">Live music</span>
                </div>
            </div>

            <div class="bg-surface-container-lowest rounded-xl p-3 border border-outline-variant/70 shadow-sm flex items-center gap-2.5">
                <div class="w-9 h-9 rounded-lg bg-secondary/15 border border-secondary/30 flex items-center justify-center text-secondary shrink-0">
                    <span class="material-symbols-outlined text-[19px]">auto_awesome</span>
                </div>
                <div class="min-w-0">
                    <span class="text-xs font-bold text-on-surface block leading-tight">Cuci &amp; detailing bay</span>
                </div>
            </div>
        </div>
    </section>

    <!-- 6. Instant Consultation / Fast Reservation CTA Bar (design.md line 160) -->
    <section class="bg-gradient-to-br from-surface-container-lowest via-surface-container-low to-surface-container rounded-2xl p-5 sm:p-6 shadow-[0_4px_24px_-2px_rgba(0,0,0,0.5)] border border-secondary/25 flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div class="flex items-start gap-3">
            <div class="w-12 h-12 rounded-2xl bg-secondary/15 border border-secondary/30 flex items-center justify-center text-secondary shrink-0">
                <span class="material-symbols-outlined text-[24px]">support_agent</span>
            </div>
            <div>
                <span class="text-[10px] font-bold uppercase tracking-wider text-secondary">Customer Service</span>
                <h3 class="text-base sm:text-lg font-bold text-on-surface mt-0.5">Ingin Mencuci Tanpa Antre?</h3>
                <p class="text-xs sm:text-sm text-on-surface-variant mt-0.5 max-w-xl">
                    Pesan jadwal Anda melalui website atau hubungi WhatsApp kami secara langsung.
                </p>
            </div>
        </div>

        <div class="flex items-center gap-3 shrink-0">
            <a href="{{ $supportWaUrl ?? 'https://wa.me/6281234567890' }}"
                class="py-2.5 px-4 rounded-xl bg-emerald-600 hover:bg-emerald-500 text-white text-xs font-bold flex items-center gap-2 shadow-sm transition-all"
                target="_blank" rel="noopener noreferrer">
                <span class="material-symbols-outlined text-[18px]">chat</span>
                <span>WhatsApp</span>
            </a>

            <a href="{{ route('services.index') }}"
                class="py-2.5 px-4 rounded-xl bg-gradient-to-r from-[#D9A72A] to-[#C59B27] hover:from-[#C59B27] hover:to-[#B48818] text-slate-950 text-xs font-bold flex items-center gap-2 shadow-md shadow-[#C59B27]/25 transition-all">
                <span class="material-symbols-outlined text-[18px]">edit_calendar</span>
                <span>Reservasi Jadwal</span>
            </a>
        </div>
    </section>

    <!-- 7. Lokasi & Jam Buka (design.md line 223) -->
    <section id="lokasi" class="bg-surface-container-lowest rounded-2xl p-6 border border-outline-variant/80 shadow-sm space-y-4">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 pb-3 border-b border-outline-variant/60">
            <div>
                <h2 class="text-lg sm:text-xl font-bold text-on-surface">Lokasi &amp; Jam Buka</h2>
            </div>
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-950/60 text-emerald-300 text-xs font-bold border border-emerald-800/60">
                <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
                <span>08:00 — 22:00 WITA (Buka Setiap Hari)</span>
            </div>
        </div>

        <x-google-maps-embed />
    </section>

    <!-- Interactive Fast Reservation Modal from design.md line 183 -->
    <div x-show="fastBookModalOpen"
        style="display: none;"
        class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/85 backdrop-blur-sm"
        x-transition>
        <div class="w-full max-w-sm bg-surface-container-lowest rounded-2xl p-5 shadow-2xl border border-outline-variant flex flex-col gap-4 animate-in fade-in duration-200"
            @click.away="fastBookModalOpen = false">
            <div class="flex items-center justify-between">
                <div>
                    <span class="text-base font-bold text-on-surface block">Form Reservasi Kilat</span>
                    <span class="text-xs text-on-surface-variant">Konfirmasi otomatis via WhatsApp</span>
                </div>
                <button type="button" @click="fastBookModalOpen = false" class="w-8 h-8 rounded-full bg-surface-container-high hover:bg-surface-container-highest flex items-center justify-center text-on-surface-variant hover:text-on-surface">
                    <span class="material-symbols-outlined text-[18px]">close</span>
                </button>
            </div>

            <form class="flex flex-col gap-3" @submit.prevent="
                const text = encodeURIComponent('Halo MY HUB, saya ingin reservasi: ' + $event.target.elements.hub_service.value + ' atas nama ' + $event.target.elements.cust_name.value);
                window.open('{{ $supportWaUrl ?? 'https://wa.me/6281234567890' }}?text=' + text, '_blank');
                fastBookModalOpen = false;
            ">
                <div class="flex flex-col gap-1">
                    <label class="text-[10px] uppercase font-bold text-on-surface-variant">Pilih Keperluan</label>
                    <div class="grid grid-cols-2 gap-2">
                        <label class="flex items-center gap-2 p-2 rounded-xl bg-surface-variant border border-outline-variant cursor-pointer text-xs font-semibold text-on-surface">
                            <input type="radio" name="hub_service" value="Cuci Kendaraan" checked class="accent-[#C59B27]">
                            <span>Car / Bike Wash</span>
                        </label>
                        <label class="flex items-center gap-2 p-2 rounded-xl bg-surface-variant border border-outline-variant cursor-pointer text-xs font-semibold text-on-surface">
                            <input type="radio" name="hub_service" value="Reservasi Meja Resto" class="accent-[#C59B27]">
                            <span>Meja Café</span>
                        </label>
                    </div>
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-[10px] uppercase font-bold text-on-surface-variant">Nama &amp; Nomor WhatsApp</label>
                    <input name="cust_name" type="text" class="w-full bg-surface-container-low border border-outline-variant px-3 py-2.5 rounded-xl text-xs text-on-surface outline-none focus:border-secondary" placeholder="Contoh: Dimas (08123456789)" required>
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-[10px] uppercase font-bold text-on-surface-variant">Waktu Rencana Kedatangan</label>
                    <input name="cust_time" type="time" value="16:00" class="w-full bg-surface-container-low border border-outline-variant px-3 py-2 rounded-xl text-xs text-on-surface outline-none focus:border-secondary">
                </div>

                <button type="submit" class="w-full mt-2 py-3 bg-gradient-to-r from-[#D9A72A] to-[#C59B27] hover:from-[#C59B27] hover:to-[#B48818] text-slate-950 text-xs font-bold rounded-xl shadow-md flex items-center justify-center gap-2">
                    <span>Kirim Pemesanan ke WhatsApp</span>
                    <span class="material-symbols-outlined text-[16px]">send</span>
                </button>
            </form>
        </div>
    </div>

</div>
@endsection