"use client";

import React, { useState } from "react";
import { ChevronLeft, ChevronRight, Star } from "lucide-react";

const testimonials = [
  {
    name: "Sarah Johnson",
    role: "CEO, TechStartup Inc",
    image: "/testimonial1.jpg",
    text: `"Working with this team transformed our online presence. Our organic traffic increased by 300% in just 6 months, and we're now dominating our industry in search results."`,
  },
  {
    name: "Michael Chen",
    role: "Marketing Director, GrowthCo",
    image: "/testimonial2.png",
    text: `"The ROI we've seen from their SEO strategies has been incredible. They truly understand what it takes to rank and convert. Best investment we've made in our marketing."`,
  },
  {
    name: "Emily Davis",
    role: "Founder, Brandify",
    image: "/testimonial3.png",
    text: `"Highly professional team with amazing results. Our visibility and conversions improved drastically within months."`,
  },
];

const TestimonialsSection = () => {
  const [index, setIndex] = useState(0);

  const prev = () => {
    setIndex((prev) => (prev === 0 ? testimonials.length - 1 : prev - 1));
  };

  const next = () => {
    setIndex((prev) => (prev === testimonials.length - 1 ? 0 : prev + 1));
  };

  return (
    <section className="bg-[#FBFBFB] py-16 px-4 sm:px-6 lg:px-16 text-center">
      <h2 className="text-3xl md:text-4xl font-semibold text-[#3B3B3B]">
        Client Success Stories
      </h2>

      <p className="mt-4 text-[#676767] max-w-2xl mx-auto">
        Don't just take our word for it. Here's what our clients have to say
        about working with us.
      </p>

      <div className="mt-12 grid grid-cols-1 md:grid-cols-2 gap-6 mx-auto">
        {[
          testimonials[index],
          testimonials[(index + 1) % testimonials.length],
        ].map((item, i) => (
          <div
            key={i}
            className="bg-white rounded-2xl border border-[#DDDDDD] p-4 flex gap-4 items-start text-left shadow-sm"
          >
            <img
              src={item.image}
              alt={item.name}
              className="w-36 h-full rounded-xl object-cover"
            />

            <div>
              <div className="flex items-center gap-2 flex-wrap">
                <h3 className="font-semibold text-lg lg:text-xl text-[#3B3B3B]">
                  {item.name}
                </h3>
                <span className="text-sm lg:text-md text-[#676767] mt-1">
                  {item.role}
                </span>
              </div>

              <p className="mt-2 text-md lg:text-base text-[#676767] leading-relaxed">
                {item.text}
              </p>

              <div className="flex gap-1 mt-2 text-[#FDC700]">
                {[...Array(5)].map((_, i) => (
                  <Star key={i} size={20} fill="currentColor" />
                ))}
              </div>
            </div>
          </div>
        ))}
      </div>

      <div className="mt-8 flex items-center justify-center gap-6">
        <button
          onClick={prev}
          className="w-8 h-8 flex items-center justify-center rounded-full bg-[#794AFF] text-white hover:opacity-90 transition"
        >
          <ChevronLeft size={18} />
        </button>

        <span className="text-[#676767] text-sm">
          {index + 1} / {testimonials.length}
        </span>

        <button
          onClick={next}
          className="w-8 h-8 flex items-center justify-center rounded-full bg-[#794AFF] text-white hover:opacity-90 transition"
        >
          <ChevronRight size={18} />
        </button>
      </div>
    </section>
  );
};

export default TestimonialsSection;