export default function ContactFormBox() {
  return (
    <div className="lg:w-1/3 box-1-cell height-fill context-dark bg-colorContactForm/80! z-20!">
      <div className="box-1-bg-shape">
        <img className="box-1-bg-image" src="images/bg-shape-1.png" alt="" role="presentation" />
      </div>
      <div className="cell-inner box-1-outer">
        <div className="box-1">
          <h2>Get in Touch with Us Today!</h2>
          <form className="rd-form">
            <div className="row row-x-20 row-20">
              <div className="col-sm-6 col-lg-12 col-xl-6">
                <div className="form-wrap form-wrap-validation">
                  <input className="form-input" placeholder="First Name" name="first_name" />
                </div>
              </div>
              <div className="col-sm-6 col-lg-12 col-xl-6">
                <div className="form-wrap form-wrap-validation">
                  <input className="form-input" placeholder="Last Name" name="last_name" />
                </div>
              </div>
              <div className="col-sm-6 col-lg-12 col-xl-6">
                <div className="form-wrap form-wrap-validation">
                  <input type="email" className="form-input" placeholder="E-Mail" name="email" />
                </div>
              </div>
              <div className="col-sm-6 col-lg-12 col-xl-6">
                <div className="form-wrap form-wrap-validation">
                  <input className="form-input" placeholder="Phone Number" name="phone" />
                </div>
              </div>
              <div className="col-sm-12 col-lg-12 col-xl-12">
                <div className="form-wrap form-wrap-validation">
                  <select
                    className="form-input select-filter"
                    name="interest"
                    data-style="modern"
                    data-classname="select-dropdown-context-dark"
                    data-placeholder="I'm interested in"
                    data-minimum-results-for-search="Infinity"
                    data-constraints="@Required"
                  >
                    <option label="placeholder"></option>
                    <option value="2">Buying</option>
                    <option value="3">Selling</option>
                    <option value="4">Renting</option>
                  </select>
                  <span className="select-arrow"></span>
                </div>
              </div>
              <div className="col-sm-12 col-lg-12 col-xl-12">
                <div className="form-wrap form-wrap-validation">
                  <textarea className="form-input" placeholder="Questions/Comments" name="question"></textarea>
                </div>
              </div>
              <div className="col-sm-6 col-lg-12 col-xl-6">
                <a className="button button-primary-outline min-w-[150px]" href="search-results.html">
                  Send
                </a>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}
