Fix button color and poperly match with 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,
  Megaphone,
  Trophy,
  Lightbulb,
  CheckCircle,
} 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,rgba(59,130,246,0.1)_1px,transparent_1px),linear-gradient(to_bottom,rgba(167,139,250,0.1)_1px,transparent_1px)] bg-[length:4rem_4rem] [mask-image:radial-gradient(ellipse_at_center,transparent_30%,white)]"
        style={{
          backgroundPosition: `calc(${backgroundX} + 50%) calc(${backgroundY} + 50%)`,
        }}
      />
    </div>
  );
});

// --- Main Hero Section ---
function EventHeroSection() {
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
        delayChildren: 0.2,
        when: "beforeChildren",
      },
    },
  };

  const textItemVariants = {
    hidden: { opacity: 0, y: 30, filter: "blur(5px)" },
    visible: {
      opacity: 1,
      y: 0,
      filter: "blur(0px)",
      transition: {
        duration: 0.9,
        ease: [0.22, 1, 0.36, 1],
        type: "tween",
      },
    },
  };

  const iconItemVariantsFactory = (finalRotation = 0) => ({
    hidden: {
      opacity: 0,
      y: 40,
      scale: 0.4,
      rotate: finalRotation - 30,
      filter: "blur(6px)",
    },
    visible: {
      opacity: 1,
      y: 0,
      scale: 1,
      rotate: finalRotation,
      filter: "blur(0px)",
      transition: {
        duration: 0.8,
        ease: [0.43, 0.13, 0.23, 0.96],
        type: "spring",
        stiffness: 100,
        damping: 10,
      },
    },
  });

  return (
    <section className="relative w-full min-h-screen flex items-center overflow-hidden bg-gradient-to-br from-gray-950 to-gray-800 text-white font-poppins">
      <BackgroundGrid />

      {/* Radial Glow */}
      <div className="absolute inset-0 z-0 opacity-20">
        <div className="absolute left-0 top-1/2 transform -translate-y-1/2 w-[800px] h-[800px] bg-purple-500 rounded-full mix-blend-multiply blur-3xl opacity-30 animate-pulse"></div>
        <div className="absolute left-[15%] top-1/2 transform -translate-y-1/2 w-[600px] h-[600px] bg-teal-500 rounded-full mix-blend-multiply blur-3xl opacity-20 animate-pulse"></div>
      </div>

      {/* Content */}
      <div className="container mx-auto px-6 lg:px-8 relative z-10 py-16 lg:py-24">
        <motion.div
          initial="hidden"
          animate="visible"
          variants={containerVariants}
          className="lg:grid lg:grid-cols-2 lg:gap-12 items-center"
        >
          {/* LEFT SIDE */}
          <div className="text-center lg:text-left space-y-7">
            <motion.span
              variants={textItemVariants}
              className="inline-block px-6 py-2.5 bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold tracking-wide rounded-full shadow-xl backdrop-blur-md border border-purple-400/30"
            >
              Crafting Exceptional Experiences
            </motion.span>

            <motion.h1
              variants={textItemVariants}
              className="text-4xl sm:text-5xl lg:text-7xl font-extrabold font-[Inter] tracking-tight leading-tight text-white drop-shadow-[0_1px_1px_rgba(0,0,0,0.4)]"
            >
              Transforming Your <br />
              <span className="bg-gradient-to-r from-teal-400 via-purple-400 to-fuchsia-500 bg-clip-text text-transparent inline-block">
                Vision into Reality
              </span>
            </motion.h1>

            <motion.p
              variants={textItemVariants}
              className="max-w-xl text-lg text-gray-300 leading-relaxed font-[Poppins] font-medium"
            >
              From grand galas to intimate gatherings, we meticulously plan and
              flawlessly execute every detail, ensuring your event is not just
              celebrated, but truly unforgettable.
            </motion.p>

            <motion.div
              variants={textItemVariants}
              className="mt-8 flex flex-col sm:flex-row justify-center lg:justify-start gap-5"
            >
              <Link
                href="#services"
                className="group inline-flex items-center justify-center gap-3 px-9 py-4 bg-gradient-to-r from-cyan-500 to-sky-600 hover:from-cyan-600 hover:to-sky-700 text-white font-semibold tracking-wide rounded-full shadow-lg hover:shadow-2xl transition-all duration-300 transform-gpu hover:scale-105 ring-2 ring-cyan-400/40"
              >
                <Lightbulb className="w-5 h-5" />
                <span>Discover Solutions</span>
              </Link>
              <Link
                href="#contact"
                className="group inline-flex items-center justify-center gap-3 px-9 py-4 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 transition-all duration-300 rounded-full shadow-lg text-white font-semibold transform-gpu hover:scale-105 ring-2 ring-pink-400/40"
              >
                <Sparkles className="w-5 h-5" />
                <span>Plan Your Event</span>
                <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-300" />
              </Link>
            </motion.div>
          </div>

          {/* RIGHT SIDE ICONS */}
          <div className="relative h-80 sm:h-96 lg:h-[550px] mt-12 lg:mt-0 hidden lg:block">
            {[
              { Icon: Megaphone, color: "text-pink-400", pos: "top-[15%] left-[20%]", rotate: -12 },
              { Icon: Calendar, color: "text-blue-400", pos: "top-[5%] right-[15%]", rotate: 10 },
              { Icon: Clipboard, color: "text-green-400", pos: "bottom-[10%] left-[10%]", rotate: 5 },
              { Icon: CheckCircle, color: "text-yellow-400", pos: "bottom-[20%] right-[25%]", rotate: 15 },
              { Icon: PartyPopper, color: "text-pink-400", pos: "top-[40%] left-[40%]", rotate: 0 },
              { Icon: Lightbulb, color: "text-cyan-400", pos: "bottom-[35%] right-[10%]", rotate: 5 },
              { Icon: Trophy, color: "text-yellow-500", pos: "top-[30%] right-[35%]", rotate: -10 },
            ].map(({ Icon, color, pos, rotate }, index) => (
              <motion.div
                key={index}
                className={`absolute ${pos} cursor-pointer`}
                variants={iconItemVariantsFactory(rotate)}
                whileHover={{ scale: 1.2, rotate }}
              >
                <div className={`p-3 bg-gradient-to-br from-gray-800/70 to-gray-900/70 backdrop-blur-md rounded-2xl shadow-xl border border-gray-700/50`}>
                  <Icon className={`w-10 h-10 ${color}`} />
                </div>
              </motion.div>
            ))}
          </div>
        </motion.div>
      </div>

      {/* Scroll Indicator */}
      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 2, duration: 0.5 }}
        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">
          <div className="w-6 h-10 border-2 border-gray-600 rounded-3xl flex justify-center items-start p-1 shadow-[0_0_12px_rgba(255,255,255,0.1)]">
            <motion.div
              animate={{ y: [0, 16, 0] }}
              transition={{ duration: 1.8, repeat: Infinity, ease: "easeInOut" }}
              className="w-1 h-2 bg-gray-400 rounded-full"
            />
          </div>
        </div>
      </motion.div>
    </section>
  );
}

export default memo(EventHeroSection);