@extends('layouts.template')

@section('main')
    <header class="">
        <div class="h-80 bg-red-500 p-2 flex items-center justify-center flex-col gap-2">
            <h1 data-aos="fade-down" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out"
                class="text-gray-100 font-semibold">Home/ <span class="text-gray-800">Contact Us</span></h1>
            <span data-aos="flip-right" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out"
                class=" font-mija text-white text-3xl md:text-5xl font-semibold">
                Contact Us
            </span>
        </div>
    </header>

    <section class="bg-slate-100">

        <div class="w-full max-w-6xl mx-auto min-h-[80vh] md:min-h-[calc(100vh-5rem)] py-5 grid grid-cols-1 lg:grid-cols-2">
            <div data-aos="fade-right" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out"
                class="h-full w-full flex items-center px-3 justify-center order-2 lg:order-1">

                <form action="{{ route('store-contact') }}" method="post" class="w-full max-w-lg flex flex-col gap-3">
                    @csrf
                    <div>
                        <x-input-label for="name" :value="__('Your Name')" />
                        <x-text-input id="name" class="block mt-1 w-full" type="text" name="name"
                            placeholder="E.g. John Doe" />
                        <x-input-error :messages="$errors->get('name')" class="mt-2" />
                    </div>
                    <div>
                        <x-input-label for="email" :value="__('Your Email')" />
                        <x-text-input id="email" class="block mt-1 w-full" type="email" name="email"
                            placeholder="E.g. johndoe@123.com" />
                        <x-input-error :messages="$errors->get('email')" class="mt-2" />
                    </div>
                    <div>
                        <x-input-label for="message" :value="__('Your Message')" />
                        <x-input-textarea id="message" class="block mt-1 w-full" type="text" name="message"
                            placeholder="E.g. Lorem ipsum dolor sit" />
                        <x-input-error :messages="$errors->get('message')" class="mt-2" />
                    </div>
                    <div class="flex items-center justify-end mt-1">
                        <div class="flex items-center justify-center">
                            <div class="mt-2 relative w-fit rounded-2xl group  bg-red-500 text-white">
                                <div class="absolute w-4 h-full bg-red-600 rounded-2xl duration-300 group-hover:w-full">
                                </div>
                                <button type="submit"
                                    class="px-8 py-4 flex relative items-center gap-2 z-10 font-dosis tracking-widest">
                                    Submit
                                    <i class="fa fa-paper-plane"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div data-aos="fade-left" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out"
                class="h-full w-full px-3 py-5 md:p-5 flex gap-5 flex-col justify-center order-1 lg:order-2">
                <div class="flex max-w-lg mx-auto">
                    <h1
                        class="md:text-5xl text-4xl text-red-500 font-semibold font-mija relative pe-20 after:right-0 after:absolute
                    after:w-16 after:rounded-md after:h-2 after:bottom-0 after:bg-red-500">
                        Contact Us</h1>
                </div>

                <ul class="grid grid-cols-1 gap-2 max-w-lg mx-auto">
                    <li class="py-3 px-2 flex">
                        <div class="w-full flex gap-2">
                            <div class="h-12 w-12 bg-white rounded-md flex items-center justify-center">
                                <i class="fa fa-phone text-2xl text-red-500"></i>
                            </div>
                            <div class="flex flex-col">
                                <a href="tel:0712345678" class="font-semibold font-mija text-xl">+254 123 456 789</a>
                                <h1 class="">Phone</h1>
                            </div>
                        </div>
                    </li>
                    <li class="py-3 px-2 flex">
                        <div class="w-full flex gap-2">
                            <div class="h-12 w-12 bg-white rounded-md flex items-center justify-center">
                                <i class="fa fa-envelope text-2xl text-red-500"></i>
                            </div>
                            <div class="flex flex-col">
                                <a href="mailto:infor@maasaieducationcenter.com"
                                    class="font-semibold font-mija text-xl">infor@maasaieducationcenter.com</a>
                                <h1 class="">Email</h1>
                            </div>
                        </div>
                    </li>
                    <li class="py-3 px-2 flex">
                        <div class="w-full flex gap-2">
                            <div class="h-12 w-12 bg-white rounded-md flex items-center justify-center">
                                <i class="fa fa-location-pin text-2xl text-red-500"></i>
                            </div>
                            <div class="flex flex-col">
                                <span class="font-semibold font-mija text-xl">P.O. Box 123, Lolgorien-Narok</span>
                                <h1 class="">Address</h1>
                            </div>
                        </div>
                    </li>
                    <li class="py-3 px-2 flex">
                        <div class="w-full flex gap-2">
                            <div class="h-12 w-12 bg-white rounded-md flex items-center justify-center">
                                <i class="fa fa-globe text-2xl text-red-500"></i>
                            </div>
                            <div class="flex flex-col">
                                <a href="https://www.maasaieducationcenter.com"
                                    class="font-semibold font-mija text-xl">maasaiedducationcenter.com</a>
                                <h1 class="">Website</h1>
                            </div>
                        </div>
                    </li>
                </ul>

            </div>
        </div>

    </section>

    <section data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" class="">
        <iframe class="flex w-full min-h-[80vh] mx-auto"
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3988.8610524209435!2d34.89402937627087!3d-1.2551236322994817!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x182ceb22a9aec21d%3A0xd6452aea72167b91!2sMaasai%20Education%20Centre%20-%20The%20Oreteti%20Mara%20Lodge%20School!5e0!3m2!1sen!2ske!4v1705134384651!5m2!1sen!2ske"
            height="450" style="border:0;" allowfullscreen="" loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"></iframe>
    </section>
@endsection