"use client";

import { Swiper, SwiperSlide } from "swiper/react";
import ContactFormBox from "./ContactFormBox";
import { Autoplay } from "swiper/modules";

export default function Hero() {
  return (
    <section className="section flex! flex-row! justify-end! relative!">
      <Swiper
        className="absolute w-full h-full"
        modules={[Autoplay]}
        spaceBetween={50}
        slidesPerView={1}
        onSlideChange={() => console.log("slide change")}
        onSwiper={(swiper) => console.log(swiper)}
        autoplay={{ delay: 4000 }}
        loop
      >
        <SwiperSlide className="bg-[url(/images/bg-header2.webp)]">
          <section className="section section-lg text-colorText2! bg-colorExt5/50 w-full h-full">
            <div className="container">
              <div className="row">
                <div className="col-8 text-wrap">
                  <div className="text-8xl!">Real Estate, Refined</div>
                  <div className="text-5xl! mt-12">Where Southern Charm Meets Boutique Real Estate</div>
                </div>
              </div>
            </div>
          </section>
        </SwiperSlide>
        <SwiperSlide className="bg-[url(/images/bg-header3.webp)]">
          <section className="section section-lg text-colorText2! bg-colorExt5/50 w-full h-full">
            <div className="container">
              <div className="row">
                <div className="col-8 text-wrap">
                  <div className="text-8xl!">Your Vision, Our Expertise</div>
                  <div className="text-5xl! mt-12">Discover a Smarter Way to Buy & Sell</div>
                </div>
              </div>
            </div>
          </section>
        </SwiperSlide>
      </Swiper>

      <ContactFormBox />
    </section>
  );
}
