import { ArrowRight, Play } from 'lucide-react';
import { Link } from 'react-router-dom';
import { motion, useScroll, useTransform } from 'framer-motion';
import { heroVariants, heroItemVariants, buttonHover, buttonTap, easing } from '@/utils/animations';
import BackgroundAnimations from './BackgroundAnimations';

const HeroSection = () => {
  const { scrollY } = useScroll();

  // Smooth parallax effect with Framer Motion
  const y = useTransform(scrollY, [0, 500], [0, 150]);
  const opacity = useTransform(scrollY, [0, 300], [1, 0]);

  return (
    <section className="section-pin">
      <div className="relative h-full flex items-center justify-center overflow-hidden">
        {/* Background image with smooth parallax */}
        <motion.div
          className="absolute inset-0 overflow-hidden"
          style={{ y }}
        >
          <picture>
            <source type="image/avif" srcSet="/serverroom.avif" />
            <source type="image/webp" srcSet="/serverroom.webp" />
            <motion.img
              src="/serverroom.png"
              alt="Modern IT infrastructure with network connections and server equipment"
              className="w-full h-[110%] object-cover"
              initial={{ scale: 1.1, opacity: 0 }}
              animate={{ scale: 1.1, opacity: 1 }}
              transition={{ duration: 1.2, ease: easing.elegant }}
              loading="eager"
              fetchPriority="high"
            />
          </picture>

          {/* Animated background effects */}
          <BackgroundAnimations />

          {/* Darker overlay for better text contrast */}
          <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/50 to-black/60"></div>
        </motion.div>

        {/* Main content with staggered animations */}
        <motion.div
          className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"
          variants={heroVariants}
          initial="hidden"
          animate="visible"
          style={{ opacity }}
        >
          <div className="max-w-4xl mx-auto">

            {/* Badge */}
            <motion.div
              variants={heroItemVariants}
              className="inline-flex items-center px-4 py-2 rounded-full bg-neon/20 border border-neon/40 text-neon text-sm font-medium mb-8 drop-shadow-[0_0_10px_rgba(51,102,255,0.5)]"
            >
              <motion.span
                className="w-2 h-2 bg-neon rounded-full mr-2"
                animate={{
                  scale: [1, 1.2, 1],
                  opacity: [1, 0.7, 1],
                }}
                transition={{
                  duration: 2,
                  repeat: Infinity,
                  ease: "easeInOut",
                }}
              />
              Serving the Coastal Bend since 2010
            </motion.div>

            {/* Main headline */}
            <motion.h1
              variants={heroItemVariants}
              className="font-heading font-bold text-5xl sm:text-6xl lg:text-7xl text-white mb-6 text-balance drop-shadow-[0_0_20px_rgba(255,255,255,0.3)]"
            >
              Modern IT that keeps your{' '}
              <motion.span
                className="text-neon text-glow drop-shadow-[0_0_30px_rgba(51,102,255,0.8)]"
                animate={{
                  textShadow: [
                    '0 0 20px rgba(51,102,255,0.5)',
                    '0 0 30px rgba(51,102,255,0.8)',
                    '0 0 20px rgba(51,102,255,0.5)',
                  ],
                }}
                transition={{
                  duration: 3,
                  repeat: Infinity,
                  ease: "easeInOut",
                }}
              >
                business moving
              </motion.span>
            </motion.h1>

            {/* Subheadline */}
            <motion.p
              variants={heroItemVariants}
              className="text-xl sm:text-2xl text-white/95 mb-12 max-w-3xl mx-auto leading-relaxed drop-shadow-[0_0_15px_rgba(255,255,255,0.2)]"
            >
              From fast devices to secure remote access and resilient networks — we design,
              run and protect your tech so you can focus on growth.
            </motion.p>

            {/* CTA buttons with hover animations */}
            <motion.div
              variants={heroItemVariants}
              className="flex flex-col sm:flex-row gap-4 justify-center items-center"
            >
              <motion.div
                whileHover={buttonHover}
                whileTap={buttonTap}
              >
                <Link
                  to="/contact"
                  className="btn-neon group flex items-center space-x-2"
                >
                  <span>Get in touch</span>
                  <motion.div
                    animate={{ x: [0, 3, 0] }}
                    transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
                  >
                    <ArrowRight className="w-5 h-5" />
                  </motion.div>
                </Link>
              </motion.div>

              <motion.div
                whileHover={buttonHover}
                whileTap={buttonTap}
              >
                <Link
                  to="/services"
                  className="btn-ghost group flex items-center space-x-2"
                >
                  <Play className="w-5 h-5" />
                  <span>See our services</span>
                </Link>
              </motion.div>
            </motion.div>

          </div>
        </motion.div>

        {/* Animated scroll indicator */}
        <motion.div
          className="absolute bottom-8 left-1/2 transform -translate-x-1/2"
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 1.5, duration: 0.8 }}
        >
          <div className="w-6 h-10 border-2 border-neon/60 rounded-full flex justify-center drop-shadow-[0_0_10px_rgba(51,102,255,0.3)]">
            <motion.div
              className="w-1 h-3 bg-neon rounded-full mt-2"
              animate={{ y: [0, 12, 0] }}
              transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
            />
          </div>
        </motion.div>
      </div>
    </section>
  );
};

export default HeroSection;