import { Button } from "./ui/button";
import { GridPattern } from "./GridPattern";
import { Calendar, Briefcase } from "lucide-react";
import { motion } from "framer-motion";
import Spline from "@splinetool/react-spline";
import { useNavigate } from "react-router-dom";

export function HeroSection() {
  const navigate = useNavigate();
  return (
    <section
      id="hero"
      className="relative lg:min-h-[85vh] flex items-center pt-20"
    >
      <GridPattern />

      <div className="container mx-auto px-6 lg:px-8">
        <div className="flex flex-col-reverse lg:flex-row items-center gap-12 w-full relative z-10">
          {/* Left Content */}
          <motion.div
            className="w-full lg:w-1/2"
            initial={{ opacity: 0, x: -50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8 }}
          >
            {/* Animated Badge */}
            <motion.div
              className="group relative inline-flex items-center rounded-full px-4 py-1.5 shadow-[inset_0_-8px_10px_#8fdfff1f] transition-shadow duration-500 ease-out hover:shadow-[inset_0_-5px_10px_#8fdfff3f] mb-6"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
            >
              <span
                className="absolute inset-0 block h-full w-full animate-gradient rounded-[inherit] bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:300%_100%] p-[1px]"
                style={{
                  WebkitMask:
                    "linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0)",
                  WebkitMaskComposite: "destination-out",
                  maskComposite: "subtract",
                }}
              />
              <span className="relative z-10 flex items-center text-sm font-medium">
                🎉
                <span
                  aria-hidden="true"
                  className="mx-2 h-4 w-px shrink-0 bg-neutral-500"
                />
                <span className="bg-clip-text text-transparent bg-[linear-gradient(90deg,#ffaa40_0%,#9c40ff_50%,#ffaa40_100%)] bg-[length:200%_100%] animate-[gradientMove_6s_ease_infinite]">
                  25+ Years Of Industry Expertise
                </span>
                <svg
                  className="ml-1 w-4 h-4 stroke-neutral-500 transition-transform duration-300 group-hover:translate-x-0.5"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M9 5l7 7-7 7"
                  />
                </svg>
              </span>
            </motion.div>

            <motion.h1
              className="text-4xl sm:text-5xl md:text-6xl font-semibold tracking-tight text-white max-w-3xl"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.3 }}
            >
              {/* Architecting Digital Success for Startups &amp; Enterprises */}
              AI mobile application developers for Startups &amp; Enterprises
            </motion.h1>

            <motion.p
              className="mt-6 max-w-2xl text-lg text-gray-400"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.4 }}
            >
              We design and build secure, AI-powered apps and software tailored
              for scale, speed, and user engagement.
            </motion.p>

            <motion.div
              className="mt-10 flex flex-col sm:flex-row gap-3"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.5 }}
            >
              <Button
                size="lg"
                className="whitespace-nowrap"
                onClick={() => navigate("/start-a-project")}
              >
                <Calendar className="w-4 h-4" />
                Book a Free Consultation
              </Button>

              <Button
                variant="secondary"
                size="lg"
                className="whitespace-nowrap"
                onClick={() => navigate("/services")}
              >
                <Briefcase className="w-4 h-4" />
                Explore Services
              </Button>
            </motion.div>
          </motion.div>

          {/* Right Side - Animated Gradient Background */}
          <motion.div
            className="w-full lg:w-1/2 h-[320px] md:h-[480px] lg:h-[560px] shrink-0 relative"
            initial={{ opacity: 0, x: 50 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            <div className="absolute w-[160px] h-[46px] bg-[#0e0e0e] bottom-[3%] right-[1%]"></div>
            <div className="w-full h-full overflow-hidden rounded-2xl pointer-events-none">
              <Spline scene="https://prod.spline.design/nwCSrO6RnOG0v1GV/scene.splinecode" />
            </div>
          </motion.div>
        </div>

        {/* Floating scroll indicator */}
        <motion.div
          className="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 1.0 }}
        >
          <svg
            className="w-6 h-6 text-gray-400"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M19 14l-7 7m0 0l-7-7m7 7V3"
            />
          </svg>
        </motion.div>
      </div>
    </section>
  );
}