@props(['data'])
@php
    $parent = reset($data);

@endphp


@if (!empty($parent))
    <section class="container mx-auto space-y-4 px-2 mt-5 text-[#424242] md:px-[20px] lg:px-[100px] xl:px-[169px]">
        <h1 class="text-[25px] font-semibold">{{ $parent['title'] }}</h1>
        <div
            class="relative w-full border-t py-6 before:absolute before:left-0 before:top-0 before:h-0.5 before:w-12 before:-translate-y-1/2 before:bg-[#F06728]">
            <div class="flex w-full flex-col items-center bg-gray-100 sm:flex-row">
                <div class="w-full sm:w-[35%]">
                    <img src="{{ asset('images/' . (isset($parent['image']) ? $parent['image'] : '')) }}" alt="owner"
                        class="h-[250px] object-cover object-center" />
                </div>
                <div class="w-full space-y-4 py-4 sm:w-[65%] sm:px-4 sm:py-0">
                    <div>
                        <h1 class="text-[20px] font-semibold">{{ $parent['name'] }}</h1>
                        <h2 class="text-[16px] font-semibold text-[#F06728]">
                            {{ $parent['designation'] }}
                        </h2>
                    </div>
                    <div>
                        <p class="text-[14px]">
                            {{ $parent['description'] }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endif