// =============================================================================
// عزو (AZU) — Supply Platform, main component
// -----------------------------------------------------------------------------
// Loaded by index.html via <script type="text/babel" src="app.jsx">.
// Depends on: React + ReactDOM globals (index.html), and the icon components
// defined in icons.jsx (loaded before this file).
//
// Functionality preserved from the original:
//   - 3-step supplier onboarding modal with client-side field validation
//   - "بوابة المصانع" button + "متجر المنشآت" link (https://azu.sa)
//   - Submit sends the full formData object as JSON to the Make.com webhook
//     below via POST — this is the one integration this project talks to.
// =============================================================================
const WEBHOOK_URL = 'https://hook.eu1.make.com/hkvnwo845vle5gi2e8b9wfqa86cqswlx';

const { useState } = React;

function AZUPlatform() {
  const [isSupplierModalOpen, setIsSupplierModalOpen] = useState(false);
  const [formStep, setFormStep] = useState(1);
  const [formData, setFormData] = useState({
    companyName: '',
    salesManager: '',
    phone: '',
    email: '',
    city: '',
    sector: '',
    whiteLabel: false,
    monthlyCapacity: '',
    zatca: false,
    logistics: 'factory-pickup',
    discountRate: '',
  });
  const [submitStatus, setSubmitStatus] = useState(null);
  const [fieldErrors, setFieldErrors] = useState({});

  const handleInputChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({
      ...prev,
      [name]: type === 'checkbox' ? checked : value
    }));
    if (fieldErrors[name]) {
      setFieldErrors(prev => ({
        ...prev,
        [name]: ''
      }));
    }
  };

  const handleNextStep = () => {
    if (formStep < 3) setFormStep(formStep + 1);
  };

  const handlePrevStep = () => {
    if (formStep > 1) setFormStep(formStep - 1);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    const errors = {};

    if (!formData.companyName.trim()) {
      errors.companyName = 'اسم المصنع مطلوب';
    }
    if (!formData.salesManager.trim()) {
      errors.salesManager = 'اسم مسؤول المبيعات مطلوب';
    }
    if (!formData.phone.trim()) {
      errors.phone = 'رقم الجوال مطلوب';
    }
    if (!formData.email.trim()) {
      errors.email = 'البريد الإلكتروني مطلوب';
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
      errors.email = 'البريد الإلكتروني غير صحيح';
    }
    if (!formData.city) {
      errors.city = 'اختيار المدينة مطلوب';
    }
    if (!formData.sector) {
      errors.sector = 'اختيار القطاع مطلوب';
    }
    if (!formData.monthlyCapacity.trim()) {
      errors.monthlyCapacity = 'الطاقة الإنتاجية مطلوبة';
    }
    if (!formData.discountRate.trim()) {
      errors.discountRate = 'نسبة الخصم مطلوبة';
    }

    if (Object.keys(errors).length > 0) {
      setFieldErrors(errors);
      setSubmitStatus({ status: 'error', message: 'يرجى ملء جميع الحقول المطلوبة بشكل صحيح' });
      return;
    }

    try {
      console.log('✅ تم إرسال الطلب:', formData);
      console.log('📅 الوقت:', new Date().toISOString());

      setSubmitStatus({ status: 'loading' });

      const response = await fetch(WEBHOOK_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData),
      });

      if (!response.ok) {
        throw new Error('Webhook request failed with status ' + response.status);
      }

      setSubmitStatus({ status: 'success', requestId: Math.random().toString(36).substring(7).toUpperCase() });
    } catch (error) {
      setSubmitStatus({ status: 'error', message: 'حدث خطأ ما. يرجى المحاولة لاحقاً.' });
    }
  };

  const progressPercentage = (formStep / 3) * 100;

  return (
    <div className="min-h-screen bg-gradient-to-br from-[#07090E] via-[#0F141C] to-[#07090E] text-[#F8FAFC]" dir="rtl">

      {/* Header */}
      <header className="sticky top-0 z-40 backdrop-blur-md bg-[#07090E]/40 border-b border-[#1E293B]/50">
        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 rounded-lg bg-gradient-to-br from-[#10B981] to-[#06B6D4] flex items-center justify-center font-bold text-[#07090E]">
              عزو
            </div>
            <span className="text-sm text-[#94A3B8]">● منصة التوريد المباشر B2B — المملكة</span>
          </div>
          <div className="flex gap-3">
            <button
              onClick={() => setIsSupplierModalOpen(true)}
              className="px-4 py-2 text-sm rounded-lg bg-[#0F141C]/60 border border-[#1E293B] hover:border-[#10B981] hover:bg-[#0F141C]/80 text-[#94A3B8] transition-all font-medium cursor-pointer"
            >
              🏭 بوابة المصانع
            </button>
            <a
              href="https://azu.sa"
              target="_blank"
              rel="noopener noreferrer"
              className="px-4 py-2 text-sm rounded-lg bg-[#0F141C]/60 border border-[#1E293B] hover:border-[#06B6D4] hover:bg-[#0F141C]/80 text-[#94A3B8] transition-all font-medium cursor-pointer inline-flex items-center"
            >
              🛒 متجر المنشآت
              <ArrowRight className="w-3 h-3 mr-1" />
            </a>
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="relative overflow-hidden py-20 px-6">
        <div className="absolute inset-0 opacity-30">
          <div className="absolute top-20 right-40 w-96 h-96 bg-[#06B6D4]/10 rounded-full blur-3xl"></div>
          <div className="absolute bottom-20 left-20 w-80 h-80 bg-[#10B981]/10 rounded-full blur-3xl"></div>
        </div>

        <div className="max-w-5xl mx-auto relative z-10">
          <div className="text-center mb-16">
            <h1 className="text-5xl font-bold mb-4 bg-gradient-to-r from-[#06B6D4] to-[#10B981] bg-clip-text text-transparent">
              سلسلة التوريد المباشرة
            </h1>
            <p className="text-2xl text-[#94A3B8] mb-2">من المصنع لمنشأتك</p>
            <p className="text-[#94A3B8] max-w-2xl mx-auto">
              منصة الحلول التموينية وسلاسل الإمداد المؤسسية المعتمدة لقطاع الإعاشة والمطاعم والجمعيات. أسعار جملة صافية وفاتورة إلكترونية موحدة.
            </p>
          </div>

          {/* Dual Bento Cards */}
          <div className="grid md:grid-cols-2 gap-8 mb-12">
            {/* Suppliers Card */}
            <div
              onClick={() => setIsSupplierModalOpen(true)}
              className="group relative p-8 rounded-xl border border-[#1E293B] bg-[#0F141C]/40 backdrop-blur hover:bg-[#0F141C]/60 hover:border-[#10B981]/50 transition-all cursor-pointer overflow-hidden"
            >
              <div className="absolute inset-0 opacity-0 group-hover:opacity-20 transition-opacity">
                <div className="absolute top-0 right-0 w-40 h-40 bg-[#10B981] rounded-full blur-3xl"></div>
              </div>

              <div className="relative z-10">
                <div className="mb-4 inline-flex">
                  <div className="w-14 h-14 rounded-lg bg-gradient-to-br from-[#10B981] to-[#059669] flex items-center justify-center">
                    <Factory className="w-7 h-7 text-white" />
                  </div>
                </div>

                <h3 className="text-xl font-bold mb-2">شبكة المصانع الوطنية المعتمدة</h3>
                <p className="text-[#06B6D4] text-sm font-semibold mb-4">0% رسوم إدراج • تحصيل بنكي فوري</p>

                <ul className="space-y-2 mb-6 text-[#94A3B8] text-sm">
                  <li>✓ تصريف فائض الطاقة الإنتاجية</li>
                  <li>✓ فتح خطوط توريد فورية لكبرى عقود الإعاشة</li>
                  <li>✓ بدون اشتراط حصرية</li>
                </ul>

                <button
                  onClick={() => setIsSupplierModalOpen(true)}
                  className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-[#10B981] to-[#059669] text-white font-semibold hover:shadow-lg hover:shadow-[#10B981]/50 transition-all"
                >
                  سجل مصنعك وابدأ التوريد
                  <ChevronRight className="w-4 h-4" />
                </button>
              </div>
            </div>

            {/* Buyers Card */}
            <div className="group relative p-8 rounded-xl border border-[#1E293B] bg-[#0F141C]/40 backdrop-blur hover:bg-[#0F141C]/60 hover:border-[#06B6D4]/50 transition-all overflow-hidden">
              <div className="absolute inset-0 opacity-0 group-hover:opacity-20 transition-opacity">
                <div className="absolute top-0 right-0 w-40 h-40 bg-[#06B6D4] rounded-full blur-3xl"></div>
              </div>

              <div className="relative z-10">
                <div className="mb-4 inline-flex">
                  <div className="w-14 h-14 rounded-lg bg-gradient-to-br from-[#06B6D4] to-[#0891B2] flex items-center justify-center">
                    <Truck className="w-7 h-7 text-white" />
                  </div>
                </div>

                <h3 className="text-xl font-bold mb-2">حلول التموين والتوريد لمنشأتك</h3>
                <p className="text-[#10B981] text-sm font-semibold mb-4">سعر أرض المصنع • تسليم فجري مجدول</p>

                <ul className="space-y-2 mb-6 text-[#94A3B8] text-sm">
                  <li>✓ باقات الورقيات والتغليف المخصص</li>
                  <li>✓ منتجات سريعة الدوران بأسعار الجملة</li>
                  <li>✓ فوترة ضريبية نظامية ZATCA</li>
                </ul>

                <a
                  href="https://azu.sa"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-gradient-to-r from-[#06B6D4] to-[#0891B2] text-white font-semibold hover:shadow-lg hover:shadow-[#06B6D4]/50 transition-all"
                >
                  تصفح المتجر واطلب العينات
                  <ChevronRight className="w-4 h-4" />
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Product Categories Matrix */}
      <section className="py-16 px-6 border-t border-[#1E293B]">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold mb-12 text-center">عينات من الحلول التموينية</h2>
          <div className="grid md:grid-cols-4 gap-4">
            {[
              { icon: '📋', title: 'حلول الورقيات والتغليف', desc: 'مناديل، رولات، كرتون' },
              { icon: '🥤', title: 'مستلزمات الإعاشة', desc: 'مياه، تمور، مستهلكات' },
              { icon: '🍱', title: 'منتجات سريعة الدوران', desc: 'ضيافة مؤسسية متنوعة' },
              { icon: '📦', title: 'باقات التوريد الموسمي', desc: 'مطابخ مركزية متخصصة' },
            ].map((item, idx) => (
              <div key={idx} className="p-6 rounded-lg border border-[#1E293B] bg-[#0F141C]/50 hover:bg-[#0F141C]/70 hover:border-[#094B45]/50 transition-all">
                <div className="text-3xl mb-3">{item.icon}</div>
                <h3 className="font-semibold mb-2">{item.title}</h3>
                <p className="text-sm text-[#94A3B8]">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Trust & Compliance */}
      <section className="py-16 px-6 border-t border-[#1E293B]">
        <div className="max-w-6xl mx-auto">
          <h2 className="text-3xl font-bold mb-12 text-center">الامتثال والحماية</h2>
          <div className="grid md:grid-cols-4 gap-4">
            {[
              { icon: Shield, title: 'فوترة معتمدة', desc: 'ZATCA Phase 2' },
              { icon: Zap, title: 'مواصفات قياسية', desc: 'SASO / ISO' },
              { icon: Shield, title: 'حماية العقود', desc: 'بيانات مشفرة' },
              { icon: Check, title: 'فحص جودة', desc: 'تسليم فجري' },
            ].map((item, idx) => (
              <div key={idx} className="p-6 rounded-lg border border-[#1E293B] bg-[#0F141C]/50 text-center hover:border-[#06B6D4]/50 transition-all">
                <item.icon className="w-8 h-8 mx-auto mb-3 text-[#06B6D4]" />
                <h3 className="font-semibold mb-1">{item.title}</h3>
                <p className="text-sm text-[#94A3B8]">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Supplier Modal */}
      {isSupplierModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
          <div className="bg-[#0F141C] border border-[#1E293B] rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-2xl">

            {/* Modal Header */}
            <div className="sticky top-0 flex items-center justify-between p-6 border-b border-[#1E293B] bg-[#0F141C]/95 backdrop-blur">
              <h2 className="text-2xl font-bold">تأهيل الموردين والمصانع</h2>
              <button
                onClick={() => setIsSupplierModalOpen(false)}
                className="p-2 hover:bg-[#1E293B] rounded-lg transition-colors"
              >
                <X className="w-6 h-6" />
              </button>
            </div>

            {/* Progress Bar */}
            <div className="px-6 pt-6">
              <div className="mb-2 flex justify-between text-sm text-[#94A3B8]">
                <span>الخطوة {formStep} من 3</span>
                <span>{Math.round(progressPercentage)}%</span>
              </div>
              <div className="w-full h-1.5 bg-[#1E293B] rounded-full overflow-hidden">
                <div
                  className="h-full bg-gradient-to-r from-[#10B981] to-[#06B6D4] transition-all duration-300"
                  style={{ width: `${progressPercentage}%` }}
                ></div>
              </div>
            </div>

            {/* Form Content */}
            <form onSubmit={handleSubmit} className="p-6">
              {/* Step 1: Basic Info */}
              {formStep === 1 && (
                <div className="space-y-4 animate-fadeIn">
                  <h3 className="text-lg font-semibold mb-6">بيانات المنشأة الأساسية</h3>

                  <div>
                    <label className="block text-sm font-medium mb-2">اسم المصنع / المنشأة</label>
                    <input
                      type="text"
                      name="companyName"
                      value={formData.companyName}
                      onChange={handleInputChange}
                      placeholder="مثال: مصنع النور للورقيات"
                      className={`w-full px-4 py-2 rounded-lg bg-[#1E293B]/30 border text-[#F8FAFC] placeholder-[#64748B] focus:outline-none transition-colors ${fieldErrors.companyName ? 'border-red-500 focus:border-red-500' : 'border-[#1E293B] focus:border-[#06B6D4]'}`}
                    />
                    {fieldErrors.companyName && <p className="text-red-500 text-sm mt-1">✗ {fieldErrors.companyName}</p>}
                  </div>

                  <div>
                    <label className="block text-sm font-medium mb-2">اسم مسؤول المبيعات</label>
                    <input
                      type="text"
                      name="salesManager"
                      value={formData.salesManager}
                      onChange={handleInputChange}
                      placeholder="مثال: أحمد محمد"
                      className={`w-full px-4 py-2 rounded-lg bg-[#1E293B]/30 border text-[#F8FAFC] placeholder-[#64748B] focus:outline-none transition-colors ${fieldErrors.salesManager ? 'border-red-500 focus:border-red-500' : 'border-[#1E293B] focus:border-[#06B6D4]'}`}
                    />
                    {fieldErrors.salesManager && <p className="text-red-500 text-sm mt-1">✗ {fieldErrors.salesManager}</p>}
                  </div>

                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium mb-2">رقم الجوال / الواتس</label>
                      <input
                        type="tel"
                        name="phone"
                        value={formData.phone}
                        onChange={handleInputChange}
                        placeholder="+966501234567"
                        className={`w-full px-4 py-2 rounded-lg bg-[#1E293B]/30 border text-[#F8FAFC] placeholder-[#64748B] focus:outline-none transition-colors ${fieldErrors.phone ? 'border-red-500 focus:border-red-500' : 'border-[#1E293B] focus:border-[#06B6D4]'}`}
                      />
                      {fieldErrors.phone && <p className="text-red-500 text-xs mt-1">✗ {fieldErrors.phone}</p>}
                    </div>
                    <div>
                      <label className="block text-sm font-medium mb-2">البريد الإلكتروني</label>
                      <input
                        type="email"
                        name="email"
                        value={formData.email}
                        onChange={handleInputChange}
                        placeholder="sales@factory.sa"
                        className={`w-full px-4 py-2 rounded-lg bg-[#1E293B]/30 border text-[#F8FAFC] placeholder-[#64748B] focus:outline-none transition-colors ${fieldErrors.email ? 'border-red-500 focus:border-red-500' : 'border-[#1E293B] focus:border-[#06B6D4]'}`}
                      />
                      {fieldErrors.email && <p className="text-red-500 text-xs mt-1">✗ {fieldErrors.email}</p>}
                    </div>
                  </div>

                  <div>
                    <label className="block text-sm font-medium mb-2">المدينة والمقر</label>
                    <select
                      name="city"
                      value={formData.city}
                      onChange={handleInputChange}
                      className={`w-full px-4 py-2 rounded-lg bg-[#1E293B]/30 border text-[#F8FAFC] focus:outline-none transition-colors ${fieldErrors.city ? 'border-red-500 focus:border-red-500' : 'border-[#1E293B] focus:border-[#06B6D4]'}`}
                    >
                      <option value="">اختر المدينة</option>
                      <option value="riyadh">الرياض</option>
                      <option value="jeddah">جدة</option>
                      <option value="dammam">الدمام</option>
                      <option value="medina">المدينة</option>
                      <option value="mecca">مكة</option>
                      <option value="other">أخرى</option>
                    </select>
                    {fieldErrors.city && <p className="text-red-500 text-sm mt-1">✗ {fieldErrors.city}</p>}
                  </div>
                </div>
              )}

              {/* Step 2: Production Capabilities */}
              {formStep === 2 && (
                <div className="space-y-4 animate-fadeIn">
                  <h3 className="text-lg font-semibold mb-6">القدرات الإنتاجية والتخصيص</h3>

                  <div>
                    <label className="block text-sm font-medium mb-2">القطاع / التخصص</label>
                    <select
                      name="sector"
                      value={formData.sector}
                      onChange={handleInputChange}
                      className={`w-full px-4 py-2 rounded-lg bg-[#1E293B]/30 border text-[#F8FAFC] focus:outline-none transition-colors ${fieldErrors.sector ? 'border-red-500 focus:border-red-500' : 'border-[#1E293B] focus:border-[#06B6D4]'}`}
                    >
                      <option value="">اختر القطاع</option>
                      <option value="paper">ورقيات وتغليف</option>
                      <option value="food">أغذية ومشروبات</option>
                      <option value="plastic">بلاستيك وتغليف</option>
                      <option value="mixed">متعدد التخصصات</option>
                    </select>
                    {fieldErrors.sector && <p className="text-red-500 text-sm mt-1">✗ {fieldErrors.sector}</p>}
                  </div>

                  <div className="space-y-3">
                    <label className="flex items-center gap-3 cursor-pointer">
                      <input
                        type="checkbox"
                        name="whiteLabel"
                        checked={formData.whiteLabel}
                        onChange={handleInputChange}
                        className="w-5 h-5 rounded accent-[#10B981]"
                      />
                      <span>إمكانية White-Labeling والطباعة المخصصة</span>
                    </label>

                    <label className="flex items-center gap-3 cursor-pointer">
                      <input
                        type="checkbox"
                        name="zatca"
                        checked={formData.zatca}
                        onChange={handleInputChange}
                        className="w-5 h-5 rounded accent-[#10B981]"
                      />
                      <span>لدي فوترة إلكترونية معتمدة ZATCA</span>
                    </label>
                  </div>

                  <div>
                    <label className="block text-sm font-medium mb-2">الطاقة الإنتاجية الشهرية (طن)</label>
                    <input
                      type="number"
                      name="monthlyCapacity"
                      value={formData.monthlyCapacity}
                      onChange={handleInputChange}
                      placeholder="مثال: 50"
                      className={`w-full px-4 py-2 rounded-lg bg-[#1E293B]/30 border text-[#F8FAFC] placeholder-[#64748B] focus:outline-none transition-colors ${fieldErrors.monthlyCapacity ? 'border-red-500 focus:border-red-500' : 'border-[#1E293B] focus:border-[#06B6D4]'}`}
                    />
                    {fieldErrors.monthlyCapacity && <p className="text-red-500 text-sm mt-1">✗ {fieldErrors.monthlyCapacity}</p>}
                  </div>
                </div>
              )}

              {/* Step 3: Compliance & Logistics */}
              {formStep === 3 && (
                <div className="space-y-4 animate-fadeIn">
                  <h3 className="text-lg font-semibold mb-6">الامتثال واللوجستيات</h3>

                  <div>
                    <label className="block text-sm font-medium mb-3">طريقة التسليم</label>
                    <div className="space-y-2">
                      <label className="flex items-center gap-3 cursor-pointer">
                        <input
                          type="radio"
                          name="logistics"
                          value="factory-pickup"
                          checked={formData.logistics === 'factory-pickup'}
                          onChange={handleInputChange}
                          className="w-4 h-4 accent-[#10B981]"
                        />
                        <span>استلام من الباب (Ex-Factory)</span>
                      </label>
                      <label className="flex items-center gap-3 cursor-pointer">
                        <input
                          type="radio"
                          name="logistics"
                          value="fleet"
                          checked={formData.logistics === 'fleet'}
                          onChange={handleInputChange}
                          className="w-4 h-4 accent-[#10B981]"
                        />
                        <span>لدي أسطول نقل خاص</span>
                      </label>
                    </div>
                  </div>

                  <div>
                    <label className="block text-sm font-medium mb-2">نسبة خصم الجملة المقترحة (%)</label>
                    <input
                      type="number"
                      name="discountRate"
                      value={formData.discountRate}
                      onChange={handleInputChange}
                      placeholder="مثال: 15"
                      className={`w-full px-4 py-2 rounded-lg bg-[#1E293B]/30 border text-[#F8FAFC] placeholder-[#64748B] focus:outline-none transition-colors ${fieldErrors.discountRate ? 'border-red-500 focus:border-red-500' : 'border-[#1E293B] focus:border-[#06B6D4]'}`}
                    />
                    {fieldErrors.discountRate && <p className="text-red-500 text-sm mt-1">✗ {fieldErrors.discountRate}</p>}
                  </div>

                  <div className="p-4 rounded-lg bg-[#10B981]/10 border border-[#10B981]/30">
                    <p className="text-sm text-[#94A3B8]">
                      سيتم التواصل معك خلال 24 ساعة لتأكيد البيانات ورفع الكتالوج والملفات المطلوبة.
                    </p>
                  </div>
                </div>
              )}

              {/* Success State */}
              {submitStatus?.status === 'success' && (
                <div className="text-center py-12 animate-fadeIn">
                  <div className="mb-6 inline-flex">
                    <div className="w-20 h-20 rounded-full bg-gradient-to-br from-[#10B981]/30 to-[#06B6D4]/30 border-2 border-[#10B981] flex items-center justify-center animate-pulse">
                      <Check className="w-10 h-10 text-[#10B981]" />
                    </div>
                  </div>
                  <h3 className="text-3xl font-bold mb-3 text-[#10B981]">تم التسجيل بنجاح! ✓</h3>
                  <p className="text-[#94A3B8] mb-2 text-lg font-semibold">
                    شكراً لتسجيلك كمورد في منصة عزو
                  </p>
                  <p className="text-[#64748B] mb-8">
                    سيتم التواصل معك خلال 24 ساعة على رقم الهاتف وبريدك الإلكتروني لتأكيد البيانات ورفع الكتالوج
                  </p>
                  <div className="bg-[#10B981]/10 border border-[#10B981]/30 rounded-lg p-4 mb-6 inline-block">
                    <p className="text-sm text-[#10B981] font-bold">معرّف الطلب: #{submitStatus.requestId}</p>
                  </div>
                </div>
              )}

              {/* Error Messages */}
              {submitStatus?.status === 'error' && (
                <div className="mb-6 p-4 rounded-lg bg-red-500/10 border border-red-500/30 animate-fadeIn">
                  <p className="text-red-400 font-semibold text-center">⚠️ {submitStatus.message}</p>
                </div>
              )}

              {/* Loading State */}
              {submitStatus?.status === 'loading' && (
                <div className="flex items-center justify-center py-8 animate-fadeIn">
                  <div className="flex gap-2">
                    <div className="w-3 h-3 rounded-full bg-[#10B981] animate-bounce" style={{animationDelay: '0s'}}></div>
                    <div className="w-3 h-3 rounded-full bg-[#06B6D4] animate-bounce" style={{animationDelay: '0.2s'}}></div>
                    <div className="w-3 h-3 rounded-full bg-[#10B981] animate-bounce" style={{animationDelay: '0.4s'}}></div>
                  </div>
                </div>
              )}

              {/* Action Buttons */}
              {submitStatus?.status === 'success' ? (
                <div className="flex gap-3 justify-center mt-8 pt-6 border-t border-[#1E293B]">
                  <button
                    type="button"
                    onClick={() => {
                      setIsSupplierModalOpen(false);
                      setFormStep(1);
                      setFormData({
                        companyName: '',
                        salesManager: '',
                        phone: '',
                        email: '',
                        city: '',
                        sector: '',
                        whiteLabel: false,
                        monthlyCapacity: '',
                        zatca: false,
                        logistics: 'factory-pickup',
                        discountRate: '',
                      });
                      setSubmitStatus(null);
                      setFieldErrors({});
                    }}
                    className="px-8 py-3 rounded-lg bg-gradient-to-r from-[#10B981] to-[#059669] text-white font-semibold hover:shadow-lg hover:shadow-[#10B981]/50 transition-all"
                  >
                    إغلاق النموذج
                  </button>
                </div>
              ) : (
                <div className="flex gap-3 justify-end mt-8 pt-6 border-t border-[#1E293B]">
                  {formStep > 1 && (
                    <button
                      type="button"
                      onClick={handlePrevStep}
                      className="px-6 py-2 rounded-lg border border-[#1E293B] hover:bg-[#1E293B]/50 transition-colors font-medium"
                    >
                      السابق
                    </button>
                  )}

                  {formStep < 3 ? (
                    <button
                      type="button"
                      onClick={handleNextStep}
                      className="px-6 py-2 rounded-lg bg-gradient-to-r from-[#10B981] to-[#059669] text-white font-semibold hover:shadow-lg hover:shadow-[#10B981]/50 transition-all"
                    >
                      التالي
                    </button>
                  ) : (
                    <button
                      type="submit"
                      disabled={submitStatus?.status === 'loading'}
                      className="px-6 py-2 rounded-lg bg-gradient-to-r from-[#10B981] to-[#059669] text-white font-semibold hover:shadow-lg hover:shadow-[#10B981]/50 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                      {submitStatus?.status === 'loading' ? '⏳ جاري الإرسال...' : '✓ إرسال الطلب'}
                    </button>
                  )}
                </div>
              )}
            </form>
          </div>
        </div>
      )}
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<AZUPlatform />);