import { motion } from 'motion/react';
import earthImage from '../assets/f32abfc6ad0bc41084ce6dd6d98890502970dda7.png';

export function AttractionHassleFreeSection() {
  return (
    <section className="bg-background relative overflow-hidden">
      {/* Subtle Background Elements */}
      <div className="absolute inset-0">
        <div className="absolute top-1/4 left-1/6 w-32 h-32 bg-primary/5 rounded-full blur-2xl"></div>
        <div className="absolute bottom-1/3 right-1/6 w-24 h-24 bg-secondary/5 rounded-full blur-2xl"></div>
      </div>

      <div className="relative z-10">
        <motion.div
          className="flex flex-col lg:flex-row items-center py-16 lg:py-24"
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.8, ease: "easeOut" }}
        >
          {/* Left Side - Earth Ellipse with Cloud Animation */}
          <motion.div
            className="w-full lg:w-1/2 relative flex items-center justify-center px-4 lg:px-8"
            initial={{ opacity: 0, x: -40 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.7, ease: "easeOut" }}
          >
            {/* Earth Ellipse Container */}
            <div className="relative w-96 h-96 lg:w-[28rem] lg:h-[28rem] xl:w-[32rem] xl:h-[32rem] flex items-center justify-center">
              {/* Earth PNG Image */}
              <motion.div
                className="w-80 h-80 lg:w-[22rem] lg:h-[22rem] xl:w-[26rem] xl:h-[26rem] flex items-center justify-center"
                animate={{ 
                  rotate: 360,
                  scale: [1, 1.05, 1]
                }}
                transition={{ 
                  rotate: { duration: 30, repeat: Infinity, ease: "linear" },
                  scale: { duration: 4, repeat: Infinity, ease: "easeInOut" }
                }}
              >
                <img 
                  src={earthImage} 
                  alt="Earth" 
                  className="w-full h-full object-contain drop-shadow-2xl"
                />
              </motion.div>

              {/* Floating Cloud Animations */}
              <motion.div
                className="absolute -top-6 left-12 lg:left-16 w-20 h-10 lg:w-24 lg:h-12 bg-white/80 rounded-full shadow-sm"
                animate={{ 
                  x: [0, 25, 0],
                  y: [0, -12, 0]
                }}
                transition={{ 
                  duration: 6, 
                  repeat: Infinity, 
                  ease: "easeInOut"
                }}
              >
                <div className="absolute top-2 left-2 w-7 h-7 lg:w-8 lg:h-8 bg-white/60 rounded-full"></div>
                <div className="absolute top-0 right-2 w-10 h-10 lg:w-12 lg:h-12 bg-white/70 rounded-full"></div>
              </motion.div>

              <motion.div
                className="absolute top-16 lg:top-20 -right-8 lg:-right-12 w-16 h-8 lg:w-20 lg:h-10 bg-white/70 rounded-full shadow-sm"
                animate={{ 
                  x: [0, -20, 0],
                  y: [0, 10, 0]
                }}
                transition={{ 
                  duration: 8, 
                  repeat: Infinity, 
                  ease: "easeInOut",
                  delay: 1
                }}
              >
                <div className="absolute top-1 left-1 w-5 h-5 lg:w-6 lg:h-6 bg-white/50 rounded-full"></div>
                <div className="absolute top-0 right-1 w-8 h-8 lg:w-10 lg:h-10 bg-white/60 rounded-full"></div>
              </motion.div>

              <motion.div
                className="absolute bottom-12 lg:bottom-16 -left-6 lg:-left-8 w-18 h-9 lg:w-22 lg:h-11 bg-white/75 rounded-full shadow-sm"
                animate={{ 
                  x: [0, 30, 0],
                  y: [0, -8, 0]
                }}
                transition={{ 
                  duration: 7, 
                  repeat: Infinity, 
                  ease: "easeInOut",
                  delay: 2
                }}
              >
                <div className="absolute top-1 left-1 w-6 h-6 lg:w-8 lg:h-8 bg-white/55 rounded-full"></div>
                <div className="absolute top-0 right-1 w-9 h-9 lg:w-11 lg:h-11 bg-white/65 rounded-full"></div>
              </motion.div>

              <motion.div
                className="absolute -bottom-4 right-16 lg:right-20 w-14 h-7 lg:w-18 lg:h-9 bg-white/65 rounded-full shadow-sm"
                animate={{ 
                  x: [0, -18, 0],
                  y: [0, 8, 0]
                }}
                transition={{ 
                  duration: 5, 
                  repeat: Infinity, 
                  ease: "easeInOut",
                  delay: 0.5
                }}
              >
                <div className="absolute top-0 left-1 w-4 h-4 lg:w-5 lg:h-5 bg-white/45 rounded-full"></div>
                <div className="absolute top-0 right-1 w-7 h-7 lg:w-9 lg:h-9 bg-white/55 rounded-full"></div>
              </motion.div>

              {/* Orbital Ring - Centered around the Earth */}
              <motion.div
                className="absolute inset-0 w-96 h-96 lg:w-[28rem] lg:h-[28rem] xl:w-[32rem] xl:h-[32rem] border-2 border-dashed border-primary/20 rounded-full flex items-center justify-center"
                animate={{ rotate: 360 }}
                transition={{ duration: 40, repeat: Infinity, ease: "linear" }}
              >
                {/* Small orbiting elements */}
                <motion.div
                  className="absolute top-0 left-1/2 w-4 h-4 lg:w-5 lg:h-5 bg-primary/40 rounded-full transform -translate-x-1/2 -translate-y-1/2"
                  animate={{ rotate: -360 }}
                  transition={{ duration: 40, repeat: Infinity, ease: "linear" }}
                />
                <motion.div
                  className="absolute bottom-0 left-1/2 w-3 h-3 lg:w-4 lg:h-4 bg-secondary/40 rounded-full transform -translate-x-1/2 translate-y-1/2"
                  animate={{ rotate: -360 }}
                  transition={{ duration: 40, repeat: Infinity, ease: "linear" }}
                />
              </motion.div>
            </div>
          </motion.div>

          {/* Right Side - Content with Hierarchy - Full Width */}
          <motion.div
            className="w-full lg:w-1/2 lg:pl-16 xl:pl-24"
            initial={{ opacity: 0, x: 40 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.7, ease: "easeOut", delay: 0.1 }}
          >
            <div className="container mx-auto px-4 lg:px-0 lg:pr-4 xl:pr-8">
            {/* Main Heading */}
            <motion.h1 
              className="text-4xl lg:text-5xl xl:text-6xl leading-tight text-foreground mb-12"
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, ease: "easeOut" }}
            >
              <span className="font-light">Make the most of every</span>{' '}
              <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent font-bold italic">
                attraction
              </span>
              <span className="font-light">—hassle-free.</span>
            </motion.h1>

            {/* Content Sections */}
            <div className="space-y-10">
              {/* Section 1 */}
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, ease: "easeOut", delay: 0.2 }}
              >
                <h3 className="text-xl lg:text-2xl font-semibold text-foreground mb-4">
                  Explore a diverse array of travel passes
                </h3>
                <p className="text-lg text-muted-foreground leading-relaxed">
                  Explore a diverse array of travel passes, each designed to enhance your 
                  adventure. From unlimited access to top attractions to exclusive discounts 
                  on local experiences, our selection ensures you find the ideal pass for 
                  your journey.
                </p>
              </motion.div>

              {/* Section 2 */}
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, ease: "easeOut", delay: 0.3 }}
              >
                <h3 className="text-xl lg:text-2xl font-semibold text-foreground mb-4">
                  Discover every attraction effortlessly
                </h3>
                <p className="text-lg text-muted-foreground leading-relaxed">
                  Explore a diverse array of travel passes, each designed to enhance your 
                  adventure. From unlimited access to top attractions to exclusive discounts 
                  on local experiences, our selection ensures you find the ideal pass for 
                  your journey.
                </p>
              </motion.div>

              {/* Section 3 */}
              <motion.div
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.6, ease: "easeOut", delay: 0.4 }}
              >
                <h3 className="text-xl lg:text-2xl font-semibold text-foreground mb-4">
                  Discover every attraction effortlessly
                </h3>
                <p className="text-lg text-muted-foreground leading-relaxed">
                  Explore a diverse array of travel passes, each designed to enhance your 
                  adventure. From unlimited access to top attractions to exclusive discounts 
                  on local experiences, our selection ensures you find the ideal pass for 
                  your journey.
                </p>
              </motion.div>
            </div>
            </div>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
}