import GoogleReviewBox from "@/components/GoogleReviewBox";
import Hero from "@/components/Hero";
import Link from "next/link";

export default function Home() {
  return (
    <>
      <Hero />

      <section className="section section-lg bg-default">
        <div className="container">
          <div className="row row-30">
            <div className="col-md-6 col-lg-3">
              <Link href="/">
                <article className="box-modern">
                  <span className="icon box-modern-icon fl-bigmug-line-search74"></span>
                  <div className="box-modern-main">
                    <h4 className="box-modern-title">Buy</h4>
                    <p>
                      Discover a wide selection of properties available for purchase in prime locations at competitive
                      prices.
                    </p>
                  </div>
                </article>
              </Link>
            </div>
            <div className="col-md-6 col-lg-3">
              <Link href="/">
                <article className="box-modern">
                  <span className="icon box-modern-icon fl-bigmug-line-label25"></span>
                  <div className="box-modern-main">
                    <h4 className="box-modern-title">Sell</h4>
                    <p>
                      List your property with ease and reach potential buyers quickly with our expert marketing support.
                    </p>
                  </div>
                </article>
              </Link>
            </div>
            <div className="col-md-6 col-lg-3">
              <Link href="/">
                <article className="box-modern">
                  <span className="icon box-modern-icon fl-bigmug-line-timer35"></span>
                  <div className="box-modern-main">
                    <h4 className="box-modern-title">Rent</h4>
                    <p>Find the perfect rental home or apartment with flexible lease terms and no hidden fees.</p>
                  </div>
                </article>
              </Link>
            </div>
            <div className="col-md-6 col-lg-3">
              <Link href="/">
                <article className="box-modern">
                  <span className="icon box-modern-icon fl-bigmug-line-big104"></span>
                  <div className="box-modern-main">
                    <h4 className="box-modern-title">Need Help?</h4>
                    <p>
                      Have questions? Our support team is here to guide you through every step of your real estate
                      journey.
                    </p>
                  </div>
                </article>
              </Link>
            </div>
          </div>
        </div>
      </section>

      <section className="section bg-[url(/images/bg-header.webp)]">
        <div className="box-1-cell height-fill context-dark bg-colorHeader/80!">
          <div className="cell-inner box-1-outer">
            <div className="box-1">
              <div className="text-center">
                <h2>Experience the Difference in Every Key Turn</h2>
              </div>
              <div className="mt-4 text-lg">
                <p>
                  Dynamic Realty is a full-service veteran-owned real estate company based in Centerville, GA,
                  established in 2004. Our services include buying & selling, rentals, & property management. We are
                  committed to providing a personalized structure to each client, with on-site management & a robust
                  property management division. 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.
                </p>
                <p>
                  At Dynamic Realty, we offer a comprehensive range of realty services to meet the needs of our
                  customers in Central Georgia. Our services include buying & selling, renting, & property management.
                  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. Get in touch with us today to find out more.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <GoogleReviewBox />

      <section className="section section-lg bg-gray-12">
        <div className="container">
          <div className="layout-4">
            <h2 className="heading-decoration-1">
              <span className="heading-inner">Featured Properties</span>
            </h2>
            <div className="layout-4-item">
              <ul className="list-inline-bordered heading-7">
                <li>
                  <a href="#">For Rent</a>
                </li>
                <li>
                  <a href="#">For Sale</a>
                </li>
              </ul>
            </div>
          </div>
          <div className="row row-50">
            <div className="col-md-6 col-lg-4">
              <article className="product-classic">
                <div className="product-classic-media">
                  <div
                    className="owl-carousel"
                    data-items="1"
                    data-nav="true"
                    data-stage-padding="0"
                    data-loop="false"
                    data-margin="0"
                    data-mouse-drag="false"
                  >
                    <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                    <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                    <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                    <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                  </div>
                  <div className="product-classic-price">
                    <span>$5000\mo</span>
                  </div>
                </div>
                <h4 className="product-classic-title">
                  <a href="single-property.html">401 Biscayne Boulevard, Miami</a>
                </h4>
                <div className="product-classic-divider"></div>
                <ul className="product-classic-list">
                  <li>
                    <span className="icon mdi mdi-vector-square"></span>
                    <span>480 Sq Ft</span>
                  </li>
                  <li>
                    <span className="icon hotel-icon-10"></span>
                    <span>2 Bathrooms</span>
                  </li>
                  <li>
                    <span className="icon hotel-icon-05"></span>
                    <span>2 Bedrooms</span>
                  </li>
                  <li>
                    <span className="icon hotel-icon-26"></span>
                    <span>1 Garage</span>
                  </li>
                </ul>
              </article>
            </div>
            <div className="col-md-6 col-lg-4">
              <article className="product-classic">
                <div className="product-classic-media">
                  <div
                    className="owl-carousel"
                    data-items="1"
                    data-nav="true"
                    data-stage-padding="0"
                    data-loop="false"
                    data-margin="0"
                    data-mouse-drag="false"
                  >
                    <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                    <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                    <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                    <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                  </div>
                  <div className="product-classic-price">
                    <span>$2500\mo</span>
                  </div>
                </div>
                <h4 className="product-classic-title">
                  <a href="single-property.html">923 Folsom St, San Francisco</a>
                </h4>
                <div className="product-classic-divider"></div>
                <ul className="product-classic-list">
                  <li>
                    <span className="icon mdi mdi-vector-square"></span>
                    <span>535 Sq Ft</span>
                  </li>
                  <li>
                    <span className="icon hotel-icon-10"></span>
                    <span>2 Bathrooms</span>
                  </li>
                  <li>
                    <span className="icon hotel-icon-05"></span>
                    <span>3 Bedrooms</span>
                  </li>
                  <li>
                    <span className="icon hotel-icon-26"></span>
                    <span>1 Garage</span>
                  </li>
                </ul>
              </article>
            </div>
            <div className="col-md-6 col-lg-4">
              <article className="product-classic">
                <div className="product-classic-media">
                  <div
                    className="owl-carousel"
                    data-items="1"
                    data-nav="true"
                    data-stage-padding="0"
                    data-loop="false"
                    data-margin="0"
                    data-mouse-drag="false"
                  >
                    <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                    <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                    <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                    <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                  </div>
                  <div className="product-classic-price">
                    <span>9340\mo</span>
                  </div>
                </div>
                <h4 className="product-classic-title">
                  <a href="single-property.html">225 Maywood Dr, San Francisco</a>
                </h4>
                <div className="product-classic-divider"></div>
                <ul className="product-classic-list">
                  <li>
                    <span className="icon mdi mdi-vector-square"></span>
                    <span>435 Sq Ft</span>
                  </li>
                  <li>
                    <span className="icon hotel-icon-10"></span>
                    <span>1 Bathroom</span>
                  </li>
                  <li>
                    <span className="icon hotel-icon-05"></span>
                    <span>1 Bedroom</span>
                  </li>
                  <li>
                    <span className="icon hotel-icon-26"></span>
                    <span>1 Garage</span>
                  </li>
                </ul>
              </article>
            </div>
            <div className="col-md-6 col-lg-4">
              <article className="product-classic">
                <div className="product-classic-media">
                  <div
                    className="owl-carousel"
                    data-items="1"
                    data-nav="true"
                    data-stage-padding="0"
                    data-loop="false"
                    data-margin="0"
                    data-mouse-drag="false"
                  >
                    <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                    <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                    <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                    <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                  </div>
                  <div className="product-classic-price">
                    <span>$5550\mo</span>
                  </div>
                </div>
                <h4 className="product-classic-title">
                  <a href="single-property.html">35 Pond St, New York</a>
                </h4>
                <div className="product-classic-divider"></div>
                <ul className="product-classic-list">
                  <li>
                    <span className="icon mdi mdi-vector-square"></span>
                    <span>430 Sq Ft</span>
                  </li>
                  <li>
                    <span className="icon hotel-icon-10"></span>
                    <span>2 Bathrooms</span>
                  </li>
                  <li>
                    <span className="icon hotel-icon-05"></span>
                    <span>3 Bedrooms</span>
                  </li>
                  <li>
                    <span className="icon hotel-icon-26"></span>
                    <span>1 Garage</span>
                  </li>
                </ul>
              </article>
            </div>
            <div className="col-md-6 col-lg-4">
              <article className="product-classic">
                <div className="product-classic-media">
                  <div
                    className="owl-carousel"
                    data-items="1"
                    data-nav="true"
                    data-stage-padding="0"
                    data-loop="false"
                    data-margin="0"
                    data-mouse-drag="false"
                  >
                    <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                    <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                    <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                    <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                  </div>
                  <div className="product-classic-price">
                    <span>$2520\mo</span>
                  </div>
                </div>
                <h4 className="product-classic-title">
                  <a href="single-property.html">182 3rd St, Seattle</a>
                </h4>
                <div className="product-classic-divider"></div>
                <ul className="product-classic-list">
                  <li>
                    <span className="icon mdi mdi-vector-square"></span>
                    <span>630 Sq Ft</span>
                  </li>
                  <li>
                    <span className="icon hotel-icon-10"></span>
                    <span>3 Bathrooms</span>
                  </li>
                  <li>
                    <span className="icon hotel-icon-05"></span>
                    <span>3 Bedrooms</span>
                  </li>
                  <li>
                    <span className="icon hotel-icon-26"></span>
                    <span>2 Garages</span>
                  </li>
                </ul>
              </article>
            </div>
            <div className="col-md-6 col-lg-4">
              <article className="product-classic">
                <div className="product-classic-media">
                  <div
                    className="owl-carousel"
                    data-items="1"
                    data-nav="true"
                    data-stage-padding="0"
                    data-loop="false"
                    data-margin="0"
                    data-mouse-drag="false"
                  >
                    <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                    <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                    <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                    <img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
                  </div>
                  <div className="product-classic-price">
                    <span>$5000\mo</span>
                  </div>
                </div>
                <h4 className="product-classic-title">
                  <a href="single-property.html">623 Willow Rd, Dallas</a>
                </h4>
                <div className="product-classic-divider"></div>
                <ul className="product-classic-list">
                  <li>
                    <span className="icon mdi mdi-vector-square"></span>
                    <span>530 Sq Ft</span>
                  </li>
                  <li>
                    <span className="icon hotel-icon-10"></span>
                    <span>2 Bathrooms</span>
                  </li>
                  <li>
                    <span className="icon hotel-icon-05"></span>
                    <span>2 Bedrooms</span>
                  </li>
                  <li>
                    <span className="icon hotel-icon-26"></span>
                    <span>2 Garages</span>
                  </li>
                </ul>
              </article>
            </div>
            <div className="col-12 text-center">
              <a className="button button-primary" href="/">
                View all properties
              </a>
            </div>
          </div>
        </div>
      </section>

      <section className="section parallax-container" data-parallax-img="images/bg-02-1920x916.jpg">
        <div className="parallax-content section-lg context-dark text-center">
          <div className="container">
            <div className="row row-30">
              <div className="col-6 col-md-3">
                <article className="box-counter">
                  <div className="box-counter-main">
                    <span>860</span>
                  </div>
                  <p className="box-counter-title">Properties on Map</p>
                </article>
              </div>
              <div className="col-6 col-md-3">
                <article className="box-counter">
                  <div className="box-counter-main">
                    <div className="counter">29</div>
                  </div>
                  <p className="box-counter-title">Professional Agents</p>
                </article>
              </div>
              <div className="col-6 col-md-3">
                <article className="box-counter">
                  <div className="box-counter-main">
                    <div className="counter">10</div>
                    <span>k</span>
                  </div>
                  <p className="box-counter-title">Happy Clients</p>
                </article>
              </div>
              <div className="col-6 col-md-3">
                <article className="box-counter">
                  <div className="box-counter-main">
                    <div className="counter">15</div>
                  </div>
                  <p className="box-counter-title">New Apartments Daily</p>
                </article>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section section-lg bg-default">
        <div className="container">
          <h2 className="heading-decoration-1">
            <span className="heading-inner">Find Us</span>
          </h2>
          <div className="row row-30">
            <div className="col-12">
              <iframe
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3360.4823498818855!2d-83.68565822483802!3d32.61997607372962!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88f3e6ce99781991%3A0xabfd803ad30f6d12!2s100%20N%20Houston%20Lake%20Blvd%2C%20Centerville%2C%20GA%2031028%2C%20USA!5e0!3m2!1sen!2sid!4v1744883077476!5m2!1sen!2sid"
                width={"100%"}
                height={450}
                style={{ border: 0 }}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
              />
            </div>
          </div>
        </div>
      </section>
    </>
  );
}
