export default function Header() {
  return (
    <header className="section page-header">
      <div className="rd-navbar-wrap">
        <nav
          className="rd-navbar rd-navbar-classic"
          data-layout="rd-navbar-fixed"
          data-sm-layout="rd-navbar-fixed"
          data-md-layout="rd-navbar-fixed"
          data-md-device-layout="rd-navbar-fixed"
          data-lg-layout="rd-navbar-static"
          data-lg-device-layout="rd-navbar-fixed"
          data-xl-layout="rd-navbar-static"
          data-xl-device-layout="rd-navbar-static"
          data-lg-stick-up-offset="46px"
          data-xl-stick-up-offset="46px"
          data-xxl-stick-up-offset="46px"
          data-lg-stick-up="true"
          data-xl-stick-up="true"
          data-xxl-stick-up="true"
        >
          <div className="rd-navbar-aside-outer">
            <div className="rd-navbar-aside">
              <div
                className="rd-navbar-collapse-toggle rd-navbar-fixed-element-1"
                data-rd-navbar-toggle=".rd-navbar-collapse"
              >
                <span></span>
              </div>
              <ul className="rd-navbar-aside-list rd-navbar-collapse">
                <li>
                  <div className="block-inline unit unit-spacing-xs align-items-center">
                    <div className="unit-left">
                      <span className="icon text-middle mdi mdi-phone"></span>
                    </div>
                    <div className="unit-body">
                      <a href="tel:#">(478) 225 9061</a>
                    </div>
                  </div>
                </li>
                <li>
                  <div className="block-inline unit unit-spacing-xs align-items-center">
                    <div className="unit-left">
                      <span className="icon text-middle mdi mdi-email-outline"></span>
                    </div>
                    <div className="unit-body">
                      <a href="mailto:#">dynamic@dynamicrealtyga.com</a>
                    </div>
                  </div>
                </li>
              </ul>
              <div className="rd-navbar-aside-item">
                <div className="block-inline">
                  <button
                    className="unit unit-spacing-xs align-items-center"
                    data-rd-navbar-toggle="#navbar-login-register"
                  >
                    <span className="unit-left">
                      <span className="icon text-middle mdi mdi-login"></span>
                    </span>
                    <span className="unit-body">
                      <span>Login</span>
                    </span>
                  </button>
                </div>
                <div className="rd-navbar-popup bg-gray-12" id="navbar-login-register">
                  <div className="tabs-custom tabs-horizontal tabs-line" id="navbar-tabs">
                    <ul className="nav nav-tabs">
                      <li className="nav-item" role="presentation">
                        <a className="nav-link active" href="#navbar-tabs-1" data-toggle="tab">
                          Login
                        </a>
                      </li>
                      <li className="nav-item" role="presentation">
                        <a className="nav-link" href="#navbar-tabs-2" data-toggle="tab">
                          Register
                        </a>
                      </li>
                    </ul>

                    <div className="tab-content">
                      <div className="tab-pane fade show active" id="navbar-tabs-1">
                        <form className="rd-form form-1">
                          <div className="form-wrap">
                            <input
                              className="form-input"
                              id="navbar-login-email"
                              type="email"
                              name="email"
                              data-constraints="@Email @Required"
                            />
                            <label className="form-label" htmlFor="navbar-login-email">
                              E-mail
                            </label>
                          </div>
                          <div className="form-wrap">
                            <input
                              className="form-input"
                              id="navbar-login-password"
                              type="password"
                              name="password"
                              data-constraints="@Required"
                            />
                            <label className="form-label" htmlFor="navbar-login-password">
                              Password
                            </label>
                          </div>
                          <div className="form-wrap">
                            <button className="button button-sm button-primary button-block" type="submit">
                              Sign in
                            </button>
                          </div>
                        </form>
                      </div>
                      <div className="tab-pane fade" id="navbar-tabs-2">
                        <form className="rd-form form-1">
                          <div className="form-wrap">
                            <input
                              className="form-input"
                              id="register-name"
                              type="text"
                              name="username"
                              data-constraints="@Required"
                            />
                            <label className="form-label" htmlFor="register-name">
                              Username
                            </label>
                          </div>
                          <div className="form-wrap">
                            <input
                              className="form-input"
                              id="register-email"
                              type="email"
                              name="email"
                              data-constraints="@Email @Required"
                            />
                            <label className="form-label" htmlFor="register-email">
                              E-mail
                            </label>
                          </div>
                          <div className="form-wrap">
                            <input
                              className="form-input"
                              id="register-password"
                              type="password"
                              name="password"
                              data-constraints="@Required"
                            />
                            <label className="form-label" htmlFor="register-password">
                              Password
                            </label>
                          </div>
                          <div className="form-wrap">
                            <input
                              className="form-input"
                              id="register-password-confirm"
                              type="password"
                              name="password"
                              data-constraints="@Required"
                            />
                            <label className="form-label" htmlFor="register-password-confirm">
                              Confirm Password
                            </label>
                          </div>
                          <div className="form-wrap">
                            <button className="button button-sm button-primary button-block" type="submit">
                              Create an Account
                            </button>
                          </div>
                          <div className="form-wrap">
                            <div className="text-decoration-lines">
                              <span className="text-decoration-lines-content">or enter with</span>
                            </div>
                          </div>
                          <div className="form-wrap">
                            <div className="button-group">
                              <a
                                className="button button-facebook button-icon button-icon-only"
                                href="#"
                                aria-label="Facebook"
                              >
                                <span className="icon mdi mdi mdi-facebook"></span>
                              </a>
                              <a
                                className="button button-twitter button-icon button-icon-only"
                                href="#"
                                aria-label="Twitter"
                              >
                                <span className="icon mdi mdi-twitter"></span>
                              </a>
                              <a
                                className="button button-google button-icon button-icon-only"
                                href="#"
                                aria-label="Google+"
                              >
                                <span className="icon mdi mdi-google"></span>
                              </a>
                            </div>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="rd-navbar-main-outer">
            <div className="rd-navbar-main">
              <div className="rd-navbar-panel">
                <button className="rd-navbar-toggle" data-rd-navbar-toggle=".rd-navbar-nav-wrap">
                  <span></span>
                </button>

                <div className="rd-navbar-brand lg:flex lg:flex-col lg:items-center">
                  <a className="brand" href="index.html">
                    <img
                      className="brand-logo-dark"
                      src="images/logo-default-142x41.png"
                      alt=""
                      width="142"
                      height="41"
                      srcSet="images/logo-default-284x82.png 2x"
                    />
                    <img
                      className="brand-logo-light"
                      src="images/logo-inverse-121x61.png"
                      alt=""
                      width="121"
                      height="61"
                      srcSet="images/logo-inverse-284x82.png 2x"
                    />
                  </a>
                  <h3 className="text-colorHeaderText! font-montserrat! font-semibold! hidden lg:inline">
                    Dynamic Realty
                  </h3>
                </div>
              </div>
              <div className="rd-navbar-nav-wrap">
                <ul className="rd-navbar-nav">
                  <li className="rd-nav-item active">
                    <a className="rd-nav-link" href="index.html">
                      HOME
                    </a>
                  </li>
                  <li className="rd-nav-item">
                    <a className="rd-nav-link" href="index.html">
                      RENTAL PORTAL
                    </a>
                  </li>
                  <li className="rd-nav-item">
                    <a className="rd-nav-link" href="index.html">
                      LISTINGS FOR SALE
                    </a>
                  </li>
                  <li className="rd-nav-item">
                    <a className="rd-nav-link" href="index.html">
                      LISTINGS FOR RENT
                    </a>
                  </li>
                  <li className="rd-nav-item">
                    <a className="rd-nav-link" href="index.html">
                      BLOGS
                    </a>
                  </li>
                  {/* <li className="rd-nav-item">
                    <a className="rd-nav-link" href="#">
                      Properties
                    </a>

                    <ul className="rd-menu rd-navbar-dropdown">
                      <li className="rd-dropdown-item">
                        <a className="rd-dropdown-link" href="properties-grid.html">
                          Properties Grid
                        </a>
                      </li>
                      <li className="rd-dropdown-item">
                        <a className="rd-dropdown-link" href="properties-grid-2.html">
                          Properties Grid 2
                        </a>
                      </li>
                      <li className="rd-dropdown-item">
                        <a className="rd-dropdown-link" href="properties-list.html">
                          Properties List
                        </a>
                      </li>
                      <li className="rd-dropdown-item">
                        <a className="rd-dropdown-link" href="submit-property.html">
                          Submit property
                        </a>
                      </li>
                      <li className="rd-dropdown-item">
                        <a className="rd-dropdown-link" href="single-property.html">
                          Single Property
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li className="rd-nav-item">
                    <a className="rd-nav-link" href="about-us.html">
                      About Us
                    </a>
                  </li>
                  <li className="rd-nav-item">
                    <a className="rd-nav-link" href="blog.html">
                      Blog
                    </a>

                    <ul className="rd-menu rd-navbar-dropdown">
                      <li className="rd-dropdown-item">
                        <a className="rd-dropdown-link" href="blog-post.html">
                          Blog post
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li className="rd-nav-item">
                    <a className="rd-nav-link" href="#">
                      Pages
                    </a>

                    <ul className="rd-menu rd-navbar-megamenu">
                      <li className="rd-megamenu-item">
                        <h6 className="rd-megamenu-title">Pages 1</h6>
                        <ul className="rd-megamenu-list">
                          <li className="rd-megamenu-list-item">
                            <a className="rd-megamenu-list-link" href="agents.html">
                              Agents
                            </a>
                          </li>
                          <li className="rd-megamenu-list-item">
                            <a className="rd-megamenu-list-link" href="agent-single-page.html">
                              Agent Single Page
                            </a>
                          </li>
                          <li className="rd-megamenu-list-item">
                            <a className="rd-megamenu-list-link" href="careers.html">
                              Careers
                            </a>
                          </li>
                          <li className="rd-megamenu-list-item">
                            <a className="rd-megamenu-list-link" href="gallery.html">
                              Gallery
                            </a>
                          </li>
                        </ul>
                      </li>
                      <li className="rd-megamenu-item">
                        <h6 className="rd-megamenu-title">Pages 2</h6>
                        <ul className="rd-megamenu-list">
                          <li className="rd-megamenu-list-item">
                            <a className="rd-megamenu-list-link" href="search-results.html">
                              Search results
                            </a>
                          </li>
                          <li className="rd-megamenu-list-item">
                            <a className="rd-megamenu-list-link" href="coming-soon.html">
                              Coming Soon
                            </a>
                          </li>
                          <li className="rd-megamenu-list-item">
                            <a className="rd-megamenu-list-link" href="404.html">
                              404
                            </a>
                          </li>
                          <li className="rd-megamenu-list-item">
                            <a className="rd-megamenu-list-link" href="privacy-policy.html">
                              Privacy Policy
                            </a>
                          </li>
                        </ul>
                      </li>
                      <li className="rd-megamenu-item">
                        <h6 className="rd-megamenu-title">Elements</h6>
                        <ul className="rd-megamenu-list">
                          <li className="rd-megamenu-list-item">
                            <a className="rd-megamenu-list-link" href="typography.html">
                              Typography
                            </a>
                          </li>
                          <li className="rd-megamenu-list-item">
                            <a className="rd-megamenu-list-link" href="buttons.html">
                              Buttons
                            </a>
                          </li>
                          <li className="rd-megamenu-list-item">
                            <a className="rd-megamenu-list-link" href="forms.html">
                              Forms
                            </a>
                          </li>
                          <li className="rd-megamenu-list-item">
                            <a className="rd-megamenu-list-link" href="tabs-and-accordions.html">
                              Tabs and accordions
                            </a>
                          </li>
                          <li className="rd-megamenu-list-item">
                            <a className="rd-megamenu-list-link" href="progress-bars.html">
                              Progress bars
                            </a>
                          </li>
                          <li className="rd-megamenu-list-item">
                            <a className="rd-megamenu-list-link" href="tables.html">
                              Tables
                            </a>
                          </li>
                          <li className="rd-megamenu-list-item">
                            <a className="rd-megamenu-list-link" href="grid-system.html">
                              Grid System
                            </a>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  <li className="rd-nav-item">
                    <a className="rd-nav-link" href="contact-us.html">
                      Contact Us
                    </a>
                  </li> */}
                </ul>
                <div className="rd-navbar-main-item">
                  <a className="button button-sm button-primary" href="#">
                    BOOK APPOINTMENT
                  </a>
                </div>
              </div>
            </div>
          </div>
        </nav>
      </div>
    </header>
  );
}