@extends('frontend.layouts.app')

@section('title', 'Contact Us')

@section('content')
    <div class="flex flex-col space-y-4"> @include('_message')</div>
    <section class="mt-[8rem]">

        <div class="bg-[#FFEBED] py-16">
            <div class="container mx-auto px-6 text-center">
                <h1 class="text-[#F42C56] text-4xl font-semibold mb-5">Contact Us</h1>
                <p class="text-lg mb-12 text-black">We'd love to hear from you! Please fill out the form below to get in
                    touch
                    with us.</p>

                <!-- Contact Form -->
                <div class="max-w-full sm:max-w-3xl mx-auto bg-white p-8 rounded-lg shadow-lg">

                    <x-validation-errors class="mb-4" />

                    <form method="POST" action="{{ route('home.contact.store') }}" class="max-w-screen-md mx-auto">
                        @csrf
                        <div class="flex flex-col space-y-4">

                            <div class="flex flex-col md:flex-row md:items-center md:space-x-4">
                                <div class="md:w-1/3 flex items-center">
                                    <x-label for="name" value="{{ __('Name') }}" />
                                    <sup class="text-red-500 ml-1">*</sup>
                                </div>
                                <div class="md:w-2/3">
                                    <x-input id="name" class="block w-full" type="text" name="name" required
                                        :value="old('name')" autocomplete="name" placeholder="Enter Name" />
                                </div>
                            </div>

                            <div class="flex flex-col md:flex-row md:items-center md:space-x-4">
                                <div class="md:w-1/3 flex items-center">
                                    <x-label for="email" value="{{ __('Email') }}" />
                                    <sup class="text-red-500 ml-1">*</sup>
                                </div>
                                <div class="md:w-2/3">
                                    <x-input id="email" class="block w-full" type="email" name="email" required
                                        :value="old('email')" autocomplete="email" placeholder="Enter Email" />
                                </div>
                            </div>

                            <div class="flex flex-col md:flex-row md:items-center md:space-x-4">
                                <div class="md:w-1/3 flex items-center">
                                    <x-label for="message" value="{{ __('Message') }}" />
                                    <sup class="text-red-500 ml-1">*</sup>
                                </div>
                                <div class="md:w-2/3">
                                    <x-textarea id="message" name="message" placeholder="Drop your message here" required
                                        value="{{ old('message', optional()->message) }}">
                                    </x-textarea>
                                </div>
                            </div>

                            <!-- Google reCAPTCHA -->
                            {{-- <div class="flex flex-col md:flex-row md:items-center md:space-x-4">
                            <div class="md:w-1/3 flex items-center">
                                <!-- You can add a label here if needed -->
                            </div>
                            <div class="md:w-2/3">
                                <div class="g-recaptcha" data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}"></div>

                                @error('g-recaptcha-response')
                                    <div class="text-red-500 text-sm mt-2">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>
                        </div> --}}


                            <div class="flex items-center justify-center mt-4">
                                <button type="submit"
                                    class="bg-[#F42C56] text-white text-center p-3 px-8 rounded-lg w-[200px]">
                                    {{ __('Submit') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- Contact Information -->
                <div class="mt-16 text-white">
                    <h2 class="text-3xl font-semibold mb-6 text-[#F42C56]">Contact Information</h2>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                        <!-- Address -->
                        <div>
                            <h3 class="text-xl font-semibold text-black">Our Office</h3>
                            <p class="text-[#F42C56] mt-2">Illinois, Chicago, US</p>
                        </div>

                        <!-- Phone -->
                        {{-- <div>
                            <h3 class="text-xl font-semibold text-black">Phone</h3>
                            <p class="text-[#F42C56] mt-2">+1 (555) 123-4567</p>
                        </div> --}}

                        <!-- Email -->
                        <div>
                            <h3 class="text-xl font-semibold text-black">Email</h3>
                            <p class="text-[#F42C56] mt-2"><a href="mailto:reshimgathee@bmmonline.org">Reshimgathee@bmmonline.org</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


@endsection