@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>

    <section class="py-20 bg-black">
        <div class="container mx-auto px-4 space-y-20">
            @foreach ($data['benefit_category']['list'] as $key => $item)
                <div class="grid gap-10 lg:grid-cols-2 items-center scroll-mt-24" id="{{ $key }}">
                    {{-- Image (always on top in mobile) --}}
                    <div class="{{ $key % 2 === 0 ? 'order-1 lg:order-1' : 'order-1 lg:order-2' }}">
                        <div class="w-full h-full min-h-[260px] rounded-[32px] bg-gradient-to-b from-neutral-800 to-black/10 flex items-center justify-center overflow-hidden">
                            <img class="w-full h-full object-cover" src="{{ $item['image'] }}" alt="{{ $item['name'] }}">
                        </div>
                    </div>
                    {{-- Text + button + benefits (under image in mobile) --}}
                    <div class="space-y-8 {{ $key % 2 === 0 ? 'order-2 lg:order-2' : 'order-2 lg:order-1' }}">
                        <div class="space-y-3">
                            <p class="text-xs font-semibold tracking-[0.25em] text-le-primary">
                                {{ $item['text'] }}
                            </p>
                            <h2 class="text-3xl md:text-4xl font-semibold text-white">
                                {{ $item['name'] }}
                            </h2>
                            <p class="text-sm md:text-base text-neutral-300 leading-relaxed">
                                {{ $item['desc'] }}
                            </p>
                        </div>
                        @if (!empty($item['link']) || !empty($item['url']))
                            <div>
                                <a class="inline-flex items-center rounded-full bg-le-primary px-6 py-2.5 text-sm font-semibold text-white shadow-lg shadow-le-primary/40 hover:bg-le-primary transition" href="{{ !empty($item['link']) ? $item['link'] : $item['url'] }}" target="_blank" @if (empty($item['link'])) aria-label="Scroll to {{ $item['name'] }}" @endif>
                                    See More Details
                                    <span class="ml-2 text-base">›</span>
                                </a>
                            </div>
                        @endif
                        @if (!empty($data['benefit'][$item['id']]['list']))
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 pt-2">
                                @foreach ($data['benefit'][$item['id']]['list'] as $benefit)
                                    <div class="flex flex-col items-center justify-center rounded-xl border border-neutral-800 bg-gradient-to-b from-neutral-900/80 to-black/60 px-4 py-6 space-y-3">
                                        <div class="w-12 h-12 sm:w-14 sm:h-14 mb-5 rounded-lg 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>
                                        <p class="text-xs font-semibold tracking-[0.18em] text-neutral-200">
                                            {{ $benefit['name'] }}
                                        </p>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            @endforeach
        </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