@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 py-10 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="max-h-[600px] min-h-[400px] w-full object-contain" />
                <div
                    class="absolute left-4 top-1/2 inline -translate-y-1/2 rounded-[18px] bg-[#FF4800] px-6 py-2 text-white">
                    <p class="flex flex-col items-center text-center lg:w-28">
                        <span
                            class="text-[30px] font-semibold sm:text-[45px] md:text-[36px] lg:text-[45px]">{{ $parent['experience number'] }}</span>
                        <span
                            class="text-[10px] font-semibold leading-5 sm:text-[18px] md:text-[14px] lg:text-[18px]">{{ $parent['experience title'] }}</span>
                    </p>
                </div>
            </div>

    </section>
    <!-- right -->
    <section class="container mx-auto w-full space-y-5 text-[30px] text-[#2F2B2B] md:w-1/2">
        <!-- Header -->
        <div class="space-y-5">
            <h2 class="text-[16px] font-extrabold text-[#FF4800] lg:text-[18px]">
                {{ $parent['title'] }}
            </h2>
            <h1 class="text-[25px] font-extrabold leading-10 lg:text-[35px]">
                {{ $parent['heading'] }}
            </h1>
            <p class="text-[12px] font-semibold lg:text-[16px]">
                {{ $parent['sub title'] }}
            </p>
            <p class="text-[16px]">
                {{ $parent['description'] }}
            </p>
        </div>
        <!-- Body -->
        <ul class="grid grid-cols-12 gap-y-4 text-[16px] font-medium text-[#2F2B2B]">

            @foreach ($child as $value)
                <li class="col-span-12 flex w-full items-center gap-2">
                    <span
                        class="flex h-[16px] w-[16px] items-center justify-center rounded-full border border-[#FF4800]">
                        <div class="inline-block h-[10px] w-[10px] rounded-full bg-[#FF4800]"></div>
                    </span>
                    <p>{{ $value['title'] }}</p>
                </li>
            @endforeach



        </ul>
        <div
            class="relative text-[16px] before:absolute before:left-0 before:top-0 before:h-full before:w-1 before:bg-[#FF4800]">
            <div class="ml-2.5">
                <p>
                    {{ $parent['more info'] }}
                </p>
                <p>
                    <span class="font-extrabold"> {{ $parent['owner name'] }}</span>, {{ $parent['designation'] }}
                </p>
            </div>
        </div>
        <a href=" {{ $parent['url'] }}"
            class="rounded-[9px] bg-[#FF4800] px-4 py-2 text-[14px] font-semibold text-white transition-colors duration-300 hover:bg-[#f04400]">
            {{ $parent['button name'] }}
        </a>
        @endif
    </section>
</section>