@extends('layouts.main-app')

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

@section('content')

@include('layouts.navbar')

<div class="relative h-[25rem] w-full pt-[10rem] bg-[#595959]">
    <img class="absolute inset-0 object-cover object-bottom w-full h-full" src="{{asset('images/contact_us/header-contacts.png')}}" alt="">
    <div class="container relative max-w-screen-xl mx-auto">
        <h1 class="text-4xl font-bold text-center text-[#ffd916]">We're Here to Help!</h1>
    </div>
</div>


<div class="bg-[#595959] py-32">
    <div data-aos="fade-up" data-aos-duration="1000" class="container max-w-screen-xl px-4 mx-auto space-y-12">
        <div class="grid grid-cols-1 md:grid-cols-3 ">
            <div data-aos="zoom-in" data-aos-duration="1000" class="flex flex-col items-center space-y-8 text-white">
                <img src="{{asset('images/contact_us/icon-phone.png')}}" alt="">
                <div class="flex flex-col items-center">
                    <h1 class="text-2xl font-bold">Phone</h1>
                    <p class="text-sm">+1 416 907-4848</p>
                </div>
            </div>
            <div data-aos="zoom-in" data-aos-duration="1000" class="flex flex-col items-center space-y-8 text-white">
                <img src="{{asset('images/contact_us/icon-email.png')}}" alt="">
                <div class="flex flex-col items-center">
                    <h1 class="text-2xl font-bold">Email</h1>
                    <p class="text-sm">info@chargecyclepower.com</p>
                     <p class="text-sm">www.chargecyclepower.com</p>
                </div>
            </div>
            <div data-aos="zoom-in" data-aos-duration="1000" class="flex flex-col items-center space-y-8 text-white">
                <img src="{{asset('images/contact_us/icon-loc.png')}}" alt="">
                <div class="flex flex-col items-center">
                    <h1 class="text-2xl font-bold">Address</h1>
                    <p class="text-sm">31 Villarboit Crescent, Concord, L4K 4R2</p>
                </div>
            </div>
        </div>
        <div data-aos="zoom-in" data-aos-duration="1000">
            <iframe class="w-full" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3959.2381045404877!2d125.61726197571515!3d7.09837801621447!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x32f96c5204e4d77f%3A0x7abdd9207cd52812!2sSouthern%20Philippines%20Medical%20Center!5e0!3m2!1sen!2sph!4v1725239501143!5m2!1sen!2sph" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
        <div class="flex flex-col items-center my-8 space-y-4">
            <h1 class="text-[#ffd916] text-4xl font-bold">Follow Our Socials</h1>
            <div class="grid items-center w-full grid-cols-4 lg:w-2/4">
                <div data-aos="zoom-in" data-aos-duration="1000" class="flex justify-center">
                    <img src="{{asset('images/contact_us/icon-fb.png')}}" alt="">
                </div>
                <div data-aos="zoom-in" data-aos-duration="1000" class="flex justify-center">
                    <img src="{{asset('images/contact_us/icon-ig.png')}}" alt="">
                </div>
                <div data-aos="zoom-in" data-aos-duration="1000" class="flex justify-center">
                    <img src="{{asset('images/contact_us/icon-in.png')}}" alt="">
                </div>
                <div data-aos="zoom-in" data-aos-duration="1000" class="flex justify-center">
                    <img src="{{asset('images/contact_us/icon-yt.png')}}" alt="">
                </div>
            </div>
        </div>
    </div>
</div>


