'use client';

import { Swiper, SwiperSlide } from 'swiper/react';
import { Navigation, Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/navigation';

import { User, Quote, ChevronLeft, ChevronRight, Star } from "lucide-react";
import Paragraph from "../atoms/Paragraph";
import Heading from "../atoms/Heading";
import Container from '../atoms/Container';
import reviews from '../../utils/reviewsClient';

const Client = () => {
  return (
    <section className="bg-linear-to-r from-teal-50/50 to-blue-50/50 py-20 rounded-3xl">
      <Container>
        <div className="text-center mb-16">
          <div className="inline-flex items-center gap-2 bg-linear-to-r from-teal-100 to-blue-100 text-teal-700 px-6 py-3 rounded-full text-sm font-semibold mb-6 animate-pulse">
            <User className="w-5 h-5" />
            Client Testimonials
          </div>

          <Heading level={4} className="text-4xl font-bold text-gray-900 mb-4">
            Why Clients Love{' '}
            <span className="bg-linear-to-r from-teal-600 to-blue-500 bg-clip-text text-transparent">
              Universities Page
            </span>
          </Heading>
          <Paragraph className="text-xl text-gray-600 max-w-3xl mx-auto">
            Join thousands of satisfied clients who have successfully obtained their visas through our expert services
          </Paragraph>
        </div>

        <div className="relative">
          <Swiper
            modules={[Navigation, Autoplay]}
            spaceBetween={30}
            slidesPerView={1}
            autoplay={{ delay: 5000, disableOnInteraction: false }}
            navigation={{
              prevEl: '.client-prev',
              nextEl: '.client-next',
            }}
            breakpoints={{
              640: { slidesPerView: 1.2 },
              768: { slidesPerView: 2.2 },
              1024: { slidesPerView: 3 },
            }}
            className="pb-12"
          >
            {reviews.map((review, i) => (
              <SwiperSlide key={i}>
                <div className="bg-white p-8 rounded-2xl shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 h-full hover:border-teal-100">
                  <Quote className="w-8 h-8 text-teal-500 mb-4 opacity-30" />
                  
                  <div className="flex items-center mb-4">
                    {[...Array(5)].map((_, starIdx) => (
                      <Star key={starIdx} className="w-5 h-5 text-amber-400 fill-current" />
                    ))}
                  </div>

                  <Paragraph className="text-gray-700 leading-relaxed mb-6 line-clamp-5">
                    "{review.message}"
                  </Paragraph>

                  <div className="flex items-center gap-4 mt-auto pt-4 border-t border-gray-100">
                    <div className="w-12 h-12 bg-linear-to-r from-teal-500 to-blue-500 rounded-full flex items-center justify-center">
                      <User className="w-6 h-6 text-white" />
                    </div>
                    <div>
                      <p className="font-semibold text-gray-900">{review.name}</p>
                      <p className="text-sm text-gray-500">Visa Approved</p>
                    </div>
                  </div>
                </div>
              </SwiperSlide>
            ))}
          </Swiper>

          {/* Navigation Buttons */}
          <div className="flex justify-center gap-4 mt-8">
            <button className="client-prev group bg-white border border-gray-200 w-14 h-14 rounded-full shadow-md hover:bg-linear-to-r hover:from-teal-600 hover:to-blue-500 hover:border-teal-600 transition-all duration-300">
              <ChevronLeft className="text-gray-600 group-hover:text-white mx-auto transition-colors" />
            </button>
            <button className="client-next group bg-white border border-gray-200 w-14 h-14 rounded-full shadow-md hover:bg-linear-to-r hover:from-teal-600 hover:to-blue-500 hover:border-teal-600 transition-all duration-300">
              <ChevronRight className="text-gray-600 group-hover:text-white mx-auto transition-colors" />
            </button>
          </div>
        </div>

        {/* Stats Bar */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mt-16">
          {[
            { number: '10,000+', label: 'Visas Processed' },
            { number: '98%', label: 'Success Rate' },
            { number: '24-48h', label: 'Fast Processing' },
            { number: '150+', label: 'Countries Covered' }
          ].map((stat, idx) => (
            <div key={idx} className="text-center bg-white p-6 rounded-xl border border-gray-100 hover:shadow-md transition-shadow">
              <div className="text-3xl font-bold bg-linear-to-r from-teal-600 to-blue-500 bg-clip-text text-transparent mb-2">
                {stat.number}
              </div>
              <div className="text-gray-600 font-medium">{stat.label}</div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
};

export default Client;