"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";

const testimonials = [
  {
    id: 1,
    quote:
      "I've witnessed Fireforce in action multiple times, and they never cease to amaze me with their dedication and professionalism. They are the backbone of our safety and security. Thank you, Fireforce!",
    name: "JOHN SMITH",
    role: "Manager",
    avatar: "/images/home/avatar.jpg",
    rating: 5,
  },
  {
    id: 2,
    quote:
      "The team's response time and expertise saved our property from a devastating fire. Their bravery and commitment to protecting our community is truly remarkable. Highly recommend their services!",
    name: "SARAH JOHNSON",
    role: "Business Owner",
    avatar: "/images/home/avatar.jpg",
    rating: 5,
  },
  {
    id: 3,
    quote:
      "Working alongside Fireforce has been an honor. Their training programs and emergency protocols are second to none. They set the standard for fire safety excellence in our region.",
    name: "MICHAEL DAVIS",
    role: "Safety Director",
    avatar: "/images/home/avatar.jpg",
    rating: 5,
  },
];

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() {
  return (
    <section className="w-full bg-[#1a1a1a]">
      <div className="flex flex-col lg:flex-row min-h-[400px] lg:min-h-[500px]">
        {/* Left Side - Firefighter Image */}
        <div className="relative w-full lg:w-1/2 h-[300px] sm:h-[400px] lg:h-auto">
          <Image
            src="/images/home/testimonal.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-[350px] sm:min-h-[400px] lg:min-h-[500px]">
          {/* 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="text-white font-semibold text-sm tracking-wider">
                  TESTIMONIALS
                </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="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="text-white font-bold text-sm sm:text-base">
                          {testimonial.name}
                        </h4>
                        <p className="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>
  );
}