<div class="relative w-full h-full bg-[#595959]">
    <img class="absolute inset-0 object-contain object-top w-full h-full" src="{{asset('images/contact_us/bg-content-1.jpg')}}" alt="">

    <div data-aos="fade-up" data-aos-duration="1000" class="container relative max-w-screen-xl py-32 mx-auto">
        @if (session('success'))
        <div class="p-4 mb-4 text-green-800 bg-green-100 rounded-lg">
            {{ session('success') }}
        </div>
        @endif

        @if ($errors->any())
        <div class="p-4 mb-4 text-red-800 bg-red-100 rounded-lg">
            <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif

        <form action="{{ route('contact_us.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div data-aos="zoom-in" data-aos-duration="1000" class="w-full h-full space-y-4 bg-[#01325a] border-4 border-[#ffd916] py-20 px-14 rounded-full flex justify-center">
                <div class="w-full space-y-4 md:w-3/5">
                    <div>
                        <input id="full_name" name="full_name" class="w-full h-full pb-6 text-white placeholder-white bg-transparent border-2 border-white rounded-lg" placeholder="Fullname" type="text">
                    </div>
                    <div>
                        <input id="email_address" name="email_address" class="w-full h-full pb-6 text-white placeholder-white bg-transparent border-2 border-white rounded-lg" placeholder="Email Address" type="email">
                    </div>
                    <div>
                        <input id="contact_no" name="contact_no" class="w-full h-full pb-6 text-white placeholder-white bg-transparent border-2 border-white rounded-lg" placeholder="Contact No." type="tel">
                    </div>
                    <div>
                        <textarea id="message" name="message" class="w-full h-full p-2 text-white placeholder-white bg-transparent border-2 border-white rounded-lg" rows="6" placeholder="Message"></textarea>
                    </div>
                    <div class="relative">
                        <div class="flex w-full">
                            <div class="relative ">
                                <button class="flex items-center justify-center">
                                    <img class="absolute inset-0 w-[20rem] h-full" src="{{asset('images/homepage/btn-partner2.png')}}" alt="">
                                    <h1 class="relative px-20 py-8 font-bold">SUBMIT</h1>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <div data-aos="zoom-in" data-aos-duration="1000" class="my-20 space-y-20">
            <h1 class="text-[#ffd916] font-bold text-4xl text-center">Frequently Asked Questions</h1>
            <div class="grid grid-cols-2">
                <div>
                    <h1 class="text-white">How do I find a Charge Cycle station near me?</h1>
                </div>
                <div>
                    <h1 class="text-white">You can easily locate nearby stations through our user-friendly app. Simply download the app and enable location services.</h1>
                </div>
                <div class="border-b-2 border-[#ffd916] col-span-2 my-8">
                </div>
                <div>
                    <h1 class="text-white">How much does it cost to rent a power bank?</h1>
                </div>
                <div>
                    <h1 class="text-white">Yes, creating a free account allows you to manage your rentals, view you billing history, and access other features within the app.</h1>
                </div>
                <div class="border-b-2 border-[#ffd916] col-span-2 my-8">
                </div>
                <div>
                    <h1 class="text-white">Do I need to create an account to rent a power bank?</h1>
                </div>
                <div>
                    <h1 class="text-white">We offer competitive hourly rates. The exact cost will be displayed in the app before you initiate a rental.</h1>
                </div>
                <div class="border-b-2 border-[#ffd916] col-span-2 my-8">
                </div>
                <div>
                    <h1 class="text-white">What happens if I lose or damage a power bank?</h1>
                </div>
                <div>
                    <h1 class="text-white">We have a damage and loss policy outlined in our terms and conditions. Please refer to the Terms & Conditions section on our website for details.</h1>
                </div>
                <div class="border-b-2 border-[#ffd916] col-span-2 my-8">
                </div>
                <div>
                    <h1 class="text-white">How much does it cost to rent a power bank?</h1>
                </div>
                <div>
                    <h1 class="text-white">We offer competitive hourly rates. The exact cost will be displayed in the app before you initiate a rental.</h1>
                </div>
                <div>
                    <h1 class="text-white">How do I find a Charge Cycle station near me?</h1>
                </div>
                <div>
                    <h1 class="text-white">You can easily locate nearby stations through our user-friendly app. Simply download the app and enable location services.</h1>
                </div>
                <div class="border-b-2 border-[#ffd916] col-span-2 my-8">
                </div>
                <div>
                    <h1 class="text-white">How much does it cost to rent a power bank?</h1>
                </div>
                <div>
                    <h1 class="text-white">Yes, creating a free account allows you to manage your rentals, view you billing history, and access other features within the app.</h1>
                </div>
                <div class="border-b-2 border-[#ffd916] col-span-2 my-8">
                </div>
                <div>
                    <h1 class="text-white">Do I need to create an account to rent a power bank?</h1>
                </div>
                <div>
                    <h1 class="text-white">We offer competitive hourly rates. The exact cost will be displayed in the app before you initiate a rental.</h1>
                </div>
                <div class="border-b-2 border-[#ffd916] col-span-2 my-8">
                </div>
                <div>
                    <h1 class="text-white">What happens if I lose or damage a power bank?</h1>
                </div>
                <div>
                    <h1 class="text-white">We have a damage and loss policy outlined in our terms and conditions. Please refer to the Terms & Conditions section on our website for details.</h1>
                </div>
                <div class="border-b-2 border-[#ffd916] col-span-2 my-8">
                </div>
                <div>
                    <h1 class="text-white">How much does it cost to rent a power bank?</h1>
                </div>
                <div>
                    <h1 class="text-white">We offer competitive hourly rates. The exact cost will be displayed in the app before you initiate a rental.</h1>
                </div>
            </div>
        </div>

    </div>

</div>




@include('layouts.footer')



@endsection