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

@endphp

<!-- Contact us -->
<section
    class="container mx-auto flex flex-col gap-16 px-2 md:flex-row md:items-center md:px-[20px] lg:px-[100px] xl:px-[169px]">
    <!-- left -->
    <section class="hidden w-1/2 md:block">
        @if (!empty($parent))
            <div>
                <img src="{{ asset('images/' . $parent['image']) }}" alt="choose-us"
                    class="h-[400px] w-full object-contain" />
            </div>
        @endif
    </section>
    <!-- right -->
    <section class="container mx-auto w-full space-y-7 text-[#424242] md:w-1/2">
        <!-- Header -->
        @if (!empty($parent))
            <div>
                <h2 class="text-[22px]">{{ $parent['title'] }}</h2>
                <h1 class="text-[30px] font-semibold">{{ $parent['sub title'] }}</h1>
                <p class="text-[14px]">
                    {{ $parent['description'] }}
                </p>
            </div>
        @endif

        <!-- Body -->
        <form action="" class="grid grid-cols-12 gap-x-4 gap-y-4 md:gap-y-3">
            <input type="text"
                class="col-span-12 rounded-[5px] border border-[rgba(0,0,0,0.29)] px-6 py-1.5 text-[16px] font-semibold placeholder-[rgba(0,0,0,0.32)] focus:outline-none md:col-span-6"
                placeholder="Your Name" />
            <input type="email"
                class="col-span-12 rounded-[5px] border border-[rgba(0,0,0,0.29)] px-6 py-1.5 text-[16px] font-semibold placeholder-[rgba(0,0,0,0.32)] focus:outline-none md:col-span-6"
                placeholder="Your Email" />
            <input type="text"
                class="col-span-12 rounded-[5px] border border-[rgba(0,0,0,0.29)] px-6 py-1.5 text-[16px] font-semibold placeholder-[rgba(0,0,0,0.32)] focus:outline-none md:col-span-6"
                placeholder="Your Subject" />
            <input type="text"
                class="col-span-12 rounded-[5px] border border-[rgba(0,0,0,0.29)] px-6 py-1.5 text-[16px] font-semibold placeholder-[rgba(0,0,0,0.32)] focus:outline-none md:col-span-6"
                placeholder="Your Transport" />
            <textarea name="" id="" cols="30" rows="4" placeholder="Your Message"
                class="col-span-12 rounded-[5px] border border-[rgba(0,0,0,0.29)] px-6 py-1.5 text-[16px] font-semibold placeholder-[rgba(0,0,0,0.32)] focus:outline-none"></textarea>
            <div class="col-span-12">
                <button
                    class="rounded-[28px] bg-[#F06728] px-10 py-2 text-[14px] font-semibold text-white transition-colors hover:bg-orange-600">
                    Submit
                </button>
            </div>
        </form>
    </section>
</section>