"use client";

import { useRef } from "react";
import { motion, Variants, useScroll, useTransform } from "framer-motion";

// تعریف Variants با انیمیشن‌های نرم‌تر و روان‌تر
const containerVariants: Variants = {
  hidden: {
    opacity: 0,
    filter: "blur(8px)", // بلور اولیه کمی بیشتر برای حس نرم‌تر شدن
  },
  visible: {
    opacity: 1,
    filter: "blur(0px)",
    transition: {
      duration: 1.2, // زمان طولانی‌تر برای محو شدن بلور
      when: "beforeChildren",
      staggerChildren: 0.15, // فاصله زمانی کمی بیشتر بین ورود هر خط
    },
  },
};

const itemVariants: Variants = {
  hidden: { y: 30, opacity: 0 }, // شروع از فاصله کمی پایین‌تر
  visible: {
    y: 0,
    opacity: 1,
    transition: {
      duration: 1.2, // مدت زمان لغزش به بالا
      // این منحنی (easeOutExpo) راز انیمیشن‌های نرم سبک اپل است
      ease: [0.16, 1, 0.3, 1] as [number, number, number, number], 
    },
  },
};

export default function Hero() {
  const ref = useRef<HTMLElement>(null);

  // هوک‌ها برای افکت پارالاکس و محو شدن هنگام اسکرول
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start start", "end start"],
  });
  const y = useTransform(scrollYProgress, [0, 1], ["0%", "50%"]);
  const opacity = useTransform(scrollYProgress, [0, 0.8], [1, 0]);

  return (
    <section
      ref={ref}
      className="relative h-screen flex flex-col items-center justify-center overflow-hidden bg-gray-950"
      onMouseMove={(e) => {
        // آپدیت متغیرهای CSS برای موقعیت موس جهت افکت نورافکن
        const { currentTarget, clientX, clientY } = e;
        const { left, top } = currentTarget.getBoundingClientRect();
        currentTarget.style.setProperty("--mouse-x", `${clientX - left}px`);
        currentTarget.style.setProperty("--mouse-y", `${clientY - top}px`);
      }}
    >
      {/* لایه پس‌زمینه: نورافکن (Spotlight) */}
      <div
        className="
          pointer-events-none absolute -inset-px rounded-xl opacity-50
          transition-opacity duration-300 
          before:absolute before:inset-0 before:rounded-xl 
          before:bg-[radial-gradient(600px_circle_at_var(--mouse-x)_var(--mouse-y),rgba(30,129,243,0.15),transparent_40%)]
        "
      />

      {/* لایه پس‌زمینه: خطوط گرید */}
      <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />

      {/* کانتینر اصلی محتوا */}
      <motion.div
        style={{ y, opacity }}
        variants={containerVariants}
        initial="hidden"
        animate="visible"
        className="z-10 text-center w-full max-w-5xl mx-auto px-4"
      >
        <motion.div
          variants={itemVariants}
          className="mb-6 inline-block rounded-full border border-blue-500/30 bg-blue-500/10 px-4 py-1.5 text-sm text-blue-300"
        >
          توسعه نرم‌افزار با بالاترین کیفیت
        </motion.div>

        <motion.h1
          variants={itemVariants}
          className="text-5xl md:text-7xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to-neutral-400 pb-4"
        >
          راهکارهای دیجیتال برای فردای شما
        </motion.h1>

        <motion.p
          variants={itemVariants}
          className="mt-4 text-lg text-neutral-400 max-w-2xl mx-auto"
        >
          ما با ترکیب خلاقیت و تکنولوژی‌های پیشرفته، نرم‌افزارهایی خلق می‌کنیم
          که نه تنها نیازهای امروز شما را برآورده می‌کنند، بلکه مسیر رشد آینده
          کسب‌وکار شما را هموار می‌سازند.
        </motion.p>

        <motion.div
          variants={itemVariants}
          className="mt-8 flex justify-center gap-4"
        >
          <button className="px-6 py-2 rounded-md bg-blue-600 text-white font-medium hover:bg-blue-700 transition-colors">
            شروع همکاری
          </button>
          <button className="px-6 py-2 rounded-md border border-neutral-700 text-neutral-300 font-medium hover:bg-neutral-800 transition-colors">
            مشاهده نمونه کارها
          </button>
        </motion.div>
      </motion.div>
    </section>
  );
}