@php
    $categoriesList = isset($categories) ? $categories : \App\Models\VehicleCategory::where('status', 'active')->orderBy('id')->get();

    // Curated metadata helper for clean display without truncation
    $getCategoryMeta = function($name) {
        $n = strtolower($name);
        if (str_contains($n, 'sweeper machine') && !str_contains($n, 'electric')) {
            return [
                'tag' => 'Heavy Highway & Urban Sweeper',
                'duty' => 'Expressways & Main Avenues',
                'power' => 'Turbo Diesel Heavy Duty',
                'capacity' => 'High-Velocity Vacuum Suction',
                'desc' => 'Dual side brushes and high-power vacuum suction with water spray dust suppression for large municipal roadways.'
            ];
        } elseif (str_contains($n, 'gobbler')) {
            return [
                'tag' => 'Compact Litter Gobbler',
                'duty' => 'Pedestrian Plazas, Footpaths & Parks',
                'power' => 'Auxiliary Eco-Engine Drive',
                'capacity' => 'Continuous Waste Ingestion',
                'desc' => 'High-agility suction machine engineered for rapid litter collection in crowded public markets, footpaths, and plazas.'
            ];
        } elseif (str_contains($n, 'loader') || str_contains($n, 'garbage')) {
            return [
                'tag' => 'Solid Waste Transit Loader',
                'duty' => 'Bulk Refuse & Solid Waste Collection',
                'power' => 'Commercial Heavy Carrier',
                'capacity' => 'Hydraulic Tipping Bin',
                'desc' => 'Equipped with heavy hydraulic tipping mechanisms for seamless municipal door-to-door solid waste and debris transport.'
            ];
        } elseif (str_contains($n, 'jett') || str_contains($n, 'water')) {
            return [
                'tag' => 'High-Pressure Jetting Unit',
                'duty' => 'Sewer Cleansing & Desilting',
                'power' => 'High-Pressure Hydraulic Pump',
                'capacity' => 'High-Capacity Water Tank',
                'desc' => 'Industrial water jetting tanker designed for deep sewer line blockage clearance, drainage desilting, and road washdown.'
            ];
        } elseif (str_contains($n, 'electric')) {
            return [
                'tag' => '100% Electric Zero-Emission',
                'duty' => 'Eco-Sensitive Urban & Smart City Zones',
                'power' => 'Zero-Emission Electric Battery',
                'capacity' => 'Whisper-Quiet Vacuum Sweeping',
                'desc' => 'Zero-carbon mechanical sweeping machine delivering whisper-quiet operation in residential complexes and smart city zones.'
            ];
        } else {
            return [
                'tag' => 'Urban Street Sanitation',
                'duty' => 'City Roads & Commercial Hubs',
                'power' => 'Commercial Grade Power Unit',
                'capacity' => 'High-Volume Debris Hopper',
                'desc' => 'Precision municipal street cleaning machine built for continuous heavy debris collection and environmental compliance.'
            ];
        }
    };
@endphp

