@extends('frontend::layouts.master')

@section('content')
    <x-frontend::page-hero title="{{ $data['service']['category']['list'][0]['name'] ?? 'Rental & Services' }}" showButton="true" buttonLabel="Request A Quote" buttonUrl="{{ $data['page_init']['contact']['url'] ?? '#' }}" :image="$data['service']['category']['list'][0]['image'] ?? ''">
        {{ $data['service']['category']['list'][0]['desc'] ?? '' }}
    </x-frontend::page-hero>

    <!-- Why Choose Us -->
    <section class="relative py-16 bg-black">
        <div class="relative z-10 max-w-full mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col lg:flex-row gap-10 lg:gap-16 items-start">
                <!-- Left text block -->
                <div class="w-full lg:w-5/12">
                    <p class="text-xs sm:text-sm font-semibold tracking-[0.18em] text-le-primary uppercase mb-2">
                        {{ $data['whychooseus']['page']['text'] ?? 'Why L&E Beyond' }}
                    </p>
                    <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white leading-tight mb-4">
                        {{ $data['whychooseus']['page']['name'] ?? 'Why Choose Us' }}
                    </h2>
                    <p class="text-sm sm:text-base text-white/70 leading-relaxed max-w-xl">
                        {{ $data['whychooseus']['page']['desc'] ?? '' }}
                    </p>
                </div>

                @if (!empty($data['whychooseus']['list']))
                    <!-- Right benefits cards -->
                    <div class="w-full lg:w-7/12">
                        <div class="flex lg:grid lg:grid-cols-4 gap-4 sm:gap-5 overflow-x-auto pb-2 lg:overflow-visible">
                            @foreach ($data['whychooseus']['list'] as $item)
                                <div class="min-w-[200px] sm:min-w-[220px] lg:min-w-0 bg-[#181818] border border-white/5 rounded-2xl px-5 py-6 flex flex-col items-start text-left shadow-[0_18px_45px_rgba(0,0,0,0.65)]">
                                    <div class="w-12 h-12 sm:w-14 sm:h-14 mb-5 rounded-lg bg-gradient-to-b from-white/12 to-white/5 flex items-center justify-center">
                                        <svg class="w-7 h-7 sm:w-8 sm:h-8 text-le-primary" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <path d="M12 2l3 6.5L22 9.3l-5 4.3L18.4 22 12 18.6 5.6 22 7 13.6 2 9.3l7-0.8z"></path>
                                        </svg>
                                    </div>
                                    <h3 class="text-sm sm:text-base font-semibold tracking-[0.16em] text-white uppercase mb-3">
                                        {{ $item['name'] ?? '' }}
                                    </h3>
                                    <p class="text-xs sm:text-sm text-white/70 leading-relaxed">
                                        {{ $item['desc'] ?? '' }}
                                    </p>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

            </div>
        </div>
    </section>

    <!-- Our inventory -->
    <section class="relative py-16 bg-black">
        <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="mb-20 text-center">
                <h2 class="text-3xl sm:text-4xl font-bold text-white mb-3">{{ $data['ourinventory']['page']['name'] ?? 'Our Inventory' }}</h2>
                <p class="text-sm sm:text-base text-white/70 max-w-2xl mx-auto">
                    {{ $data['ourinventory']['page']['desc'] ?? '' }}
                </p>
            </div>

            <livewire:frontend::rental-inventory-grid />

        </div>
    </section>

    <!-- Our Work carousel (Swiper) -->
    @include('frontend::components.ourwork-carousel', [
        'title' => $data['ourwork']['page']['name'] ?? 'Our Work',
        'relatedWorks' => $data['ourwork'] ?? null,
        'viewAllUrl' => $data['ourwork']['page']['url'] ?? '#',
        'viewAllText' => __('field.view_all'),
    ])

    <!-- Logos Slide -->
    @include('frontend::components.logos-slide')
@endsection