import { motion } from 'framer-motion';
import {
  FaPiggyBank,
  FaHandHoldingUsd,
  FaCreditCard,
  FaLock,
  FaMoneyCheckAlt,
  FaMobileAlt
} from 'react-icons/fa';
import { services } from '../data/siteData';

const iconMap = {
  FaPiggyBank,
  FaHandHoldingUsd,
  FaCreditCard,
  FaLock,
  FaMoneyCheckAlt,
  FaMobileAlt
};

const ServicesSection = () => {
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1
      }
    }
  };

  const cardVariants = {
    hidden: { opacity: 0, y: 50 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.6,
        ease: "easeOut"
      }
    }
  };

  return (
    <section id="services" className="py-20 lg:py-28 bg-gradient-to-b from-white via-primary-50/30 to-white relative overflow-hidden">
      {/* Background Decorations */}
      <div className="absolute top-0 left-0 w-72 h-72 bg-primary-200/20 rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2"></div>
      <div className="absolute bottom-0 right-0 w-96 h-96 bg-accent-200/20 rounded-full blur-3xl translate-x-1/2 translate-y-1/2"></div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        {/* Section Header */}
        <motion.div
          initial={{ opacity: 0, y: -30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.7 }}
          className="text-center mb-16"
        >
          <motion.span
            initial={{ opacity: 0, scale: 0.8 }}
            whileInView={{ opacity: 1, scale: 1 }}
            viewport={{ once: true }}
            transition={{ delay: 0.2, duration: 0.5 }}
            className="inline-block text-primary-600 font-poppins font-semibold text-sm uppercase tracking-wider mb-3"
          >
            Our Services
          </motion.span>
          <h2 className="text-4xl lg:text-5xl font-playfair font-bold text-gray-900 mb-4">
            Financial Solutions for{' '}
            <span className="text-primary-600">Rural Communities</span>
          </h2>
          <p className="text-lg text-gray-600 font-inter max-w-2xl mx-auto">
            Comprehensive banking and credit services designed specifically for farmers and rural entrepreneurs
          </p>
        </motion.div>

        {/* Services Grid */}
        <motion.div
          variants={containerVariants}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true, margin: "-100px" }}
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
        >
          {services.map((service, index) => {
            const IconComponent = iconMap[service.icon];

            return (
              <motion.div
                key={service.id}
                variants={cardVariants}
                whileHover={{
                  y: -10,
                  transition: { duration: 0.3, ease: "easeOut" }
                }}
                className="group relative"
              >
                {/* Card */}
                <div className="relative h-full bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-shadow duration-300 overflow-hidden border border-gray-100">
                  {/* Gradient Background on Hover */}
                  <div className="absolute inset-0 bg-gradient-to-br from-primary-500/5 to-accent-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>

                  <div className="relative p-8">
                    {/* Icon */}
                    {IconComponent && (
                      <motion.div
                        whileHover={{ rotate: [0, -10, 10, -10, 0], scale: 1.1 }}
                        transition={{ duration: 0.5 }}
                        className="w-16 h-16 rounded-xl bg-gradient-to-br from-primary-200 to-primary-300 flex items-center justify-center mb-6 shadow-lg group-hover:shadow-xl transition-shadow"
                      >
                        <IconComponent className="text-3xl" style={{ color: '#1e4a1f' }} />
                      </motion.div>
                    )}

                    {/* Title */}
                    <h3 className="text-2xl font-poppins font-bold text-gray-900 mb-3 group-hover:text-primary-700 transition-colors">
                      {service.title}
                    </h3>

                    {/* Description */}
                    <p className="text-gray-600 font-inter mb-6 leading-relaxed">
                      {service.description}
                    </p>

                    {/* Features List */}
                    <ul className="space-y-2">
                      {service.features.map((feature, idx) => (
                        <motion.li
                          key={idx}
                          initial={{ opacity: 0, x: -10 }}
                          whileInView={{ opacity: 1, x: 0 }}
                          viewport={{ once: true }}
                          transition={{ delay: 0.1 * idx }}
                          className="flex items-center gap-2 text-sm text-gray-700 font-inter"
                        >
                          <div className="w-1.5 h-1.5 rounded-full bg-primary-500"></div>
                          <span>{feature}</span>
                        </motion.li>
                      ))}
                    </ul>

                    {/* Decorative Corner */}
                    <div className="absolute top-0 right-0 w-20 h-20 bg-gradient-to-br from-primary-400/10 to-transparent rounded-bl-full"></div>
                  </div>

                  {/* Bottom Border Animation */}
                  <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-primary-500 to-accent-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left"></div>
                </div>
              </motion.div>
            );
          })}
        </motion.div>

        {/* Call to Action */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ delay: 0.5, duration: 0.7 }}
          className="text-center mt-16"
        >
          <p className="text-gray-600 font-inter mb-6">
            Need help choosing the right service for you?
          </p>
          <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            className="bg-gradient-to-r from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 text-white px-8 py-4 rounded-lg font-poppins font-semibold shadow-lg hover:shadow-xl transition-all duration-300"
          >
            Talk to Our Experts
          </motion.button>
        </motion.div>
      </div>
    </section>
  );
};

export default ServicesSection;