aramejan/app/components/ScientificBenefits.jsx

function ScientificBenefits() {
  const benefits = [
    {
      title: "تکنیک‌های مبتنی بر علم اعصاب",
      description: "آرام‌لند از روش‌های اثبات‌شده علمی برای کاهش استرس و افزایش آرامش استفاده می‌کند",
      icon: "🧠",
      items: [
        "بهبود خلق و خو در کمتر از ۵ دقیقه",
        "کاهش ۴۰٪ی سطح کورتیزول (هورمون استرس)",
        "افزایش امواج آلفای مغز برای آرامش",
        "بهبود کیفیت خواب تا ۶۰٪"
      ],
      stats: "۸۷٪ موفقیت",
      color: "from-[#C3C7FF] to-[#A8B1FF]",
      delay: "delay-100"
    },
    {
      title: "طراحی کاربری مبتنی بر روانشناسی",
      description: "رابط کاربری طراحی شده بر اساس اصول روانشناسی برای حداکثر تأثیرگذاری",
      icon: "🎨",
      items: [
        "رابط ساده و شهودی برای کاهش بار ذهنی",
        "طراحی مینیمال برای تمرکز بهتر",
        "هدایت گام‌به‌گام فارسی",
        "فیدبک لحظه‌ای از پیشرفت"
      ],
      stats: "۹۴٪ رضایت",
      color: "from-[#C3C7FF] to-[#A8B1FF]",
      delay: "delay-200"
    }
  ];

  const researchStats = [
    { number: "۴۰٪", label: "کاهش استرس", description: "پس از ۲ هفته استفاده منظم" },
    { number: "۳۵٪", label: "افزایش تمرکز", description: "در کارهای روزمره" },
    { number: "۵۰٪", label: "بهبود خواب", description: "کیفیت خواب بهتر" },
    { number: "۲۵٪", label: "افزایش انرژی", description: "در طول روز" }
  ];

  return (
    <div className="my-24">
      {/* Section Header */}
      <div className="text-center mb-16">
        <div className="inline-flex items-center gap-2 bg-[#C3C7FF]/10 text-[#C3C7FF] 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-[#C3C7FF]">فقط چند دقیقه</span> کافی است؟
        </h2>
        <p className="text-xl text-gray-600 max-w-2xl mx-auto">
          بر اساس تحقیقات علمی در زمینه روانشناسی و علوم اعصاب
        </p>
      </div>

      {/* Research Statistics */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-12">
        {researchStats.map((stat, index) => (
          <div 
            key={index}
            className="bg-white rounded-2xl p-6 text-center shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 animate-fadeInUp"
            style={{ animationDelay: `${index * 100}ms` }}
          >
            <div className="text-2xl md:text-3xl font-bold text-[#C3C7FF] mb-2">
              {stat.number}
            </div>
            <div className="text-gray-900 font-medium mb-1">{stat.label}</div>
            <div className="text-gray-500 text-sm">{stat.description}</div>
          </div>
        ))}
      </div>

      {/* Main Benefits Grid */}
      <div className="grid lg:grid-cols-2 gap-8 mb-12">
        {benefits.map((benefit, index) => (
          <div
            key={index}
            className="bg-white rounded-3xl shadow-xl border border-gray-100 overflow-hidden animate-fadeInUp hover:shadow-2xl transition-all duration-500"
          >
            {/* Header */}
            <div className={`bg-gradient-to-r ${benefit.color} p-6 text-white`}>
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <span className="text-2xl">{benefit.icon}</span>
                  <h3 className="text-xl font-bold">{benefit.title}</h3>
                </div>
                <div className="bg-white/20 backdrop-blur-sm px-3 py-1 rounded-full text-sm font-medium">
                  {benefit.stats}
                </div>
              </div>
            </div>

            {/* Content */}
            <div className="p-8">
              <p className="text-gray-700 text-lg leading-relaxed mb-6">
                {benefit.description}
              </p>
              
              <ul className="space-y-4">
                {benefit.items.map((item, itemIndex) => (
                  <li 
                    key={itemIndex} 
                    className="flex items-start text-gray-700 group hover:text-[#C3C7FF] transition-colors duration-200"
                  >
                    <div className="flex-shrink-0 w-6 h-6 bg-[#C3C7FF]/10 rounded-full flex items-center justify-center ml-3 mt-1 group-hover:bg-[#C3C7FF] transition-colors duration-200">
                      <svg className="w-3 h-3 text-[#C3C7FF] group-hover:text-white transition-colors duration-200" 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>
                    </div>
                    <span className="text-right leading-relaxed">{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        ))}
      </div>

      {/* Scientific Evidence Section */}
      <div className="bg-gradient-to-r from-[#C3C7FF]/5 to-[#A8B1FF]/5 rounded-3xl p-8 border border-[#C3C7FF]/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 gap-4">
            {/* {[
              { name: "Harvard", color: "bg-red-100 text-red-600" },
              { name: "Stanford", color: "bg-blue-100 text-blue-600" },
              { name: "NIH", color: "bg-green-100 text-green-600" }
            ].map((org, index) => (
              <div 
                key={index}
               ={`${org.color} px-4 py-2 rounded-lg font-medium text-sm backdrop-blur-sm`}
              >
                {org.name}
              </div>
            ))} */}
          </div>
        </div>
      </div>

      {/* Bottom CTA */}
      <div className="text-center mt-12">
        <button className="bg-gradient-to-r from-[#C3C7FF] to-[#A8B1FF] text-white font-bold py-4 px-8 rounded-2xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 shadow-lg">
          مطالعه تحقیقات کامل
        </button>
        <p className="text-gray-500 text-sm mt-4">
          مبتنی بر بیش از ۵۰ مطالعه علمی معتبر
        </p>
      </div>
    </div>
  );
}

export default ScientificBenefits;