'use client'

import { Star, ChevronLeft, ChevronRight } from 'lucide-react'
import { useState, useEffect } from 'react'

interface Review {
  author: string
  rating: number
  text: string
  date: string
}

const reviews: Review[] = [
  {
    author: 'Richard OReagan',
    rating: 5,
    text: "I've bought and sold several luxury, waterfront homes. So I have high expectations of my realtor. I have to say that Kevin Victor met and exceeded those expectations in terms of professionalism, knowledge, responsiveness and service. And he made the process of buying effortless.",
    date: '2 months ago',
  },
  {
    author: 'Michelle Kenyon',
    rating: 5,
    text: 'We worked with Kevin to both sell our Zona Romantica condo and purchase another property in Puerto Vallarta. He is the ultimate professional and worked tirelessly to promote our listing and make sure the sale process went as smoothly as possible. We highly recommend Kevin!',
    date: '1 month ago',
  },
  {
    author: 'Sara Thomas',
    rating: 5,
    text: "I was nervous about buying a home in another country, but Kevin made the whole process smooth and enjoyable. His professionalism, communication, and deep knowledge of the local market were outstanding. If you're looking for a reliable real estate agent in Puerto Vallarta, can't recommend Kevin enough!",
    date: '2 months ago',
  },
  {
    author: 'Henrik Hancke Nielsen',
    rating: 5,
    text: "Kevin is hands down the best real estate agent I've ever worked with! From start to finish, he made the entire process of buying our new home smooth and stress-free. He is very knowledgeable about the market and always available to answer any questions.",
    date: '1 year ago',
  },
  {
    author: 'Candace Ward',
    rating: 5,
    text: "I had a fantastic experience working with Kevin! He's not only very professional and efficient, but an amazing person to interact with. We purchased our condo below asking and Kevin really went above and beyond to find the perfect home for us.",
    date: '2 years ago',
  },
  {
    author: 'Daniel Delany',
    rating: 5,
    text: 'Kevin is a real gem. He was attentive, thoroughly answered all of my questions and helped me feel comfortable with the idea of investing in a foreign country. During negotiations, he made sure that my best interests were protected. I would highly recommend Kevin to anyone who wishes to buy or sell a property in Puerto Vallarta!',
    date: '2 years ago',
  },
  {
    author: 'Steven Dinsmore',
    rating: 5,
    text: 'Purchased an apartment this past year with Kevin. It was a great pleasure to work with him. He took the time to show numerous apartments and learned what our preferences were. So much so that the last one was "the one". He was patient and kind and fun to tour with. Highly recommend using Kevin if you\'re looking for a home!',
    date: '1 year ago',
  },
  {
    author: 'AJ',
    rating: 5,
    text: 'Buying property in another country brings lots of questions and uncertainty. Kevin was incredibly diligent and detailed throughout the entire process - from initial search to closing. He made everything clear and easy to understand.',
    date: '2 years ago',
  },
  {
    author: 'Tommy Venardos',
    rating: 5,
    text: 'Kevin is a very professional real estate broker that guides his clients through the entire process by giving you all the right information. He will be the one who takes all of your worries away and he gets the work done. 100% would refer Kevin to anyone who is looking to sell or buy.',
    date: '2 years ago',
  },
  {
    author: 'Bara Bakhour',
    rating: 5,
    text: 'Kevin was amazing in helping me navigate the PV market, his insight was valuable and impactful in helping make the right decision.',
    date: '2 years ago',
  },
  {
    author: 'Mychaël Ridley Freitas',
    rating: 5,
    text: "I know several real estate agents, but nothing compares to Kevin's work! His honest approach takes the stress out of the process.",
    date: '2 years ago',
  },
]

