import { HeaderDropdown, HeaderDropdownGroup, HeaderDropdownMenu } from "./HeaderDropdown";
import HeaderFeaturedHomes from "./HeaderFeaturedHomes";

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">(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">dynamic@dynamicrealtyga.com</a>
                    </div>
                  </div>
                </li>
              </ul>
              <div className="rd-navbar-aside-item hidden lg:block">
                <div className="block-inline">
                  <div className="unit unit-spacing-xs align-items-center">
                    <span className="unit-left">
                      <span className="icon text-middle mdi mdi-login"></span>
                    </span>
                    <span className="unit-body">
                      <a href="/admin/login">Login</a>
                    </span>
                  </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">
                  <a className="brand" href="/">
                    <img
                      className="brand-logo-dark"
                      // src="images/logo-default-142x41.png"
                      src="/images/logo2.png"
                      alt=""
                      width="142"
                      height="41"
                      srcSet="/images/logo2.png 2x"
                    />
                    <img
                      className="brand-logo-light"
                      // src="images/logo-inverse-121x61.png"\
                      src="/images/logo2.png"
                      alt=""
                      width="121"
                      height="61"
                      srcSet="images/logo2.png 2x"
                    />
                  </a>
                </div>
              </div>
              <div className="rd-navbar-nav-wrap">
                <ul className="rd-navbar-nav">
                  <li className="rd-nav-item">
                    <a className="rd-nav-link rd-nav-link-custom" href="#">
                      Buying / Selling
                    </a>
                    <HeaderDropdown>
                      <HeaderDropdownGroup>
                        <div className="pr-2">
                          <form>
                            <div className="form-wrap">
                              <input type="text" id="search" className="form-input" />
                              <label className="form-label" htmlFor="search">
                                Search
                              </label>
                            </div>
                          </form>
                        </div>
                        <div className="mt-2">
                          <HeaderFeaturedHomes />
                        </div>
                      </HeaderDropdownGroup>
                      <HeaderDropdownGroup title="Why Dynamic?">
                        <HeaderDropdownMenu
                          list={[
                            {
                              title:
                                "Committed to providing a personalized structure to each client, with on-site management & a robust property management",
                            },
                            {
                              title:
                                "We strive to provide a service that meets the needs of all our customers & are proud to have been helping people with their real estate needs for the past 20 years",
                            },
                            {
                              title:
                                "We understand the real estate sector inside out & are committed to providing a professional service to our clients. We strive to make the process of reaching your real estate goals as easy & stress-free as possible",
                            },
                          ]}
                        />
                      </HeaderDropdownGroup>
                      <HeaderDropdownGroup title="Future Owners">
                        <HeaderDropdownMenu
                          list={[
                            {
                              title: "Moving In",
                              child: [
                                {
                                  title: "What To Be Done Prior",
                                  href: "#",
                                },
                                {
                                  title: "Next Steps (keys, utilities, etc)",
                                  href: "#",
                                },
                                {
                                  title: "Common Questions",
                                  href: "#",
                                },
                              ],
                            },
                            {
                              title: "Welcome home",
                              child: [
                                {
                                  title: "Payment",
                                  href: "#",
                                },
                                {
                                  title: "Utilities",
                                  href: "#",
                                },
                                {
                                  title: "Maintenance",
                                  href: "#",
                                },
                              ],
                            },
                            {
                              title: "Moving Out",
                              child: [
                                {
                                  title: "What To Be Done Prior",
                                  href: "#",
                                },
                                {
                                  title: "Next Steps (keys, utilities, etc)",
                                  href: "#",
                                },
                                {
                                  title: "Common Questions",
                                  href: "#",
                                },
                              ],
                            },
                          ]}
                        />
                      </HeaderDropdownGroup>
                      <HeaderDropdownGroup className="flex! pr-4!">
                        <div className="flex flex-col self-end!">
                          <a className="button button-secondary" href="/">
                            FAQ
                          </a>
                          <a className="button button-primary mt-2!" href="/">
                            LOOKING FOR SELL
                          </a>
                        </div>
                      </HeaderDropdownGroup>
                    </HeaderDropdown>
                  </li>
                  <li className="rd-nav-item">
                    <a className="rd-nav-link rd-nav-link-custom" href="#">
                      Leasing
                    </a>
                    <HeaderDropdown>
                      <HeaderDropdownGroup>
                        <div className="pr-2">
                          <form>
                            <div className="form-wrap">
                              <input type="text" id="search" className="form-input" />
                              <label className="form-label" htmlFor="search">
                                Search
                              </label>
                            </div>
                          </form>
                        </div>
                        <div className="mt-2">
                          <HeaderFeaturedHomes />
                        </div>
                      </HeaderDropdownGroup>
                      <HeaderDropdownGroup title="Future Residents">
                        <HeaderDropdownMenu
                          list={[
                            {
                              title: "Our Rentals",
                              href: "#",
                            },
                            {
                              title: "Application Process",
                              child: [
                                {
                                  title: "Before You Apply",
                                  href: "#",
                                },
                                {
                                  title: "Rental Criteria",
                                  href: "#",
                                },
                                {
                                  title: "Before You Apply",
                                  href: "#",
                                },
                              ],
                            },
                          ]}
                        />
                      </HeaderDropdownGroup>
                      <HeaderDropdownGroup title="Current Residents">
                        <HeaderDropdownMenu
                          list={[
                            {
                              title: "Moving In",
                              child: [
                                {
                                  title: "What To Be Done Prior",
                                  href: "#",
                                },
                                {
                                  title: "Next Steps (keys, utilities, etc)",
                                  href: "#",
                                },
                                {
                                  title: "Common Questions",
                                  href: "#",
                                },
                              ],
                            },
                            {
                              title: "Welcome home",
                              child: [
                                {
                                  title: "Payment",
                                  href: "#",
                                },
                                {
                                  title: "Utilities",
                                  href: "#",
                                },
                                {
                                  title: "Maintenance",
                                  href: "#",
                                },
                              ],
                            },
                            {
                              title: "Moving Out",
                              child: [
                                {
                                  title: "What To Be Done Prior",
                                  href: "#",
                                },
                                {
                                  title: "Next Steps (keys, utilities, etc)",
                                  href: "#",
                                },
                                {
                                  title: "Common Questions",
                                  href: "#",
                                },
                              ],
                            },
                          ]}
                        />
                      </HeaderDropdownGroup>
                      <HeaderDropdownGroup className="flex! pr-4!">
                        <div className="flex flex-col self-end!">
                          <a className="button button-secondary" href="#">
                            FAQ
                          </a>
                          <a className="button button-primary mt-2!" href="#">
                            APPLY NOW
                          </a>
                        </div>
                      </HeaderDropdownGroup>
                    </HeaderDropdown>
                  </li>
                  <li className="rd-nav-item">
                    <a className={`rd-nav-link rd-nav-link-custom`} href="/blog">
                      Resources
                    </a>
                  </li>
                  <li className="rd-nav-item block lg:hidden!">
                    <a className="rd-nav-link rd-nav-link-custom" href="/login">
                      Login
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </nav>
      </div>
    </header>
  );
}