"use client";

import { ChevronLeft, ChevronRight, Star } from "lucide-react";
import * as React from "react";
import { motion, AnimatePresence } from "framer-motion";
import Image from "next/image";

interface Testimonial {
  id: string;
  name: string;
  role: string;
  company: string;
  image: string;
  rating: number;
  content: string;
}

const testimonials: Testimonial[] = [
  {
    id: "1",
    name: "Mahmud Hasan - ",
    role: "Marketer",
    company: "Freelancer",
    image: "/assets/images/testimonial/mahmudulhasan.webp",
    rating: 5,
    content:
      "I used to spend 50-60 hours every week managing my client's social media content and scheduling. With PlanPost AI, I now finish everything in just 2 hours! This has saved me huge amounts of time and allowed me to take on more clients—boosting both my productivity and income.",
  },
  {
    id: "2",
    name: "Abdus Salam Jomadder",
    role: "E-commerce Entrepreneu",
    company: "ফ্লাভিয়া",
    image: "/assets/images/testimonial/Abdus-Salam-Jomadder.webp",
    rating: 5,
    content:
      "My product images improved significantly with PlanPost AI. They look more professional and eye-catching, which directly helped me increase sales. The best part? I don’t need any design skills—it’s simple, fast, and effective!",
  },
  {
    id: "3",
    name: "Farhana Akter",
    role: "Owner",
    company: "Small Business",
    image: "/assets/images/testimonial/business-women.jpg",
    rating: 5,
    content:
      "Staying consistent on social media was always tough. With PlanPost AI’s bulk generation, I now create a month’s content in minutes and schedule it instantly. My brand engagement has grown by 3x, and I can focus more on scaling my business.",
  },
];

export default function TestimonialSection() {
  const [currentIndex, setCurrentIndex] = React.useState(0);
  const [direction, setDirection] = React.useState(0);

  const slidesPerView = 3;
  const maxIndex = Math.max(0, testimonials.length - slidesPerView);

  const handlePrevious = () => {
    setDirection(-1);
    setCurrentIndex((prev) => Math.max(0, prev - 1));
  };

  const handleNext = () => {
    setDirection(1);
    setCurrentIndex((prev) => Math.min(maxIndex, prev + 1));
  };

  const visibleTestimonials = testimonials.slice(
    currentIndex,
    currentIndex + slidesPerView
  );

  return (
    <div className="py-16 px-4 md:px-6 lg:px-8 bg-white">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold mb-4">
            What Our <span className="text-[#7c3aed]">Customers</span> Say
          </h2>
          <p className="text-gray-600 text-lg max-w-2xl mx-auto">
            Join thousands of satisfied customers who have transformed their
            social media presence with Planpost AI
          </p>
        </div>

        <div className="relative">
          <div className="overflow-hidden">
            <AnimatePresence initial={false} custom={direction} mode="wait">
              <motion.div
                key={currentIndex}
                custom={direction}
                initial={{ opacity: 0, x: direction > 0 ? 100 : -100 }}
                animate={{ opacity: 1, x: 0 }}
                exit={{ opacity: 0, x: direction > 0 ? -100 : 100 }}
                transition={{
                  duration: 0.4,
                  ease: [0.4, 0, 0.2, 1],
                }}
                className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
              >
                {visibleTestimonials.map((testimonial) => (
                  <motion.div
                    key={testimonial.id}
                    whileHover={{ y: -8 }}
                    transition={{ duration: 0.3 }}
                    className="bg-[#f5f1ff] rounded-lg p-6 flex flex-col"
                  >
                    <div className="flex items-center gap-1 mb-4">
                      {[...Array(testimonial.rating)].map((_, i) => (
                        <Star
                          key={i}
                          className="w-5 h-5 fill-[#7c3aed] text-[#7c3aed]"
                        />
                      ))}
                    </div>

                    <p className="text-gray-700 mb-6 flex-grow">
                      {testimonial.content}
                    </p>

                    <div className="flex items-center gap-3">
                      <Image
                        src={testimonial.image}
                        alt={testimonial.name}
                        height={50}
                        width={50}
                        className="w-16 h-16 rounded-full bg-white"
                      />
                      <div>
                        <h4 className="font-semibold text-gray-900">
                          {testimonial.name}
                        </h4>
                        <p className="text-sm text-gray-600">
                          {testimonial.role} at {testimonial.company}
                        </p>
                      </div>
                    </div>
                  </motion.div>
                ))}
              </motion.div>
            </AnimatePresence>
          </div>

          <div className="flex items-center justify-center gap-4 mt-8">
            <motion.button
              onClick={handlePrevious}
              disabled={currentIndex === 0}
              whileHover={{ scale: 1.1 }}
              whileTap={{ scale: 0.95 }}
              className="w-12 h-12 rounded-full bg-[#7c3aed] text-white flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed hover:bg-[#6d28d9] transition-colors"
            >
              <ChevronLeft className="w-6 h-6" />
            </motion.button>

            <div className="flex gap-2">
              {[...Array(maxIndex + 1)].map((_, index) => (
                <button
                  key={index}
                  onClick={() => {
                    setDirection(index > currentIndex ? 1 : -1);
                    setCurrentIndex(index);
                  }}
                  className={`h-2 rounded-full transition-all duration-300 ${
                    index === currentIndex
                      ? "w-8 bg-[#7c3aed]"
                      : "w-2 bg-gray-300 hover:bg-gray-400"
                  }`}
                />
              ))}
            </div>

            <motion.button
              onClick={handleNext}
              disabled={currentIndex === maxIndex}
              whileHover={{ scale: 1.1 }}
              whileTap={{ scale: 0.95 }}
              className="w-12 h-12 rounded-full bg-[#7c3aed] text-white flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed hover:bg-[#6d28d9] transition-colors"
            >
              <ChevronRight className="w-6 h-6" />
            </motion.button>
          </div>
        </div>
      </div>
    </div>
  );
}
