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

@endphp

<!-- About Our Company -->
<section
    class="container mx-auto flex flex-col gap-12 px-2 md:flex-row md:items-center md:px-[20px] lg:px-[100px] xl:px-[169px]">
    <!-- left -->
    <section class="space-y-2 text-[#424242] md:w-1/2 2xl:w-1/2">
        <!-- Body -->
        @if (!empty($parent))
            <div class="relative mx-auto w-fit">
                <img src="{{ asset('images/' . $parent['image']) }}" alt="choose-us" class="w-full object-contain" />
                <div class="absolute left-0 top-10 inline rounded-[18px] bg-[#F06728] px-6 py-2 text-white">
                    <p class="flex w-28 items-center gap-2 sm:w-44 md:w-36 lg:w-44">
                        <span
                            class="text-[30px] font-semibold sm:text-[45px] md:text-[36px] lg:text-[45px]">{{ $parent['year'] }}</span>
                        <span class="text-[10px] font-semibold leading-5 sm:text-[18px] md:text-[14px] lg:text-[18px]">
                            {{ $parent['year title'] }}</span>
                    </p>
                </div>
            </div>
        @endif
    </section>
    <!-- right -->
    <section class="container mx-auto w-full space-y-5 text-[#424242] md:w-1/2">
        @if (!empty($parent))
            <!-- Header -->
            <div class="space-y-5">
                <h2 class="text-[16px] font-semibold text-[#F06728] lg:text-[18px]">
                    {{ $parent['title'] }}
                </h2>
                <h1 class="text-[25px] font-semibold leading-10 xl:text-[30px] 2xl:text-[40px]">
                    {{ $parent['sub title'] }}
                </h1>
                <p class="text-[12px] lg:text-[16px] line-clamp-5">
                    {{ $parent['description'] }}
                </p>
            </div>
        @endif
        <!-- Body -->
        <ul class="grid grid-cols-12 gap-y-4 text-[14px]">

            @foreach ($child as $value)
                <li class="col-span-12 flex w-full items-center gap-2 font-light sm:col-span-6">
                    <span
                        class="flex h-[16px] w-[16px] items-center justify-center rounded-full border border-[#F06728] text-[10px] text-[#F06728]"><i
                            class="{{ $value['icon'] }} "></i>
                    </span>
                    <p>{{ $value['title'] }}</p>
                </li>
            @endforeach


        </ul>
        <div class="flex flex-wrap gap-4">
            @if (!empty($parent))
                <img src="{{ asset('images/' . $parent['ceo image']) }}" alt="owner" />
                <div>
                    <h1 class="text-[18px] font-semibold">{{ $parent['ceo name'] }}</h1>
                    <p class="text-[12px] font-medium">{{ $parent['designation'] }}</p>
                </div>
                <a href="{{ $parent['button url'] }}"
                    class="h-fit rounded-[9px] bg-[#F06728] px-4 py-2 text-[15px] font-semibold text-white transition-colors hover:bg-orange-700">
                    Get a Quote
                </a>
            @endif
        </div>
    </section>
</section>