"use client";
import { motion, useScroll, useTransform, useMotionValue, useSpring } from "framer-motion";
import { ArrowUpRight, ArrowDown } from "lucide-react";
import { useRef, useEffect } from "react";

export default function Hero() {
  const ref = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end start"] });
  const y = useTransform(scrollYProgress, [0, 1], [0, 120]);
  const opacity = useTransform(scrollYProgress, [0, 0.6], [1, 0]);
  const mx = useMotionValue(0);
  const my = useMotionValue(0);
  const sx = useSpring(mx, { stiffness: 50, damping: 20 });
  const sy = useSpring(my, { stiffness: 50, damping: 20 });
  useEffect(() => {
    const el = ref.current;
    if (!el || window.matchMedia("(pointer: coarse)").matches) return;
    const onMove = (e: MouseEvent) => {
      const r = el.getBoundingClientRect();
      mx.set((e.clientX - r.left) / r.width - 0.5);
      my.set((e.clientY - r.top) / r.height - 0.5);
    };
    window.addEventListener("mousemove", onMove);
    return () => window.removeEventListener("mousemove", onMove);
  }, [mx, my]);

  return (
    <section ref={ref} id="home" className="relative min-h-[100vh] flex flex-col justify-center overflow-hidden bg-[#07080c]">
      {/* background */}
      <div className="absolute inset-0">
        {/* radial gradients */}
        <div className="absolute inset-0 bg-[radial-gradient(600px_600px_at_50%_0%,rgba(59,130,246,0.12),transparent_70%),radial-gradient(800px_500px_at_80%_20%,rgba(99,102,241,0.08),transparent_70%),radial-gradient(900px_600px_at_10%_60%,rgba(59,130,246,0.06),transparent_70%)]" />
        {/* mouse-following glow */}
        <motion.div style={{ x: useTransform(sx, [-0.5, 0.5], [-60, 60]), y: useTransform(sy, [-0.5, 0.5], [-40, 40]) }} className="absolute left-1/2 top-[22%] -translate-x-1/2 w-[700px] h-[400px] bg-[radial-gradient(ellipse_at_center,rgba(59,130,246,0.14),transparent_70%)] blur-[1px] pointer-events-none hidden lg:block" />
        {/* grid */}
        <div className="absolute inset-0 grid-pattern opacity-[0.35] [mask-image:radial-gradient(70%_60%_at_50%_20%,black,transparent)]" />
        {/* particles */}
        <div className="absolute inset-0 opacity-40">
          <div className="absolute top-[18%] left-[12%] w-1 h-1 bg-white/40 rounded-full animate-pulse" />
          <div className="absolute top-[32%] right-[18%] w-1 h-1 bg-blue-400/60 rounded-full" />
          <div className="absolute top-[55%] left-[22%] w-[2px] h-[2px] bg-white/30 rounded-full" />
          <div className="absolute top-[68%] right-[30%] w-1 h-1 bg-white/20 rounded-full" />
          <div className="absolute top-[42%] left-[48%] w-[2px] h-[2px] bg-blue-300/50 rounded-full" />
        </div>
        {/* grain */}
        <div className="absolute inset-0 opacity-[0.03] pointer-events-none" style={{ backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")` }} />
        {/* bottom fade */}
        <div className="absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-[#07080c] to-transparent" />
      </div>

      <motion.div style={{ y, opacity }} className="relative z-10 max-w-[1200px] w-full mx-auto px-6 sm:px-8 lg:px-8 pt-28 sm:pt-32 pb-10">
        {/* eyebrow */}
        <motion.div
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.1 }}
          className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] backdrop-blur px-3 py-1.5"
        >
          <span className="w-2 h-2 rounded-full bg-emerald-400 shadow-[0_0_8px_rgba(52,211,153,0.6)] animate-pulse" />
          <span className="text-[11px] tracking-[0.18em] font-semibold text-white/70">FOUNDER • DEVELOPER • ENTREPRENEUR</span>
          <span className="hidden sm:inline text-[11px] text-white/30">• Available for new ideas</span>
        </motion.div>

        <motion.h1
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7, delay: 0.2, ease: [0.16, 1, 0.3, 1] }}
          className="mt-8 font-[750] tracking-[-0.04em] leading-[0.9] text-white"
        >
          <span className="block text-[42px] sm:text-[64px] lg:text-[84px] xl:text-[92px]">Hi, I&apos;m</span>
          <span className="block text-[42px] sm:text-[64px] lg:text-[84px] xl:text-[92px] bg-gradient-to-r from-white via-white to-white/60 bg-clip-text text-transparent">Ravneet Brar.</span>
        </motion.h1>

        <motion.p
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.35 }}
          className="mt-6 max-w-[720px] text-[20px] sm:text-[26px] lg:text-[30px] leading-[1.2] tracking-[-0.02em] font-[500] text-white/85 text-balance"
        >
          I build <span className="text-white">technology</span>, <span className="text-white">businesses</span>, and digital experiences.
        </motion.p>

        <motion.p
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.45 }}
          className="mt-4 max-w-[560px] text-[15px] sm:text-[16px] leading-[1.7] text-white/55"
        >
          Founder of Zyphron Cloud and a developer passionate about cloud infrastructure, hosting, web development, and building products that solve real problems.
        </motion.p>

        <motion.div
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.55 }}
          className="mt-8 flex flex-wrap gap-3"
        >
          <a href="#work" className="inline-flex items-center gap-2 bg-white text-black font-semibold text-[14px] px-6 py-[12px] rounded-full hover:bg-white/90 transition">
            View My Work <ArrowUpRight size={16} />
          </a>
          <a href="#contact" className="inline-flex items-center gap-2 bg-white/10 backdrop-blur border border-white/15 text-white font-semibold text-[14px] px-6 py-[12px] rounded-full hover:bg-white/15 transition">
            Let&apos;s Connect
          </a>
        </motion.div>

        {/* meta row */}
        <motion.div
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ delay: 0.8 }}
          className="mt-14 flex flex-wrap items-center gap-6 text-[12px] tracking-widest uppercase text-white/30 border-t border-white/[0.06] pt-6"
        >
          <span>Punjab, India • Remote Worldwide</span>
          <span className="hidden sm:inline w-1 h-1 bg-white/20 rounded-full" />
          <span className="hidden sm:inline">Zyphron Cloud Founder</span>
          <span className="ml-auto hidden lg:flex items-center gap-2 text-white/40">
            SCROLL <ArrowDown size={14} className="animate-bounce" />
          </span>
        </motion.div>
      </motion.div>

      {/* scroll indicator - bottom center on mobile */}
      <motion.div
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 1 }}
        className="absolute bottom-6 left-1/2 -translate-x-1/2 lg:hidden flex flex-col items-center gap-2 text-white/30"
      >
        <span className="text-[10px] tracking-[0.2em]">SCROLL</span>
        <span className="w-[1px] h-10 bg-gradient-to-b from-white/30 to-transparent" />
      </motion.div>
    </section>
  );
}