@extends('frontend::layouts.master')

@section('content')
    <div class="">
        <a href="#">
            <img  class="w-full" src="{{ Module::asset('frontend:img/contact-banner.jpg') }}" alt="BGMARRR OFFICIAL STORE">
        </a>
    </div> 
    <div class="container py-12 lg:py-16">
        <img  class="w-full" src="{{ Module::asset('frontend:img/official-contact.svg') }}" alt="BGMARRR OFFICIAL STORE">
    </div>
    <div class="contact-container">
        <div class="contact-info-wrapper">
            <div class="contact-info">
                
            </div>
        </div>
        <div class="contact-info-wrapper">
            <div class="contact-info">
                <p class="font-semibold mb-2">LOCATION</p>
                <p class="text-14 font-light my-6">simply dummy text of the printing and typesetting industry.</p>
                <p>
                    <a href="tel:000-0000000">000-0000000</a>
                </p>
                <p>
                    <a href="mailto:contact@nd.com">contact@nd.com</a>
                </p>
            </div>
        </div>
        <div class="contact-info-wrapper">
            <div class="contact-info">
                <p class="font-semibold mb-2">FOLLOW US</p>
                <div class="flex items-center justify-center space-x-2 mt-2">
                    <div class="icon-wrapper">
                        <a href="#">
                            <img class="w-auto h-10" src="{{ Module::asset('frontend:img/f.svg') }}" alt="">
                        </a>
                    </div>
                    <div class="icon-wrapper">
                        <a href="#">
                            <img class="w-auto h-10" src="{{ Module::asset('frontend:img/i.svg') }}" alt="">
                        </a>
                    </div>
                    <div class="icon-wrapper">
                        <a href="#">
                            <img class="w-auto h-10" src="{{ Module::asset('frontend:img/y.svg') }}" alt="">
                        </a>
                    </div>
                    <div class="icon-wrapper">
                        <a href="#">
                            <img class="w-auto h-10" src="{{ Module::asset('frontend:img/x.svg') }}" alt="">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="contact-info-wrapper">
            <div class="contact-info">
                
            </div>
        </div>
    </div>
    <div class="container -mt-4 lg:mt-0">
        <div class="flex flex-wrap">
            <div class="w-full lg:w-1/2 pb-4">
                <div class=" hidden lg:block">
                    <div class="page-header-wrapper justify-start">
                        <h2 class='section-header'>Contact</h2>
                        <div class="img-wrapper left-0">
                            <img src="{{ Module::asset('frontend:img/contact.svg') }}" alt="Keep in Touch">
                        </div>
                    </div>
                    <p class="mt-3 leading-5 lg:pr-10">We can help. Our team of experts is on hand to answer your questions.</p>
                </div>
                <div class="iframe-wrapper mt-5 lg:mt-20">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3875.3453041640905!2d100.56256667586514!3d13.758038197147496!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30e29d4918d39f69%3A0x7c82b5cfabbf1f4a!2sFortune%20Town!5e0!3m2!1sen!2sth!4v1702888944731!5m2!1sen!2sth" width="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </div>
            <div class="w-full lg:w-1/2 lg:pt-16 py-4 lg:-ml-8">
                <div class="lg:hidden my-6">
                    <div class="page-header-wrapper justify-start">
                        <h2 class='section-header'>Contact</h2>
                        <div class="img-wrapper left-0">
                            <img src="{{ Module::asset('frontend:img/contact.svg') }}" alt="Keep in Touch">
                        </div>
                    </div>
                    <p class="mt-3 leading-5 lg:pr-10">We can help. Our team of experts is on hand to answer your questions.</p>
                </div>
                <form action="" class="relative contact-form bg-primary">
                    <div class="flex flex-wrap -mx-4">

                        <div class="w-full px-4 mb-6 form-style line-style">
                            <label for="name">
                                <img src="{{ Module::asset('frontend:img/ico-user.svg') }}" alt="Fullname">
                            </label>
                            <input id="name" type="text" placeholder="Name" class="bg-transparent">
                        </div>

                        <div class="w-full lg:w-1/2 px-4 mb-6 form-style line-style">
                            <label for="emailAddress">
                                <img src="{{ Module::asset('frontend:img/ico-mail.svg') }}" alt="Email Address">
                            </label>
                            <input id="emailAddress" type="email" placeholder="Email" class="bg-transparent">
                        </div>

                        <div class="w-full lg:w-1/2 px-4 mb-6 form-style line-style">
                            <label for="emailAddress">
                                <img src="{{ Module::asset('frontend:img/ico-tel.svg') }}" alt="Telephone Number">
                            </label>
                            <input id="phone" type="text" placeholder="Telephone" class="bg-transparent">
                        </div>

                        <div class="w-full px-4 mb-6 form-style line-style">
                            <label for="subj">
                                <img src="{{ Module::asset('frontend:img/ico-info.svg') }}" alt="Subject">
                            </label>
                            <input id="subj" type="text" placeholder="Subject" class="bg-transparent">
                        </div>

                        <div class="w-full px-4 mb-6 form-style line-style">
                            <label for="message">
                                <img src="{{ Module::asset('frontend:img/ico-write.svg') }}" alt="Message">
                            </label>
                            <textarea id="message" placeholder="Write your question here" class="bg-transparent" rows="6"></textarea>
                        </div>

                        <div class="w-full px-4 mb-6 form-style basic-check-radio">
                            <label class="static space-x-1 leading-6 " for="policy">
                                I agree and accept 
                                <a href="#pdf"><u>Privacy Policy</u></a>
                            </label>
                            <input id="policy" type="checkbox" class="bg-transparent mt-[6px]">
                        </div>
                    </div>
                    <div>
                        <img src="{{ Module::asset('frontend:img/captcha.jpg') }}">
                    </div>
                    <div class="mt-6">
                        <button class="button-primary">
                            <div>Send Message</div>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection