Transform to dark theme 
and enhance the component tranfrom to modern ui 
"use client";

import { memo } from "react";
import { motion, useMotionValue, useTransform } from "framer-motion";
import Link from "next/link";
import { ArrowRight, Calendar, Sparkles, Clipboard, PartyPopper } from "lucide-react";


// --- Interactive Background Grid Component ---
const BackgroundGrid = memo(function BackgroundGrid() {
  const mouseX = useMotionValue(0);
  const mouseY = useMotionValue(0);

  const backgroundX = useTransform(mouseX, [0, 1], ["-50%", "50%"]);
  const backgroundY = useTransform(mouseY, [0, 1], ["-50%", "50%"]);

  function handleMouseMove({ currentTarget, clientX, clientY }) {
    const { left, top, width, height } = currentTarget.getBoundingClientRect();
    mouseX.set((clientX - left) / width);
    mouseY.set((clientY - top) / height);
  }

  return (
    <div
      onMouseMove={handleMouseMove}
      className="absolute inset-0 z-0"
    >
      <motion.div
        className="absolute inset-[-200%] bg-[linear-gradient(to_right,theme(colors.gray.200/50)_1px,transparent_1px),linear-gradient(to_bottom,theme(colors.gray.200/50)_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,theme(colors.gray.800/40)_1px,transparent_1px),linear-gradient(to_bottom,theme(colors.gray.800/40)_1px,transparent_1px)] bg-[size:3rem_3rem] [mask-image:radial-gradient(ellipse_at_center,transparent_30%,white)]"
        style={{
          backgroundPosition: `calc(${backgroundX} + 50%) calc(${backgroundY} + 50%)`,
        }}
      />
    </div>
  );
});


