import { motion } from "framer-motion";
function Hero() {
  return (
    <div className="text-center mb-20 relative">
      {/* Background decoration */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="absolute -top-20 -right-20 w-72 h-72 bg-primary-500 opacity-10 rounded-full blur-3xl"></div>
        <div className="absolute -bottom-20 -left-20 w-72 h-72 bg-primary-500 opacity-10 rounded-full blur-3xl"></div>
      </div>
      
      <div className="relative">
        <div className="mb-8 animate-float">
          <div className="relative inline-block">
            <span className="text-6xl">✨</span>
            <div className="absolute inset-0 bg-gradient-to-r from-primary-500 to-primary-600 opacity-20 blur-xl rounded-full"></div>
          </div>
        </div>
        
        <h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-6 leading-tight animate-fadeInUp">
          آرامش را در 
          <span className="bg-gradient-to-r from-primary-500 to-primary-600 bg-clip-text text-transparent"> هر لحظه </span>
          تجربه کنید
        </h1>

        <p className="text-xl md:text-2xl text-gray-600 max-w-3xl mx-auto leading-relaxed mb-6 animate-fadeInUp delay-100">
          آرام‌لند دستیار شخصی شما برای یافتن آرامش درونی. با مدیتیشن‌های اختصاصی، 
          موسیقی آرامش‌بخش و راهنمایی‌های حرفه‌ای.
        </p>

        <div className="flex flex-col sm:flex-row gap-4 justify-center items-center animate-fadeInUp delay-200">
          <button 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/25">
            شروع کنید رایگان
          </button>
          <button 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>

        {/* Trust indicators */}
        <div className="mt-12 animate-fadeInUp delay-300">
          <p className="text-gray-500 text-sm mb-4">مورد اعتماد هزاران کاربر</p>
          <div className="flex justify-center items-center gap-8 opacity-60">
            <div className="text-2xl font-bold text-gray-400">★ ۴.۹</div>
            <div className="h-4 w-px bg-gray-300"></div>
            <div className="text-gray-500">+۱۰۰۰ دانلود</div>
            <div className="h-4 w-px bg-gray-300"></div>
            <div className="text-gray-500">۹۸٪ رضایت</div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Hero;