@extends('site.layouts.layout')

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

@section('content')

    <div class="max-w-[1700px] mx-auto px-6 py-10">
        <section class="w-full 2xl:py-20 bg-white">
            <div class="max-w-[1700px] mx-auto px-6 grid grid-cols-1 lg:grid-cols-3 gap-16 items-start">


                <div class="lg:col-span-2">


                    <h2 class="text-[35px] md:text-[50px] 2xl:text-[100px] font-semibold leading-tight mb-6">
                        <span class="text-[#0EB972]">How to</span>
                        <span class="text-[#143453] underline underline-offset-8">Reach Us</span>
                    </h2>


                    <p class="text-[#000000] tetx-lg fm-n font-normal max-w-2xl mb-12">
                        We are here to assist you! Whether you have questions about our tutoring services,
                        need technical support, or want to provide feedback, we are happy to help.
                    </p>

                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
                        <form class="space-y-5" action="{{route('contact-us.post')}}" method="post">
                            @csrf

                            <div>
                                <label class="text-[18px] fm-n text-[#000000]">Full Name</label>
                                <input type="text" name="full_name" value="{{old('full_name')}}" class="w-full border-b border-black focus:outline-none py-2">
                                @error('full_name')
                                       <span class="text-red">{{$message}}</span>
                                @enderror
                                
                            </div>

                            <div>
                                <label class="text-[18px] fm-n text-[#000000]">Email Address</label>
                                <input type="email" name="email" value="{{old('email')}}" class="w-full border-b border-black focus:outline-none py-2">
                                @error('email')
                                       <span class="text-red">{{$message}}</span>
                                @enderror
                                
                            </div>

                            <div>
                                <label class="text-[18px] fm-n text-[#000000]">Subject</label>
                                <input type="text" name="subject" value="{{old('subject')}}" class="w-full border-b border-black focus:outline-none py-2">
                                @error('subject')
                                       <span class="text-red">{{$message}}</span>
                                @enderror
                                
                            </div>

                            <div>
                                <label class="text-[18px] fm-n text-[#000000]">Your Message</label>
                                <textarea rows="3" class="w-full border-b border-black focus:outline-none py-2 resize-none" name="message">{{old('message')}}</textarea>
                                @error('message')
                                       <span class="text-red">{{$message}}</span>
                                @enderror
                            </div>

                            <button type='submit'
                                class="px-14 py-4 mt-6 cursor-pointer  rounded-full border-[#000000] border-[1.22px] fm-xb bg-[#facc15]  text-[#000000]
               hover:bg-yellow-400 transition font-semibold">
                                Submit
                            </button>

                        </form>


                        <div class="space-y-5">

                            <div class="flex gap-4 items-start">
                                <div class="w-10 h-10 bg-emerald-100 rounded-md flex items-center justify-center">
                                    <i class="fa-solid fa-location-dot"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium fm-m 2xl:text-[30px] text-2xl text-[#000000]">Location</h4>
                                </div>
                            </div>
                            <p class="text-[18px] fm-n text-[#000000]">
                                <a href="https://www.google.com/maps/search/?api=1&query=255+S+Orange+Ave+STE+104+Orlando+FL+32801"
                                    target="_blank">
                                    255 S Orange Ave STE 104 #2146,
                                    Orlando, FL 32801
                                </a>
                            </p>

                            <div class="flex gap-4 items-start">
                                <div class="w-10 h-10 bg-emerald-100 rounded-md flex items-center justify-center">
                                    <i class="fa-solid fa-mobile-screen"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium fm-m 2xl:text-[30px] text-2xl text-[#000000]">Voicemail box</h4>
                                </div>
                            </div>
                            <p class="text-[18px] fm-n text-[#000000]">
                                <a href="tel:3213524107">
                                    3213524107
                                </a>
                            </p>

                            <div class="flex gap-4 items-start">
                                <div class="w-10 h-10 bg-emerald-100 rounded-md flex items-center justify-center">
                                    <i class="fa-regular fa-envelope"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium fm-m 2xl:text-[30px] text-2xl text-[#000000]">Email Address</h4>
                                </div>
                            </div>
                            <p class="text-[18px] fm-n text-[#000000]">
                                <a href="mailto:tuterlearning@gmail.com">
                                    tuterlearning@gmail.com
                                </a>
                            </p>

                        </div>


                    </div>
                </div>


                <div class="lg:col-span-1 flex justify-center">
                    <img src="{{ asset('site/Sites/images/contact-us-image.png') }}"
                        class="rounded-2xl object-cover  w-full " alt="Teacher">
                </div>

            </div>
        </section>
    </div>


@endsection
