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

function WhatYouCanDo() {
  const activities = [
    {
      icon: Wind,
      title: "تمرین‌های تنفسی",
      description: "با تمرین‌های ساده و مؤثر تنفسی، اضطراب‌ات رو کاهش بده و ذهنت رو آرام کن.",
      gradient: "from-teal-50 to-teal-100",
      items: ["روش تنفس ۴-۷-۸", "تنفس باکس‌شکل برای تمرکز", "تنفس برای خواب بهتر"],
      color: "teal",
      delay: "delay-100"
    },
    {
      icon: Brain,
      title: "مدیتیشن و ذهن‌آگاهی",
      description: "مدیتیشن‌های هدایت‌شده فارسی برای تمام سطح‌ها.",
      gradient: "from-green-50 to-green-100",
      items: ["مدیتیشن برای مبتدی‌ها (۵ دقیقه‌ای)", "ذهن‌آگاهی در زندگی روزمره", "مدیتیشن خواب عمیق"],
      color: "green",
      delay: "delay-200"
    },
    {
      icon: Heart,
      title: "صلح‌ دروني و خودقبولی",
      description: "جلسات هدایت‌شده برای پذیرش خود و رفع احساسات منفی.",
      gradient: "from-blue-50 to-blue-100",
      items: ["درمان فشار روانی و اضطراب", "افزایش اعتماد به نفس", "مدیتیشن محبت و مهربانی"],
      color: "blue",
      delay: "delay-300"
    },
    {
      icon: Sparkles,
      title: "موسیقی آرام‌بخش",
      description: "آهنگ‌های طبیعت و موسیقی آرام‌بخش برای یوگا، کار و خواب.",
      gradient: "from-purple-50 to-purple-100",
      items: ["آرام برای فوکس و تمرکز", "موسیقی طبیعت و اقیانوس", "پس‌زمینه برای یوگا"],
      color: "purple",
      delay: "delay-400"
    }
  ];

  return (
    <div className="my-20">
      <h2 className="text-4xl md:text-5xl font-bold text-gray-800 text-center mb-16 animate-fadeInUp">
        چه کاری می‌تونی با آرام‌لند انجام بدی؟
      </h2>

      <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} rounded-3xl p-10 hover:shadow-2xl transition-all duration-300 animate-fadeInUp ${activity.delay}`}
          >
            <div className="flex items-center mb-6">
              <div className={`bg-${activity.color}-500 rounded-full p-4 ml-4`}>
                <activity.icon className="w-8 h-8 text-white" />
              </div>
              <h3 className="text-2xl font-bold text-gray-800">{activity.title}</h3>
            </div>
            <p className="text-gray-700 leading-relaxed text-lg mb-6">
              {activity.description}
            </p>
            <ul className="space-y-3">
              {activity.items.map((item, itemIndex) => (
                <li key={itemIndex} className="flex items-center text-gray-700">
                  <span className={`w-2 h-2 bg-${activity.color}-500 rounded-full ml-3`}></span>
                  {item}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  );
}

export default WhatYouCanDo;