import { Shield, Zap, Users, ArrowRight } from 'lucide-react';
import { Link } from 'react-router-dom';
import { motion, useInView, useMotionValue, useSpring, useTransform } from 'framer-motion';
import { useRef, MouseEvent } from 'react';
import { fadeInUp, slideInLeft, slideInRight, buttonHover, buttonTap, cardHover } from '@/utils/animations';

// Optimized 3D Tilt Card Component with reduced effect
const TiltCard = ({ children, className = '' }: { children: React.ReactNode; className?: string }) => {
  const cardRef = useRef<HTMLDivElement>(null);
  const mouseX = useMotionValue(0);
  const mouseY = useMotionValue(0);

  // Reduced rotation range for subtler effect (10 -> 5 degrees)
  const rotateX = useSpring(useTransform(mouseY, [-0.5, 0.5], [5, -5]), {
    stiffness: 200,
    damping: 25,
  });
  const rotateY = useSpring(useTransform(mouseX, [-0.5, 0.5], [-5, 5]), {
    stiffness: 200,
    damping: 25,
  });

  const handleMouseMove = (e: MouseEvent<HTMLDivElement>) => {
    if (!cardRef.current) return;
    const rect = cardRef.current.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;
    mouseX.set((e.clientX - centerX) / (rect.width / 2));
    mouseY.set((e.clientY - centerY) / (rect.height / 2));
  };

  const handleMouseLeave = () => {
    mouseX.set(0);
    mouseY.set(0);
  };

  return (
    <motion.div
      ref={cardRef}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      style={{
        rotateX,
        rotateY,
        transformStyle: 'preserve-3d',
        willChange: 'transform',
      }}
      className={className}
      whileHover={{ scale: 1.01 }}
      transition={{ duration: 0.3 }}
    >
      {children}
    </motion.div>
  );
};

const ValuePillars = () => {
  const pillars = [
    {
      icon: Users,
      number: '01',
      title: 'End-to-end Managed IT',
      description: 'Comprehensive computer & networking solutions tailored to your workflows — helpdesk, proactive maintenance, and clear SLAs.',
      image: 'https://images.unsplash.com/photo-1551434678-e076c223a692?w=600&h=400&fit=crop&auto=format'
    },
    {
      icon: Zap,
      number: '02',
      title: 'Faster Devices, Happier Teams',
      description: 'Practical upgrades like SSD migrations and cleanup reduce tickets and boost morale.',
      image: '/faster_happier.png'
    },
    {
      icon: Shield,
      number: '03',
      title: 'Secure Remote Access',
      description: 'Zero-drama VPN with modern protocols (e.g., WireGuard) for secure, high-speed access anywhere.',
      image: 'https://images.unsplash.com/photo-1563986768494-4dee2763ff3f?w=600&h=400&fit=crop&auto=format'
    },
  ];

  const headerRef = useRef(null);
  const isHeaderInView = useInView(headerRef, { 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="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">
              Why teams choose us for{' '}
              <span className="text-neon">reliable IT</span>
            </h2>
            <p className="text-xl text-foreground-muted max-w-3xl mx-auto">
              We handle the complexity so you can focus on what you do best.
            </p>
          </div>
        </motion.div>

        <div className="space-y-24">
          {pillars.map((pillar, index) => {
            const Icon = pillar.icon;
            const isReverse = index % 2 === 1;
            const itemRef = useRef(null);
            const isInView = useInView(itemRef, { once: true, margin: "-100px" });

            return (
              <motion.div
                key={pillar.number}
                ref={itemRef}
                initial="hidden"
                animate={isInView ? "visible" : "hidden"}
                variants={isReverse ? slideInRight : slideInLeft}
                transition={{ delay: 0.2 }}
              >
                <div className={`flex flex-col ${isReverse ? 'lg:flex-row-reverse' : 'lg:flex-row'} items-center gap-12 lg:gap-16`}>
                  {/* Content */}
                  <div className="flex-1 space-y-6">
                    <div className="flex items-center space-x-4">
                      <motion.span
                        className="text-6xl font-heading font-bold text-neon/30"
                        initial={{ opacity: 0, scale: 0.5 }}
                        animate={isInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.5 }}
                        transition={{ delay: 0.4, duration: 0.6, type: "spring" }}
                      >
                        {pillar.number}
                      </motion.span>
                      <motion.div
                        className="w-12 h-12 bg-neon/20 rounded-xl flex items-center justify-center"
                        initial={{ opacity: 0, rotate: -180 }}
                        animate={isInView ? { opacity: 1, rotate: 0 } : { opacity: 0, rotate: -180 }}
                        transition={{ delay: 0.5, duration: 0.6 }}
                      >
                        <Icon className="w-6 h-6 text-neon" />
                      </motion.div>
                    </div>

                    <h3 className="font-heading font-bold text-3xl text-foreground">
                      {pillar.title}
                    </h3>

                    <p className="text-lg text-foreground-muted leading-relaxed">
                      {pillar.description}
                    </p>

                    <motion.div whileHover={buttonHover} whileTap={buttonTap}>
                      <Link
                        to="/services"
                        className="btn-ghost group flex items-center space-x-2 w-fit"
                        onClick={() => window.scrollTo(0, 0)}
                      >
                        <span>Learn more</span>
                        <motion.div
                          animate={{ x: [0, 3, 0] }}
                          transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
                        >
                          <ArrowRight className="w-4 h-4" />
                        </motion.div>
                      </Link>
                    </motion.div>
                  </div>

                  {/* Image with 3D Tilt Effect */}
                  <TiltCard className="flex-1">
                    <div className="card-dark p-2 group hover:shadow-neon transition-all duration-500">
                      <div className="relative overflow-hidden rounded-xl">
                        <motion.img
                          src={pillar.image}
                          alt={pillar.title}
                          className="w-full h-64 lg:h-80 object-cover"
                          whileHover={{ scale: 1.05 }}
                          transition={{ duration: 0.4, ease: "easeOut" }}
                          loading="lazy"
                          style={{ willChange: 'transform' }}
                        />
                        {/* Simplified shine effect on hover */}
                        <motion.div
                          className="absolute inset-0 bg-gradient-to-tr from-transparent via-white/8 to-transparent pointer-events-none"
                          initial={{ x: '-100%', y: '-100%' }}
                          whileHover={{ x: '100%', y: '100%' }}
                          transition={{ duration: 0.5, ease: "easeOut" }}
                        />
                      </div>
                    </div>
                  </TiltCard>
                </div>
              </motion.div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

export default ValuePillars;