'use client';
import { useState, useEffect, useCallback } from 'react';
import Image from 'next/image';
import styles from './ReviewsSection.module.css';

const reviews = [
  {
    text: "Best dosa I've ever had outside of India! The Masala Dosa was perfectly crispy and the sambar was incredibly flavorful. The weekend Thali is outstanding — so many flavors in one plate. We will definitely be back!",
    name: 'Sarah M. & Family',
    role: 'Local Food Critic',
    initials: 'SM',
    rating: '4.9',
  },
  {
    text: "My Dosa Place is an absolute gem in Waterloo. The chutneys are made fresh daily and the Rava Dosa has the most amazing crunch. It genuinely transports you to Tamil Nadu. Highly recommend the Uttappam too!",
    name: 'Raj Patel',
    role: 'Food Blogger',
    initials: 'RP',
    rating: '5.0',
  },
  {
    text: "We visited for lunch and were blown away by the authentic South Indian experience. The Sambar was rich and perfectly spiced, and the dosas were golden crisp. The staff was warm and welcoming — felt like home!",
    name: 'Priya & Anand K.',
    role: 'Regular Customer',
    initials: 'PK',
    rating: '4.8',
  },
  {
    text: "I've tried many Indian restaurants across Canada and My Dosa Place stands out for its genuine authenticity. The Benne Masala Dosa is a must-try. Amazing value for the quality and portion sizes. Can't wait to return!",
    name: 'Michael Torres',
    role: 'Food Enthusiast',
    initials: 'MT',
    rating: '4.9',
  },
];

export default function ReviewsSection() {
  const [current, setCurrent] = useState(0);
  const [animating, setAnimating] = useState(false);

  const goTo = useCallback((index) => {
    if (animating) return;
    setAnimating(true);
    setTimeout(() => {
      setCurrent(index);
      setAnimating(false);
    }, 300);
  }, [animating]);

  const prev = () => goTo((current - 1 + reviews.length) % reviews.length);
  const next = useCallback(() => goTo((current + 1) % reviews.length), [current, goTo]);

  // Auto-slide every 5 seconds
  useEffect(() => {
    const timer = setInterval(next, 5000);
    return () => clearInterval(timer);
  }, [next]);

  const review = reviews[current];

  return (
    <section className={styles.section}>
      <div className={styles.container}>
        <div className={styles.contentWrap}>

          {/* Left – Stacked image collage */}
          <div className={styles.imageCol}>
            <div className={styles.collage}>
              <div className={styles.imgLeft}>
                <Image src="/images/story-heritage.png" alt="Dosa" fill className={styles.img} />
              </div>
              <div className={styles.imgRight}>
                <Image src="/images/sambar.png" alt="Sambar" fill className={styles.img} />
              </div>
              <div className={styles.ratingBadge}>
                <span className={styles.ratingText}>4.9</span>
                <div className={styles.stars}>⭐⭐⭐⭐⭐</div>
                <span className={styles.ratingLabel}>500+ Reviews</span>
              </div>
            </div>
          </div>

          {/* Right – Testimonial slider */}
          <div className={styles.textCol}>
            <p className={styles.sectionTag}>Testimonials</p>
            <h2 className={styles.sectionTitle}>What Our Customers Say</h2>

            <div className={`${styles.reviewCard} ${animating ? styles.fadeOut : styles.fadeIn}`}>
              <div className={styles.quoteMark}>&ldquo;</div>
              <p className={styles.reviewText}>{review.text}</p>

              <div className={styles.reviewer}>
                <div className={styles.avatar}>{review.initials}</div>
                <div>
                  <p className={styles.reviewerName}>{review.name}</p>
                  <p className={styles.reviewDate}>{review.role}</p>
                </div>
                <div className={styles.reviewRating}>{review.rating} ⭐</div>
              </div>
            </div>

            {/* Dots + Arrows */}
            <div className={styles.controls}>
              <div className={styles.dots}>
                {reviews.map((_, i) => (
                  <button
                    key={i}
                    className={`${styles.dot} ${i === current ? styles.dotActive : ''}`}
                    onClick={() => goTo(i)}
                    aria-label={`Go to review ${i + 1}`}
                  />
                ))}
              </div>
              <div className={styles.navButtons}>
                <button className={styles.navBtn} onClick={prev} aria-label="Previous">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
                </button>
                <button className={styles.navBtn} onClick={next} aria-label="Next">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
                </button>
              </div>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
}
