import { Monitor, Wifi, Cloud, Shield, Database, Settings } from 'lucide-react';
import { Link } from 'react-router-dom';
import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';
import { fadeInUp, staggerContainer, staggerItem, cardHover, glowHover } from '@/utils/animations';

const ServicesOverview = () => {
  const services = [
    {
      icon: Monitor,
      title: 'Hardware & Desktop Support',
      description: 'Fast devices and responsive support that keeps your team productive.',
      features: ['SSD upgrades', 'Hardware procurement', '24/7 helpdesk']
    },
    {
      icon: Wifi,
      title: 'Network Infrastructure',
      description: 'Reliable switching and Wi-Fi that scales with your business growth.',
      features: ['Enterprise Wi-Fi', 'Network design', 'Performance monitoring']
    },
    {
      icon: Cloud,
      title: 'Virtualization & Cloud',
      description: 'Modern infrastructure that reduces costs and improves flexibility.',
      features: ['Cloud migration', 'Hybrid solutions', 'Resource optimization']
    },
    {
      icon: Shield,
      title: 'Secure Remote Access',
      description: 'Zero-drama VPN with modern protocols for secure anywhere access.',
      features: ['WireGuard VPN', 'Multi-factor auth', 'Secure endpoints']
    },
    {
      icon: Database,
      title: 'Backup & Business Continuity',
      description: 'Comprehensive protection against data loss and downtime.',
      features: ['Automated backups', 'Disaster recovery', 'Business continuity']
    },
    {
      icon: Settings,
      title: 'Microsoft 365 Enablement',
      description: 'Full utilization of your M365 investment with expert guidance.',
      features: ['Migration services', 'Training & adoption', 'Security configuration']
    }
  ];

  const headerRef = useRef(null);
  const gridRef = useRef(null);
  const isHeaderInView = useInView(headerRef, { once: true, margin: "-100px" });
  const isGridInView = useInView(gridRef, { once: true, margin: "-100px" });

  return (
    <section className="py-24 bg-background-deep relative overflow-hidden">
      {/* Background decoration */}
      <div className="absolute inset-0 grid-overlay opacity-20"></div>
      <div className="absolute top-1/4 right-0 w-96 h-96 bg-neon/5 rounded-full blur-3xl"></div>
      <div className="absolute bottom-1/4 left-0 w-96 h-96 bg-neon/5 rounded-full blur-3xl"></div>

      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div
          ref={headerRef}
          initial="hidden"
          animate={isHeaderInView ? "visible" : "hidden"}
          variants={fadeInUp}
        >
          <div className="text-center mb-16">
            <h2 className="font-heading font-bold text-4xl sm:text-5xl text-foreground mb-6">
              Complete IT solutions for{' '}
              <span className="text-neon">modern businesses</span>
            </h2>
            <p className="text-xl text-foreground-muted max-w-3xl mx-auto">
              From desktop support to enterprise infrastructure — we've got your technology covered.
            </p>
          </div>
        </motion.div>

        <motion.div
          ref={gridRef}
          initial="hidden"
          animate={isGridInView ? "visible" : "hidden"}
          variants={staggerContainer}
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
        >
          {services.map((service, index) => {
            const Icon = service.icon;

            return (
              <motion.div key={service.title} variants={staggerItem} className="h-full">
                <motion.div
                  className="card-dark p-8 h-full relative overflow-hidden group border border-white/5 hover:border-neon/50 transition-colors duration-500"
                  whileHover={{
                    y: -10,
                    scale: 1.02,
                    boxShadow: "0 20px 40px -10px rgba(51, 102, 255, 0.3)"
                  }}
                  transition={{ duration: 0.4, ease: "easeOut" }}
                >
                  {/* Subtle gradient background nice touch */}
                  <div className="absolute inset-0 bg-gradient-to-br from-neon/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />

                  {/* Icon */}
                  <motion.div
                    className="w-12 h-12 bg-neon/10 rounded-xl flex items-center justify-center mb-6 relative z-10 group-hover:bg-neon/20 transition-colors duration-300"
                    whileHover={{ rotate: 360, scale: 1.1 }}
                    transition={{ duration: 0.6 }}
                  >
                    <Icon className="w-6 h-6 text-neon drop-shadow-[0_0_8px_rgba(51,102,255,0.6)]" />
                  </motion.div>

                  {/* Content */}
                  <div className="relative z-10">
                    <h3 className="font-heading font-bold text-xl text-foreground mb-4 group-hover:text-neon transition-colors duration-300">
                      {service.title}
                    </h3>

                    <p className="text-foreground-muted mb-6 leading-relaxed">
                      {service.description}
                    </p>

                    {/* Features */}
                    <ul className="space-y-2 mb-6">
                      {service.features.map((feature) => (
                        <li key={feature} className="flex items-center text-sm text-foreground-muted">
                          <motion.div
                            className="w-1.5 h-1.5 bg-neon rounded-full mr-3 shadow-[0_0_5px_rgba(51,102,255,0.8)]"
                            animate={{
                              scale: [1, 1.5, 1],
                              opacity: [0.7, 1, 0.7]
                            }}
                            transition={{
                              duration: 2,
                              repeat: Infinity,
                              delay: index * 0.2
                            }}
                          />
                          {feature}
                        </li>
                      ))}
                    </ul>

                    {/* CTA */}
                    <Link
                      to="/services"
                      className="inline-flex items-center text-neon font-medium group-hover:translate-x-2 transition-transform duration-300"
                    >
                      Learn more
                      <motion.svg
                        className="w-4 h-4 ml-1"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                        animate={{ x: [0, 3, 0] }}
                        transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
                      >
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />
                      </motion.svg>
                    </Link>
                  </div>
                </motion.div>
              </motion.div>
            );
          })}
        </motion.div>

        {/* Bottom CTA */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={isGridInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
          transition={{ delay: 0.8, duration: 0.6 }}
          className="text-center mt-16"
        >
          <Link
            to="/services"
            className="btn-ghost text-lg px-12 py-4"
          >
            View all services
          </Link>
        </motion.div>
      </div>
    </section>
  );
};

export default ServicesOverview;