'use client'

import { useState } from 'react'
import { Card } from '@/components/ui/card'
import { testimonials } from '@/lib/mock-data'
import { Quote, ChevronLeft, ChevronRight } from 'lucide-react'
import { SectionHeader } from '@/components/section-header'
import { Button } from '@/components/ui/button'

export function Testimonials() {
  const [current, setCurrent] = useState(0)

  const prev = () => setCurrent((c) => (c === 0 ? testimonials.length - 1 : c - 1))
  const next = () => setCurrent((c) => (c === testimonials.length - 1 ? 0 : c + 1))

  return (
    <section id="testimonials" className="section-padding bg-muted/30">
      <div className="container-wide">
        <SectionHeader
          eyebrow="Success Stories"
          title="What Our Participants Say"
          description="See how professionals and organisations worldwide have developed their skills and tackled real business challenges with BCTCI."
        />

        {/* Desktop grid */}
        <div className="hidden lg:grid lg:grid-cols-3 gap-6">
          {testimonials.slice(0, 3).map((testimonial) => (
            <TestimonialCard key={testimonial.id} testimonial={testimonial} />
          ))}
        </div>

        {/* Mobile/tablet carousel */}
        <div className="lg:hidden">
          <TestimonialCard testimonial={testimonials[current]} featured />
          <div className="flex items-center justify-center gap-4 mt-6">
            <Button variant="outline" size="icon" onClick={prev} aria-label="Previous testimonial">
              <ChevronLeft className="w-4 h-4" />
            </Button>
            <div className="flex gap-2">
              {testimonials.map((_, i) => (
                <button
                  key={i}
                  onClick={() => setCurrent(i)}
                  className={`w-2 h-2 rounded-full transition-colors ${i === current ? 'bg-accent' : 'bg-border'}`}
                  aria-label={`Go to testimonial ${i + 1}`}
                />
              ))}
            </div>
            <Button variant="outline" size="icon" onClick={next} aria-label="Next testimonial">
              <ChevronRight className="w-4 h-4" />
            </Button>
          </div>
        </div>
      </div>
    </section>
  )
}

function TestimonialCard({
  testimonial,
  featured = false,
}: {
  testimonial: (typeof testimonials)[0]
  featured?: boolean
}) {
  return (
    <Card
      className={`p-7 border border-border/50 hover:border-accent/30 hover:shadow-lg transition-all duration-300 bg-card ${
        featured ? 'max-w-xl mx-auto' : ''
      }`}
    >
      <Quote className="w-8 h-8 text-accent/40 mb-5" />
      <p className="text-foreground text-base leading-relaxed italic mb-8">
        &ldquo;{testimonial.message}&rdquo;
      </p>
      <div className="flex items-center gap-4 pt-5 border-t border-border/40">
        <div className="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-primary-foreground font-bold text-lg shrink-0">
          {testimonial.name.charAt(0)}
        </div>
        <div>
          <p className="font-semibold text-foreground text-sm">{testimonial.name}</p>
          <p className="text-xs text-muted-foreground">{testimonial.role}</p>
          <p className="text-xs text-accent font-medium mt-0.5">{testimonial.company}</p>
        </div>
      </div>
    </Card>
  )
}