import { Download, Globe, PlayCircle } from 'lucide-react';

function DownloadSection() {
  const downloadOptions = [
    {
      icon: Download,
      title: "کافه بازار",
      description: "دانلود برای اندروید",
      gradient: "from-teal-500 to-teal-600",
      animation: "animate-slideInLeft delay-100"
    },
    {
      icon: PlayCircle,
      title: "گوگل پلی",
      description: "دانلود برای اندروید",
      gradient: "from-green-500 to-green-600",
      animation: "animate-fadeInUp delay-200"
    },
    {
      icon: Globe,
      title: "وب اپلیکیشن",
      description: "استفاده آنلاین",
      gradient: "from-blue-500 to-blue-600",
      animation: "animate-slideInRight delay-300"
    }
  ];

  return (
    <div className="bg-white rounded-3xl shadow-xl p-12 mb-12 animate-fadeInUp delay-300">
      <h2 className="text-3xl font-bold text-gray-800 mb-8 text-center">
        آرام‌لند رو از کجا دانلود کنم؟
      </h2>

      <div className="grid md:grid-cols-3 gap-6">
        {downloadOptions.map((option, index) => (
          <a
            key={index}
            href="#"
            className={`flex flex-col items-center justify-center p-8 bg-gradient-to-br ${option.gradient} rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 text-white group ${option.animation}`}
          >
            <option.icon className="w-12 h-12 mb-4 group-hover:scale-110 transition-transform" />
            <h3 className="text-xl font-bold mb-2">{option.title}</h3>
            <p className="text-sm text-opacity-90">{option.description}</p>
          </a>
        ))}
      </div>
    </div>
  );
}

export default DownloadSection;