@extends('layouts.app', ['title' => 'Dashboard Saya'])

@section('content')
<div class="space-y-6 sm:space-y-8 max-w-5xl mx-auto pb-8">

    <!-- 1. Customer Profile & Greeting Card (Mobile-First E-Commerce Header) -->
    <div class="bg-white rounded-3xl p-5 sm:p-7 border border-[#e4e2dd] shadow-xs">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-5">
            
            <!-- Avatar & Customer Info -->
            <div class="flex items-center gap-4">
                <!-- Avatar Initials -->
                <div class="relative shrink-0">
                    <div class="w-14 h-14 sm:w-16 sm:h-16 rounded-2xl bg-gradient-to-br from-[#526048] to-[#3d4b34] text-white font-serif text-xl sm:text-2xl font-bold flex items-center justify-center shadow-xs">
                        {{ strtoupper(substr($user->name, 0, 2)) }}
                    </div>
                    <span class="absolute -bottom-1 -right-1 w-5 h-5 rounded-full bg-[#d8e8c8] text-[#131f0b] flex items-center justify-center ring-2 ring-white" title="Akun Terverifikasi">
                        <span class="material-symbols-outlined text-xs font-bold">check</span>
                    </span>
                </div>

                <!-- Name & Details -->
                <div class="min-w-0">
                    <div class="flex items-center gap-2 flex-wrap">
                        <h1 class="font-serif text-xl sm:text-2xl font-bold text-[#1b1c19] truncate">
                            {{ $user->name }}
                        </h1>
                        <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-semibold bg-[#f0eee9] text-[#526048] border border-[#e4e2dd]">
                            <span class="material-symbols-outlined text-xs">spa</span>
                            <span>Member Lalita</span>
                        </span>
                    </div>
                    <p class="text-xs text-[#75786f] mt-0.5 truncate">{{ $user->email }}</p>
                    @if($user->phone_number)
                        <p class="text-[11px] text-[#75786f]">{{ $user->phone_number }}</p>
                    @endif
                </div>
            </div>

            <!-- Header Quick Action Buttons -->
            <div class="flex items-center gap-2.5 pt-3 sm:pt-0 border-t sm:border-t-0 border-[#f0eee9]">
                <a href="{{ route('profile.edit') }}"
                   class="flex-1 sm:flex-none inline-flex items-center justify-center gap-1.5 px-4 py-2.5 rounded-full border border-[#c5c8bd] hover:border-[#526048] hover:bg-[#fbf9f4] text-xs font-semibold text-[#1b1c19] transition-colors shadow-2xs">
                    <span class="material-symbols-outlined text-base text-[#526048]">manage_accounts</span>
                    <span>Atur Profil</span>
                </a>

                <a href="{{ route('products.index') }}"
                   class="flex-1 sm:flex-none inline-flex items-center justify-center gap-1.5 px-5 py-2.5 rounded-full bg-[#526048] hover:bg-[#3d4b34] text-white text-xs font-bold uppercase tracking-wider transition-colors shadow-xs">
                    <span class="material-symbols-outlined text-base">shopping_bag</span>
                    <span>Belanja</span>
                </a>
            </div>
        </div>
    </div>

    <!-- 2. Quick Metrics / Toko Online Stats Cards -->
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
        <!-- Active Orders -->
        <a href="{{ route('dashboard', ['status' => 'processing']) }}" class="group bg-white p-4 sm:p-5 rounded-2xl border border-[#e4e2dd] hover:border-[#526048] hover:shadow-xs transition-all block">
            <div class="flex items-center justify-between text-[#75786f] group-hover:text-[#526048] transition-colors">
                <span class="text-[10px] sm:text-xs font-bold uppercase tracking-wider">Pesanan Aktif</span>
                <span class="material-symbols-outlined text-xl">inventory_2</span>
            </div>
            <div class="mt-2 flex items-baseline gap-1.5">
                <span class="font-serif text-2xl sm:text-3xl font-bold text-[#1b1c19]">{{ $activeOrdersCount }}</span>
                <span class="text-[11px] text-[#526048] font-medium">pesanan</span>
            </div>
            <p class="text-[11px] text-[#75786f] mt-0.5 truncate">Diproses atau dikirim</p>
        </a>

        <!-- Total Spent -->
        <div class="bg-white p-4 sm:p-5 rounded-2xl border border-[#e4e2dd] shadow-2xs">
            <div class="flex items-center justify-between text-[#75786f]">
                <span class="text-[10px] sm:text-xs font-bold uppercase tracking-wider">Total Belanja</span>
                <span class="material-symbols-outlined text-xl text-[#526048]">payments</span>
            </div>
            <div class="mt-2">
                <span class="font-sans text-lg sm:text-xl font-bold text-[#526048] block leading-tight">
                    Rp {{ number_format($totalSpent, 0, ',', '.') }}
                </span>
            </div>
            <p class="text-[11px] text-[#75786f] mt-0.5 truncate">Transaksi terverifikasi</p>
        </div>

        <!-- Saved Addresses -->
        <a href="{{ route('profile.edit') }}" class="group bg-white p-4 sm:p-5 rounded-2xl border border-[#e4e2dd] hover:border-[#526048] hover:shadow-xs transition-all block">
            <div class="flex items-center justify-between text-[#75786f] group-hover:text-[#526048] transition-colors">
                <span class="text-[10px] sm:text-xs font-bold uppercase tracking-wider">Buku Alamat</span>
                <span class="material-symbols-outlined text-xl">location_on</span>
            </div>
            <div class="mt-2 flex items-baseline gap-1.5">
                <span class="font-serif text-2xl sm:text-3xl font-bold text-[#1b1c19]">{{ $savedAddressesCount ?? $user->addresses()->count() }}</span>
                <span class="text-[11px] text-[#75786f] font-medium">tersimpan</span>
            </div>
            <span class="text-[11px] text-[#526048] font-semibold mt-0.5 flex items-center gap-0.5">
                <span>Kelola Alamat</span>
                <span class="text-xs">&rarr;</span>
            </span>
        </a>

        <!-- Cart Items -->
        @php
            $cartCount = count(session('cart', []));
        @endphp
        <a href="{{ route('cart.index') }}" class="group bg-white p-4 sm:p-5 rounded-2xl border border-[#e4e2dd] hover:border-[#526048] hover:shadow-xs transition-all block">
            <div class="flex items-center justify-between text-[#75786f] group-hover:text-[#526048] transition-colors">
                <span class="text-[10px] sm:text-xs font-bold uppercase tracking-wider">Keranjang</span>
                <span class="material-symbols-outlined text-xl">shopping_cart</span>
            </div>
            <div class="mt-2 flex items-baseline gap-1.5">
                <span class="font-serif text-2xl sm:text-3xl font-bold text-[#1b1c19]">{{ $cartCount }}</span>
                <span class="text-[11px] text-[#75786f] font-medium">produk</span>
            </div>
            <span class="text-[11px] text-[#526048] font-semibold mt-0.5 flex items-center gap-0.5">
                <span>Lihat Keranjang</span>
                <span class="text-xs">&rarr;</span>
            </span>
        </a>
    </div>

    <!-- 3. Tokopedia-Style Order Status Filter Tabs (Horizontal Scrollable on Mobile) -->
    <div class="space-y-3">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="font-serif text-xl sm:text-2xl font-bold text-[#1b1c19]">Daftar Pesanan</h2>
                <p class="text-xs text-[#75786f] mt-0.5">Pantau status pengiriman, resi paket, dan kode pengambilan toko Anda.</p>
            </div>
        </div>

        <!-- Filter Pills Bar -->
        <div class="flex items-center gap-2 overflow-x-auto pb-2 pt-1 -mx-4 px-4 sm:mx-0 sm:px-0 no-scrollbar">
            @php
                $statusTabs = [
                    'all' => ['label' => 'Semua', 'icon' => 'list_alt'],
                    \App\Enums\OrderStatus::PENDING->value => ['label' => 'Menunggu Pembayaran', 'icon' => 'account_balance_wallet'],
                    \App\Enums\OrderStatus::PROCESSING->value => ['label' => 'Diproses', 'icon' => 'inventory_2'],
                    \App\Enums\OrderStatus::READY_FOR_PICKUP->value => ['label' => 'Siap Diambil', 'icon' => 'storefront'],
                    \App\Enums\OrderStatus::SHIPPED->value => ['label' => 'Dikirim', 'icon' => 'local_shipping'],
                    \App\Enums\OrderStatus::COMPLETED->value => ['label' => 'Selesai', 'icon' => 'task_alt'],
                ];
            @endphp

            @foreach ($statusTabs as $statusKey => $tab)
                @php
                    $isActive = ($selectedStatus ?? 'all') === $statusKey;
                    $count = $statusCounts[$statusKey] ?? 0;
                @endphp
                <a href="{{ route('dashboard', $statusKey === 'all' ? [] : ['status' => $statusKey]) }}"
                   class="shrink-0 inline-flex items-center gap-1.5 px-3.5 py-2 rounded-full text-xs font-semibold transition-all whitespace-nowrap
                       {{ $isActive
                           ? 'bg-[#526048] text-white shadow-xs'
                           : 'bg-white text-[#444840] border border-[#e4e2dd] hover:bg-[#f5f3ee] hover:text-[#1b1c19]' }}">
                    <span class="material-symbols-outlined text-base {{ $isActive ? 'text-white' : 'text-[#75786f]' }}">{{ $tab['icon'] }}</span>
                    <span>{{ $tab['label'] }}</span>
                    @if ($count > 0)
                        <span class="px-1.5 py-0.2 rounded-full text-[10px] font-bold {{ $isActive ? 'bg-white/20 text-white' : 'bg-[#f0eee9] text-[#526048]' }}">
                            {{ $count }}
                        </span>
                    @endif
                </a>
            @endforeach
        </div>
    </div>

    <!-- 4. Order Cards List (Mobile-Optimized E-Commerce Cards) -->
    @if ($orders->count() > 0)
        <div class="space-y-4">
            @foreach ($orders as $order)
                @php
                    $isPickup = $order->isPickup();
                    $firstItem = $order->items->first();
                    $remainingCount = $order->items->count() - 1;

                    // Badges logic
                    $statusConfig = match ($order->order_status) {
                        \App\Enums\OrderStatus::PENDING => [
                            'bg' => 'bg-amber-50 text-amber-900 border-amber-200',
                            'icon' => 'schedule',
                            'label' => 'Menunggu Pembayaran'
                        ],
                        \App\Enums\OrderStatus::PROCESSING => [
                            'bg' => 'bg-sky-50 text-sky-900 border-sky-200',
                            'icon' => 'inventory_2',
                            'label' => 'Diproses Penjual'
                        ],
                        \App\Enums\OrderStatus::READY_FOR_PICKUP => [
                            'bg' => 'bg-[#d8e8c8] text-[#131f0b] border-[#bcccae]',
                            'icon' => 'storefront',
                            'label' => 'Siap Diambil di Toko'
                        ],
                        \App\Enums\OrderStatus::SHIPPED => [
                            'bg' => 'bg-purple-50 text-purple-900 border-purple-200',
                            'icon' => 'local_shipping',
                            'label' => 'Sedang Dikirim'
                        ],
                        \App\Enums\OrderStatus::COMPLETED => [
                            'bg' => 'bg-[#f0eee9] text-[#1b1c19] border-[#e4e2dd]',
                            'icon' => 'check_circle',
                            'label' => 'Pesanan Selesai'
                        ],
                        default => [
                            'bg' => 'bg-rose-50 text-rose-800 border-rose-200',
                            'icon' => 'cancel',
                            'label' => 'Dibatalkan'
                        ],
                    };
                @endphp

                <div class="bg-white rounded-2xl sm:rounded-3xl border border-[#e4e2dd] p-4 sm:p-6 shadow-xs hover:border-[#526048]/40 transition-all space-y-4">
                    
                    <!-- Card Top Header: Store Info, Date, Status Badge -->
                    <div class="flex flex-wrap items-center justify-between gap-2.5 pb-3 border-b border-[#f0eee9]">
                        <div class="flex items-center gap-2 text-xs">
                            <span class="inline-flex items-center justify-center w-6 h-6 rounded-lg bg-[#f0eee9] text-[#526048]">
                                <span class="material-symbols-outlined text-sm">spa</span>
                            </span>
                            <span class="font-bold text-[#1b1c19]">Lalita Bloom</span>
                            <span class="text-[#c5c8bd]">•</span>
                            <span class="text-[#75786f]">{{ $order->created_at->format('d M Y, H:i') }}</span>
                        </div>

                        <div class="flex items-center gap-2">
                            <!-- Fulfillment Badge -->
                            <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-medium bg-[#f5f3ee] text-[#444840]">
                                <span class="material-symbols-outlined text-xs">{{ $isPickup ? 'store' : 'local_shipping' }}</span>
                                <span>{{ $isPickup ? 'Ambil di Toko' : 'Delivery' }}</span>
                            </span>

                            <!-- Status Badge -->
                            <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-[11px] font-bold border {{ $statusConfig['bg'] }}">
                                <span class="material-symbols-outlined text-xs">{{ $statusConfig['icon'] }}</span>
                                <span>{{ $statusConfig['label'] }}</span>
                            </span>
                        </div>
                    </div>

                    <!-- Order Code & Pickup Code row -->
                    <div class="flex flex-wrap items-center justify-between gap-2 text-xs">
                        <div class="flex items-center gap-2">
                            <span class="text-[11px] uppercase tracking-wider font-semibold text-[#75786f]">No. Pesanan:</span>
                            <a href="{{ route('orders.show', $order->order_number) }}" class="font-mono font-bold text-[#1b1c19] hover:text-[#526048] hover:underline">
                                {{ $order->order_number }}
                            </a>
                        </div>

                        @if ($order->pickup_code)
                            <div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-xl bg-[#526048]/10 text-[#526048] border border-[#526048]/20">
                                <span class="material-symbols-outlined text-sm">vpn_key</span>
                                <span class="text-[11px] font-medium">Kode Pickup:</span>
                                <strong class="font-mono text-xs font-bold">{{ $order->pickup_code }}</strong>
                            </div>
                        @elseif ($order->tracking_number)
                            <div class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-xl bg-purple-50 text-purple-900 border border-purple-200 text-[11px]">
                                <span class="material-symbols-outlined text-xs">local_shipping</span>
                                <span>Resi:</span>
                                <strong class="font-mono">{{ $order->tracking_number }}</strong>
                            </div>
                        @endif
                    </div>

                    <!-- Product Items Preview Section -->
                    @if ($firstItem)
                        <div class="flex items-start gap-3 sm:gap-4 pt-1">
                            <!-- Product Image Thumbnail -->
                            <div class="w-16 h-16 sm:w-20 sm:h-20 rounded-xl overflow-hidden shrink-0 bg-[#f5f3ee] border border-[#e4e2dd]">
                                @if ($firstItem->product && $firstItem->product->image_path)
                                    <img src="{{ asset('storage/' . $firstItem->product->image_path) }}"
                                         alt="{{ $firstItem->product_name }}"
                                         class="w-full h-full object-cover">
                                @else
                                    <img src="https://lh3.googleusercontent.com/aida-public/AB6AXuBKGnzCHxor7uJcCQ21xolADD2qWBSpPrYaoFXdO_JqDlgZXg-P97Ku4NLjnE3c0gqY0Gr23BIBPO1Q1cVDxWX45-O9SiNWwLPN31lKvegEyMIifLysmLgqdVm3joRfBI5eln49n3B_BDcgRzUt_VZ3N4NXEjruQ9WrMsEic2-xjhXtlfpr73ICKr2notvWIH6zp5J5loAI8JB8DBecn2n8Z5G7WPwkjNreTzXwBn_ENr6S9ZFxgOLSNg"
                                         alt="{{ $firstItem->product_name }}"
                                         class="w-full h-full object-cover">
                                @endif
                            </div>

                            <!-- Product Info -->
                            <div class="flex-grow min-w-0 space-y-1">
                                <h3 class="font-medium text-sm sm:text-base text-[#1b1c19] truncate leading-snug">
                                    {{ $firstItem->product_name }}
                                </h3>
                                <p class="text-xs text-[#75786f]">
                                    {{ $firstItem->quantity }} barang • {{ $firstItem->weight_grams }}g
                                </p>
                                <p class="text-xs font-semibold text-[#1b1c19]">
                                    Rp {{ number_format($firstItem->price, 0, ',', '.') }}
                                </p>

                                @if ($remainingCount > 0)
                                    <p class="text-[11px] text-[#526048] font-medium pt-0.5">
                                        + {{ $remainingCount }} produk lainnya
                                    </p>
                                @endif
                            </div>
                        </div>
                    @endif

                    <!-- Card Footer: Total Price & Smart Contextual Actions -->
                    <div class="pt-3 border-t border-[#f0eee9] flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                        <!-- Total -->
                        <div>
                            <span class="text-[10px] uppercase font-bold tracking-wider text-[#75786f] block">Total Belanja</span>
                            <span class="font-serif text-lg sm:text-xl font-bold text-[#526048] block">
                                {{ $order->formatted_grand_total }}
                            </span>
                        </div>

                        <!-- Buttons Group -->
                        <div class="flex flex-wrap items-center gap-2">
                            <!-- Special context action: Bayar Sekarang if Delivery & Unpaid -->
                            @if ($order->isDelivery() && ! $order->isPaid() && $order->order_status !== \App\Enums\OrderStatus::CANCELLED)
                                <a href="{{ route('orders.show', $order->order_number) }}"
                                   class="flex-1 sm:flex-none inline-flex items-center justify-center gap-1.5 px-4 py-2.5 rounded-full bg-[#526048] hover:bg-[#3d4b34] text-white text-xs font-bold uppercase tracking-wider transition-colors shadow-xs">
                                    <span class="material-symbols-outlined text-base">credit_card</span>
                                    <span>Bayar Sekarang</span>
                                </a>
                            @elseif ($order->isPickup() && $order->order_status === \App\Enums\OrderStatus::READY_FOR_PICKUP)
                                <a href="{{ route('orders.show', $order->order_number) }}"
                                   class="flex-1 sm:flex-none inline-flex items-center justify-center gap-1.5 px-4 py-2.5 rounded-full bg-[#526048] hover:bg-[#3d4b34] text-white text-xs font-bold uppercase tracking-wider transition-colors shadow-xs">
                                    <span class="material-symbols-outlined text-base">qr_code</span>
                                    <span>Tunjukkan Kode</span>
                                </a>
                            @elseif ($order->order_status === \App\Enums\OrderStatus::SHIPPED)
                                <a href="{{ route('orders.show', $order->order_number) }}"
                                   class="flex-1 sm:flex-none inline-flex items-center justify-center gap-1.5 px-4 py-2.5 rounded-full bg-[#526048] hover:bg-[#3d4b34] text-white text-xs font-bold uppercase tracking-wider transition-colors shadow-xs">
                                    <span class="material-symbols-outlined text-base">local_shipping</span>
                                    <span>Lacak Pengiriman</span>
                                </a>
                            @endif

                            <!-- Detail Pesanan (Secondary) -->
                            <a href="{{ route('orders.show', $order->order_number) }}"
                               class="flex-1 sm:flex-none inline-flex items-center justify-center gap-1 px-4 py-2.5 rounded-full bg-white hover:bg-[#fbf9f4] border border-[#c5c8bd] hover:border-[#526048] text-xs font-bold text-[#1b1c19] transition-colors shadow-2xs">
                                <span>Lihat Detail</span>
                                <span class="material-symbols-outlined text-sm">arrow_forward</span>
                            </a>
                        </div>
                    </div>

                </div>
            @endforeach

            <!-- Pagination -->
            <div class="pt-2">
                {{ $orders->links() }}
            </div>
        </div>
    @else
        <!-- 5. Modern E-Commerce Empty State with Product Discovery -->
        <div class="bg-white rounded-3xl border border-[#e4e2dd] p-8 sm:p-12 text-center space-y-6 shadow-xs">
            <div class="w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-[#f5f3ee] text-[#526048] mx-auto flex items-center justify-center shadow-inner">
                <span class="material-symbols-outlined text-3xl sm:text-4xl">shopping_basket</span>
            </div>

            <div class="space-y-1.5 max-w-md mx-auto">
                <h3 class="font-serif text-2xl font-bold text-[#1b1c19]">
                    @if (($selectedStatus ?? 'all') !== 'all')
                        Tidak Ada Pesanan dengan Status Ini
                    @else
                        Belum Ada Pesanan yang Dibuat
                    @endif
                </h3>
                <p class="text-xs sm:text-sm text-[#75786f]">
                    @if (($selectedStatus ?? 'all') !== 'all')
                        Tidak ditemukan pesanan pada filter ini. Coba pilih kategori status lain atau lihat seluruh pesanan Anda.
                    @else
                        Mulailah eksplorasi produk minyak esensial, lulur organik, dan perawatan spa alami yang dibuat dari hasil panen Lombok.
                    @endif
                </p>
            </div>

            <div class="flex flex-wrap items-center justify-center gap-3 pt-2">
                @if (($selectedStatus ?? 'all') !== 'all')
                    <a href="{{ route('dashboard') }}" class="inline-flex items-center gap-1.5 px-5 py-2.5 rounded-full border border-[#c5c8bd] hover:bg-[#f5f3ee] text-xs font-semibold text-[#1b1c19] transition-colors">
                        <span>Lihat Semua Pesanan</span>
                    </a>
                @endif

                <a href="{{ route('products.index') }}" class="inline-flex items-center gap-2 px-6 py-3 rounded-full bg-[#526048] hover:bg-[#3d4b34] text-white text-xs font-bold uppercase tracking-wider transition-colors shadow-xs">
                    <span class="material-symbols-outlined text-base">explore</span>
                    <span>Jelajahi Katalog Produk</span>
                </a>
            </div>

            <!-- Product Recommendations Preview (if available) -->
            @if (isset($recommendedProducts) && $recommendedProducts->count() > 0)
                <div class="pt-8 border-t border-[#f0eee9] text-left">
                    <div class="flex items-center justify-between mb-4">
                        <span class="font-serif text-base sm:text-lg font-bold text-[#1b1c19]">Rekomendasi Produk Pilihan</span>
                        <a href="{{ route('products.index') }}" class="text-xs text-[#526048] font-bold hover:underline">
                            Lihat Semua &rarr;
                        </a>
                    </div>

                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4">
                        @foreach ($recommendedProducts as $recProduct)
                            <a href="{{ route('products.show', $recProduct->slug) }}" class="group block bg-[#fbf9f4] rounded-2xl p-3 border border-[#e4e2dd] hover:border-[#526048] transition-all">
                                <div class="aspect-square rounded-xl overflow-hidden bg-white mb-2.5">
                                    @if ($recProduct->image_path)
                                        <img src="{{ asset('storage/' . $recProduct->image_path) }}" alt="{{ $recProduct->name }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                                    @else
                                        <img src="https://lh3.googleusercontent.com/aida-public/AB6AXuBKGnzCHxor7uJcCQ21xolADD2qWBSpPrYaoFXdO_JqDlgZXg-P97Ku4NLjnE3c0gqY0Gr23BIBPO1Q1cVDxWX45-O9SiNWwLPN31lKvegEyMIifLysmLgqdVm3joRfBI5eln49n3B_BDcgRzUt_VZ3N4NXEjruQ9WrMsEic2-xjhXtlfpr73ICKr2notvWIH6zp5J5loAI8JB8DBecn2n8Z5G7WPwkjNreTzXwBn_ENr6S9ZFxgOLSNg" alt="{{ $recProduct->name }}" class="w-full h-full object-cover">
                                    @endif
                                </div>
                                <h4 class="font-medium text-xs text-[#1b1c19] truncate group-hover:text-[#526048] transition-colors">
                                    {{ $recProduct->name }}
                                </h4>
                                <span class="font-serif text-xs font-bold text-[#526048] block mt-1">
                                    Rp {{ number_format($recProduct->price, 0, ',', '.') }}
                                </span>
                            </a>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    @endif

    <!-- 6. Mobile-Friendly Help & Customer Care Card -->
    <div class="bg-[#f0eee9] rounded-3xl p-5 sm:p-6 border border-[#e4e2dd] flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div class="flex items-start sm:items-center gap-3.5">
            <div class="w-10 h-10 rounded-2xl bg-white text-[#526048] flex items-center justify-center shrink-0 shadow-2xs">
                <span class="material-symbols-outlined text-2xl">support_agent</span>
            </div>
            <div>
                <strong class="font-serif text-base font-bold text-[#1b1c19] block">Butuh Bantuan Pesanan?</strong>
                <p class="text-xs text-[#75786f]">Tim customer service kami di Mataram, Lombok siap membantu via WhatsApp atau email.</p>
            </div>
        </div>

        <div class="flex items-center gap-2.5">
            <a href="https://wa.me/6287762359833?text=Halo%20Lalita%20Bloom,%20saya%20ingin%20bertanya%20mengenai%20pesanan%20saya"
               target="_blank"
               rel="noopener noreferrer"
               class="flex-1 sm:flex-none inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-full bg-[#526048] hover:bg-[#3d4b34] text-white text-xs font-bold tracking-wide transition-colors shadow-xs">
                <span class="material-symbols-outlined text-base">chat</span>
                <span>Chat WhatsApp</span>
            </a>
        </div>
    </div>

</div>
@endsection