"use client"

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

export default function Testimonial() {

  useEffect(() => {
    new Swiper(".testimonialSwiper", {
      modules: [Pagination, Autoplay],

      loop: true,

      slidesPerView: 3,
      spaceBetween: 30,

      speed: 4000, // 🔥 smooth continuous

      autoplay: {
        delay: 0, // ❌ no stop
        disableOnInteraction: false,
      },

      freeMode: true,
      freeModeMomentum: false,

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

      breakpoints: {
        0: { slidesPerView: 1.2 },
        768: { slidesPerView: 2 },
        1024: { slidesPerView: 3 }
      }
    })
  }, [])

  return (
    <section
      className="gallery-section"
      style={{ background: "url(/assets/images/customerbackground.png)" }}
    >
      <div className="container">

        {/* TOP */}
        <div className="services-top">
          <div>
            <span className="tag">What Our Customers Say</span>
            <h2>Real reviews from real Texas homeowners</h2>
          </div>
        </div>

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

            {/* CARD 1 */}
            <div className="swiper-slide">
              <div className="testimonial-card short">
                <p>
                  “Our new kitchen is perfect! The team was professional, on time, and the quality is outstanding.”
                </p>
                <div className="user">
                  <img src="https://randomuser.me/api/portraits/women/44.jpg" />
                  <div>
                    <h6>Sarah T.</h6>
                    <span>San Antonio</span>
                  </div>
                </div>
                <a href="#">See Project →</a>
              </div>
            </div>

            {/* CARD 2 */}
            <div className="swiper-slide">
              <div className="testimonial-card long">
                <p>
                  “We couldn’t be happier with our new sunroom! The team showed up on time and demonstrated incredible professionalism from start to finish. Their workmanship truly surpassed our expectations. Adding this space has been the best decision we’ve made for our home! We’re thrilled with how it turned out. It has transformed our living area into a bright and inviting space.”
                </p>
                <div className="user">
                  <img src="https://randomuser.me/api/portraits/women/65.jpg" />
                  <div>
                    <h6>Jessica L.</h6>
                    <span>Dallas</span>
                  </div>
                </div>
                <a href="#">See Project →</a>
              </div>
            </div>

            {/* CARD 3 */}
            <div className="swiper-slide">
              <div className="testimonial-card short">
                <p>
                  “Amazing experience! Highly recommended for any renovation work.”
                </p>
                <div className="user">
                  <img src="https://randomuser.me/api/portraits/men/32.jpg" />
                  <div>
                    <h6>Emily R.</h6>
                    <span>Austin</span>
                  </div>
                </div>
                <a href="#">See Project →</a>
              </div>
            </div>

            {/* REPEAT SAME CARDS (important for smooth loop) */}

            <div className="swiper-slide">
              <div className="testimonial-card long">
                <p>
                  “We couldn’t be happier with our new sunroom! The team showed up on time and demonstrated incredible professionalism from start to finish.”
                </p>
                <div className="user">
                  <img src="https://randomuser.me/api/portraits/women/65.jpg" />
                  <div>
                    <h6>Jessica L.</h6>
                    <span>Dallas</span>
                  </div>
                </div>
                <a href="#">See Project →</a>
              </div>
            </div>

            <div className="swiper-slide">
              <div className="testimonial-card short">
                <p>
                  “Our new kitchen is perfect! The team was professional, on time, and the quality is outstanding.”
                </p>
                <div className="user">
                  <img src="https://randomuser.me/api/portraits/women/44.jpg" />
                  <div>
                    <h6>Sarah T.</h6>
                    <span>San Antonio</span>
                  </div>
                </div>
                <a href="#">See Project →</a>
              </div>
            </div>

          </div>

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

        </div>
      </div>
    </section>
  )
}