'use client';

import { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { Quote, Star, ChevronLeft, ChevronRight } from 'lucide-react';
import styles from './Testimonials.module.css';

const reviews = [
  {
    name: 'ALEX R.',
    role: 'TIME ATTACK DRIVER',
    quote: 'Switched to HondaVert V4.0 last season. The data fidelity and zero-latency logging changed how we approach our setup. Unmatched precision.',
    stars: 5,
  },
  {
    name: 'KEVIN L.',
    role: 'MASTER TUNER',
    quote: 'As a tuner, I need reliability. HondaVert consistently delivers hardware that doesn\'t crash, software that is intuitive, and support that actually knows their stuff.',
    stars: 5,
  },
  {
    name: 'SARAH M.',
    role: 'DRAG RACING SPECIALIST',
    quote: 'From real-time telemetry to custom launch control, the S300 Core has been rock solid for my turbo setup. Highly recommend for any serious build.',
    stars: 5,
  },
  {
    name: 'MARCO S.',
    role: 'ENDURANCE RACER',
    quote: 'Our testing revealed zero heat-soak issues with the Hondavert platform. It handles 12-hour sessions with perfect consistency.',
    stars: 5,
  },
  {
    name: 'DAVID K.',
    role: 'STREET TUNER',
    quote: 'The Bluetooth integration makes mobile datalogging incredibly simple. I can diagnose issues without even opening my laptop.',
    stars: 5,
  },
  {
    name: 'YUKI T.',
    role: 'DRIFT MASTER',
    quote: 'The rapid response of the 4BAR MAP sensor combined with KPro precision gives me the exact throttle response I need for high-angle transitions.',
    stars: 5,
  }
];

export default function Testimonials() {
  const [current, setCurrent] = useState(0);
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth < 768);
    };
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, []);

  useEffect(() => {
    const timer = setInterval(() => {
      const max = isMobile ? reviews.length - 1 : reviews.length - 3;
      setCurrent((prev) => (prev >= max ? 0 : prev + 1));
    }, 5000);
    return () => clearInterval(timer);
  }, [isMobile]);

  const next = () => {
    const max = isMobile ? reviews.length - 1 : reviews.length - 3;
    setCurrent((prev) => (prev >= max ? 0 : prev + 1));
  };
  const prev = () => {
    const max = isMobile ? reviews.length - 1 : reviews.length - 3;
    setCurrent((prev) => (prev === 0 ? max : prev - 1));
  };

  return (
    <section className={styles.section}>
      <div className={styles.container}>
        <div className={styles.header}>
           <div className={styles.headerContent}>
              <span className={styles.label}>CLIENT FEEDBACK</span>
              <h2 className={styles.title}>VOICES OF THE COMMUNITY</h2>
           </div>
           <div className={styles.nav}>
              <button onClick={prev} className={styles.navBtn}><ChevronLeft size={24} /></button>
              <button onClick={next} className={styles.navBtn}><ChevronRight size={24} /></button>
           </div>
        </div>
        
        <div className={styles.sliderWrapper}>
          <motion.div 
            className={styles.sliderTray}
            animate={{ x: isMobile ? `-${current * 100}%` : `-${current * 33.333}%` }}
            transition={{ type: "spring", stiffness: 100, damping: 20 }}
          >
             {reviews.map((item, i) => (
               <div key={i} className={styles.cardWrapper}>
                 <div className={styles.card}>
                    <div className={styles.stars}>
                       {[...Array(item.stars)].map((_, j) => (
                          <Star key={j} size={14} fill="var(--primary)" color="var(--primary)" />
                       ))}
                    </div>
                    <div className={styles.iconBox}><Quote size={32} /></div>
                    <p className={styles.quote}>"{item.quote}"</p>
                    <div className={styles.footer}>
                       <div className={styles.user}>
                          <strong>{item.name}</strong>
                          <span>{item.role}</span>
                       </div>
                    </div>
                 </div>
               </div>
             ))}
          </motion.div>
        </div>
      </div>
    </section>
  );
}
