"use client";

import Image from "next/image";
import { useState } from "react";
import { Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

type HeroSlideItem = {
  title: string;
  description: string;
  img: string;
};

export default function HeroSlider() {
  const [slideItems] = useState<HeroSlideItem[]>([
    {
      title: "Full-Service Veteran-Owned Real Estate Company",
      description:
        "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 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.",
      img: "/images/bg-header4.jpg",
    },
    {
      title: "Comprehensive Range of Realty Services",
      description:
        "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.",
      img: "/images/bg-header5.jpg",
    },
  ]);

  return (
    <section className="section flex! flex-row! justify-end! relative! min-h-[900px]! lg:min-h-[600px]!">
      <Swiper
        className="absolute w-full h-full"
        modules={[Autoplay]}
        spaceBetween={50}
        slidesPerView={1}
        autoplay={{ delay: 10000 }}
        loop
      >
        {slideItems.map((slide, idx) => (
          <SwiperSlide key={idx}>
            <Image
              alt={slide.title}
              src={slide.img}
              quality={100}
              fill
              sizes="100vw"
              style={{
                objectFit: "cover",
              }}
            />
            <section className="section section-lg text-colorText2! bg-colorHeroOverlay/85 w-full h-full z-20">
              <div className="container">
                <div className="row">
                  <div className="col-12 col-lg-4 flex justify-center">
                    <div className="w-[200px] h-[200px] relative mb-4 lg:hidden">
                      <Image alt="Logo" src={"/images/logo1.png"} quality={100} fill />
                    </div>
                    <div className="w-[300px] h-[300px] relative mb-4 hidden lg:block">
                      <Image alt="Logo" src={"/images/logo1.png"} quality={100} fill />
                    </div>
                  </div>
                  <div className="col-12 col-lg-8 text-wrap space-y-5 md:space-y-8 lg:space-y-12">
                    <div className="text-4xl lg:text-6xl! font-playfairdisplay text-center! lg:text-left!">
                      {slide.title}
                    </div>
                    <div className="text-lg lg:text-xl! font-montserrat text-center! lg:text-left!">
                      {slide.description}
                    </div>
                    {/* <div className="context-dark flex flex-row justify-center lg:hidden">
                      <button onClick={onClickBook} className="button button-xs button-primary-outline">
                        BOOK APPOINTMENT
                      </button>
                    </div> */}
                    <div className="context-dark flex flex-row justify-center lg:hidden">
                      <a href="tel:(478) 225 9061" className="button button-xs button-primary-outline">
                        Call Us
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </SwiperSlide>
        ))}
      </Swiper>

      {/* <ContactFormBox /> */}
    </section>
  );
}