import React from 'react';
import { Link } from 'react-router-dom';
import { DollarSign, Wand2, Share2, Wallet, ArrowLeft, Sparkles, CheckCircle2 } from 'lucide-react';

export const MonetizationSection: React.FC = () => {
  const steps = [
    {
      step: '۱',
      title: 'طراحی دستیار اختصاصی',
      desc: 'بدون نیاز به یک خط کدنویسی، پرامپت و تخصص دلخواه خود را تعیین کنید و دستیار هوشمندتان را بسازید.',
      icon: Wand2,
      badge: 'ساده و سریع'
    },
    {
      step: '۲',
      title: 'انتشار در ویترین هوشان',
      desc: 'دستیار خود را به عنوان یک ابزار عمومی یا تخصصی در دسترس هزاران کاربر فعال هوشان قرار دهید.',
      icon: Share2,
      badge: 'دیده‌شدن حداکثری'
    },
    {
      step: '۳',
      title: 'کسب درآمد و واریز آنی',
      desc: 'به ازای هر بار استفاده و پیام‌های پردازش‌شده، سهم درآمد خود را به‌صورت شفاف و آنی دریافت کنید.',
      icon: Wallet,
      badge: 'تسویه حساب ریالی'
    }
  ];

  return (
    <section className="py-20 relative overflow-hidden bg-slate-950/60 border-y border-white/5">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        {/* Section Header */}
        <div className="donya-section-header">
          <h2 className="donya-section-title">
            <DollarSign className="w-7 h-7 text-emerald-400" />
            <span>کسب درآمد از هوشان</span>
          </h2>
          <div className="donya-divider">
            <span className="donya-divider-line"></span>
            <span className="donya-divider-icon"></span>
            <span className="donya-divider-line"></span>
          </div>
          <p className="text-slate-400 text-sm sm:text-base max-w-2xl mx-auto mt-3">
            شما می‌توانید به‌راحتی دستیارهای اختصاصی خود را طراحی کنید. این دستیارها می‌توانند کاملاً مطابق با نیازها و علایق شما شخصی‌سازی شوند و منبع درآمد پایداری برای شما باشند.
          </p>
        </div>

        {/* Timeline Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 relative z-10 mb-12">
          {steps.map((item, idx) => {
            const Icon = item.icon;
            return (
              <div
                key={idx}
                className="glass-panel p-6 sm:p-8 rounded-2xl relative group hover:border-emerald-500/40 transition-all duration-300 hover:-translate-y-2 shadow-xl"
              >
                <div className="flex items-center justify-between mb-5">
                  <div className="w-12 h-12 rounded-xl bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center text-emerald-400 group-hover:scale-110 transition-transform">
                    <Icon className="w-6 h-6" />
                  </div>
                  <span className="text-xs font-bold px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
                    گام {item.step}
                  </span>
                </div>

                <h3 className="text-lg font-bold text-white mb-2 group-hover:text-emerald-300 transition-colors">
                  {item.title}
                </h3>
                <p className="text-sm text-slate-400 leading-relaxed">
                  {item.desc}
                </p>

                <div className="mt-4 pt-4 border-t border-white/5 flex items-center gap-2 text-xs text-emerald-400/80 font-medium">
                  <CheckCircle2 className="w-4 h-4" />
                  <span>{item.badge}</span>
                </div>
              </div>
            );
          })}
        </div>

        {/* Bottom CTA */}
        <div className="text-center">
          <Link
            to="/chat"
            className="btn-donya-primary inline-flex items-center gap-2 px-8 py-3.5 rounded-xl font-bold text-sm sm:text-base"
          >
            <Sparkles className="w-5 h-5 text-emerald-300" />
            <span>شروع ساخت دستیار و کسب درآمد</span>
            <ArrowLeft className="w-4 h-4" />
          </Link>
        </div>

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