<x-layouts.app title="Vehicle Fleet & Equipment Showcase – Om Sai Associates">
    <!-- Concise Hero Header Banner -->
    <section class="bg-gradient-to-r from-teal-950 via-slate-900 to-teal-950 text-white py-8 sm:py-10 px-4 sm:px-6 lg:px-8 relative overflow-hidden border-b border-teal-900/40 shadow-xs">
        <div class="absolute inset-0 opacity-10 bg-[radial-gradient(#38bdf8_1px,transparent_1px)] [background-size:16px_16px]"></div>
        
        <div class="max-w-7xl mx-auto space-y-2.5 relative z-10">
            <h1 class="text-2xl sm:text-3xl font-black text-white tracking-tight leading-tight">
                Environmental Sanitation Vehicle Fleet
            </h1>

            <p class="text-xs sm:text-sm text-slate-300 max-w-3xl leading-relaxed">
                Explore our certified fleet of heavy mechanical road sweepers, high-pressure jetting units, and zero-emission electric machinery engineered for large-scale municipal sanitation.
            </p>
        </div>
    </section>

    <!-- Categories Grid Section -->
    <section class="py-14 sm:py-18 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto space-y-10">
        <!-- Section Header -->
        <div class="flex flex-col sm:flex-row sm:items-end justify-between gap-4 border-b border-slate-200 pb-5">
            <div>
                <span class="text-xs font-bold uppercase tracking-wider text-teal-800 block">Fleet Machinery</span>
                <h2 class="text-2xl font-extrabold text-slate-900 tracking-tight mt-0.5">Specialized Equipment Categories</h2>
            </div>
            <span class="text-xs text-slate-500 font-medium">
                Showing {{ count($categoriesList) }} Operational Categories
            </span>
        </div>

        <!-- Cards Grid (Clean, White, Premium) -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @forelse($categoriesList as $category)
                @php $meta = $getCategoryMeta($category->name); @endphp
                
                <div class="bg-white rounded-3xl border border-slate-200 shadow-xs hover:shadow-md transition-shadow duration-300 flex flex-col justify-between overflow-hidden group">
                    <div>
                        <!-- Image Stage Container (Clean White Stage) -->
                        <div class="relative h-64 bg-white border-b border-slate-100 p-6 flex items-center justify-center overflow-hidden">
                            @if($category->image)
                                <img src="{{ asset('storage/' . $category->image) }}" alt="{{ $category->name }}" class="max-h-52 max-w-[85%] w-auto object-contain transition-transform duration-500" />
                            @else
                                <div class="flex flex-col items-center justify-center text-slate-400 gap-2">
                                    <flux:icon icon="truck" class="size-14 text-slate-300" />
                                    <span class="text-2xs font-semibold text-slate-400 uppercase tracking-wider">Sanitation Unit</span>
                                </div>
                            @endif
                        </div>

                        <!-- Card Body Details -->
                        <div class="p-6">
                            <h3 class="text-lg font-bold text-slate-900 group-hover:text-teal-800 transition tracking-tight capitalize leading-snug">
                                {{ ucwords(strtolower($category->name)) }}
                            </h3>
                            <p class="text-xs text-slate-500 mt-1.5 leading-relaxed">
                                {{ $meta['desc'] }}
                            </p>
                        </div>
                    </div>

                    <!-- Clean Action Footer -->
                    <div class="p-4 bg-slate-50/70 border-t border-slate-100 flex items-center justify-end">
                        <a href="{{ route('contact') }}" class="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl bg-teal-800 hover:bg-teal-700 text-white text-xs font-bold shadow-xs transition">
                            <span>Request Details</span>
                            <flux:icon icon="arrow-right" class="size-3 text-teal-200" />
                        </a>
                    </div>
                </div>
            @empty
                <div class="col-span-3 py-16 text-center text-slate-500 space-y-3">
                    <flux:icon icon="truck" class="size-12 mx-auto text-slate-400" />
                    <p class="text-base font-semibold">Equipment categories currently being updated.</p>
                </div>
            @endforelse
        </div>
    </section>

    <!-- Registered Vehicles & QR Verification Registry Section -->
    <!--@if(isset($vehicles) && $vehicles->isNotEmpty())-->
    <!--    <section class="py-12 bg-slate-50 border-t border-slate-200">-->
    <!--        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-8">-->
                <!-- Section Header -->
    <!--            <div class="flex flex-col sm:flex-row sm:items-end justify-between gap-4 border-b border-slate-200 pb-5">-->
    <!--                <div>-->
    <!--                    <span class="text-xs font-bold uppercase tracking-wider text-teal-800 block">Fleet Identity & Citizen Oversight</span>-->
    <!--                    <h2 class="text-2xl font-extrabold text-slate-900 tracking-tight mt-0.5">Active Vehicles & QR Registry</h2>-->
    <!--                    <p class="text-xs text-slate-500 mt-1 max-w-xl">-->
    <!--                        Each municipal vehicle is assigned a verifiable QR code. Citizens can scan or download the QR code to review vehicle credentials and lodge complaints.-->
    <!--                    </p>-->
    <!--                </div>-->
    <!--                <span class="text-xs text-slate-500 font-medium">-->
    <!--                    {{ $vehicles->count() }} Registered Units-->
    <!--                </span>-->
    <!--            </div>-->

                <!-- Vehicles Grid -->
    <!--            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">-->
    <!--                @foreach($vehicles as $v)-->
    <!--                    <div class="bg-white rounded-2xl border border-slate-200/90 shadow-2xs hover:shadow-md transition duration-200 p-5 flex flex-col justify-between space-y-4">-->
    <!--                        <div class="space-y-3">-->
    <!--                            <div class="flex items-start justify-between gap-3">-->
    <!--                                <div>-->
    <!--                                    <span class="px-2 py-0.5 rounded-md bg-teal-50 text-teal-800 border border-teal-200 text-2xs font-extrabold uppercase">-->
    <!--                                        {{ $v->category?->name ?? 'Municipal Unit' }}-->
    <!--                                    </span>-->
    <!--                                    <h3 class="text-lg font-black text-slate-900 font-mono mt-1">-->
    <!--                                        {{ $v->vehicle_number }}-->
    <!--                                    </h3>-->
    <!--                                </div>-->
    <!--                                <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-2xs font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">-->
    <!--                                    <span class="size-1.5 rounded-full bg-emerald-500"></span>-->
    <!--                                    Active-->
    <!--                                </span>-->
    <!--                            </div>-->

    <!--                            <div class="flex items-center gap-4 bg-slate-50 p-3 rounded-xl border border-slate-100">-->
    <!--                                <div class="size-20 bg-white p-1.5 rounded-lg border border-slate-200 shadow-2xs shrink-0 flex items-center justify-center">-->
    <!--                                    {!! $v->qr_code_svg !!}-->
    <!--                                </div>-->
    <!--                                <div class="text-2xs text-slate-600 space-y-1">-->
    <!--                                    <div><strong>Power:</strong> {{ $v->power_source ?: 'Diesel' }}</div>-->
    <!--                                    <div><strong>Function:</strong> {{ Str::limit($v->primary_function ?: 'Waste Management', 32) }}</div>-->
    <!--                                    <div class="text-teal-700 font-semibold pt-0.5">Scan to verify or report</div>-->
    <!--                                </div>-->
    <!--                            </div>-->
    <!--                        </div>-->

    <!--                        <div class="pt-3 border-t border-slate-100 flex items-center justify-between gap-2">-->
    <!--                            <a href="{{ route('public.vehicle.qr.download', ['vehicleNumber' => $v->vehicle_number]) }}" class="text-2xs font-bold text-slate-600 hover:text-teal-800 flex items-center gap-1">-->
    <!--                                <svg class="size-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>-->
    <!--                                Save QR-->
    <!--                            </a>-->
    <!--                            <div class="flex items-center gap-2">-->
    <!--                                <a href="{{ route('public.vehicle.placard', ['vehicleNumber' => $v->vehicle_number, 'print' => 1]) }}" target="_blank" class="px-2.5 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 text-2xs font-bold transition">-->
    <!--                                    Placard-->
    <!--                                </a>-->
    <!--                                <a href="{{ $v->public_profile_url }}" class="px-3 py-1.5 rounded-lg bg-teal-800 hover:bg-teal-700 text-white text-2xs font-bold shadow-2xs transition flex items-center gap-1">-->
    <!--                                    <span>View Page</span>-->
    <!--                                    <svg class="size-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>-->
    <!--                                </a>-->
    <!--                            </div>-->
    <!--                        </div>-->
    <!--                    </div>-->
    <!--                @endforeach-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </section>-->
    <!--@endif-->
</x-layouts.app>