<?php include 'header.php'; ?>

<script src="js/form-handler.js"></script>

<style>
    .error {
        color: #dc3545;
        font-size: 0.875em;
        margin-top: 0.25rem;
    }
</style>

<!-- Page Header Start -->
<div class="container-fluid page-header py-5">
    <div class="container py-5">
        <h1 class="display-3 text-white mb-3 animated slideInDown">Contact</h1>
    </div>
</div>
<!-- Page Header End -->


<!-- Contact Start -->
<div class="container-fluid bg-light overflow-hidden px-lg-0">
    <div class="container contact px-lg-0">
        <div class="row g-0 mx-lg-0">
            <div class="col-lg-6 contact-text py-5 wow fadeIn" data-wow-delay="0.5s">
                <div class="p-lg-5 ps-lg-0">
                    <h5 class="color-corrected">Contact Us </h5>
                    <h1 class="mb-4">Get In Touch With Us</h1>

                    <p class="mb-4">We’re here to support your mechanical and industrial project needs with timely, expert solutions. Whether you’re looking to discuss a new opportunity, request service details, or collaborate on complex engineering scopes — our team is ready to assist. With over years of experience and a presence across the GCC, BEM is positioned to deliver value wherever your operations take you.</p>
                    <form id="contactForm" method="POST" novalidate>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="name" name="name" placeholder="Your Name">
                                    <label for="name">Your Name</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-floating">
                                    <input type="email" class="form-control" id="email" name="email" placeholder="Your Email">
                                    <label for="email">Your Email</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <input type="text" class="form-control" id="subject" name="subject" placeholder="Subject">
                                    <label for="subject">Subject</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-floating">
                                    <textarea class="form-control" placeholder="Leave a message here" id="message" name="message" style="height: 100px"></textarea>
                                    <label for="message">Message</label>
                                </div>
                            </div>
                            <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">


                            <div class="col-12">
                                <button type="submit" id="submt_btn" class="btn-corrected btn-primary-corrected rounded-pill py-md-3 py-2 px-4 px-md-5 mt-3">
                                    <span id="submit_txt">Send Message</span>
                                </button>

                                <!-- <a class="btn-corrected btn-primary-corrected rounded-pill py-md-3 py-2 px-4 px-md-5 mt-3 submt_btn" onclick="submitEnquiry()" id="submt_btn" style="border: 0;">Send Message</a> -->
                            </div>
                            <div class="col-12 mt-3">
                                <div id="formMessage" class="alert" style="display: none;"></div>
                            </div>
                        </div>


                    </form>
                </div>
            </div>
            <div class="col-lg-6 pe-lg-0 mb-md-0 mb-5" style="min-height: 400px;">
                <div class="position-relative h-100 ">
                    <iframe class="position-absolute w-100 h-100" style="object-fit: cover;"
                        src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d58158.12575900557!2d54.459648651187734!3d24.350572807218082!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1zUGxvdOKArzYsIE3igJE0NSwgTXVzc2FmYWggSW5kdXN0cmlhbCBBcmVhLCBBYnUgRGhhYmkg4oCTIFVBRQ!5e0!3m2!1sen!2sin!4v1753343327093!5m2!1sen!2sin"
                        frameborder="0" allowfullscreen="" aria-hidden="false"
                        tabindex="0">
                    </iframe>

                </div>
            </div>
        </div>
    </div>
</div>
<!-- Contact End -->



<!-- Footer Start -->


<?php include('footer.php'); ?>