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

<!-- Contact Us -->
<section style="background: url({{ asset('images/' . $parent['background_img']) }})" class=" bg-cover bg-no-repeat">
    <div
        class="2xl:container 2xl:mx-auto flex flex-col gap-12 px-2 py-10 md:flex-row md:items-center md:px-[20px] lg:px-[60px]">
        <!-- left -->
        <section class="container mx-auto space-y-2 text-[#2F2B2B] md:w-[50%]">
            <!-- Header -->
            <div class="space-y-2.5">
                <div class="w-12 h-1 bg-[#0298c0] rounded-full"></div>
                <h2 class="text-[18px] font-bold text-[#0298c0]">
                    {{ $parent['title'] }}
                </h2>
                <h1 class="text-[25px] font-extrabold leading-[42px] lg:text-[35px] text-[#113a5e]">
                    {{ $parent['header'] }}
                </h1>
                <p class="text-[14px] text-[#354971]">
                    {{ $parent['description'] }}
                </p>
            </div>
        </section>

        <!-- right -->
        <section class="text-[#113a5e] md:w-[50%]">
            <form action="{{ route('contact.store.frontend') }}" method="post" class="grid grid-cols-12 gap-4">
                @csrf
                <div class="col-span-12 md:col-span-6 space-y-1">
                    <label for="name" class="block text-sm font-medium">Your Name <span
                            class="text-red-500">*</span></label>
                    <input type="text" id="name" placeholder="Name" name="name"
                        class="px-4 py-2 w-full border border-blue-100 focus:border-[#0298c0] focus:shadow-md transition-colors focus:outline-none rounded-md">
                </div>
                <div class="col-span-12 md:col-span-6 space-y-1">
                    <label for="name" class="block text-sm font-medium">Your Email <span
                            class="text-red-500">*</span></label>
                    <input type="text" id="name" placeholder="Email" name="email"
                        class="px-4 py-2 w-full border border-blue-100 focus:border-[#0298c0] focus:shadow-md transition-colors focus:outline-none rounded-md"
                        required>
                </div>
                <div class="col-span-12 md:col-span-6 space-y-1">
                    <label for="name" class="block text-sm font-medium">Your Phone <span
                            class="text-red-500">*</span></label>
                    <input type="text" id="name" placeholder="Phone" name='phone'
                        class="px-4 py-2 w-full border  border-blue-100 focus:border-[#0298c0] focus:shadow-md transition-colors focus:outline-none rounded-md"
                        required>
                </div>
                <div class="col-span-12 md:col-span-6 space-y-1">
                    <label for="name" class="block text-sm font-medium">Your Address <span
                            class="text-red-500">*</span></label>
                    <input type="text" id="name" name="address" placeholder="Address"
                        class="px-4 py-2 w-full border border-blue-100 focus:border-[#0298c0] focus:shadow-md transition-colors focus:outline-none rounded-md"
                        required>
                </div>
                <div class="col-span-12 space-y-1">
                    <label for="name" class="block text-sm font-medium">Subject <span
                            class="text-red-500">*</span></label>
                    <input type="text" id="name" name="subject" placeholder="Subject"
                        class="px-4 py-2 w-full border border-blue-100 focus:border-[#0298c0] focus:shadow-md transition-colors focus:outline-none rounded-md" required>
                </div>
                <div class="col-span-12 space-y-1">
                    <label for="name" class="block text-sm font-medium">Content <span
                            class="text-red-500">*</span></label>
                    <textarea id="" cols="30" name="description" rows="4" placeholder="Type your text here"
                        class="px-4 py-2 w-full border border-blue-100 focus:border-[#0298c0] focus:shadow-md transition-colors focus:outline-none rounded-md" required></textarea>
                </div>
                <div class="col-span-12">
                    <button
                        class="text-white bg-[#0298c0] block w-full px-4 py-2 rounded-full hover:bg-[#0890b6] transition-colors duration-300 font-semibold">Send</button>
                </div>
            </form>
        </section>
    </div>
</section>