@extends('layouts.main-app')

@section('title', 'Home')

@section('content')

    @include('layouts.navbar')
    <div class="container mx-auto">
        <div class="relative">
            <div class="container mx-auto h-full relative">
                <!-- Background Image -->
                <img src="{{ asset('images/bg-banner.png') }}" alt="Banner"
                    class="object-cover w-full h-[40vh] md:h-[200px]">

                <!-- Text inside the background image -->
                <div class="absolute inset-0 flex flex-col justify-center items-center text-white">
                    <h1 class="text-2xl md:text-4xl font-bold jost-export">Contact Us</h1>
                    <h4 class="text-sm md:text-lg mt-2 jost-export">
                        <a href="{{ url('/') }}" class="text-white hover:text-orange-600">Home</a> 
                         &gt; About Us</h4>
                </div>
            </div>
        </div>

        <div>
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 px-4 lg:p-14">
                <div class="grid grid-rows-2 gap-8 mb-6 text-center lg:text-left">
                    <div>
                        <h1 class="text-3xl lg:text-5xl text-black font-medium py-3">Our Store</h1>
                        <p class="text-gray-700"> Door 8, FAB Bldg, Barangay Bacaca Road, Poblacion District, Davao City, 8000 Davao del Sur</p>
                        <p class="text-gray-700"><span class="text-black font-medium">Phone:</span> (02) 8831 - 0000</p>
                        <p class="text-gray-700"><span class="text-black font-medium">Email:</span>
                          marketing@rwebsolutions.com.ph</p>
                    </div>

                    <div>
                        <h1 class="text-3xl lg:text-5xl text-black font-medium py-3">Open Hours</h1>
                        <p class="text-gray-700"><span class="text-black font-medium">Monday  - Friday:</span> <span
                                class="px-5">8:00 am - 6:00pm</span></p>
                        <p class="text-gray-700"><span class="text-black font-medium">Saturday:</span> <span
                                class="px-6">8:00am - 12:00pm</span></p>
                    </div>
                </div>
                <div class="lg:col-span-2">
                    <div class="flex flex-col lg:flex-row bg-cover p-4 lg:p-6 rounded-lg"
                        style="background-image: url('{{ asset('images/bg-needhelp.png') }}');">
                        <div class="flex-1 text-white p-4 lg:p-6 mb-6 lg:mb-0">
                            <h2 class="text-2xl lg:text-3xl font-bold mb-4 text-center lg:text-left">NEED HELP?</h2>
                            <div class="flex items-center justify-center lg:justify-start space-x-4">
                                <img src="{{ asset('images/icon-contact.png') }}" alt="Call Us"
                                    class="w-12 lg:w-16 h-12 lg:h-16 rounded-full">
                                {{-- <div>
                                    <p class="font-semibold">Call Us</p>
                                    <p class="text-sm lg:text-base">(02) 8831 – 0000 / (02) 8230 – 2906<br>0932 888 7777</p>
                                </div> --}}
                            </div>
                        </div>
                        <div class="flex-1 bg-white p-4 lg:p-6 rounded-lg shadow-lg">
                            <form action="{{ route('contact.store') }}" method="POST" class="space-y-4">
                                @csrf
                                <input type="text" name="name" placeholder="Your Name"
                                    class="w-full p-2 lg:p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm lg:text-base">
                                <input type="emailAddress" name="emailAddress" placeholder="Your Email"
                                    class="w-full p-2 lg:p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm lg:text-base">
                                <input type="contactnumber" name="contactnumber" placeholder="Your Contact No."
                                    class="w-full p-2 lg:p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm lg:text-base">
                                <textarea name="message" placeholder="Message" rows="4"
                                    class="w-full p-2 lg:p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm lg:text-base"></textarea>
                                <button type="submit"
                                    class="w-full bg-[#F66D10] text-white p-2 lg:p-3 rounded-lg font-bold hover:bg-orange-700 text-sm lg:text-base">
                                    SEND MESSAGE
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3959.2695291676473!2d125.60048657568208!3d7.094725216260402!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x32f96d239e0b8d8d%3A0x6803118d251c27d5!2sR%20Web%20Solutions%20Corp.%20Davao!5e0!3m2!1sen!2sph!4v1716369474754!5m2!1sen!2sph"
            width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
            referrerpolicy="no-referrer-when-downgrade" class="w-full"></iframe>
    </div>
    @include('layouts.footer')
@endsection