@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">Home &gt; Contact Us</h4>
                </div>
            </div>
        </div>

        <div>
            <div class="grid grid-cols-1 md:grid-cols-3 px-2 lg:p-14">
                <div class="grid grid-rows-2">
                    <div>
                        <h1 class="text-5xl text-black font-medium py-3">Our Store</h1>
                        <p class="text-gray-700">1017 Vicente Cruz St. Sampaloc Manila, Philippines</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>
                            websitehandling@tdtpowersteel.com.ph</p>
                    </div>

                    <div>
                        <h1 class="text-5xl text-black font-medium py-3">Open Hours</h1>
                        <p class="text-gray-700"><span class="text-black font-medium">Mon - Fri:</span> <span
                                class="px-5">7:30am - 9:00pm</span></p>
                        <p class="text-gray-700"><span class="text-black font-medium">Saturday:</span> <span
                                class="px-6">7:30am - 9:00pm</span></p>
                        <p class="text-gray-700"><span class="text-black font-medium">Sunday:</span> <span
                                class="px-8">7:30am - 9:00pm</span></p>
                    </div>
                </div>
                <div class="grid col-span-2">
                    <div class="flex flex-col md:flex-row bg-cover p-6 rounded-lg"
                        style="background-image: url('{{ asset('images/bg-needhelp.png') }}');">
                        <div class="flex-1 text-white p-6 items-center">
                            <h2 class="text-3xl font-bold mb-4 text-center">NEED HELP?</h2>
                            <div class="flex items-center flex-col md:flex-row mb-4">
                                <img src="{{ asset('images/icon-contact.png') }}" alt="Call Us"
                                    class="w-16 h-16 rounded-full mr-4">
                                <div>
                                    <p class="font-semibold">Call Us</p>
                                    <p>(02) 8831 – 0000 / (02) 8230 – 2906<br>0932 888 7777</p>
                                </div>
                            </div>
                        </div>
                        <div class="flex-1 bg-white p-6 rounded-lg shadow-lg">
                            <form action="#" method="POST" class="space-y-4">
                                <input type="text" name="name" placeholder="Your Name"
                                    class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <input type="email" name="email" placeholder="Your Email"
                                    class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <input type="text" name="contact" placeholder="Your Contact No."
                                    class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <textarea name="message" placeholder="Message"
                                    class="w-full p-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                                <button type="submit"
                                    class="w-full bg-red-600 text-white p-3 rounded-lg font-bold hover:bg-red-700">SEND
                                    MESSAGE</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
        <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3860.754393344493!2d120.99107297579751!3d14.613062376770053!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3397b603e3e63115%3A0x2126cc8c9b37f04b!2s1017%20Vicente%20Cruz%20St%2C%20Sampaloc%2C%20Manila%2C%201008%20Metro%20Manila!5e0!3m2!1sen!2sph!4v1726801045047!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