export default function Testimonials() {
  const [currentIndex, setCurrentIndex] = useState(0)
  const [isAutoPlaying, setIsAutoPlaying] = useState(true)

  // Auto-play carousel
  useEffect(() => {
    if (!isAutoPlaying) return
    
    const interval = setInterval(() => {
      setCurrentIndex((prev) => (prev + 1) % reviews.length)
    }, 5000) // Change every 5 seconds

    return () => clearInterval(interval)
  }, [isAutoPlaying])

  const goToNext = () => {
    setCurrentIndex((prev) => (prev + 1) % reviews.length)
    setIsAutoPlaying(false)
  }

  const goToPrevious = () => {
    setCurrentIndex((prev) => (prev - 1 + reviews.length) % reviews.length)
    setIsAutoPlaying(false)
  }

  const goToSlide = (index: number) => {
    setCurrentIndex(index)
    setIsAutoPlaying(false)
  }

  return (
    <section className="py-10 sm:py-12 md:py-16 bg-white relative overflow-hidden">
      <div className="container mx-auto px-4 sm:px-6 max-w-6xl">
        {/* Header */}
        <div className="text-center mb-8 sm:mb-10 fade-in">
          <div className="flex items-center justify-center mb-2 sm:mb-3">
            <span className="text-3xl sm:text-4xl font-bold text-brand-text mr-2">5.0</span>
            <div className="flex space-x-0.5 text-brand-primary">
              {[...Array(5)].map((_, i) => (
                <Star key={i} size={16} className="sm:w-4 sm:h-4" fill="currentColor" strokeWidth={0} />
              ))}
            </div>
          </div>
          <p className="text-xs text-gray-500 mb-4 sm:mb-5">Based on 11 Google reviews</p>
          <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold tracking-tighter uppercase leading-tight mb-2 px-2">
            What Clients <br className="hidden sm:block" /> <span className="text-brand-primary italic">Say.</span>
          </h2>
        </div>

        {/* Carousel Container */}
        <div className="relative fade-in">
          {/* Main Review Card */}
          <div className="bg-white rounded-xl sm:rounded-2xl p-5 sm:p-6 md:p-8 shadow-md border border-brand-accent/15 relative overflow-hidden mb-6 sm:mb-8">
            {/* Background decorative element */}
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-gray-50 text-[16vw] sm:text-[12vw] md:text-[10vw] font-bold uppercase select-none z-0 tracking-tighter leading-none">
              Trust
            </div>

            <div className="relative z-10">
              {/* Stars */}
              <div className="flex justify-center mb-3 sm:mb-4 text-brand-primary">
                {[...Array(reviews[currentIndex].rating)].map((_, i) => (
                  <Star key={i} size={16} className="sm:w-5 sm:h-5" fill="currentColor" strokeWidth={0} />
                ))}
              </div>

              {/* Review Text */}
              <p className="text-sm sm:text-base md:text-lg font-normal leading-relaxed text-brand-text italic text-center max-w-3xl mx-auto mb-4 sm:mb-5 px-1">
                &quot;{reviews[currentIndex].text}&quot;
              </p>

              {/* Author */}
              <div className="text-center">
                <p className="text-[10px] sm:text-xs font-medium uppercase tracking-wider text-gray-500 mb-0.5">
                  {reviews[currentIndex].author}
                </p>
                <p className="text-[10px] sm:text-xs text-gray-400">{reviews[currentIndex].date}</p>
              </div>
            </div>
          </div>

          {/* Navigation Arrows */}
          <div className="flex justify-center items-center gap-3 sm:gap-4 mb-4 sm:mb-6 px-4">
            <button
              onClick={goToPrevious}
              className="w-9 h-9 sm:w-10 sm:h-10 rounded-full border border-brand-accent/30 flex items-center justify-center hover:border-brand-primary hover:bg-brand-primary hover:text-white transition-all"
              aria-label="Previous review"
            >
              <ChevronLeft size={16} className="sm:w-4 sm:h-4" />
            </button>

            {/* Dots Indicator */}
            <div className="flex gap-1 sm:gap-1.5 overflow-x-auto px-2 max-w-[200px] sm:max-w-none">
              {reviews.map((_, index) => (
                <button
                  key={index}
                  onClick={() => goToSlide(index)}
                  className={`h-1.5 rounded-full transition-all flex-shrink-0 ${
                    index === currentIndex
                      ? 'w-5 sm:w-6 bg-brand-primary'
                      : 'w-1.5 bg-brand-accent/25 hover:bg-brand-accent/40'
                  }`}
                  aria-label={`Go to review ${index + 1}`}
                />
              ))}
            </div>

            <button
              onClick={goToNext}
              className="w-9 h-9 sm:w-10 sm:h-10 rounded-full border border-brand-accent/30 flex items-center justify-center hover:border-brand-primary hover:bg-brand-primary hover:text-white transition-all"
              aria-label="Next review"
            >
              <ChevronRight size={16} className="sm:w-4 sm:h-4" />
            </button>
          </div>

          {/* Google Reviews Link */}
          <div className="text-center px-4">
            <a
              href="https://www.google.com/search?kgmid=/g/11kk5cnwdk&hl=en-PK&q=Kevin+Victor+%7C+Real+Estate&shndl=30&shem=damc,lcuae,shrtsdl&source=sh/x/loc/osrp/m5/1&kgs=51a3f88112bb2c1e&utm_source=damc,lcuae,shrtsdl,sh/x/loc/osrp/m5/1#lrd=0x842145f65696df03:0x9ee5fadae7efa1d9,1,,,,"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-block bg-black text-white px-5 sm:px-6 py-2.5 sm:py-3 rounded-lg text-xs font-medium uppercase tracking-wide hover:bg-brand-primary transition-colors"
            >
              View All 11 Reviews on Google
            </a>
          </div>
        </div>
      </div>
    </section>
  )
}