export default function ContactSection() {
  return (
    <section className="section mb-16 bg-default">
      <div className="container">
        <div className="layout-bordered !gap-16 mt-16">
          <div className="">
            <div className="">
              <h2>Contact Details</h2>
              <p>
                If you have any questions, just fill in the contact form, and we will answer you shortly. If you are
                living nearby, come visit our office.
              </p>
              <div className="my-3" style={{ position: "relative" }}>
                <div style={{ position: "relative", height: "300px", overflow: "hidden" }}>
                  <iframe
                    style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", border: 0 }}
                    loading="lazy"
                    allowFullScreen
                    src="https://maps.google.com/maps?q=100+N+Houston+Lake+Blvd.+Ste.+V+Centerville%2C+GA+31028&output=embed"
                    title="Google Map"
                  ></iframe>
                </div>
              </div>
              <div className="">
                <dl className="text-md">
                  <dd>
                    <span className="icon mr-2 my-2 mdi-phone mdi"></span>
                    <a className="" href="tel:+14782259061">
                      (478) 225 9061
                    </a>
                  </dd>
                </dl>
                <dl className="text-md">
                  <dd>
                    <span className="icon mr-2 my-2 mdi mdi-email-outline"></span>
                    <a href="mailto:dynamic@dynamicrealtyga.com">dynamic@dynamicrealtyga.com</a>
                  </dd>
                </dl>
                <dl className="text-md">
                  <dd>
                    <span className="icon mr-2 my-2 mdi mdi-map-marker"></span>
                    <a href="https://maps.app.goo.gl/rqwVSiSpP4UMn5un7">
                      100 N Houston Lake Blvd. Centerville, GA 31028, United States
                    </a>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
          <div className="layout-bordered-main">
            <div className="layout-bordered-main-inner">
              <h2>Get in Touch</h2>
              <form
                className="rd-form rd-mailform"
                data-form-output="form-output-global"
                data-form-type="contact"
                method="post"
              >
                <div className="row row-20">
                  <div className="col-md-12">
                    <div className="form-wrap">
                      <input
                        className="form-input"
                        id="contact-name"
                        type="text"
                        name="name"
                        data-constraints="@Required"
                        placeholder="Your Name"
                      />
                    </div>
                  </div>
                  <div className="col-md-12">
                    <div className="form-wrap">
                      <input
                        className="form-input"
                        id="contact-email"
                        type="email"
                        name="email"
                        data-constraints="@Email @Required"
                        placeholder="Your Email Address"
                      />
                    </div>
                  </div>
                  <div className="col-md-12">
                    <div className="form-wrap">
                      <input
                        className="form-input"
                        id="contact-phone"
                        type="text"
                        name="phone"
                        placeholder="Your Phone Number"
                      />
                    </div>
                  </div>
                  <div className="col-md-12">
                    <div className="form-wrap">
                      <input
                        className="form-input"
                        id="subject"
                        type="text"
                        name="subject"
                        placeholder="Your subject"
                      />
                    </div>
                  </div>
                  <div className="col-12">
                    <div className="form-wrap">
                      <textarea
                        className="form-input"
                        id="contact-message"
                        name="message"
                        data-constraints="@Required"
                        placeholder="Your Message"
                      ></textarea>
                    </div>
                  </div>
                  <div className="col-md-12">
                    <button className="button button-sm button-primary" type="submit">
                      Send message
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
