<?php $__env->startSection('page-title'); ?>
    <title>
        <?php echo e(isset($seoPageName->meta_title) ? @$seoPageName->meta_title . ' - ' . @$viewComposerSiteSetting->company_name : 'Contact Us - Golcha Green Energy'); ?>

    </title>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('meta-tags'); ?>
    <meta name="title" content="<?php echo e(@$seoPageName->meta_title); ?>">
    <meta name="description" content="<?php echo e(@$seoPageName->meta_description); ?>">
<?php $__env->stopSection(); ?>
<?php $__env->startSection('style'); ?>
    <style>
        .successContactMsg{
            padding-block: 64px 0 !important;
        }
        .successContactMsg .success-icon{
            font-size: 100px;
            color: #70a943;
        }
        .contact-map iframe{
            width: 100% !important;
        }
    </style>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('main-content'); ?>
    <?php echo $__env->make('layout.admin.include.loader', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
    <section class="relative min-h-[450px] rounded-2xl overflow-hidden m-2">
        <div class="absolute inset-0">
            <img class="w-full h-full object-cover" src="<?php echo e(asset(@$siteBanner->banner_image)); ?>" alt="">
        </div>
        <div class="absolute top-0 left-0 w-full h-full bg-brand-dark-1/30 pt-[10em]">
            <h1 class="text-center h1 text-brand-green-3 font-bold max-sm:text-4xl">
                <?php echo e(@$siteBanner->display_name); ?>

            </h1>
            <div class="text-center text-light-1 mt-4">
                <a href="<?php echo e(route('frontend.home')); ?>">Home</a> <span> > </span> <?php echo e(@$siteBanner->display_name); ?>

            </div>
        </div>
    </section>

    <section class="py-[120px] max-xl:py-[100px] max-sm:py-[80px]">
        <div class="container">
            <div class="grid grid-cols-3 gap-x-6 max-lg:grid-cols-1 max-lg:gap-0">
                <div
                    class="col-span-1 bg-brand-dark-1 p-10 space-y-4 rounded-2xl flex flex-col justify-between max-lg:min-h-[500px] max-sm:min-h-[700px]">
                    <div>
                        <div class="flex items-center gap-2 py-3.5 text-white">
                            <img class="w-3" src="<?php echo e(asset('assets/images/flash-light.webp')); ?>" alt="Golcha">
                            <?php echo e(@$contactOverview->contact_display_name); ?>

                        </div>
                        <h2 class="text-white text-5xl font-semibold"><?php echo e(@$contactOverview->title); ?></h2>
                        <p class="text-brand-gray-1 text-lg mt-4">
                            <?php echo e(@$contactOverview->one_liner_text); ?>

                        </p>
                    </div>
                    <div>
                        <ul class="space-y-2">
                            <li class="flex gap-x-2 text-white text-lg">
                                <iconify-icon icon="material-symbols:check-circle-rounded" width="24" height="24"
                                              class="text-brand-green-3"></iconify-icon>
                                We will respond to you within 24 hours.
                            </li>
                            <li class="flex gap-x-2 text-white text-lg">
                                <iconify-icon icon="material-symbols:check-circle-rounded" width="24" height="24"
                                              class="text-brand-green-3"></iconify-icon>
                                Expert Solutions for Green Renewable Energy Needs
                            </li>
                            <li class="flex gap-x-2 text-white text-lg">
                                <iconify-icon icon="material-symbols:check-circle-rounded" width="24" height="24"
                                              class="text-brand-green-3"></iconify-icon>
                                Seamless Support for Sustainable Energy Projects
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="col-span-2 p-10 rounded-2xl max-lg:px-0 max-lg:pb-0">
                    <div class="g-recaptcha" data-sitekey="<?php echo e(config('services.google_captcha.site_key')); ?>"
                         data-callback="onSubmitExecuteInvisibleCaptcha" data-size="invisible"></div>
                    <h3 class="fs-2rem fw-500 mb-16px successContactMsg flex flex-col text-center text-4xl leading-[140%] gap-4" style="display: none;"></h3>
                    <form id="contact-form" class="hideAfterSubmit">
                        <?php echo csrf_field(); ?>
                        <div class="grid grid-cols-2 gap-x-6 gap-y-4">
                            <div class="max-sm:col-span-2">
                                <label for="full_name" class="">Name <span class="text-red-600">*</span></label>
                                <input type="text" name="full_name" id="full_name"
                                       class="w-full p-3.5 rounded-md border border-brand-gray-1 required"
                                       placeholder="e.g. John Doe">
                                <div class="invalid-feedback text-red-600 text-sm mt-1" id="full_name_err"></div>
                            </div>
                            <div class="max-sm:col-span-2">
                                <label for="company_name" class="">Company <span class="text-red-600">*</span></label>
                                <input type="text" name="company_name" id="company_name"
                                       class="w-full p-3.5 rounded-md border border-brand-gray-1 required"
                                       placeholder="e.g. ABC Company">
                                <div class="invalid-feedback text-red-600 text-sm mt-1" id="company_name_err"></div>
                            </div>
                            <div class="max-sm:col-span-2">
                                <label for="email" class="">Email <span class="text-red-600">*</span></label>
                                <input type="email" name="email" id="email"
                                       class="w-full p-3.5 rounded-md border border-brand-gray-1 required"
                                       placeholder="e.g. johndoe@example.com">
                                <div class="invalid-feedback text-red-600 text-sm mt-1" id="email_err"></div>
                            </div>
                            <div class="max-sm:col-span-2">
                                <label for="phone_no" class="">Phone <span class="text-red-600">*</span></label>
                                <input type="text" name="phone_no" id="phone_no"
                                       class="w-full p-3.5 rounded-md border border-brand-gray-1 required"
                                       placeholder="Enter your phone number" maxlength="10" onkeypress="return isNumber(event)">
                                <div class="invalid-feedback text-red-600 text-sm mt-1" id="phone_no_err"></div>
                            </div>
                            <div class="col-span-2">
                                <label for="subject" class="">Subject <span class="text-red-600">*</span></label>
                                <input type="text" name="subject" id="subject"
                                       class="w-full p-3.5 rounded-md border border-brand-gray-1 required"
                                       placeholder="Enter Subject">
                                <div class="invalid-feedback text-red-600 text-sm mt-1" id="subject_err"></div>
                            </div>
                            <div class="col-span-2">
                                <label for="message" class="block text-sm font-medium text-brand-dark-1 mb-2">
                                    Message <span class="text-red-600">*</span>
                                </label>
                                <textarea name="message" id="message" rows="5"
                                          class="w-full p-3.5 rounded-md border border-brand-gray-1 bg-white text-brand-dark-1 focus:outline-none focus:ring-2 focus:ring-brand-green-1 focus:border-brand-green-1 transition duration-300 required"
                                          placeholder="Write a message here ..."
                                ></textarea>
                                <div class="invalid-feedback text-red-600 text-sm mt-1" id="message_err"></div>
                            </div>
                            <div class="col-span-2">
                                <input type="hidden" name="invisibleCaptcha" class="invisibleCaptcha">
                                <div class="invalid-feedback text-red-600 text-sm mt-1" id="invisibleCaptcha_err"></div>
                            </div>
                        </div>
                        <button type="button"
                                class="btn btn-primary mt-6 flex items-center gap-2 py-3.5 transition ease-in-out duration-300 hover:btn-primary-dark btn-submit max-sm:mt-0">
                            Send Message
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container">
            <div class="w-full h-[500px] rounded-2xl overflow-hidden filter grayscale contact-map">
                <?php echo @$siteSetting->map_iframe; ?>









            </div>

            <div class="grid grid-cols-3 my-12 gap-x-6 max-lg:grid-cols-1 max-lg:gap-y-8">
                <div class="p-4  rounded-2xl flex bg-brand-green-2 gap-x-4 items-center">
                    <div class="bg-brand-green-4 p-3.5 rounded-full flex items-center justify-center">
                        <iconify-icon icon="line-md:phone-call-loop" width="40" height="40"
                                      class="text-brand-green-3"></iconify-icon>
                    </div>
                    <div>
                        <span class="text-white uppercase max-sm:text-sm">Phone</span>
                        <h3 class="text-2xl font-bold text-brand-green-3 max-sm:text-lg"><?php echo e(@$siteSetting->contact_number); ?></h3>
                    </div>
                </div>
                <div class="p-4  rounded-2xl flex bg-brand-green-2 gap-x-4 items-center">
                    <div class="bg-brand-green-4 p-3.5 rounded-full flex items-center justify-center">
                        <iconify-icon icon="line-md:email-opened" width="40" height="40"
                                      class="text-brand-green-3"></iconify-icon>
                    </div>
                    <div>
                        <span class="text-white uppercase max-sm:text-sm">Email</span>
                        <h3 class="text-2xl font-bold text-brand-green-3 max-sm:text-lg"><?php echo e(@$siteSetting->company_email); ?></h3>
                    </div>
                </div>
                <div class="p-4  rounded-2xl flex bg-brand-green-2 gap-x-4 items-center">
                    <div class="bg-brand-green-4 p-3.5 rounded-full flex items-center justify-center">
                        <iconify-icon icon="line-md:map-marker" width="40" height="40"
                                      class="text-brand-green-3"></iconify-icon>
                    </div>
                    <div>
                        <span class="text-white uppercase max-sm:text-sm">Address</span>
                        <h3 class="text-2xl font-bold text-brand-green-3 max-sm:text-lg"> <?php echo e(@$siteSetting->company_location); ?></h3>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <?php echo $__env->make('frontend.include._contact-bottom-part', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('script'); ?>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
        function onSubmitExecuteInvisibleCaptcha(token) {
            $('.invisibleCaptcha').val(token);
            onSubmit(token);
            setTimeout(function() {
                grecaptcha.reset();
            }, 2000);
        }
    </script>
    <script src="<?php echo e(asset('assets/frontend/custom/js/contact-us.js')); ?>"></script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layout.frontend.master-layout', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/sanjay/docroot/golcha.sq18.com.np/resources/views/frontend/contact.blade.php ENDPATH**/ ?>