// --- Main Hero Section Component ---
function EventHeroSection() {
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: { opacity: 1, transition: { staggerChildren: 0.12, delayChildren: 0.3 } },
  };

  const textItemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: [0.43, 0.13, 0.23, 0.96] } },
  };

  const iconItemVariantsFactory = (finalRotation = 0) => ({
    hidden: { opacity: 0, y: 20, scale: 0.5, rotate: finalRotation - 20 },
    visible: {
      opacity: 1,
      y: 0,
      scale: 1,
      rotate: finalRotation,
      transition: { duration: 0.7, ease: [0.43, 0.13, 0.23, 0.96], type: 'spring', stiffness: 100 }
    },
  });

  return (
    <section className="relative w-full min-h-screen flex items-center overflow-hidden bg-gray-50 dark:bg-gray-900">
      <BackgroundGrid />

      <div className="container mx-auto px-6 lg:px-8 relative z-10">
        <motion.div
          initial="hidden"
          animate="visible"
          variants={containerVariants}
          className="lg:grid lg:grid-cols-2 lg:gap-16 items-center"
        >
          {/* Left Side (Content) */}
          <div className="text-center lg:text-left py-16 lg:py-0">
            <motion.span
              variants={textItemVariants}
              className="inline-block px-5 py-2 mb-6 text-sm font-semibold tracking-wide bg-white/60 dark:bg-gray-800/60 text-indigo-600 dark:text-indigo-400 rounded-full shadow-sm backdrop-blur-sm"
            >
              Unforgettable Moments, Flawlessly Executed
            </motion.span>

            <motion.h1
              variants={textItemVariants}
              className="text-5xl md:text-7xl font-bold tracking-tighter text-gray-900 dark:text-white leading-tight"
            >
              Where Vision
              <br />
              <span className="bg-gradient-to-r from-blue-500 to-pink-500 bg-clip-text text-transparent">
                Becomes Celebration
              </span>
            </motion.h1>

            <motion.p
              variants={textItemVariants}
              className="max-w-xl mx-auto lg:mx-0 mt-6 text-lg text-gray-600 dark:text-gray-300"
            >
              From corporate functions to personal celebrations, we bring your
              vision to life with creativity, precision, and a touch of magic.
            </motion.p>

            <motion.div
              variants={textItemVariants}
              className="mt-10 flex flex-col sm:flex-row justify-center lg:justify-start gap-4"
            >
              <Link
                href="#services"
                className="group inline-flex items-center justify-center gap-3 px-8 py-4 font-semibold text-white transition-all duration-300 bg-gray-900 dark:bg-white dark:text-gray-900 rounded-xl shadow-lg hover:shadow-xl hover:scale-105 active:scale-100"
              >
                <Calendar className="w-5 h-5" />
                Explore Services
              </Link>
              <Link
                href="#contact"
                className="group inline-flex items-center justify-center gap-3 px-8 py-4 font-semibold text-gray-700 dark:text-gray-200 transition-all duration-300 bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm rounded-xl shadow-md hover:shadow-lg hover:scale-105 active:scale-100"
              >
                <Sparkles className="w-5 h-5 text-yellow-500" />
                Get a Quote
                <ArrowRight className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1" />
              </Link>
            </motion.div>
          </div>

          {/* Right Side (SVG Icons) */}
          <div className="relative h-96 lg:h-[550px] mt-20 lg:mt-0 hidden lg:block">
            <motion.div
              className="absolute top-[15%] left-[20%]" // Adjusted position
              variants={iconItemVariantsFactory(-12)}   // Adjusted rotation
            >
              <div className="p-4 bg-white/70 dark:bg-gray-800/60 backdrop-blur-md rounded-2xl shadow-xl hover:shadow-2xl transition-shadow duration-300">
                <PartyPopper className="w-12 h-12 text-pink-500 dark:text-pink-400" />
              </div>
            </motion.div>

            <motion.div
              className="absolute top-[5%] right-[15%]" // Adjusted position
              variants={iconItemVariantsFactory(10)}    // Adjusted rotation
            >
              <div className="p-4 bg-white/70 dark:bg-gray-800/60 backdrop-blur-md rounded-2xl shadow-xl hover:shadow-2xl transition-shadow duration-300">
                <Calendar className="w-14 h-14 text-blue-500 dark:text-blue-400" />
              </div>
            </motion.div>

            <motion.div
              className="absolute bottom-[10%] left-[10%]" // Adjusted position
              variants={iconItemVariantsFactory(5)}      // Adjusted rotation
            >
              <div className="p-3 bg-white/70 dark:bg-gray-800/60 backdrop-blur-md rounded-2xl shadow-xl hover:shadow-2xl transition-shadow duration-300">
                <Clipboard className="w-10 h-10 text-green-500 dark:text-green-400" />
              </div>
            </motion.div>

            <motion.div
              className="absolute bottom-[20%] right-[25%]" // Adjusted position
              variants={iconItemVariantsFactory(15)}     // Adjusted rotation
            >
              <div className="p-3 bg-white/70 dark:bg-gray-800/60 backdrop-blur-md rounded-2xl shadow-xl hover:shadow-2xl transition-shadow duration-300">
                <Sparkles className="w-8 h-8 text-yellow-500 dark:text-yellow-400" />
              </div>
            </motion.div>
          </div>
        </motion.div>
      </div>

      {/* Scroll Indicator */}
      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 2.5, duration: 0.5 }} // Increased delay
        className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-10 hidden lg:block"
      >
        <div className="flex flex-col items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
          <div className="w-6 h-10 border-2 border-gray-400 dark:border-gray-500 rounded-3xl flex justify-center items-start p-1">
            <motion.div
              animate={{ y: [0, 16, 0] }}
              transition={{ duration: 1.8, repeat: Infinity, ease: "easeInOut" }}
              className="w-1 h-2 bg-gray-700 dark:bg-gray-300 rounded-full"
            />
          </div>
        </div>
      </motion.div>
    </section>
  );
}

export default memo(EventHeroSection);