"use client"

import { useEffect } from "react"
import Swiper from "swiper"
import { Pagination, Autoplay, FreeMode } from "swiper/modules"

import "swiper/css"
import "swiper/css/pagination"

export default function Trades() {

  useEffect(() => {
    const swiper = new Swiper(".tradesSwiper", {
      modules: [Pagination, Autoplay, FreeMode],

      loop: true,
      slidesPerView: 3,
      spaceBetween: 25,
      speed: 1500,

      autoplay: {
        delay: 0,
        disableOnInteraction: false,
      },

      freeMode: true,
      freeModeMomentum: false,

      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },

      breakpoints: {
        0: { slidesPerView: 1 },
        768: { slidesPerView: 2 },
        1024: { slidesPerView: 3 }
      }
    })

    return () => swiper.destroy() // cleanup
  }, [])

  return (
    <section className="trades-section">
      <div className="container">

        <div className="trades-top">
          <div>
            <span className="tag">Meet Our Trades</span>
            <h2>
              HouseCoin's specialized capabilities are <br />
              driven by <span>expert craftsmen.</span>
            </h2>
          </div>
          <a href="#" className="btn-primary-custom">Explore All Trades</a>
        </div>

        <div className="swiper tradesSwiper">
          <div className="swiper-wrapper">

            {[
              {
                img: "/assets/images/trader1.png",
                title: "Woodwork",
                name: "Mark S",
                role: "Lead Carpenter",
                desc: "Specializes in building robust frameworks and custom woodwork."
              },
              {
                img: "/assets/images/trader2.png",
                title: "Electrical",
                name: "John D",
                role: "Senior Electrician",
                desc: "Expert in wiring systems and smart installations."
              },
              {
                img: "/assets/images/trader3.png",
                title: "Plumbing",
                name: "David R",
                role: "Master Plumber",
                desc: "Handles modern plumbing systems with precision."
              },
              {
                img: "/assets/images/Masonry.png",
                title: "Masonry",
                name: "Alex K",
                role: "Interior Specialist",
                desc: "Delivers premium finishes and detailing."
              }
            ].map((item, i) => (
              <div key={i} className="swiper-slide trade-card">
                <img src={item.img} alt="" />
                <div className="overlay"></div>

                <div className="content">
                  <h3>{item.title}</h3>
                  <div className="info">
                    <h4>{item.name}</h4>
                    <span>{item.role}</span>
                    <p>{item.desc}</p>
                  </div>
                </div>
              </div>
            ))}

          </div>

          {/* ✅ PAGINATION DOTS */}
          <div className="swiper-pagination"></div>

        </div>

      </div>
    </section>
  )
}