"use client";
 import { useScroll } from '../hooks/useScroll';
function FreeTrial() {
  const { scrollToSectionWithHeader } = useScroll();
  return (
    <div className="relative bg-gradient-to-r from-primary-500 via-primary-600 to-primary-500 rounded-3xl p-12 text-white text-center mb-20 animate-fadeInUp overflow-hidden">
      {/* Background Pattern */}
      <div className="absolute inset-0 opacity-10">
        <div className="absolute top-0 right-0 w-32 h-32 bg-white rounded-full -translate-y-16 translate-x-16"></div>
        <div className="absolute bottom-0 left-0 w-32 h-32 bg-white rounded-full translate-y-16 -translate-x-16"></div>
      </div>
      
      {/* Animated Border */}
      <div className="absolute inset-0 rounded-3xl border-2 border-white/20 animate-pulse"></div>

      {/* Content */}
      <div className="relative">
        {/* Badge */}
        <div className="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full text-sm font-medium mb-6 animate-fadeInUp delay-100">
          <span className="w-2 h-2 bg-white rounded-full animate-pulse"></span>
          پیشنهاد ویژه
        </div>

        {/* Heading */}
        <h2 className="text-3xl md:text-5xl font-bold mb-6 animate-fadeInUp delay-200">
          <span className="block">یک هفته <span className="text-yellow-300">رایگان</span></span>
          <span className="block">تجربه تمام ویژگی‌ها</span>
        </h2>

        {/* Description */}
        <p className="text-lg md:text-xl text-white/90 mb-8 max-w-2xl mx-auto leading-relaxed animate-fadeInUp delay-300">
          تمام ویژگی‌های پریمیوم رو میتونی به طور محدود تجربه کنی 
          <span className="font-bold text-yellow-300"></span>
        </p>

        {/* Features */}
        <div className="grid md:grid-cols-3 gap-4 mb-8 max-w-2xl mx-auto animate-fadeInUp delay-400">
          {[
            "تمامی مدیتیشن‌ها",
            "موسیقی‌های انحصاری", 
            "مشاوره هوش مصنوعی",
            "تمرین تنفسی دلخواه",
            "اطلاعات آموزشی",
            "رابط کاربری ساده",
          ].map((feature, index) => (
            <div key={index} className="flex items-center justify-center gap-2 bg-white/10 backdrop-blur-sm py-3 px-4 rounded-xl">
              <svg className="w-4 h-4 text-yellow-300" fill="currentColor" viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
              </svg>
              <span>{feature}</span>
            </div>
          ))}
        </div>

        {/* CTA Button */}
        <button onClick={() => scrollToSectionWithHeader('download')} className="bg-white text-primary-500 font-bold py-4 px-12 rounded-2xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 animate-fadeInUp delay-500 relative overflow-hidden group">
          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700"></div>
          <span className="relative">شروع سفر آرامش</span>
        </button>

        {/* Footer Note */}
        <p className="text-white/70 text-sm mt-6 animate-fadeInUp delay-600">
          میتونی روی گوشیت همیشه داشته باشی
        </p>
      </div>
    </div>
  );
}

export default FreeTrial;