'use client';

import { useTranslation } from 'react-i18next';
import { motion } from 'motion/react';
import { Quote, Star, Package } from 'lucide-react';
import { Container } from '@/components/ui';
import type { Testimonial } from '@/models';
import testimonialsData from '@/data/testimonials.json';

export function TestimonialsSection() {
  const { t } = useTranslation();
  const testimonials = testimonialsData as Testimonial[];

  return (
    <section className="py-24 bg-gradient-to-b from-blue-50/30 to-white relative overflow-hidden">
      {/* Background Pattern */}
      <div className="absolute inset-0 opacity-[0.02]" style={{
        backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233A4A9C' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
      }} />

      <Container className="relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="text-center mb-16"
        >
          <div className="inline-block px-5 py-2 bg-gradient-to-r from-[#3A4A9C]/10 to-blue-100 rounded-full mb-6">
            <span className="text-sm font-semibold text-[#3A4A9C] flex items-center gap-2">
              <Star className="w-4 h-4 fill-current" />
              {t('testimonials.badge', 'Témoignages clients')}
            </span>
          </div>
          <h2 className="text-4xl sm:text-5xl font-bold text-gray-900 mb-4">
            {t('testimonials.title')}
          </h2>
          <p className="text-lg text-gray-600 max-w-2xl mx-auto">
            {t('testimonials.subtitle', 'Découvrez ce que nos clients disent de leur expérience avec Dropex')}
          </p>
        </motion.div>

        <div className="grid md:grid-cols-3 gap-8">
          {testimonials.map((testimonial, index) => {
            // Unified brand color scheme - all using variations of #3A4A9C
            const cardStyles = [
              {
                bg: 'bg-gradient-to-br from-[#3A4A9C]/5 via-white to-blue-50/50',
                accentColor: 'from-[#3A4A9C] to-[#2d3875]',
                avatarBg: 'from-[#3A4A9C] to-[#2d3875]',
                badgeBg: 'bg-[#3A4A9C]/10',
                badgeText: 'text-[#3A4A9C]',
              },
              {
                bg: 'bg-gradient-to-br from-blue-50/50 via-white to-[#3A4A9C]/5',
                accentColor: 'from-[#2d3875] to-[#3A4A9C]',
                avatarBg: 'from-[#2d3875] to-[#3A4A9C]',
                badgeBg: 'bg-blue-100',
                badgeText: 'text-[#3A4A9C]',
              },
              {
                bg: 'bg-gradient-to-br from-[#3A4A9C]/5 via-blue-50/30 to-white',
                accentColor: 'from-[#3A4A9C] to-blue-600',
                avatarBg: 'from-[#3A4A9C] to-blue-600',
                badgeBg: 'bg-[#3A4A9C]/10',
                badgeText: 'text-[#3A4A9C]',
              },
            ];
            
            const style = cardStyles[index % 3];
            
            return (
              <motion.div
                key={testimonial.id}
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5, delay: index * 0.1 }}
                className="h-full"
              >
                <div className={`${style.bg} rounded-3xl p-8 h-full flex flex-col shadow-sm hover:shadow-2xl transition-all duration-500 group relative overflow-hidden border border-white/60`}>
                  {/* Decorative gradient blob */}
                  <div className={`absolute -top-20 -right-20 w-48 h-48 bg-gradient-to-br ${style.accentColor} opacity-10 rounded-full blur-3xl group-hover:scale-150 transition-transform duration-700`} />
                  
                  {/* Top section with stars and verified badge */}
                  <div className="flex items-start justify-between mb-6 relative z-10">
                    <div className="flex gap-0.5">
                      {[...Array(5)].map((_, i) => (
                        <Star key={i} className="w-5 h-5 fill-amber-400 text-amber-400" strokeWidth={0} />
                      ))}
                    </div>
                    <div className={`${style.badgeBg} ${style.badgeText} px-3 py-1 rounded-full text-xs font-semibold flex items-center gap-1.5`}>
                      <div className="w-1.5 h-1.5 rounded-full bg-current" />
                      {t('testimonials.verified', 'Vérifié')}
                    </div>
                  </div>

                  {/* Quote with modern typography */}
                  <div className="relative mb-8 flex-grow">
                    <Quote className={`absolute right-4 bottom-0 w-24 h-24 text-gray-900/[0.03] -rotate-12`} strokeWidth={2} />
                    <p className="text-gray-800 leading-relaxed text-[15px] relative z-10 font-medium">
                      {t(testimonial.quoteKey)}
                    </p>
                  </div>

                  {/* Bottom section with author info */}
                  <div className="relative z-10">
                    <div className="flex items-start gap-4">
                      {/* Avatar with gradient */}
                      <div className={`w-16 h-16 bg-gradient-to-br ${style.avatarBg} rounded-2xl flex items-center justify-center flex-shrink-0 shadow-lg shadow-black/10 group-hover:scale-105 transition-transform duration-300`}>
                        <span className="text-2xl font-bold text-white">
                          {t(testimonial.authorKey).charAt(0)}
                        </span>
                      </div>
                      
                      {/* Info section */}
                      <div className="flex-1 min-w-0">
                        <p className="font-bold text-gray-900 text-lg mb-0.5">
                          {t(testimonial.authorKey)}
                        </p>
                        <p className="text-sm text-gray-600 mb-2">
                          {t(testimonial.roleKey)}
                        </p>
                        
                        {/* Metrics row */}
                        <div className="flex items-center gap-4 text-xs text-gray-500 pt-2 border-t border-gray-200/60">
                          <div className="flex items-center gap-1.5">
                            <Package className="w-3.5 h-3.5" />
                            <span>{index === 0 ? '500+' : index === 1 ? '300+' : '1000+'} {t('testimonials.orders', 'colis/mois')}</span>
                          </div>
                          <div className="flex items-center gap-1.5">
                            <span className="text-gray-400">•</span>
                            <span>{index === 0 ? '2' : index === 1 ? '1.5' : '3'} {t('testimonials.years', 'ans')}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </motion.div>
            );
          })}
        </div>
      </Container>
    </section>
  );
}