import React from 'react';
import { Gift, TrendingUp, CreditCard } from 'lucide-react';

const promos = [
  {
    title: '新人特惠礼包',
    price: '¥9.9',
    original: '¥99',
    desc: '含 500 积分 + 7天模型广场试用',
    badge: '限时',
    color: 'bg-blue-600',
  },
  {
    title: '超值进阶套餐',
    price: '¥198',
    original: '¥299',
    desc: '含 12000 积分 + 专属客服支持',
    badge: 'HOT',
    color: 'bg-orange-500',
  },
  {
    title: '企业年度订阅',
    price: '¥1999',
    original: '¥2599',
    desc: '无限次文本生成 + 5折视频渲染',
    badge: '推荐',
    color: 'bg-indigo-600',
  },
];

const PromotionSection: React.FC = () => {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {promos.map((p, i) => (
        <div key={i} className="relative bg-white p-6 rounded-2xl border border-gray-100 flex flex-col hover:border-blue-200 transition-all cursor-pointer overflow-hidden group">
          {p.badge && (
            <div className={`absolute top-0 right-0 px-3 py-1 ${p.color} text-white text-[10px] font-bold rounded-bl-xl`}>
              {p.badge}
            </div>
          )}
          <div className="flex items-center space-x-3 mb-4">
             <div className={`w-10 h-10 rounded-xl ${p.color}/10 flex items-center justify-center`}>
                <CreditCard className={`w-5 h-5 ${p.color.replace('bg-', 'text-')}`} />
             </div>
             <h3 className="font-bold text-gray-900 text-sm">{p.title}</h3>
          </div>
          <div className="flex items-baseline space-x-2 mb-2">
            <span className="text-2xl font-bold text-gray-900">{p.price}</span>
            <span className="text-xs text-gray-400 line-through">{p.original}</span>
          </div>
          <p className="text-xs text-gray-500 mb-6 flex-1">{p.desc}</p>
          <button className={`w-full py-2.5 rounded-xl text-xs font-bold border border-gray-200 group-hover:bg-gray-50 transition-colors`}>
            立即抢购
          </button>
        </div>
      ))}
    </div>
  );
};

export default PromotionSection;