"use client";

import { useEffect, useRef, useState, useMemo } from "react";
import { motion, useAnimation, useInView, Variants, useScroll, useTransform } from "framer-motion";
import { ArrowRight, Briefcase } from "lucide-react";

import Link from "next/link";

// Generate deterministic particle positions
const generateParticlePositions = (count: number) => {
  const positions = [];
  for (let i = 0; i < count; i++) {
    const seed = i * 0.618033988749895;
    positions.push({
      x: ((seed * 100) % 100),
      y: ((seed * 137) % 100),
      scale: 0.3 + ((seed * 0.5) % 0.5),
      duration: 8 + ((seed * 12) % 12),
      delay: (seed * 5) % 5,
      moveX: ((seed * 50) % 100) - 50,
      moveY: -80 - ((seed * 40) % 40),
    });
  }
  return positions;
};

export default function PKIHero() {
  const [mounted, setMounted] = useState(false);
  const controls = useAnimation();
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, amount: 0.3 });

  // Parallax effects
  const { scrollY } = useScroll();
  const yBackground = useTransform(scrollY, [0, 1000], [0, 300]);
  const opacityBackground = useTransform(scrollY, [0, 500], [1, 0.3]);

  const particlePositions = useMemo(() => generateParticlePositions(30), []);

  useEffect(() => {
    const timer = setTimeout(() => {
      setMounted(true);
    }, 0);

    if (isInView) {
      controls.start("visible");
    }

    return () => clearTimeout(timer);
  }, [controls, isInView]);

  const fadeUp: Variants = {
    hidden: { opacity: 0, y: 20 },
    visible: {
      opacity: 1,
      y: 0,
      transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] }
    }
  };

  const staggerContainer: Variants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1,
        delayChildren: 0.1
      }
    }
  };

  const impactVariants = {
    hidden: { opacity: 0, y: 15 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        duration: 0.5,
        ease: "easeOut" as const
      }
    },
    animate: {
      color: ["#ffffff", "#e2e8f0", "#ffffff", "#cbd5e1", "#ffffff"],
      textShadow: [
        "0 0 0px rgba(255,255,255,0)",
        "0 0 15px rgba(255,255,255,0.3)",
        "0 0 0px rgba(255,255,255,0)",
        "0 0 20px rgba(255,255,255,0.4)",
        "0 0 0px rgba(255,255,255,0)"
      ],
      transition: {
        duration: 3,
        repeat: Infinity,
        ease: "easeInOut" as const
      }
    }
  };

  return (
    <section className="relative min-h-[85vh] flex items-center justify-center overflow-hidden bg-sky-900">

      {/* Background Image with parallax */}
      <motion.div
        className="absolute inset-0 w-[120%] h-[120%] -left-[10%] -top-[10%] bg-cover bg-center origin-center"
        style={{
          backgroundImage: `url('/images/1.webp')`,
          y: yBackground,
          opacity: opacityBackground
        }}
        initial={{ scale: 1.1, filter: "blur(10px)" }}
        animate={{ scale: 1, filter: "blur(0px)" }}
        transition={{ duration: 2.5, ease: "easeOut" }}
      />

      {/* Modern High-End Overlay Gradients */}
      <div className="absolute inset-0 bg-gradient-to-b from-slate-950/90 via-sky-950/90 to-slate-950 opacity-100 z-0" />

      <motion.div
        className="absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(14,165,233,0.3)_0%,transparent_60%)] z-0"
        animate={{
          scale: [1, 1.1, 1],
          opacity: [0.6, 0.9, 0.6]
        }}
        transition={{ duration: 10, repeat: Infinity, ease: "easeInOut" }}
      />

      <motion.div
        className="absolute bottom-0 w-full h-[60%] bg-[radial-gradient(ellipse_at_bottom,rgba(56,189,248,0.15)_0%,transparent_70%)] z-0"
        animate={{
          scale: [1, 1.2, 1],
        }}
        transition={{ duration: 12, repeat: Infinity, ease: "easeInOut", delay: 1 }}
      />

      {/* Hero Particles */}
      {mounted && (
        <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
          {particlePositions.map((pos, i) => (
            <motion.div
              key={i}
              className="absolute bg-white rounded-full shadow-[0_0_10px_2px_rgba(255,255,255,0.3)]"
              style={{
                left: `${pos.x}%`,
                top: `${pos.y}%`,
                width: `${3 * pos.scale}px`,
                height: `${3 * pos.scale}px`,
              }}
              animate={{
                y: [0, pos.moveY],
                x: [0, pos.moveX],
                opacity: [0, 0.8, 0],
                scale: [0, pos.scale, 0]
              }}
              transition={{
                duration: pos.duration,
                repeat: Infinity,
                ease: "linear",
                delay: pos.delay,
              }}
            />
          ))}
        </div>
      )}

      {/* Main Content - Centered */}
      <div className="relative z-20 w-full max-w-7xl mx-auto px-6 py-12 md:py-16">
        <motion.div
          ref={ref}
          variants={staggerContainer}
          initial="hidden"
          animate={controls}
          className="text-center max-w-4xl mx-auto"
        >
          {/* Badge */}
          <motion.div
            variants={fadeUp}
            className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 mb-4"
          >
            <Briefcase className="w-3 h-3 text-sky-400" />
            <span className="text-[9px] font-black tracking-wider text-sky-300 uppercase">Professionals for Kingdom Impact</span>
          </motion.div>

          {/* Small heading */}
          <motion.h2
            variants={fadeUp}
            className="text-[10px] sm:text-xs uppercase tracking-[0.3em] text-sky-400 font-semibold mb-3"
          >
            Your Career is Your
          </motion.h2>

          {/* Main animated heading - Desktop */}
          <motion.h1
            variants={fadeUp}
            className="hidden sm:block text-3xl sm:text-4xl lg:text-5xl font-black tracking-tighter leading-[1.2] mb-5"
          >
            <motion.span
              variants={impactVariants}
              animate="animate"
              className="block text-white"
            >
              The Talent Your Work
            </motion.span>
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-sky-400 via-sky-300 to-blue-400">
              Deserves. All in One Platform.
            </span>
          </motion.h1>

          {/* Main heading - Mobile */}
          <motion.h1
            variants={fadeUp}
            className="block sm:hidden text-2xl font-black tracking-tighter leading-[1.3] mb-5"
          >
            <motion.span
              variants={impactVariants}
              animate="animate"
              className="block text-white"
            >
              The Talent Your Work
            </motion.span>
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-sky-400 via-sky-300 to-blue-400">
              Deserves. All in One Platform.
            </span>
          </motion.h1>

          {/* Description */}
          <motion.p
            variants={fadeUp}
            className="text-sm sm:text-base text-slate-300 leading-relaxed max-w-2xl mx-auto mb-6"
          >
            Connect with skilled professionals ready to deliver. From quick tasks to complex projects,
            find the right people to move your business forward.
          </motion.p>

          {/* CTA Buttons - Desktop */}
          <motion.div
            variants={fadeUp}
            className="hidden sm:flex items-center justify-center gap-3 mb-8"
          >
            <Link href="/jobs">
              <motion.button
                whileHover={{ scale: 1.05, y: -2 }}
                whileTap={{ scale: 0.98 }}
                className="group px-6 py-2.5 bg-white text-sky-900 font-bold rounded-full shadow-[0_20px_35px_-10px_rgba(14,165,233,0.4)] transition-all uppercase tracking-wider text-[10px] hover:shadow-[0_25px_40px_-12px_rgba(14,165,233,0.5)]"
              >
                <span className="flex items-center gap-2">
                  Find Talent
                  <ArrowRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform" />
                </span>
              </motion.button>
            </Link>

            <Link href="/register">
              <motion.button
                whileHover={{ scale: 1.05, backgroundColor: "rgba(255,255,255,0.12)" }}
                whileTap={{ scale: 0.98 }}
                className="group px-6 py-2.5 bg-white/10 backdrop-blur-md text-white font-bold rounded-full border border-white/20 transition-all uppercase tracking-wider text-[10px] hover:bg-white/15"
              >
                <span className="flex items-center gap-2">
                  Find Work
                  <Briefcase className="w-3.5 h-3.5" />
                </span>
              </motion.button>
            </Link>
          </motion.div>

          {/* CTA Buttons - Mobile */}
          <motion.div
            variants={fadeUp}
            className="flex sm:hidden flex-col gap-2 mb-6"
          >
            <Link href="/jobs" className="w-full">
              <button className="w-full px-6 py-2.5 bg-white text-sky-900 font-bold rounded-full shadow-lg text-xs">
                Find Talent
              </button>
            </Link>
            <Link href="/register" className="w-full">
              <button className="w-full px-6 py-2.5 bg-white/10 backdrop-blur-md text-white font-bold rounded-full border border-white/20 text-xs">
                Find Work
              </button>
            </Link>
          </motion.div>

        </motion.div>
      </div>

      {/* Decorative Bottom Fade */}
      <div className="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-sky-950 to-transparent pointer-events-none z-10" />

      {/* Grain Texture */}
      <div className="absolute inset-0 opacity-[0.03] pointer-events-none z-10 bg-[url('https://grainy-gradients.vercel.app/noise.svg')]" />
    </section>
  );
}