import React, { useState } from 'react';
import { 
  Building2, 
  Users, 
  TrendingUp, 
  Bot, 
  MessageSquare, 
  ShieldCheck, 
  ArrowLeft, 
  CheckCircle2, 
  GraduationCap, 
  Send, 
  Zap,
  PhoneCall,
  BarChart3,
  Cpu
} from 'lucide-react';
import siteInfo from '../data/siteInfo.json';

export const Enterprise: React.FC = () => {
  const [formSubmitted, setFormSubmitted] = useState(false);
  const [formData, setFormData] = useState({
    companyName: '',
    contactPerson: '',
    phone: '',
    email: '',
    employeesCount: '50-200',
    serviceInterest: 'سفارشی‌سازی دستیار و چت‌بات سازمانی',
    message: ''
  });

  const enterpriseSolutions = [
    {
      title: 'شخصی‌سازی تجربه مشتری و CRM هوشمند',
      desc: 'هوش مصنوعی هوشان با تحلیل داده‌های مشتریان، می‌تواند پیشنهادهای خرید را بر اساس سلیقه و رفتار هر فرد شخصی‌سازی کند. این امر منجر به افزایش رضایت مشتری و بهبود چشمگیر فروش می‌شود.',
      icon: Users,
      benefits: ['افزایش نرخ تبدیل فروش', 'تحلیل چرخه عمر مشتری (LTV)', 'شخصی‌سازی کمپین‌های بازاریابی']
    },
    {
      title: 'پیش‌بینی تقاضا و مدیریت انبارداری هوشمند',
      desc: 'هوشان با استفاده از الگوریتم‌های یادگیری ماشین، الگوهای فصلی خرید را شناسایی و تقاضای آینده را پیش‌بینی می‌کند تا موجودی انبار بهینه شده و خواب سرمایه کاهش یابد.',
      icon: BarChart3,
      benefits: ['کاهش هزینه‌های نگهداری کالا', 'جلوگیری از کسری کالا در پیک فروش', 'بهینه‌سازی زنجیره تامین']
    },
    {
      title: 'چت‌بات‌های هوشمند ۲۴ ساعته برای پشتیبانی مشتریان',
      desc: 'بات‌های مبتنی بر هوش مصنوعی هوشان قادرند به صورت ۲۴ ساعته و بدون افت کیفیت به سوالات و تیکت‌های مشتریان شما به زبان فارسی پاسخ داده و رضایت مشتری را به اوج برسانند.',
      icon: Bot,
      benefits: ['پاسخ‌گویی آنی ۲۴/۷', 'کاهش ۷۰٪ بار کاری تیم پشتیبانی', 'پشتیبانی چندزبانه و ثبت هوشمند تیکت']
    },
    {
      title: 'تحلیل احساسات و بازخورد مشتریان (Sentiment Analysis)',
      desc: 'با پردازش نظرات مشتریان در شبکه‌های اجتماعی، نظرسنجی‌ها و وب‌سایت، نقاط قوت و ضعف خدمات و محصولات شما بلافاصله شناسایی و گزارش می‌شود.',
      icon: MessageSquare,
      benefits: ['پایش بلادرنگ برند', 'شناسایی زودهنگام بحران‌های روابط عمومی', 'گزارش‌دهی هوشمند به هیات مدیره']
    },
    {
      title: 'اتوماسیون فرآیندهای اداری و هوشمندسازی RPA',
      desc: 'با استفاده از ربات‌های نرم‌افزاری هوشان، وظایف تکراری، استخراج داده‌ها از فرم‌ها، صدور پیش‌فاکتور و خلاصه‌سازی گزارشات به صورت خودکار انجام می‌پذیرد.',
      icon: Cpu,
      benefits: ['افزایش ۵ برابری سرعت فرآیندهای اداری', 'حذف کامل خطاهای انسانی', 'آزادسازی زمان پرسنل برای کارهای خلاقانه']
    },
    {
      title: 'استقرار مدل‌های داخلی (On-Premise RAG) و امنیت داده',
      desc: 'اتصال هوش مصنوعی به فایل‌های محرمانه، آیین‌نامه‌ها و پایگاه دانش سازمان بدون خروج داده‌ها از سرورهای اختصاصی شرکت.',
      icon: ShieldCheck,
      benefits: ['محرمانگی ۱۰۰٪ اطلاعات', 'پاسخ‌گویی مستند به منابع داخلی', 'انطباق با استانداردهای افتا و پدافند سایبری']
    }
  ];

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setFormSubmitted(true);
  };

  return (
    <div className="pt-28 pb-20 bg-slate-950 min-h-screen">
      {/* Background Glow */}
      <div className="absolute top-20 right-1/4 w-[600px] h-[350px] 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">
        
        {/* Page Header */}
        <div className="text-center max-w-3xl mx-auto space-y-4 mb-16">
          <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>
          <h1 className="text-3xl sm:text-5xl font-black text-white tracking-tight">
            هوش مصنوعی اختصاصی برای سازمان و شرکت شما
          </h1>
          <p className="text-sm text-slate-300 leading-relaxed font-light">
            ما با تخصص در پیاده‌سازی راهکارهای سازمانی مبتنی بر هوش مصنوعی، به شما کمک می‌کنیم تا فرآیندهای کسب‌وکارتان را بهینه کرده، تجربه مشتریان را ارتقا داده و تصمیم‌گیری‌های خود را بر پایه تحلیل‌های دقیق داده‌ها انجام دهید.
          </p>
        </div>

        {/* Solutions Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-20">
          {enterpriseSolutions.map((sol, idx) => {
            const Icon = sol.icon;
            return (
              <div 
                key={idx}
                className="p-7 rounded-3xl bg-slate-900/60 border border-slate-800/80 hover:border-cyan-500/40 glass-panel-hover flex flex-col justify-between space-y-5"
              >
                <div className="space-y-4">
                  <div className="w-12 h-12 rounded-2xl bg-cyan-500/10 text-cyan-400 flex items-center justify-center">
                    <Icon className="w-6 h-6" />
                  </div>

                  <h3 className="text-base font-bold text-white leading-snug">
                    {sol.title}
                  </h3>

                  <p className="text-xs text-slate-400 leading-relaxed">
                    {sol.desc}
                  </p>

                  <div className="space-y-2 pt-2 border-t border-slate-800/80">
                    <span className="text-[11px] font-bold text-slate-300 block">دستاوردهای سازمان:</span>
                    {sol.benefits.map((b, i) => (
                      <div key={i} className="flex items-center gap-2 text-xs text-slate-300">
                        <CheckCircle2 className="w-3.5 h-3.5 text-cyan-400 shrink-0" />
                        <span>{b}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            );
          })}
        </div>

        {/* Corporate Training Spotlight */}
        <div className="p-8 sm:p-12 rounded-3xl bg-gradient-to-r from-indigo-950 via-slate-900 to-slate-950 border border-indigo-500/30 mb-20 shadow-2xl space-y-6">
          <div className="max-w-3xl space-y-4">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-500/20 text-indigo-300 text-xs font-semibold">
              <GraduationCap className="w-4 h-4" />
              <span>آموزش‌های سازمانی هوشان (Reskilling & Upskilling)</span>
            </div>
            <h2 className="text-2xl sm:text-3xl font-black text-white">
              بازمهارت‌آموزی و ارتقای مهارت‌های هوش مصنوعی کارکنان
            </h2>
            <p className="text-xs sm:text-sm text-slate-300 leading-relaxed">
              در دنیای امروز و عصر هوش مصنوعی، سازمان‌ها برای ماندگاری و رشد نیازمند بازمهارت‌آموزی (Reskilling) و ارتقای مهارت‌های (Upskilling) نیروهای خود هستند. دوره‌های آموزشی جامع و کاربردی هوشان با تدریس اعضای هیات علمی و اساتید برجسته، پرسنل شما را آماده خلق ارزش واقعی در سازمان می‌کند.
            </p>
          </div>

          <div className="pt-2 flex flex-wrap gap-4">
            <a
              href="/academy"
              className="px-6 py-3 rounded-2xl bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-bold transition-all flex items-center gap-2 shadow-lg shadow-indigo-600/25"
            >
              <span>مشاهده سرفصل‌های دوره‌های سازمانی</span>
              <ArrowLeft className="w-4 h-4" />
            </a>
          </div>
        </div>

        {/* Consultation & Demo Request Form */}
        <div className="max-w-3xl mx-auto rounded-3xl p-8 sm:p-10 bg-slate-900/80 border border-slate-800 shadow-2xl">
          <div className="text-center space-y-2 mb-8">
            <div className="inline-flex items-center gap-1.5 text-cyan-400 text-xs font-semibold">
              <PhoneCall className="w-4 h-4" />
              <span>درخواست مشاوره و دموی اختصاصی</span>
            </div>
            <h3 className="text-xl sm:text-2xl font-bold text-white">
              فرم درخواست راهکار سازمانی و استعلام قیمت
            </h3>
            <p className="text-xs text-slate-400">
              اطلاعات سازمان خود را وارد کنید تا کارشناسان هوشان در کمتر از ۲۴ ساعت کاری با شما تماس بگیرند.
            </p>
          </div>

          {formSubmitted ? (
            <div className="p-8 text-center space-y-4 rounded-2xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 animate-in fade-in">
              <CheckCircle2 className="w-12 h-12 mx-auto" />
              <h4 className="text-base font-bold text-white">درخواست شما با موفقیت ثبت شد</h4>
              <p className="text-xs text-slate-300">
                مشاوران ارشد هوشان به زودی با شماره تلفن {formData.phone} جهت هماهنگی جلسه دمو تماس خواهند گرفت.
              </p>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="space-y-4">
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-medium text-slate-300 mb-1.5">
                    نام سازمان / شرکت
                  </label>
                  <input
                    type="text"
                    required
                    value={formData.companyName}
                    onChange={(e) => setFormData({ ...formData, companyName: e.target.value })}
                    placeholder="مثال: شرکت صنایع فولاد ..."
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-cyan-500"
                  />
                </div>
                <div>
                  <label className="block text-xs font-medium text-slate-300 mb-1.5">
                    نام و نام خانوادگی رابط
                  </label>
                  <input
                    type="text"
                    required
                    value={formData.contactPerson}
                    onChange={(e) => setFormData({ ...formData, contactPerson: e.target.value })}
                    placeholder="مثال: دکتر علوی"
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-cyan-500"
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-medium text-slate-300 mb-1.5">
                    شماره تماس مستقیم
                  </label>
                  <input
                    type="tel"
                    dir="ltr"
                    required
                    value={formData.phone}
                    onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                    placeholder="09123456789"
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-cyan-500 text-left"
                  />
                </div>
                <div>
                  <label className="block text-xs font-medium text-slate-300 mb-1.5">
                    ایمیل سازمانی
                  </label>
                  <input
                    type="email"
                    dir="ltr"
                    value={formData.email}
                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                    placeholder="name@company.com"
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-cyan-500 text-left"
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-medium text-slate-300 mb-1.5">
                    تعداد کارکنان سازمان
                  </label>
                  <select
                    value={formData.employeesCount}
                    onChange={(e) => setFormData({ ...formData, employeesCount: e.target.value })}
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-xs text-white focus:outline-none focus:border-cyan-500"
                  >
                    <option value="1-50">۱ تا ۵۰ نفر</option>
                    <option value="50-200">۵۰ تا ۲۰۰ نفر</option>
                    <option value="200-1000">۲۰۰ تا ۱۰۰۰ نفر</option>
                    <option value="1000+">بیش از ۱۰۰۰ نفر (هلدینگ)</option>
                  </select>
                </div>
                <div>
                  <label className="block text-xs font-medium text-slate-300 mb-1.5">
                    نوع راهکار درخواستی
                  </label>
                  <select
                    value={formData.serviceInterest}
                    onChange={(e) => setFormData({ ...formData, serviceInterest: e.target.value })}
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-950 border border-slate-800 text-xs text-white focus:outline-none focus:border-cyan-500"
                  >
                    <option value="چت‌بات و دستیار سازمانی">سفارشی‌سازی دستیار و چت‌بات سازمانی</option>
                    <option value="آموزش‌های سازمانی">دوره‌های آموزش سازمانی پرسنل</option>
                    <option value="اتوماسیون RPA">اتوماسیون فرآیندهای اداری و RPA</option>
                    <option value="تحلیل داده و پیش‌بینی">تحلیل داده، تقاضا و هوش تجاری</option>
                    <option value="استقرار سرور داخلی On-Premise">استقرار سرور داخلی On-Premise RAG</option>
                  </select>
                </div>
              </div>

              <div>
                <label className="block text-xs font-medium text-slate-300 mb-1.5">
                  توضیحات و چالش‌های سازمان (اختیاری)
                </label>
                <textarea
                  rows={3}
                  value={formData.message}
                  onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                  placeholder="نیازها یا اهداف مدنظر سازمان خود را بنویسید..."
                  className="w-full p-3.5 rounded-xl bg-slate-950 border border-slate-800 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-cyan-500"
                />
              </div>

              <button
                type="submit"
                className="w-full py-3.5 rounded-2xl bg-gradient-to-r from-cyan-600 to-indigo-600 hover:opacity-95 text-white text-xs font-bold shadow-lg shadow-cyan-600/25 transition-all flex items-center justify-center gap-2 cursor-pointer"
              >
                <Send className="w-4 h-4 rotate-180" />
                <span>ارسال درخواست و هماهنگی جلسه مشاوره</span>
              </button>
            </form>
          )}
        </div>

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