import React from 'react';
import { Link } from 'react-router-dom';
import { 
  Building2, 
  TrendingUp, 
  Database, 
  Bot, 
  ShieldCheck, 
  ArrowLeft, 
  GraduationCap, 
  Users,
  Cpu,
  BarChart3
} from 'lucide-react';

export const EnterpriseHighlight: React.FC = () => {
  const enterpriseServices = [
    {
      title: 'شخصی‌سازی تجربه مشتری و CRM هوشمند',
      desc: 'تحلیل داده‌های مشتریان و پیشنهاد هوشمند خرید بر اساس سلیقه و رفتار هر فرد جهت افزایش چشمگیر وفاداری و فروش.',
      icon: Users,
      badge: 'فروش و بازاریابی'
    },
    {
      title: 'پیش‌بینی تقاضا و مدیریت انبار و زنجیره تامین',
      desc: 'شناسایی الگوهای خرید با الگوریتم‌های یادگیری ماشین و پیش‌بینی تقاضای آینده برای بهینه‌سازی موجودی و کاهش ضایعات.',
      icon: BarChart3,
      badge: 'مدیریت لجستیک'
    },
    {
      title: 'اتوماسیون فرآیندهای اداری و هوشمندسازی RPA',
      desc: 'ربات‌های نرم‌افزاری هوشان برای خودکارسازی کارهای تکراری، خلاصه‌سازی گزارشات و افزایش راندمان پرسنل.',
      icon: Cpu,
      badge: 'بهره‌وری سازمانی'
    },
    {
      title: 'استقرار مدل‌های داخلی (On-Premise RAG) و امنیت داده',
      desc: 'اتصال هوش مصنوعی به پایگاه دانش و داکیومنت‌های داخلی سازمان با بالاترین استانداردهای امنیتی بدون خروج داده.',
      icon: ShieldCheck,
      badge: 'امنیت اطلاعات'
    }
  ];

  return (
    <section className="py-20 relative bg-slate-900/40 border-y border-slate-800/80 overflow-hidden">
      {/* Decorative Glow */}
      <div className="absolute bottom-0 right-0 w-96 h-96 bg-cyan-600/10 rounded-full blur-3xl pointer-events-none" />

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
          
          {/* Left Column: Heading & CTA */}
          <div className="lg:col-span-5 space-y-6">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-cyan-500/10 border border-cyan-500/20 text-cyan-400 text-xs font-semibold">
              <Building2 className="w-3.5 h-3.5" />
              <span>راهکارهای سازمانی هوشان</span>
            </div>

            <h2 className="text-2xl sm:text-4xl font-black text-white tracking-tight leading-snug">
              تحول دیجیتال و رشد بهره‌وری سازمان با هوش مصنوعی
            </h2>

            <p className="text-sm text-slate-300 leading-relaxed">
              سازمان‌ها برای ماندگاری و پیشگامی نیازمند ارتقای مهارت‌های نیروها (Upskilling) و هوشمندسازی فرآیندهای عملیاتی هستند. تیم متخصصین هوشان آماده ارائه راهکارهای سفارشی و آموزش‌های جامع سازمانی است.
            </p>

            <div className="space-y-3 pt-2">
              <div className="flex items-center gap-3 p-3.5 rounded-2xl bg-slate-950/60 border border-slate-800/80">
                <GraduationCap className="w-6 h-6 text-indigo-400 shrink-0" />
                <div>
                  <h4 className="text-xs font-bold text-white">دوره‌های آموزشی سازمانی هوشان</h4>
                  <p className="text-[11px] text-slate-400">۱۸ دوره تخصصی برای بازمهارت‌آموزی مدیران و کارکنان</p>
                </div>
              </div>

              <div className="flex items-center gap-3 p-3.5 rounded-2xl bg-slate-950/60 border border-slate-800/80">
                <TrendingUp className="w-6 h-6 text-emerald-400 shrink-0" />
                <div>
                  <h4 className="text-xs font-bold text-white">مشاوره تخصصی و طراحی سفارشی</h4>
                  <p className="text-[11px] text-slate-400">تحلیل چالش‌های سازمان و طراحی نقشه راه هوش مصنوعی</p>
                </div>
              </div>
            </div>

            <div className="flex flex-wrap items-center gap-3 pt-3">
              <Link
                to="/enterprise"
                className="px-6 py-3 rounded-2xl text-xs font-bold text-white bg-gradient-to-r from-cyan-600 to-indigo-600 hover:opacity-90 shadow-lg shadow-cyan-600/20 transition-all flex items-center gap-2"
              >
                <span>درخواست جلسه مشاوره سازمانی</span>
                <ArrowLeft className="w-4 h-4" />
              </Link>
              
              <Link
                to="/academy"
                className="px-5 py-3 rounded-2xl text-xs font-semibold text-slate-300 hover:text-white bg-slate-800 hover:bg-slate-700 transition-colors"
              >
                <span>مشاهده دوره‌ها</span>
              </Link>
            </div>
          </div>

          {/* Right Column: 4 Key Services Grid */}
          <div className="lg:col-span-7 grid grid-cols-1 sm:grid-cols-2 gap-4">
            {enterpriseServices.map((srv, idx) => {
              const Icon = srv.icon;
              return (
                <div 
                  key={idx}
                  className="p-6 rounded-3xl bg-slate-950/90 border border-slate-800/80 hover:border-cyan-500/40 glass-panel-hover space-y-3 flex flex-col justify-between"
                >
                  <div className="space-y-3">
                    <div className="flex items-center justify-between">
                      <div className="w-10 h-10 rounded-xl bg-cyan-500/10 text-cyan-400 flex items-center justify-center">
                        <Icon className="w-5 h-5" />
                      </div>
                      <span className="text-[10px] font-semibold px-2 py-0.5 rounded-full bg-slate-800 text-slate-400">
                        {srv.badge}
                      </span>
                    </div>

                    <h3 className="text-sm font-bold text-white">
                      {srv.title}
                    </h3>

                    <p className="text-xs text-slate-400 leading-relaxed">
                      {srv.desc}
                    </p>
                  </div>
                </div>
              );
            })}
          </div>

        </div>

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