"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: 1000,
    freeMode: true,
    autoplay: {
      delay: 4000,
      disableOnInteraction: false,
    },
    pagination: {
      el: "bullets",
      clickable: true,
    },
    modules: [Autoplay, Pagination],
  };

  const slides = [
    {
      id: 1,
      image: "/assets/img/cta-bg.jpg",
      title: "Smart Coconut",
      subtitle: "Solutions",
      text: "Efficient machines for deshelling to drying coconut.",
      buttonText: "Get A Quote",
      buttonLink: "/about",
    },
    {
      id: 2,
      image: "/assets/img/cta-bg.jpg",
      title: "Future-Ready",
      subtitle: "Engineering",
      text: "Automation and precision for coconut processing plants.",
      buttonText: "Discover Our Innovations",
      buttonLink: "/about",
    },
    {
      id: 3,
      image: "/assets/img/cta-bg.jpg",
      title: "Global Processing",
      subtitle: "Impact",
      text: "Trusted coconut machinery in 20+ countries worldwide.",
      buttonText: "Explore Global Projects",
      buttonLink: "/about",
    },
  ];

  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={slide.buttonLink} className="theme-btn bg-white">
                        {slide.buttonText}
                        <i className="fa-regular fa-arrow-right"></i>
                      </Link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </section>
        </SwiperSlide>
      ))}
      <div className="swiper-pagination"></div>
    </Swiper>
  );
}