@props(['data'])
@php
    $parent = reset($data);
    $child = array_values(array_slice($data, 1));

@endphp

<!-- Welcome -->
<section style="background-image: url('{{ asset('images/' . (!empty($parent) ? $parent['bg image'] : '')) }}')">
    <div class="container mx-auto px-2 md:px-[20px] lg:px-[100px] xl:px-[169px] "
        style="background-image: url('{{ asset('images/' . (!empty($parent) ? $parent['bg image'] : '')) }}')">
        <!-- Header -->
        @if (!empty($parent))
            <div class="w-full text-center">
                <div class="relative">
                    <h1 class="text-[30px] font-extrabold uppercase text-[#2F2B2B] text-opacity-10 sm:text-[80px]">
                        {{ $parent['header'] }}
                    </h1>
                    <h2
                        class="absolute left-1/2 top-1/2 w-full -translate-x-1/2 -translate-y-1/2 text-[20px] font-bold text-[#2F2B2B] sm:text-[32px]">
                        {{ $parent['title'] }}
                    </h2>
                    <div
                        class="absolute left-1/2 top-full h-[3px] w-[131px] -translate-x-1/2 -translate-y-full bg-[#FF4800]">
                    </div>
                </div>
            </div>
        @endif

        <!-- Content -->
        <div class="mt-10 grid grid-cols-12 items-center gap-4">
            <div class="order-2 col-span-12 space-y-6 sm:col-span-6 md:order-none md:col-span-4">
                @foreach ($child as $key => $value)
                    @if ($key % 2 == 0)
                        <!-- card -->
                        <div class="flex gap-4 rounded-[14px] border border-[#FF4800] bg-white px-6 py-4">
                            <span class="text-4xl text-[#FF4800]"><i class="{{ $value['icon'] }}"></i></span>
                            <div class="text-[#2F2B2B]">
                                <h1 class="text-[20px] font-semibold">{{ $value['header'] }}</h1>
                                <p class="text-[13px]">
                                    {{ $value['title'] }}
                                </p>
                            </div>
                        </div>
                    @endif
                @endforeach


            </div>
            @if (!empty($parent))
                <div class="order-1 col-span-12 md:order-none md:col-span-4">
                    <img src="{{ asset('images/' . $parent['main image']) }}" alt="truck"
                        class="mx-auto max-h-[300px] md:max-h-[600px]" />
                </div>
            @endif
            <div class="order-3 col-span-12 space-y-6 sm:col-span-6 md:order-none md:col-span-4">
                @foreach ($child as $key => $value)
                    @if ($key % 2 !== 0)
                        <!-- card -->
                        <div class="flex gap-4 rounded-[14px] border border-[#FF4800] bg-white px-6 py-4">
                            <span class="text-4xl text-[#FF4800]"><i class="{{ $value['icon'] }}"></i></span>
                            <div class="text-[#2F2B2B]">
                                <h1 class="text-[20px] font-semibold">{{ $value['header'] }}</h1>
                                <p class="text-[13px]">
                                    {{ $value['title'] }}
                                </p>
                            </div>
                        </div>
                    @endif
                @endforeach


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