

export default function ContactArea() {
  return (
    <>
  

      <div className="mtcontact__area pt-130 pb-60">
        <div className="container">
          <div className="mt-section-content mb-50 text-center">
            <h2 className="mt-section-title mb-20">Bringing Designs to Life <br />
              Visit Our Location</h2>
            <p>Step into a world of creativity and innovation at interon. Our studio is where <br />
              ideas come to life, blending artistry.</p>
          </div>
          <div className="row">
            <div className="mtcontact__maps p-relative">
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d146513.05509247648!2d73.19133525789097!3d54.98596156928781!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x43aafde2f601090b%3A0x5eefc33861a69b1a!2z4KaT4Kau4Ka44KeN4KaVLCBPbXNrIE9ibGFzdCwg4Kaw4Ka-4Ka24Ka_4Kav4Ka84Ka-!5e0!3m2!1sbn!2sbd!4v1689181288902!5m2!1sbn!2sbd"
                width="600" height="450" style={{ border: `0` }} allowFullScreen loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"></iframe>

              <div className="mtcontact__maps-info">
                <div className="mtcontact__maps-logo mb-50">
                  <a href="index.html"><img src="assets/img/logo/black-logo.png" alt="" /></a>
                </div>
                <div className="mtcontact__maps-content">
                  <h4 className="mtcontact__maps-title mb-20">Contact info:</h4>
                  <ul>
                    <li><a href="">+999 2356 45689</a></li>
                    <li><a href="">hello@billoagency.com</a></li>
                  </ul>
                  <ul className="mt-20">
                    <li> <a href="">Old Westbury 256, New York, USA, NJ 3636459</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <section className="mtcontact__area-2 mt-50 mb-100">
        <div className="container">
          <div className="row">
            <div className="col-lg-5">
              <div className="mtcontact__list-wrap">
                <div className="mtcontact__list-item mb-50">
                  <h4 className="mtcontact__list-title mb-20">New York</h4>
                  <ul>
                    <li><a href="#">37 Rua do Mor Lisbonn 90</a></li>
                    <li><a href="#">everhue@example.com</a></li>
                    <li><a href="#">+1123456788</a></li>
                  </ul>
                </div>
                <div className="mtcontact__list-item mb-50">
                  <h4 className="mtcontact__list-title mb-20">Chicago</h4>
                  <ul>
                    <li><a href="#">37 Rua do Mor Lisbonn 90</a></li>
                    <li><a href="#">everhue@example.com</a></li>
                    <li><a href="#">+1123456788</a></li>
                  </ul>
                </div>
                <div className="mtcontact__list-item mb-50">
                  <h4 className="mtcontact__list-title mb-20">Amsterdam</h4>
                  <ul>
                    <li><a href="#">37 Rua do Mor Lisbonn 90</a></li>
                    <li><a href="#">everhue@example.com</a></li>
                    <li><a href="#">+1123456788</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <div className="col-lg-7">
              <div className="mtcontact__form-wrap">
                <div className="mt-section-title-wrapper mb-50 ">
                  <h2 className="mt-section-title mb-20">Start Your Project <br /> With Us</h2>
                </div>
                <div className="contact-form-box">
                  <form id="contact-form" action="assets/mail.php" method="post">
                    <div className="row">
                      <div className="col-md-6 mb-14">
                        <input name="name" type="text" placeholder="Your name" />
                      </div>
                      <div className="col-md-6 mb-14">
                        <input name="email" type="email" placeholder="Your email" />
                      </div>
                      <div className="col-md-12 mb-14">
                        <input name="subject" type="text" placeholder="Website link" />
                      </div>
                      <div className="col-md-12 mb-25">
                        <textarea name="message" cols={30} rows={10}
                          placeholder="Share your thoughts"></textarea>
                      </div>
                      <div className="col-12">
                        <button type="submit">
                          <span className="mt-btn">Submit Now</span>
                          <span className="mt-btn mt-btn-icon"><i className="fa-solid fa-arrow-right"></i></span>
                        </button>
                      </div>
                    </div>
                    <p className="ajax-response"></p>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="mtcontact__area-3  pb-100">
        <div className="container">
          <div className="row">
            <div className="col-lg-4">
              <div className="mtcontact__box-wrap mb-30">
                <div className="mtcontact__box-item d-flex ">
                  <div className="mtcontact__box-icon mr-20">
                    <span><i className="fa-light fa-phone-volume"></i></span>
                  </div>
                  <div className="mtcontact__box-content">
                    <h5 className="mtcontact__box-title">Contact Phone</h5>
                    <ul>
                      <li><a href="tel:+55990066622">+55 (9900) 666 22</a></li>
                      <li><a href="tel:+55990066611">+55 (9900) 666 11</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div className="col-lg-4">
              <div className="mtcontact__box-wrap mb-30">
                <div className="mtcontact__box-item d-flex ">
                  <div className="mtcontact__box-icon mr-20">
                    <span><i className="fa-light fa-messages"></i></span>
                  </div>
                  <div className="mtcontact__box-content">
                    <h5 className="mtcontact__box-title">Contact Email</h5>
                    <ul>
                      <li><a href="mailto:info@example.com">info@example.com</a></li>
                      <li><a href="mailto:info.ox@gmail.com">info.ox@gmail.com</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
            <div className="col-lg-4">
              <div className="mtcontact__box-wrap mb-30">
                <div className="mtcontact__box-item d-flex ">
                  <div className="mtcontact__box-icon mr-20">
                    <span><i className="fa-light fa-location-dot"></i></span>
                  </div>
                  <div className="mtcontact__box-content">
                    <h5 className="mtcontact__box-title">Office Location</h5>
                    <ul>
                      <li><a href="#">Head Office: 14/4, Bonosri,
                        Road A, califurnia, USA.</a></li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  )
}
