"use client";

import Image from "next/image";
import { Navigation, Autoplay } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

import "swiper/css";
import "swiper/css/navigation";

import { useLanguage } from "@/app/context/LanguageContext";

const testimonials = [
  {
    name: "AMAR THAKUR",
    designation: "Marketing Executive",
    review:
      "Extremely helpful in giving me clarity when my career was at a crossroads. The precision was breathtaking.",
    image: "/images/testi-user.png",
  },
  {
    name: "POOJA TIWARI",
    designation: "Tech Lead",
    review:
      "I was skeptical, but the consultation felt like looking into a mirror. It guided me through a difficult transition.",
    image: "/images/testi-user.png",
  },
  {
    name: "KARISHMA CHOGLE",
    designation: "Creative Director",
    review:
      "AstroMystic provides a sense of peace that I couldn't find elsewhere. The astrologers are truly gifted souls.",
    image: "/images/testi-user.png",
  },
  {
    name: "RAHUL SHARMA",
    designation: "Software Engineer",
    review:
      "Amazing predictions and very accurate. Highly recommended for anyone looking for life guidance.",
    image: "/images/testi-user.png",
  },
];

export default function Testimonials() {
  const { t } = useLanguage();

  return (
    <section className="testimonial-section">
      <div className="container">
        <div className="text-center mb-5">
          <span className="section-subtitle"> {t("home.testimonials.subtitle", "TESTIMONIALS")} </span>

          <h2 className="testimonial-title">
            {t("home.testimonials.title", "Stories from the other side of the chat.")}
          </h2>
        </div>

        <Swiper
          modules={[Navigation, Autoplay]}
          navigation={{
            prevEl: ".testimonial-prev",
            nextEl: ".testimonial-next",
          }}
          autoplay={{
            delay: 5000,
            disableOnInteraction: false,
          }}
          loop
          spaceBetween={30}
          breakpoints={{
            0: {
              slidesPerView: 1,
            },
            768: {
              slidesPerView: 2,
            },
            1200: {
              slidesPerView: 3,
            },
          }}
        >
          {testimonials.map((item, index) => (
            <SwiperSlide key={index}>
              <div className="testimonial-card">
                <div className="rating">★★★★★</div>

                <h3 className="review">"{item.review}"</h3>

                <div className="user d-flex align-items-center mt-4">
                  <Image
                    src={item.image}
                    alt={item.name}
                    width={60}
                    height={60}
                  />

                  <div className="ms-3">
                    <h5>{item.name}</h5>
                    <span>{item.designation}</span>
                  </div>
                </div>
              </div>
            </SwiperSlide>
          ))}
        </Swiper>
        <div className="testimonial-navigation">
          <button className="testimonial-prev">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path
                d="M3.825 9L9.425 14.6L8 16L0 8L8 0L9.425 1.4L3.825 7H16V9H3.825Z"
                fill="white"
              />
            </svg>
          </button>

          <button className="testimonial-next">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path
                d="M12.175 9H0V7H12.175L6.575 1.4L8 0L16 8L8 16L6.575 14.6L12.175 9Z"
                fill="white"
              />
            </svg>
          </button>
        </div>
      </div>
    </section>
  );
}