import { motion } from "motion/react";
import { ImageWithFallback } from "./figma/ImageWithFallback";
import { MapPin, Clock, Shield, Star } from "lucide-react";

interface HeroSectionProps {
  children: React.ReactNode;
}

const floatingElements = [
  {
    icon: MapPin,
    delay: 0,
    x: 100,
    y: -50,
    color: "text-blue-300",
  },
  {
    icon: Clock,
    delay: 0.5,
    x: -80,
    y: -30,
    color: "text-green-300",
  },
  {
    icon: Shield,
    delay: 1,
    x: 120,
    y: 50,
    color: "text-yellow-300",
  },
  {
    icon: Star,
    delay: 1.5,
    x: -100,
    y: 60,
    color: "text-purple-300",
  },
];

export function HeroSection({ children }: HeroSectionProps) {
  return (
    <section className="relative min-h-[500px] sm:min-h-[600px] lg:min-h-[700px] flex items-center justify-center overflow-hidden">
      {/* Background Image */}
      <div className="absolute inset-0 z-0">
        <motion.div
          initial={{ scale: 1.1 }}
          animate={{ scale: 1 }}
          transition={{ duration: 1.5, ease: "easeOut" }}
        >
          <ImageWithFallback
            src="https://images.unsplash.com/flagged/photo-1573763683412-ceb49038903c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxjaXR5JTIwc2t5bGluZSUyMHRyYW5zcG9ydGF0aW9ufGVufDF8fHx8MTc1NTU5OTk1NXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral"
            alt="City skyline"
            className="w-full h-full object-cover"
          />
        </motion.div>
        <div className="absolute inset-0 bg-gradient-to-b from-black/60 via-black/40 to-black/60" />
      </div>

      {/* Simplified Floating Icons */}
      {floatingElements.map((element, index) => (
        <motion.div
          key={index}
          className="absolute z-5 hidden lg:block"
          style={{
            left: `calc(50% + ${element.x}px)`,
            top: `calc(50% + ${element.y}px)`,
          }}
          initial={{ opacity: 0, scale: 0 }}
          animate={{
            opacity: 0.3,
            scale: 1,
            y: [0, -10, 0],
          }}
          transition={{
            delay: element.delay + 0.5,
            duration: 1,
            y: {
              duration: 3,
              repeat: Infinity,
              ease: "easeInOut",
            },
          }}
        >
          <div className="w-16 h-16 bg-white/10 backdrop-blur-sm rounded-full flex items-center justify-center">
            <element.icon
              className={`h-8 w-8 ${element.color}`}
            />
          </div>
        </motion.div>
      ))}

      {/* Content */}
      <div className="relative z-10 container mx-auto px-4 text-center text-white py-8 sm:py-12">
        <div className="max-w-4xl mx-auto space-y-4 sm:space-y-6 mb-6 sm:mb-8">
          <motion.h1
            className="text-2xl sm:text-4xl md:text-5xl lg:text-6xl font-bold leading-tight"
            initial={{ opacity: 0, y: 50 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            <motion.span
              initial={{ opacity: 0, y: -20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.4 }}
              className="block text-white"
            >
              Durg/Bhilai-Raipur Airport Drop(Oneway)
            </motion.span>
            <motion.span
              className="block text-yellow-400 text-xl sm:text-3xl md:text-4xl lg:text-5xl"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.6 }}
            >
              ₹999
            </motion.span>
          </motion.h1>

          <motion.p
            className="text-base sm:text-lg md:text-xl lg:text-2xl text-white/90 max-w-3xl mx-auto px-4"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.8 }}
          >
            Book a reliable ride in minutes. Available 24/7 with
            professional drivers.
          </motion.p>
        </div>

        {/* Booking Form Container */}
        <motion.div
          className="flex justify-center px-2 sm:px-4"
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 1 }}
        >
          {children}
        </motion.div>
      </div>
    </section>
  );
}