import { motion } from 'framer-motion';
import { Code2, Figma, Layout, Rocket, CheckCircle } from 'lucide-react';
import { RevealText } from '../components/RevealText';
import { services } from '../mock';
import { Link } from 'react-router-dom';

const Services = () => {
  const iconMap = {
    Code2: Code2,
    Figma: Figma,
    Layout: Layout,
    Rocket: Rocket
  };

  return (
    <div className="bg-[#0B1220] min-h-screen pt-32 pb-20">
      <div className="max-w-7xl mx-auto px-6 lg:px-8">
        {/* Header */}
        <RevealText>
          <div className="text-center mb-20">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              className="inline-block px-4 py-2 bg-[#4F7CFF]/10 border border-[#4F7CFF]/20 rounded-full mb-6"
            >
              <span className="text-[#4F7CFF] text-sm font-medium">Our Services</span>
            </motion.div>
            <h1 className="text-5xl md:text-6xl font-bold text-white mb-6">
              What We Do Best
            </h1>
            <p className="text-xl text-white/60 max-w-3xl mx-auto leading-relaxed">
              From concept to deployment, we provide comprehensive web development services tailored to your business needs.
            </p>
          </div>
        </RevealText>

        {/* Services Grid */}
        <div className="space-y-12">
          {services.map((service, index) => {
            const IconComponent = iconMap[service.icon];
            const isEven = index % 2 === 0;

            return (
              <RevealText key={service.id} delay={index * 0.1}>
                <motion.div
                  whileHover={{ scale: 1.01 }}
                  className={`grid grid-cols-1 lg:grid-cols-2 gap-12 items-center p-12 bg-gradient-to-br from-white/5 to-transparent border border-white/10 rounded-3xl hover:border-[#4F7CFF]/30 transition-all duration-300 backdrop-blur-sm ${
                    isEven ? '' : 'lg:grid-flow-dense'
                  }`}
                >
                  {/* Icon & Title */}
                  <div className={isEven ? '' : 'lg:col-start-2'}>
                    <div className="w-16 h-16 bg-[#4F7CFF]/10 rounded-2xl flex items-center justify-center mb-6">
                      <IconComponent size={32} className="text-[#4F7CFF]" />
                    </div>
                    <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
                      {service.title}
                    </h2>
                    <p className="text-lg text-white/60 leading-relaxed mb-8">
                      {service.description}
                    </p>
                  </div>

                  {/* What's Included */}
                  <div className={isEven ? '' : 'lg:col-start-1 lg:row-start-1'}>
                    <div className="p-8 bg-white/5 rounded-2xl border border-white/10">
                      <h3 className="text-xl font-semibold text-white mb-6">
                        What's Included
                      </h3>
                      <ul className="space-y-4">
                        {service.included.map((item, i) => (
                          <motion.li
                            key={i}
                            initial={{ opacity: 0, x: -20 }}
                            whileInView={{ opacity: 1, x: 0 }}
                            viewport={{ once: true }}
                            transition={{ delay: i * 0.1 }}
                            className="flex items-start gap-3"
                          >
                            <CheckCircle size={20} className="text-[#4F7CFF] flex-shrink-0 mt-0.5" />
                            <span className="text-white/80">{item}</span>
                          </motion.li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </motion.div>
              </RevealText>
            );
          })}
        </div>

        {/* CTA Section */}
        <RevealText delay={0.3}>
          <div className="mt-20 text-center p-16 bg-gradient-to-br from-[#4F7CFF]/10 to-transparent border border-[#4F7CFF]/20 rounded-3xl">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
              Ready to Build Something Exceptional?
            </h2>
            <p className="text-lg text-white/60 mb-8 max-w-2xl mx-auto">
              Every great product starts with a conversation. Let's discuss how we can bring your vision to life with clean code and modern design.
            </p>
            <Link to="/contact">
              <motion.button
                whileHover={{ scale: 1.05 }}
                whileTap={{ scale: 0.95 }}
                className="px-8 py-4 bg-[#4F7CFF] text-white rounded-xl font-semibold text-lg hover:bg-[#6B8FFF] transition-all duration-300 shadow-lg shadow-[#4F7CFF]/20"
              >
                Let's Talk
              </motion.button>
            </Link>
          </div>
        </RevealText>
      </div>
    </div>
  );
};

export default Services;