function WhyAramland() {
  const stats = [
    { number: "۲۰۰+", text: "مدیتیشن و تمرین‌های تنفسی", color: "text-teal-600", delay: "delay-100" },
    { number: "۱۵+", text: "ساعت محتوای صوتی فارسی", color: "text-green-600", delay: "delay-200" },
    { number: "۲۴/۷", text: "دسترسی بدون محدود", color: "text-blue-600", delay: "delay-300" }
  ];

  return (
    <div className="bg-white rounded-3xl shadow-xl p-12 mb-16 animate-fadeInUp">
      <h2 className="text-3xl md:text-4xl font-bold text-gray-800 text-center mb-12">
        چرا آرام‌لند؟
      </h2>

      <div className="grid md:grid-cols-3 gap-8">
        {stats.map((stat, index) => (
          <div key={index} className={`text-center animate-fadeInUp ${stat.delay}`}>
            <div className={`text-5xl font-bold ${stat.color} mb-3`}>{stat.number}</div>
            <p className="text-gray-700 text-lg">{stat.text}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default WhyAramland;