'use client';

import React, { useRef, useState, useEffect } from 'react';
import { motion, useInView } from 'framer-motion';
import { Swiper as SwiperType } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay } from 'swiper/modules';
import { Container, Row, Col, Card, Button} from 'react-bootstrap';

const testimonials = [
  {
    title: 'Performance matters…',
    text: 'Vensysco Technologies was instrumental in our recruitment exam operations. Their combination of CCTV, real-time monitoring, and trained man-power guaranteed zero disruption. Their staff worked round the clock, meeting challenges on the fly. We highly appreciate their professionalism, technology, and dedication to excellence. Best recommended for any mission-critical projects.',
    initials: 'VG',
    name: 'Vansh Grover',
    bg: 'bg-success',
  },
  {
    title: 'Recommended',
    text: 'Vensysco provided us precisely with what we required—secure, scalable, and on time. They were professional and very responsive at all stages. It’s difficult to find another firm in India that implements all future tech in projects to make them efficient.',
    initials: 'AM',
    name: 'Akansha Mittal',
    bg: 'bg-info',
  },
  {
    title: 'Excellent Tech Support',
    text: "We partnered with Vensysco for examination security. From biometric verification to AI surveillance, everything was handled seamlessly. Their ability to manage scale while maintaining transparency truly sets them apart. We’ll definitely collaborate again in future assignments.",
    initials: 'SS',
    name: 'Smrish Sarkar',
    bg: 'bg-danger',
  },
  {
    title: 'Easy & Fast',
    text: 'We worked with Vensysco for a smart city surveillance project. Their AI system was very accurate and quick to respond. They are technically competent and highly reliable with critical solutions. The system could detect millions of faces within minutes. It was something similar to AI taxi services in San Francisco',
    initials: 'NG',
    name: 'Neeraj Garg',
    bg: 'bg-warning',
  },
];
export default function Testimonials() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const swiperRef = useRef<SwiperType | null>(null);
  const testimonialsRef = useRef(null);
  const inView = useInView(testimonialsRef, { amount: 0.5 });
  useEffect(() => {
    if (swiperRef.current && swiperRef.current.autoplay) {
      if (inView) {
        swiperRef.current.autoplay.start();
      } else {
        swiperRef.current.autoplay.stop();
      }
    }
  }, [inView]);  
  const handleRestart = (num: number) => {
    if (swiperRef.current) {
      swiperRef.current.slideTo(num);
      if (num === 0) {
        swiperRef.current.autoplay.start();
      }
    }
  };
  return (
    <section className="section-testimonials" ref={testimonialsRef}>
      <Container className="py-3 py-md-5 position-relative">
        <Row className='g-3 g-md-4 g-lg-5 justify-content-center justify-content-md-end'>
          <Col md={12}>
            <motion.h3 className="display-2 fw-bold text-white text-center">
              Hear it from our clients
            </motion.h3>
          </Col>
          <Col md={4}>
            <Swiper slidesPerView={1} loop={false} modules={[Autoplay]}
              onSwiper={(swiper) => (swiperRef.current = swiper)}
              onSlideChange={(swiper) => setCurrentIndex(swiper.activeIndex)}
              autoplay={{ delay: 3000, disableOnInteraction: false, pauseOnMouseEnter: true }}>            
              {testimonials.map((t, i) => (
                <SwiperSlide key={i}>
                  <Card className="bg-dark text-white opacity-75 rounded-4 border-2 border-light h-100 mb-3">
                    <Card.Body>
                      <motion.h4 className='card-title'>
                        {t.title}
                      </motion.h4>
                      <motion.p>{t.text}</motion.p>
                      <motion.div className="d-flex align-items-center">
                        <motion.span className={`rounded-circle me-3 d-flex align-items-center justify-content-center text-${t.bg}`} 
                        style={{width:"50px",height:"50px",opacity: currentIndex === i ? 1 : 0.5}} 
                        whileInView={currentIndex === i ? { rotate: 360 } : {rotate: 0}}
                        transition={{duration: 0.7, delay: 0.6, repeat: Infinity, repeatDelay: 1 }}
                        >
                          {t.initials}
                        </motion.span>
                        {t.name}
                      </motion.div>
                    </Card.Body>
                  </Card>
                </SwiperSlide>
              ))}
            </Swiper>
            <Row xs={1} sm={2} md={2} className="g-3 mt-3">
              <Col className='d-flex align-items-center justify-content-center justify-content-sm-start'>
              {testimonials.map((_, i) => (
                <motion.div key={i} className="d-flex align-items-center justify-content-center me-2" whileInView={{x:[20,0]}} transition={{duration:1.6}} viewport={{once: true, amount: 0.5}}>
                  <motion.div className={`rounded-circle d-flex align-items-center justify-content-center`}
                    style={{ width: 40, height: 40, opacity: currentIndex === i ? 1 : 0.5}}
                    whileInView={currentIndex === i ? { scale: [1, 1.2, 1] } : {}}
                    transition={{duration: 0.6, repeat: Infinity, repeatDelay: 2 }}
                  >
                    <Button variant="outline-light" className="rounded-circle border-4 border-white p-0 w-100 h-100 d-flex align-items-center justify-content-center" onClick={() => handleRestart(i)} aria-label={`Go to Slide ${i}`}>
                      {`0${i + 1}`}
                    </Button>
                  </motion.div>
                </motion.div>
              ))}
              </Col>
              <Col>
                <motion.div className='hstack gap-2 justify-content-center justify-content-md-end' whileInView={{x:[-100,0]}} transition={{duration:1.8}} viewport={{once: true, amount: 0.5}}>
                  <Button
                    variant="outline-light" onClick={() => handleRestart(currentIndex - 1)} className="rounded-circle p-0 border-4 d-flex align-items-center justify-content-center" style={{width: 40,height: 40}} aria-label="Go to Previous Slide">
                    <i className="bi bi-arrow-left-short fs-4"></i>
                  </Button>
                  <Button variant="outline-light" onClick={() => handleRestart(currentIndex + 1)} className="rounded-circle p-0 border-4 d-flex align-items-center justify-content-center" style={{ width: 40, height: 40 }} aria-label="Go to Next Slide">
                    <i className="bi bi-arrow-right-short fs-4"></i>
                  </Button>
                </motion.div>
              </Col>
            </Row>
          </Col>
        </Row>
      </Container>
    </section>
  );
}