"use client";
import { useScroll } from '../hooks/useScroll';
function CallToAction() {
  const { scrollToSectionWithHeader } = useScroll();
  return (
    <div className="relative text-center rounded-3xl p-16 animate-fadeInUp overflow-hidden">
      {/* Background with gradient */}
      <div className="absolute inset-0 bg-gradient-to-r from-primary-500 via-primary-600 to-primary-500 opacity-10"></div>

      {/* Animated border */}
      <div className="absolute inset-0 rounded-3xl border-2 border-primary-500/20 animate-pulse"></div>

      <div className="relative">
        <h2 className="text-3xl md:text-5xl font-bold text-gray-900 mb-6">
          آماده برای <span className="text-primary-500">تغییر</span> زندگی؟
        </h2>
        <p className="text-xl text-gray-700 mb-8 max-w-2xl mx-auto leading-relaxed">
          امروز اولین قدم رو بردار و ببین چطور آرام جان می‌تونه کیفیت زندگی‌ات رو متحول کنه
        </p>

        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
          <button onClick={() => scrollToSectionWithHeader('download')} className="bg-gradient-to-r from-primary-500 to-primary-600 text-white font-bold py-4 px-8 rounded-2xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 text-lg shadow-lg hover:shadow-primary-500/40 relative overflow-hidden group">
            <div className="absolute inset-0 bg-white/20 -translate-x-full group-hover:translate-x-full transition-transform duration-700"></div>
            <span className="relative">شروع سفر آرامش</span>
          </button>
          <button onClick={() => scrollToSectionWithHeader('features')} className="border-2 border-gray-300 text-gray-700 font-bold py-4 px-8 rounded-2xl hover:border-primary-500 hover:text-primary-500 transition-all duration-300">
            بیشتر بدانید
          </button>
        </div>


      </div>
    </div>
  );
}

export default CallToAction;