import React from 'react';
import { ShieldCheck, Zap, Headphones, RefreshCw, Lock, Sparkles, Award } from 'lucide-react';

export const FeaturesSection: React.FC = () => {
  const features = [
    {
      icon: Zap,
      title: 'تحویل کانفیگ WireGuard',
      description: 'پس از ثبت و تأیید سفارش، کانفیگ اختصاصی برای یک کاربر آماده و تحویل می‌شود.',
      color: 'text-purple-400',
      bg: 'bg-purple-950/60',
      border: 'border-purple-500/30',
    },
    {
      icon: ShieldCheck,
      title: 'یک کاربر در هر سرویس',
      description: 'هر پلن برای یک کاربر تعریف شده تا مشخصات سرویس و ظرفیت مصرف شفاف باشد.',
      color: 'text-emerald-400',
      bg: 'bg-emerald-950/60',
      border: 'border-emerald-500/30',
    },
    {
      icon: Award,
      title: 'پلن‌های حجمی شفاف',
      description: 'حجم و مدت هر سرویس از ابتدا مشخص است و قیمت هر پلن از پنل مدیریت قابل تغییر است.',
      color: 'text-amber-400',
      bg: 'bg-amber-950/60',
      border: 'border-amber-500/30',
    },
    {
      icon: Headphones,
      title: 'پشتیبانی تلگرام',
      description: 'برای تحویل، نصب و مشکلات احتمالی می‌توانید از طریق پشتیبانی تلگرام با ما در ارتباط باشید.',
      color: 'text-blue-400',
      bg: 'bg-blue-950/60',
      border: 'border-blue-500/30',
    },
  ];

  return (
    <section className="py-16 relative">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* Title */}
        <div className="text-center max-w-2xl mx-auto mb-12">
          <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-purple-950/70 border border-purple-500/30 text-purple-300 text-xs font-bold mb-3">
            <Sparkles className="w-3.5 h-3.5 text-purple-400" />
            <span>چرا فروشگاه ZaccShop؟</span>
          </div>
          <h2 className="text-2xl sm:text-3xl font-black text-white">
            تمرکز ما روی یک سرویس، با کیفیت و پشتیبانی بهتر
          </h2>
          <p className="text-sm text-zinc-400 mt-2 font-light">
            تمرکز ZaccShop فعلاً فقط روی سرویس WireGuard است تا تجربه خرید، تحویل و پشتیبانی آن را به بهترین شکل ارائه کنیم.
          </p>
        </div>

        {/* Features Grid */}
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
          {features.map((feat, index) => {
            const Icon = feat.icon;
            return (
              <div
                key={index}
                className="bento-card p-6 text-right flex flex-col justify-between group hover:-translate-y-1"
              >
                <div>
                  <div className="icon-box mb-4 group-hover:scale-110 transition-transform">
                    <Icon className="w-5 h-5 text-purple-300" />
                  </div>
                  <h3 className="text-base font-bold text-white mb-2 group-hover:text-purple-300 transition-colors">
                    {feat.title}
                  </h3>
                  <p className="text-xs text-zinc-400 leading-relaxed">
                    {feat.description}
                  </p>
                </div>
              </div>
            );
          })}
        </div>

      </div>
    </section>
  );
};
