aramejan/app/components/WhatYouCanDo.jsx

import { Wind, Brain, Heart, Sparkles } from 'lucide-react';

function WhatYouCanDo() {
  const activities = [
    {
      icon: Wind,
      title: "تمرین‌های تنفسی",
      description: "با تمرین‌های ساده و مؤثر تنفسی، اضطراب‌ات رو کاهش بده و ذهنت رو آرام کن.",
      gradient: "from-primary-500/10 to-primary-600/10",
      border: "border-primary-500/20",
      items: ["روش تنفس ۴-۷-۸", "تنفس باکس‌شکل برای تمرکز", "تنفس برای خواب بهتر"],
      color: "primary-500",
      delay: "delay-100",
      stats: "۱۰+ تمرین مختلف"
    },
    {
      icon: Brain,
      title: "مدیتیشن و ذهن‌آگاهی",
      description: "مدیتیشن‌های هدایت‌شده فارسی برای تمام سطح‌ها.",
      gradient: "from-primary-500/10 to-primary-600/10",
      border: "border-primary-500/20",
      items: ["مدیتیشن برای مبتدی‌ها (۵ دقیقه‌ای)", "ذهن‌آگاهی در زندگی روزمره", "مدیتیشن خواب عمیق"],
      color: "primary-500",
      delay: "delay-200",
      stats: "۵۰+ جلسه"
    },
    {
      icon: Heart,
      title: "صلح درونی و خودقبولی",
      description: "جلسات هدایت‌شده برای پذیرش خود و رفع احساسات منفی.",
      gradient: "from-primary-500/10 to-primary-600/10",
      border: "border-primary-500/20",
      items: ["درمان فشار روانی و اضطراب", "افزایش اعتماد به نفس", "مدیتیشن محبت و مهربانی"],
      color: "primary-500",
      delay: "delay-300",
      stats: "۲۵+ برنامه"
    },
    {
      icon: Sparkles,
      title: "موسیقی آرام‌بخش",
      description: "آهنگ‌های طبیعت و موسیقی آرام‌بخش برای یوگا، کار و خواب.",
      gradient: "from-primary-500/10 to-primary-600/10",
      border: "border-primary-500/20",
      items: ["آرام برای فوکس و تمرکز", "موسیقی طبیعت و اقیانوس", "پس‌زمینه برای یوگا"],
      color: "primary-500",
      delay: "delay-400",
      stats: "۱۰۰+ آهنگ"
    }
  ];

  return (
    <div className="my-24">
      {/* 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">
          <Sparkles className="w-4 h-4" />
          قابلیت‌های اصلی
        </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>

      {/* Activities Grid */}
      <div className="grid md:grid-cols-2 gap-8 mb-16">
        {activities.map((activity, index) => (
          <div
            key={index}
            className={`bg-gradient-to-br ${activity.gradient} border ${activity.border} rounded-3xl p-8 hover:shadow-2xl transition-all duration-500 animate-fadeInUp ${activity.delay} group hover:border-primary-500/40 hover:translate-y-[-8px]`}
          >
            {/* Header with Icon and Stats */}
            <div className="flex items-start justify-between mb-6">
              <div className="flex items-center">
                <div className="bg-gradient-to-r from-primary-500 to-primary-600 rounded-2xl p-3 ml-4 group-hover:scale-110 transition-transform duration-300 shadow-lg">
                  <activity.icon className="w-6 h-6 text-white" />
                </div>
                <div>
                  <h3 className="text-xl font-bold text-gray-900">{activity.title}</h3>
                  <p className="text-sm text-primary-500 font-medium mt-1">{activity.stats}</p>
                </div>
              </div>
            </div>

            {/* Description */}
            <p className="text-gray-700 leading-relaxed mb-6 text-lg">
              {activity.description}
            </p>

            {/* Features List */}
            <ul className="space-y-3">
              {activity.items.map((item, itemIndex) => (
                <li 
                  key={itemIndex} 
                  className="flex items-center text-gray-700 group/item hover:text-primary-500 transition-colors duration-200"
                >
                  <div className="w-2 h-2 bg-primary-500 rounded-full ml-3 group-hover/item:scale-125 transition-transform duration-200"></div>
                  <span>{item}</span>
                </li>
              ))}
            </ul>

            {/* Hover Effect Overlay */}
            <div className="absolute inset-0 rounded-3xl border-2 border-primary-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none"></div>
          </div>
        ))}
      </div>

      {/* Bottom CTA */}
      <div className="text-center">
        <p className="text-gray-600 text-lg mb-6">
          بیش از <span className="text-primary-500 font-bold">۱۰۰۰</span> کاربر از این ویژگی‌ها استفاده می‌کنند
        </p>
        <button className="bg-gradient-to-r from-primary-500 to-primary-600 text-white font-bold py-3 px-6 rounded-2xl hover:shadow-lg transition-all duration-300 transform hover:scale-105">
          کشف همه قابلیت‌ها
        </button>
      </div>
    </div>
  );
}

export default WhatYouCanDo;