"use client";
import { Autoplay, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import Link from "next/link";
import "swiper/css";
import "swiper/css/pagination";

export default function Hero() {
  const swiperOptions = {
    slidesPerView: 1,
    loop: true,
    speed: 4000,
    freeMode: true,
    autoplay: {
      delay: 0,
      disableOnInteraction: false,
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    modules: [Autoplay, Pagination],
  };

  const slides = [
    {
      id: 1,
      image: "/assets/img/cta-bg.jpg",
      title: " Transforming Coconut Processing with",
      subtitle: "End-to-End Solutions",
      text: " From deshelling to coconut drying - we engineer smart, efficient, and scalable coconut processing machinery tailored to your needs.",
    },
    {
      id: 2,
      image: "/assets/img/cta-bg.jpg",
      title: " Transforming Coconut Processing with",
      subtitle: "End-to-End Solutions",
      text: " From deshelling to coconut drying - we engineer smart, efficient, and scalable coconut processing machinery tailored to your needs.",
    },
    {
      id: 3,
      image: "/assets/img/cta-bg.jpg",
      title: " Transforming Coconut Processing with",
      subtitle: "End-to-End Solutions",
      text: " From deshelling to coconut drying - we engineer smart, efficient, and scalable coconut processing machinery tailored to your needs.",
    },
  ];

  return (
    <Swiper {...swiperOptions} className="hero-swiper">
      {slides.map((slide) => (
        <SwiperSlide key={slide.id}>
          <section
            className="hero-section hero-1"
            style={{ backgroundImage: `url(${slide.image})` }}
          >
            <div className="container-fluid">
              <div className="row">
                <div className="col-lg-12">
                  <div className="hero-content">
                    <h1 className="splt-txt">
                      <span className="break-line">{slide.title}</span>
                      <span className="break-line">{slide.subtitle}</span>
                    </h1>
                    <p>{slide.text}</p>
                    <div className="hero-button">
                      <Link href="/about" className="theme-btn bg-white">
                        Get A Quote 
                        <i className="fa-regular fa-arrow-right"></i>
                      </Link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </SwiperSlide>
      ))}
      <div className="swiper-pagination"></div>
    </Swiper>
  );
}