<?php include'header.php'?>

    <main>

    <!-- ac-breadcrumb-start -->
    <div class="ac-breadcrumb-area bg-default" data-background="assets/img/breadcrumb/breadcrumb-img.jpg">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumb-section">
                        <h2 class="ac-breadcrumb-title">Contact Us</h2>
                        <ul class="breadcrumb-navigation">
                            <li><a href="index.php">Home</a></li>
                            <li><span>Contact Us</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ac-breadcrumb-end -->
    
    <!-- ac-contact-address -->
        <div class="ac-contact-address pb-130 pt-130">
            <div class="container">
                <div class="row">
                    <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 d-flex justify-content-lg-center">
                        <div class="ac-contact-address-wrapper">
                            <div class="icon wow fadeIn">
                                <i class="fal fa-map"></i>
                            </div>
                            <div class="title">
                                <p>
                        <strong>MANA ORGANICS</strong><br>
                        Plot No. C-13/2, IDA Moulali,<br>
                        Hyderabad, Telangana-500040, INDIA
                    </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 d-flex justify-content-lg-center">
                        <div class="ac-contact-address-wrapper">
                            <div class="icon wow fadeIn">
                                <i class="fal fa-envelope-open"></i>
                            </div>
                            <div class="title">
                                <p>
                        <strong>Email : </strong><br>
                        <a href="mailto:rahul@manaorganics.co.in">rahul@manaorganics.co.in</a>
                    </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-12 d-flex justify-content-lg-center">
                        <div class="ac-contact-address-wrapper mb-0">
                            <div class="icon wow fadeIn">
    <i class="fal fa-phone-alt"></i>
    <i class="fab fa-whatsapp"></i>
</div>
                            <div class="title">
                                <strong>Phone : </strong><br>
                                <p>
                                    <a href="tel:+919701565478">+91 97015 65478</a><br>
                                    <a href="tel:+919703506808">+91 97035 06808</a>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ac-contact-address -->
        
        <style>
            .icon{
    width:60px;
    height:60px;
    border-radius:50%;
    background:#f5f5f5;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    font-size:16px;
}

.icon .fa-whatsapp{
    color:#25D366;
}
        </style>
    
    <!-- ac-contact-start -->
        <div class="contact-page-area pb-130 pt-130">
            <div class="container">
                <div class="row">
                    <div class="col-xxl-4 col-xl-4 col-lg-4">
                        <div class="ac-contact-page-left mb-70">
                            <div class="section-title-wrapper mb-30 pr-60">
                                <h2 class="ac-section-title-2 mb-25">Get in Touch</h2>
                                <p class="ac-subtitle">We are committed to providing our customers with exceptional service while offering our employees the best training.</p>
                            </div>
                            <!--<div class="ac-contact-page-social-link wow fadeInLeft">-->
                            <!--    <ul>-->
                            <!--        <li><a href="#"><i class="fab fa-facebook"></i></a></li>-->
                            <!--        <li></li>-->
                            <!--        <li><a href="#"><i class="fab fa-instagram"></i></a></li>-->
                            <!--        <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>-->
                            <!--    </ul>-->
                            <!--</div>-->
                        </div>
                    </div>
                    <div class="col-xxl-8 col-lg-8 col-lg-8">
                        <div class="ac-contact-page-right">
                            <form action="sendmail.php" method="post" id="contactForm" class="ac-contact-form">
                                <div class="row">
                                    <div class="col-xxl-6 col-lg-6 col-md-6">
                                        <div class="comment-form-input-box">
                                            <input type="text" placeholder="Name" name="name" required>
                                        </div>
                                    </div>
                                    <div class="col-xxl-6 col-lg-6 col-md-6">
                                        <div class="comment-form-input-box">
                                            <input type="text" placeholder="Phone" name="phone">
                                        </div>
                                    </div>
                                    
                                </div>
                                <div class="row">
                                    <div class="col-xxl-6 col-lg-6 col-md-6">
                                        <div class="comment-form-input-box">
                                            <input type="email" placeholder="Email" name="email" required>
                                        </div>
                                    </div>
                                    <div class="col-xxl-6 col-lg-6 col-md-6">
                                        <div class="comment-form-input-box">
                                            <input type="text" placeholder="Subject" name="subject" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-xxl-12 col-lg-12">
                                        <div class="comment-form-input-box">
                                            <textarea name="message" placeholder="Write message"></textarea>
                                        </div>
                                        <!--<div class="comment-form-btn-wrapper wow fadeIn" data-wow-duration="2s">-->
                                        <!--    <button class="btn-2 " type="submit">Send a message</button>-->
                                        <!--</div>-->
                                        <div class="comment-form-btn-wrapper wow fadeIn" data-wow-duration="2s">
                                            <button class="btn-2" type="submit">Send a message</button>
                                        </div>
                                        <!-- Message will appear here -->
                                        <div id="formMessage" style="margin-top:15px;"></div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ac-contact-end -->

        <!-- ac-contact-map-start -->
        <div class="ac-contact-map-area">
            <div class="ac-contact-map">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3413.254078958907!2d78.5583070889301!3d17.45878307665879!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bcb9b00550fd7d1%3A0xa7f1f5c77c919a6!2sMoula%20Ali%2C%20Hyderabad!5e1!3m2!1sen!2sin!4v1772626995072!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </div>
        <!-- ac-contact-map-end -->

</main>

<script>
document.getElementById("contactForm").addEventListener("submit", function(e){
    e.preventDefault();

    var form = this;
    var formData = new FormData(form);
    var msgBox = document.getElementById("formMessage");

    msgBox.innerHTML = "";

    fetch("sendmail.php", {
        method: "POST",
        body: formData
    })
    .then(response => response.text())
    .then(result => {
        msgBox.innerHTML = result;

        if(result.includes("success")){
            form.reset();
        }
    })
    .catch(() => {
        msgBox.innerHTML =
        '<div style="color:red;">Something went wrong. Please try again.</div>';
    });
});
</script>


<?php include'footer.php'?>