aramejan/app/components/WhyAramland.jsx

function WhyAramland() {
  const stats = [
    {
      number: "۲۰۰+",
      text: "مدیتیشن و تمرین تنفسی",
      description: "تمرین‌های متنوع برای هر سلیقه و نیاز",
      icon: "🧘‍♀️",
      gradient: "from-primary-500 to-primary-600",
      delay: "delay-100"
    },
    {
      number: "۱۵+",
      text: "ساعت محتوای صوتی فارسی",
      description: "هدایت‌شده توسط متخصصان ایرانی",
      icon: "🎧",
      gradient: "from-primary-500 to-primary-600",
      delay: "delay-200"
    },
    {
      number: "۲۴/۷",
      text: "دسترسی همیشه و همه جا",
      description: "در هر زمان و مکان به آرامش برسید",
      icon: "🌙",
      gradient: "from-primary-500 to-primary-600",
      delay: "delay-300"
    },
    {
      number: "۹۸٪",
      text: "رضایت کاربران",
      description: "تجربه‌ای که کاربران عاشقش هستند",
      icon: "⭐",
      gradient: "from-primary-500 to-primary-600",
      delay: "delay-400"
    }
  ];

  const features = [
    {
      title: "محتوای اختصاصی فارسی",
      description: "همه محتواها بومی‌سازی و برای فرهنگ ایرانی طراحی شده‌اند",
      icon: "🇮🇷"
    },
    {
      title: "پشتیبانی ۲۴ ساعته",
      description: "تیم پشتیبانی ما همیشه برای کمک به شما آماده است",
      icon: "💬"
    },
    {
      title: "بروزرسانی مستمر",
      description: "هر هفته محتوای جدید و تمرین‌های تازه اضافه می‌شود",
      icon: "🔄"
    }
  ];

  return (
    <div className="my-24">
      {/* Main Stats Section */}
      <div className="bg-white rounded-3xl shadow-2xl border border-gray-100 p-12 mb-12 animate-fadeInUp hover:shadow-3xl transition-all duration-500">
        {/* Section Header */}
        <div className="text-center mb-16">
          <div className="inline-flex items-center gap-2 bg-primary-500/10 text-primary-500 px-4 py-2 rounded-full text-sm font-medium mb-4">
            <span className="text-lg">🚀</span>
            برتری آرام جان
          </div>
          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
            چرا <span className="text-primary-500">هزاران نفر</span> آرام جان را انتخاب می‌کنند؟
          </h2>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            تجربه‌ای متفاوت از آرامش، طراحی شده مخصوص فارسی‌زبانان
          </p>
        </div>

        {/* Stats Grid */}
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
          {stats.map((stat, index) => (
            <div
              key={index}
              className={`text-center group animate-fadeInUp ${stat.delay} hover:transform hover:scale-105 transition-all duration-300`}
            >
              {/* Icon Container */}
              <div className={`bg-gradient-to-br ${stat.gradient} w-20 h-20 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:shadow-lg transition-all duration-300`}>
                <span className="text-2xl text-white">{stat.icon}</span>
              </div>

              {/* Number */}
              <div className="text-4xl font-bold bg-gradient-to-r from-primary-500 to-primary-600 bg-clip-text text-transparent mb-2">
                {stat.number}
              </div>

              {/* Main Text */}
              <h3 className="text-lg font-bold text-gray-900 mb-2">{stat.text}</h3>

              {/* Description */}
              <p className="text-gray-600 text-sm leading-relaxed">
                {stat.description}
              </p>
            </div>
          ))}
        </div>

        {/* Divider */}
        <div className="flex items-center justify-center mb-12">
          <div className="h-px bg-gradient-to-r from-transparent via-primary-500 to-transparent w-32"></div>
          <div className="mx-4 text-primary-500 text-lg">✨</div>
          <div className="h-px bg-gradient-to-r from-transparent via-primary-500 to-transparent w-32"></div>
        </div>

        {/* Features Grid */}
        <div className="grid md:grid-cols-3 gap-6">
          {features.map((feature, index) => (
            <div
              key={index}
              className="text-center group hover:transform hover:translate-y-[-8px] transition-all duration-300"
            >
              <div className="bg-primary-500/10 w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-4 group-hover:bg-primary-500/20 transition-colors duration-300">
                <span className="text-2xl">{feature.icon}</span>
              </div>
              <h3 className="text-lg font-bold text-gray-900 mb-3">{feature.title}</h3>
              <p className="text-gray-600 text-sm leading-relaxed">
                {feature.description}
              </p>
            </div>
          ))}
        </div>
      </div>

      {/* Social Proof Section */}
      <div className="bg-gradient-to-r from-primary-500/5 to-primary-600/5 rounded-3xl p-8 border border-primary-500/20">
        <div className="flex flex-col md:flex-row items-center justify-between gap-6">
          <div className="flex-1">
            <h4 className="text-2xl font-bold text-gray-900 mb-3">
              👥 عضو جامعه هزاران نفری آرام جان شوید
            </h4>
            <p className="text-gray-700 leading-relaxed">
              به خانواده‌ای از کاربران خوشحال بپیوندید که هر روز قدمی به سمت آرامش برمی‌دارند
            </p>
          </div>
          <div className="flex items-center gap-4">
            <div className="flex -space-x-3">
              {[1, 2, 3, 4].map((item) => (
                <div
                  key={item}
                  className="w-12 h-12 bg-gradient-to-r from-primary-500 to-primary-600 rounded-full border-2 border-white flex items-center justify-center text-white font-bold text-sm"
                >
                  {item}
                </div>
              ))}
            </div>
            <div className="text-right">
              <div className="text-gray-900 font-bold">+۱۰۰۰ کاربر فعال</div>
              <div className="text-gray-600 text-sm">هر ماه به ما می‌پیوندند</div>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom CTA */}
      <div className="text-center mt-8">
        {/* <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 shadow-lg inline-flex items-center gap-2">
          <span>شروع سفر آرامش</span>
          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
          </svg>
        </button> */}
        {/* <p className="text-gray-500 text-sm mt-4">
          هیچ کارت اعتباری نیاز نیست • تضمین بازگشت وجه ۷ روزه
        </p> */}
      </div>
    </div>
  );
}

export default WhyAramland;