"use client";

import React from "react";
import { motion } from "framer-motion";

const customEase: [number, number, number, number] = [0.16, 1, 0.3, 1];

export default function CtaBanner() {
  return (
    <section
      className="relative py-28 md:py-36 px-4 md:px-8 bg-gray-950 overflow-hidden flex items-center justify-center"
      onMouseMove={(e) => {
        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`);
      }}
    >
      {/* ========================================================
          پس‌زمینه کاملاً منطبق با سکشن Projects
          ======================================================== */}
      {/* افکت Spotlight */}
      <div className="pointer-events-none absolute -inset-px opacity-50 before:absolute before:inset-0 before:bg-[radial-gradient(800px_circle_at_var(--mouse-x)_var(--mouse-y),rgba(255,255,255,0.06),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]" />

      <div className="relative z-10 max-w-4xl w-full mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 25, scale: 0.98 }}
          whileInView={{ opacity: 1, y: 0, scale: 1 }}
          viewport={{ once: true, margin: "-50px" }}
          transition={{ duration: 0.8, ease: customEase }}
          className="group relative rounded-3xl bg-neutral-900/50 border border-white/10 overflow-hidden backdrop-blur-md p-8 md:p-16 flex flex-col items-center text-center transition-colors hover:bg-neutral-900/70"
        >
          {/* هاله محو نوری پشت متن */}
          <div className="pointer-events-none absolute -top-24 left-1/2 -translate-x-1/2 w-96 h-48 bg-white/[0.04] rounded-full blur-3xl" />

          {/* تیتر اصلی با گرادیانت هماهنگ با متون Projects */}
          <motion.h2
            initial={{ opacity: 0, y: 15 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.7, delay: 0.1, ease: customEase }}
            className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-[1.25] text-white max-w-2xl mb-8"
          >
            آماده خلق یک{" "}
            <span className="text-neutral-500">شاهکار دیجیتال</span> هستید؟
          </motion.h2>

          {/* دکمه اکشن */}
          <motion.div
            initial={{ opacity: 0, y: 12 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.7, delay: 0.2, ease: customEase }}
          >
            <button className="relative group/btn inline-flex items-center justify-center gap-3 px-8 py-4 rounded-full font-semibold text-gray-950 text-base md:text-lg bg-white hover:bg-neutral-200 active:scale-[0.98] transition-all duration-300 shadow-[0_0_25px_rgba(255,255,255,0.15)] hover:shadow-[0_0_35px_rgba(255,255,255,0.25)]">
              <span className="tracking-tight">شروع همکاری</span>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                strokeWidth={2.2}
                stroke="currentColor"
                className="w-5 h-5 transition-transform duration-300 group-hover/btn:-translate-x-1.5"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
                />
              </svg>
            </button>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
}