'use client'

import { useState, useEffect } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { SectionHeader } from '@/components/ui/SectionHeader'
import { GlassCard } from '@/components/ui/GlassCard'
import { fadeUp, scaleUp, viewportConfig } from '@/lib/animations'

type Testimonial = {
  quote: string
  name: string
  role: string
  society: string
  avatarText: string
  rating: number
}

const TESTIMONIALS: Testimonial[] = [
  {
    quote: 'Nearle transformed our neighborhood shopping experience with incredibly fast local delivery. We get groceries and hot food from stores we trust in under 15 minutes!',
    name: 'Aravind Swamy',
    role: 'Resident Owner',
    society: 'Sree Vatsa Residency',
    avatarText: 'AS',
    rating: 5,
  },
  {
    quote: 'As a local store owner, Nearle has doubled our sales by connecting us directly to nearby societies. The payouts are instant, and the custom catalog builder is so easy to use.',
    name: 'Kalyan Kumar',
    role: 'Merchant Partner',
    society: 'Kalyan Grocers · RS Puram',
    avatarText: 'KK',
    rating: 5,
  },
  {
    quote: 'The route optimization in the Nearle Gear app is incredible. I complete drops quickly, and the escrow payout structure ensures I get paid fairly for every single delivery.',
    name: 'Karthik Raja',
    role: 'Gear Delivery Rider',
    society: 'RS Puram Hub',
    avatarText: 'KR',
    rating: 5,
  },
]

export function Testimonials() {
  const [active, setActive] = useState<number>(0)

  useEffect(() => {
    const id = setInterval(() => {
      setActive((prev) => (prev + 1) % TESTIMONIALS.length)
    }, 6000)
    return () => clearInterval(id)
  }, [])

  return (
    <div className="py-24 sm:py-32 bg-white px-5 sm:px-8 relative overflow-hidden">
      {/* Decorative Blob */}
      <div className="absolute top-1/3 left-1/3 w-[500px] h-[500px] rounded-full bg-purple-soft/40 blur-3xl -z-10 pointer-events-none" />

      <div className="max-w-7xl mx-auto">
        <SectionHeader
          label="Community Voices"
          heading={
            <>
              Trusted by Your
              <br />
              <span className="bg-gradient-purple bg-clip-text text-transparent">
                Active Neighbourhood
              </span>
            </>
          }
          sub="Hear what residents, local merchant partners, and our delivery riders say about the Nearle platform."
          align="center"
          className="mb-16 sm:mb-20"
        />

        <div className="max-w-3xl mx-auto relative min-h-[320px]">
          <AnimatePresence mode="wait">
            <motion.div
              key={active}
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -20 }}
              transition={{ duration: 0.4 }}
            >
              <GlassCard className="border-purple-lavender/50 hover:border-purple-primary shadow-nearle-md p-8 sm:p-12 relative overflow-hidden">
                {/* Visual Quote Icon Decor */}
                <span className="absolute -top-6 -right-6 text-9xl text-purple-soft/40 font-serif select-none pointer-events-none">
                  “
                </span>

                <div className="flex gap-1.5 mb-6 text-purple-primary text-xl">
                  {Array.from({ length: TESTIMONIALS[active]!.rating }).map((_, i) => (
                    <span key={i}>★</span>
                  ))}
                </div>

                <p className="font-body text-nearle-dark text-lg sm:text-xl leading-relaxed italic relative z-10">
                  &ldquo;{TESTIMONIALS[active]!.quote}&rdquo;
                </p>

                <div className="mt-8 pt-6 border-t border-nearle-border/40 flex items-center gap-4">
                  {/* Custom Avatar Icon */}
                  <div className="w-12 h-12 rounded-full bg-purple-deep flex items-center justify-center font-display font-extrabold text-white text-sm shadow-nearle-sm">
                    {TESTIMONIALS[active]!.avatarText}
                  </div>

                  <div className="flex-1">
                    <h4 className="font-display font-bold text-sm text-nearle-dark flex items-center gap-2">
                      <span>{TESTIMONIALS[active]!.name}</span>
                      <span className="inline-flex items-center px-1.5 py-0.5 rounded-full bg-green-500/15 text-green-700 font-mono text-[8px] font-bold uppercase tracking-wider">
                        ✓ Verified
                      </span>
                    </h4>
                    <p className="font-body text-xs text-nearle-mid mt-0.5">
                      {TESTIMONIALS[active]!.role} · {TESTIMONIALS[active]!.society}
                    </p>
                  </div>
                </div>
              </GlassCard>
            </motion.div>
          </AnimatePresence>

          {/* Carousel dots indicators */}
          <div className="flex justify-center gap-2 mt-8">
            {TESTIMONIALS.map((_, idx) => (
              <button
                key={idx}
                onClick={() => setActive(idx)}
                className={`w-2.5 h-2.5 rounded-full transition-all duration-300 ${
                  active === idx ? 'bg-purple-deep w-6' : 'bg-purple-lavender hover:bg-purple-primary'
                }`}
                aria-label={`Go to slide ${idx + 1}`}
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}
