"use client";

import React from "react";
import { motion } from "framer-motion";
import { ExternalLink, LucideIcon } from "lucide-react";

// تنظیمات انیمیشن نرم برای Framer Motion
const customEase: [number, number, number, number] = [0.16, 1, 0.3, 1];

// اینترفیس پراپ‌ها
interface CallToActionProps {
  title?: string;
  description?: string;
  buttonText?: string;
  buttonLink?: string;
  Icon?: LucideIcon;
}

export default function CallToAction({
  title = "آماده پیاده‌سازی و توسعه سیستم‌های پیچیده",
  description = "اگر نیاز به مشاوره معماری نرم‌افزار، مقیاس‌پذیری سرویس‌ها یا پیاده‌سازی ماژول‌های اینترانت و سازمانی دارید، در ارتباط باشید.",
  buttonText = "شروع همکاری فنی",
  buttonLink = "mailto:contact@example.com",
  Icon = ExternalLink,
}: CallToActionProps) {
  return (
    // بخش اصلی با کنترلر موس و افکت Spotlight بدون تغییر باقی می‌ماند
    <section
      className="relative py-20 px-6 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`);
      }}
    >
      {/* افکت‌های پس‌زمینه (Spotlight و Grid) بدون تغییر */}
      <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-5xl 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="relative rounded-2xl border border-gray-800 bg-gradient-to-b from-gray-900/80 to-gray-950 p-8 md:p-12 text-center overflow-hidden shadow-2xl"
        >
          {/* افکت نوری جدید جایگزین شده است */}
          <div className="absolute top-0 right-0 w-64 h-64 bg-indigo-500/10 rounded-full blur-3xl pointer-events-none" />
          
          {/* محتوای داخلی */}
          <div className="relative z-10 max-w-2xl mx-auto space-y-4">
            <h3 className="text-2xl md:text-3xl font-bold text-white">
              {title}
            </h3>
            {/* استایل متن توضیحات به‌روز شد */}
            <p className="text-xs md:text-sm text-gray-400 leading-relaxed">
              {description}
            </p>
            <div className="pt-2">
              <a
                href={buttonLink}
                className="inline-flex items-center gap-2 px-6 py-2.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-semibold shadow-lg shadow-indigo-600/30 transition-all hover:scale-105"
              >
                <span>{buttonText}</span>
                {Icon && <Icon className="w-3.5 h-3.5" />}
              </a>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}