import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

import { Navigation, Pagination } from "swiper/modules";
import { services } from "@/lib/mock/services";
import Image from "next/image";

const ServiceSection = () => {
  return (
    <section className="py-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div className="text-center mb-10">
        <h2 className="text-3xl font-bold">Our Services</h2>
        <p className="text-gray-700 max-w-xl mx-auto mt-4">
          Big enough to deliver fast, reliable service at competitive prices—
          small enough to treat every customer like family. We focus on comfort,
          efficiency, and long-term savings for your home or business.
        </p>
      </div>

      <Swiper
        modules={[Navigation, Pagination]}
        spaceBetween={30}
        slidesPerView={1}
        navigation
        loop={true}
        autoplay={{ delay: 100, disableOnInteraction: false }}
        pagination={{ clickable: true }}
        breakpoints={{
          640: { slidesPerView: 1 },
          768: { slidesPerView: 2 },
          1024: { slidesPerView: 3 },
        }}
      >
        {services.map((service, index) => (
          <SwiperSlide key={index}>
            <div className="flex my-5 flex-col items-center transition-transform duration-300 hover:scale-105">
              <Image
                width={300}
                height={300}
                className="w-[300px] rounded-xl shadow"
                src={service.image}
                alt={service.title}
              />
              <div className="rounded-xl py-5 px-3 bg-white w-[250px] mt-[-30px] z-10 relative shadow-md">
                <h2 className="font-bold text-lg mb-2">{service.title}</h2>
                <p className="text-sm text-gray-600">{service.shortDescription}</p>
              </div>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </section>
  );
};

export default ServiceSection;