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

@endphp

<!-- About Our Company -->
<section class="container mx-auto space-y-6 px-2 text-[#2F2B2B] md:px-[20px] lg:px-[100px] xl:px-[169px]">
    <!-- who we are -->
    @if (!empty($parent))
        <div class="flex flex-col gap-12 md:flex-row md:items-center">
            <!-- left -->
            <div class="space-y-2 md:w-1/2">
                <!-- Body -->
                <div class="relative mx-auto w-fit">
                    <img src="{{ asset('images/' . $parent['image']) }}" alt="choose-us"
                        class="max-h-[600px] w-full object-contain" />
                </div>
            </div>
            <!-- right -->
            <div class="container mx-auto w-full space-y-8 md:w-1/2">
                <!-- Header -->
                <div class="space-y-4">
                    <div class="space-y-3">
                        <h2
                            class="relative w-fit border border-gray-300 px-4 py-2 text-[14px] font-extrabold text-black">
                            {{ $parent['title'] }}
                            <span
                                class="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 text-xl text-[#FF4800]"><i
                                    class="fa-solid fa-angles-right"></i></span>
                        </h2>
                        <h1 class="text-[35px] font-bold">
                            {{ $parent['sub title'] }}
                        </h1>
                    </div>

                    <a href="{{ $parent['service url'] }}" class="block text-[14px] text-[#FF4800] hover:underline">Our
                        operations
                        {{ $parent['service info'] }}</a>
                    <p class="text-[12px]">
                        {{ $parent['description'] }}
                    </p>
                </div>
                <!-- Body -->
                <div class="flex items-center justify-between gap-4">
                    @foreach ($child as $value)
                        <div class="space-y-3">
                            <span class="text-3xl text-[#FF4800]"><i class="{{ $value['icone'] }}"></i></span>
                            <h2 class="text-[16px] font-bold">{{ $value['title'] }}</h2>
                            <p class="text-[12px]">
                                {{ $value['sub title'] }}
                            </p>
                        </div>
                    @endforeach


                </div>
            </div>
        </div>
        <!-- request a quote -->
        <a href="contact-us.html"
            class="mx-auto flex w-fit flex-col items-center gap-10 border border-[#FF4800] p-3 pl-6 sm:flex-row">
            <p class="text-sm">
                {{ $parent['quote title'] }}
                <span class="font-bold text-[#FF4800]">Request A Quote</span>
            </p>
            <div class="relative bg-[#FF4800] px-8 py-3 text-white">
                <span
                    class="absolute left-0 top-1/2 flex h-10 w-10 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-white text-[#FF4800]"><i
                        class=" {{ $parent['icone'] }}"></i></span>
                {{ $parent['number'] }}
            </div>
        </a>
    @endif
</section>