"use client";

import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay } from "swiper/modules";
import Image from "next/image";
import "swiper/css";
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
import { useTranslations } from "next-intl";

function StarRating({ rating }: { rating: number }) {
  return (
    <div className="flex gap-1">
      {[...Array(rating)].map((_, i) => (
        <svg
          key={i}
          className="w-4 h-4 md:w-5 md:h-5 text-yellow-400 fill-current"
          viewBox="0 0 20 20"
        >
          <path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z" />
        </svg>
      ))}
    </div>
  );
}

export function Testimonial() {
  const t = useTranslations();
  const testimonials = [
    {
      id: 1,
      quote:t("home.testimonials.clients.john.text"),
      name: t("home.testimonials.clients.john.name"),
      role: t("home.testimonials.clients.john.position"),
      avatar: "/images/home/avatar.jpg",
      rating: 5,
    },
    {
      id: 2,
      quote:t("home.testimonials.clients.sarah.text"),
      name: t("home.testimonials.clients.sarah.name"),
      role: t("home.testimonials.clients.sarah.position"),
      avatar: "/images/home/avatar.jpg",
      rating: 5,
    },
    {
      id: 3,
      quote:t("home.testimonials.clients.michael.text"),
      name: t("home.testimonials.clients.michael.name"),
      role: t("home.testimonials.clients.michael.position"),
      avatar: "/images/home/avatar.jpg",
      rating: 5,
    },
  ];
  return (
    <section className="w-full bg-[#1a1a1a]">
      <div className="flex flex-col lg:flex-row min-h-100 lg:min-h-125">
        {/* Left Side - Firefighter Image */}
        <div className="relative w-full lg:w-1/2 h-75 sm:h-100 lg:h-auto">
          <Image
            src="/images/img10.jpg"
            alt="Professional firefighter in protective gear"
            fill
            className="object-cover object-top"
            priority
          />
        </div>

        {/* Right Side - Testimonial Content with Background */}
        <div className="relative w-full lg:w-1/2 min-h-87.5 sm:min-h-100 lg:min-h-125">
          {/* Background Image */}
          <div className="absolute inset-0">
            <Image
              src="/images/home/fikrBack.jpg"
              alt="Firefighters in action"
              fill
              className="object-cover"
            />
            {/* Gradient Overlay - Direction to the right */}
            <div className="absolute inset-0 bg-linear-to-r from-[#1a1a1a] via-[#1a1a1a]/80 to-transparent" />
          </div>

          {/* Content */}
          <div className="relative z-10 h-full flex flex-col items-start justify-center px-6 sm:px-10 lg:px-12 xl:px-16 py-10 lg:py-0">
            {/* Header */}
            <div className="w-full max-w-xl mx-auto mb-5">
              <div className="flex items-center gap-2">
                <DotAnimatsiya />
                <span className="font-unbounded text-white font-semibold text-sm tracking-wider">
                  {t("home.testimonials.title")}
                </span>
              </div>
            </div>

            <Swiper
              modules={[Autoplay]}
              autoplay={{
                delay: 5000,
                disableOnInteraction: false,
              }}
              loop={true}
              pagination={false}
              navigation={false}
              className="w-full max-w-xl"
            >
              {testimonials.map((testimonial) => (
                <SwiperSlide key={testimonial.id}>
                  <div className="space-y-6">
                    {/* Quote */}
                    <p className="font-almarai text-white text-base sm:text-lg lg:text-xl leading-relaxed">
                      "{testimonial.quote}"
                    </p>

                    {/* Author Info */}
                    <div className="flex items-center gap-3">
                      <div className="relative w-10 h-10 sm:w-12 sm:h-12 rounded-full overflow-hidden">
                        <Image
                          src={testimonial.avatar || "/placeholder.svg"}
                          alt={testimonial.name}
                          fill
                          className="object-cover"
                        />
                      </div>
                      <div>
                        <h4 className="font-unbounded text-white font-bold text-sm sm:text-base">
                          {testimonial.name}
                        </h4>
                        <p className="font-almarai text-red-600 text-xs sm:text-sm">
                          {testimonial.role}
                        </p>
                      </div>
                    </div>

                    {/* Star Rating */}
                    <StarRating rating={testimonial.rating} />
                  </div>
                </SwiperSlide>
              ))}
            </Swiper>
          </div>
        </div>
      </div>
    </section>
  );
}