import React, { useState, useEffect } from 'react';
import { 
  Search, Bell, MapPin, Building2, Calendar, Filter, Phone, 
  Briefcase, CheckCircle, User, Gavel, LogOut, Clock, MessageSquare,
  Star, Image as ImageIcon, Check, Edit3, ShieldCheck, Zap, 
  Award, Video, ListTodo, CheckSquare, UploadCloud, Settings, ChevronRight,
  PlusCircle, Facebook, Instagram, Globe, Send, Car, Wrench, FileText,
  ChevronLeft, Trash2, Camera, Hash, TrendingUp, HardHat
} from 'lucide-react';

// ==========================================
// 1. ثوابت النظام وقوائم الخيارات والكلمات الدلالية
// ==========================================
const GOVERNORATES = ["عمان", "إربد", "الزرقاء", "البلقاء", "المفرق", "الكرك", "الطفيلة", "معان", "العقبة", "جرش", "عجلون", "مادبا"];
const MAIN_CATEGORIES = ["إنشاءات", "تشطيبات وديكور", "كهروميكانيك", "صيانة عامة", "نقل ولوجستيات"];
const EXP_LEVELS = ["أقل من 5 سنوات", "5-10 سنوات", "أكثر من 10 سنوات"];
const REG_TYPES = ["صنايعي (فرد)", "مكتب مقاولات أو شركة"];
const PRICING_MODELS = ["كلاهما", "يومية فقط", "مقاولة فقط"];

// الكلمات الدلالية (SEO) لمحركات البحث
const SEO_KEYWORDS = [
  "مقاولات الأردن", "صنايعي عمان", "تشطيبات شقق", "كهربائي منازل", 
  "مواسرجي إربد", "عطاءات الأردن", "ديكورات وجبس بورد", "صيانة عامة", 
  "نقل عفش عمان", "سوق العمل الحر الأردني", "مطلوب معلم بليط", "مقاول حفر"
];

// ==========================================
// 2. مولد البيانات الذكي 
// ==========================================
const generateMockData = () => {
  const firstNames = ["أحمد", "محمد", "محمود", "عمر", "علي", "خالد", "يوسف", "طارق", "رائد", "عبدالله", "سعد", "سالم", "فادي", "رامي"];
  const families = ["الخصاونة", "المصري", "الزعبي", "العبادي", "الحداد", "النجار", "الخطيب", "أبو رمان", "المجالي", "العتوم", "الطراونة", "بني هاني"];
  const shopPrefixes = ["مؤسسة", "شركة", "مكتب", "أعمال", "مجموعة"];
  const specialties = {
    "إنشاءات": ["حفر وتأسيس", "عظم وطوبار", "حداد مسلح"],
    "تشطيبات وديكور": ["بليط", "دهين", "جبس بورد", "نجار ديكور", "ألمنيوم"],
    "كهروميكانيك": ["كهربائي منازل", "مواسرجي", "فني تكييف", "تدفئة مركزية"],
    "صيانة عامة": ["صيانة أجهزة منزلية", "عزل أسطح", "تنظيف خزانات"]
  };
  const areas = ["طبربور", "خلدا", "الحي الجنوبي", "الزرقاء الجديدة", "صويلح", "الدوار السابع", "المدينة الرياضية", "ماركا", "شفا بدران", "الحصن"];
  
  const generatedContractors = [];
  const generatedTenders = [];

  for(let i=0; i<30; i++) {
    const mainCat = MAIN_CATEGORIES[Math.floor(Math.random() * MAIN_CATEGORIES.length)];
    const subs = specialties[mainCat] || ["عام"];
    const sub = subs[Math.floor(Math.random() * subs.length)];
    const fName = firstNames[Math.floor(Math.random() * firstNames.length)];
    const lName = families[Math.floor(Math.random() * families.length)];
    const gov = GOVERNORATES[Math.floor(Math.random() * GOVERNORATES.length)];
    const isCompany = Math.random() > 0.7;
    const shopName = isCompany ? `${shopPrefixes[Math.floor(Math.random() * shopPrefixes.length)]} ${fName} لـ ${mainCat}` : `المعلم ${fName} ${lName} - ${sub}`;

    generatedContractors.push({
      id: 1000 + i,
      fullName: `${fName} ${lName}`,
      shopName: shopName,
      role: "contractor",
      regType: isCompany ? REG_TYPES[1] : REG_TYPES[0],
      mainCategory: mainCat,
      subSpecialty: sub,
      experience: EXP_LEVELS[Math.floor(Math.random() * EXP_LEVELS.length)],
      governorate: gov,
      coveredAreas: "حسب الاتفاق",
      phone: `07${Math.floor(Math.random() * 90000000 + 10000000)}`,
      extraPhone: "",
      about: `نقدم أفضل خدمات الـ ${sub} في ${gov}. دقة في المواعيد وجودة في العمل وأسعار منافسة تناسب الجميع.`,
      hasTransport: Math.random() > 0.2 ? "نعم" : "لا",
      pricingModel: PRICING_MODELS[Math.floor(Math.random() * PRICING_MODELS.length)],
      rating: (Math.random() * (5 - 3.5) + 3.5).toFixed(1),
      isAvailable: Math.random() > 0.3,
      isVerified: Math.random() > 0.5,
      badges: Math.random() > 0.6 ? ['fast_response'] : [],
      stats: { totalRequests: Math.floor(Math.random() * 50), completedJobs: Math.floor(Math.random() * 40), profileViews: Math.floor(Math.random() * 200) },
      portfolio: Math.random() > 0.3 ? [{ id: 1, title: `أعمال ${sub}`, before: "https://picsum.photos/400/300?random="+i, after: "https://picsum.photos/400/300?random="+(i+100) }] : [],
      requests: []
    });
  }

  for(let i=0; i<40; i++) {
    const mainCat = MAIN_CATEGORIES[Math.floor(Math.random() * MAIN_CATEGORIES.length)];
    const subs = specialties[mainCat] || ["عام"];
    const sub = subs[Math.floor(Math.random() * subs.length)];
    const gov = GOVERNORATES[Math.floor(Math.random() * GOVERNORATES.length)];
    const area = areas[Math.floor(Math.random() * areas.length)];
    
    generatedTenders.push({
      id: 5000 + i,
      title: `مطلوب ${sub} للعمل في ${area}`,
      clientName: `${firstNames[Math.floor(Math.random() * firstNames.length)]} ${families[Math.floor(Math.random() * families.length)]}`,
      location: `${gov} - ${area}`,
      category: mainCat,
      postDate: `2026-04-${Math.floor(Math.random() * 20 + 1).toString().padStart(2, '0')}`,
      status: "مفتوح",
      description: `نبحث عن ${sub} ذو خبرة للقيام بأعمال عاجلة في الموقع. يرجى من المهتمين تقديم عروضهم مع ذكر التكلفة التقريبية.`,
      bidsCount: Math.floor(Math.random() * 5)
    });
  }

  return { contractors: generatedContractors, tenders: generatedTenders.sort((a,b) => b.id - a.id) };
};

// ==========================================
// 3. التطبيق الرئيسي
// ==========================================
export default function App() {
  const [currentView, setCurrentView] = useState('home'); 
  const [tenders, setTenders] = useState([]);
  const [contractors, setContractors] = useState([]);
  const [currentUser, setCurrentUser] = useState(null); 
  const [selectedContractor, setSelectedContractor] = useState(null);

  useEffect(() => {
    const data = generateMockData();
    setTenders(data.tenders);
    setContractors(data.contractors);
  }, []);

  useEffect(() => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, [currentView]);

  const navigateTo = (view, data = null) => {
    if (view === 'public_profile' && data) setSelectedContractor(data);
    setCurrentView(view);
  };

  const handleLogout = () => {
    setCurrentUser(null);
    navigateTo('home');
  };

  // --- مكون الأزرار المودرن (Bento Style) ---
  const ModernButton = ({ children, onClick, variant = 'primary', className = '', type = 'button' }) => {
    const baseStyle = "font-bold py-3.5 px-6 rounded-2xl transition-all duration-300 transform active:scale-95 flex items-center justify-center gap-2 outline-none";
    const variants = {
      primary: "bg-slate-900 hover:bg-slate-800 text-white shadow-xl shadow-slate-900/20",
      secondary: "bg-white text-slate-900 hover:bg-slate-50 shadow-lg shadow-slate-200/50",
      accent: "bg-purple-600 hover:bg-purple-700 text-white shadow-xl shadow-purple-600/30",
      success: "bg-emerald-500 hover:bg-emerald-600 text-white shadow-xl shadow-emerald-500/30",
      outline: "bg-transparent border-2 border-slate-200 hover:border-slate-300 text-slate-700"
    };
    return (
      <button type={type} onClick={onClick} className={`${baseStyle} ${variants[variant]} ${className}`}>
        {children}
      </button>
    );
  };

  // ==========================================
  // الهيدر العام للمنصة (Bento Style)
  // ==========================================
  const GlobalHeader = () => (
    <header className="bg-slate-100/80 backdrop-blur-xl sticky top-0 z-50 pt-4 pb-2 px-4">
      <div className="container mx-auto">
        <div className="bg-white rounded-[2rem] px-6 py-3 flex justify-between items-center shadow-sm border border-slate-200/50">
          <div className="flex items-center gap-3 cursor-pointer group" onClick={() => navigateTo('home')}>
            <div className="bg-slate-900 p-2.5 rounded-2xl shadow-md group-hover:-translate-y-1 transition-transform duration-300">
              <HardHat size={22} className="text-purple-400" />
            </div>
            <div>
              <h1 className="text-xl font-extrabold tracking-tight text-slate-900">صنايعي<span className="text-purple-600">.جو</span></h1>
            </div>
          </div>
          
          <nav className="hidden md:flex gap-8 font-bold text-sm bg-slate-50 px-6 py-2.5 rounded-2xl">
            <button onClick={() => navigateTo('home')} className={`transition-colors duration-300 ${currentView === 'home' ? 'text-purple-600' : 'text-slate-500 hover:text-slate-900'}`}>سوق المشاريع</button>
            <button onClick={() => navigateTo('directory')} className={`transition-colors duration-300 ${currentView === 'directory' ? 'text-purple-600' : 'text-slate-500 hover:text-slate-900'}`}>دليل الصنايعية</button>
          </nav>

          <div className="flex gap-3 items-center">
            {currentUser ? (
              <>
                {currentUser.role === 'client' && (
                  <ModernButton onClick={() => navigateTo('post_job')} variant="accent" className="hidden md:flex !py-2.5 !px-4 text-sm">
                    <PlusCircle size={18}/> اطرح مشروع
                  </ModernButton>
                )}
                {currentUser.role === 'contractor' && (
                  <ModernButton onClick={() => navigateTo('dashboard')} variant="primary" className="hidden md:flex !py-2.5 !px-4 text-sm">
                    <Briefcase size={18}/> لوحة التحكم
                  </ModernButton>
                )}
                <button onClick={handleLogout} className="text-slate-400 hover:text-rose-500 bg-slate-50 p-2.5 rounded-2xl transition-colors" title="تسجيل خروج">
                  <LogOut size={20} />
                </button>
              </>
            ) : (
              <ModernButton onClick={() => navigateTo('auth')} variant="primary" className="!py-2.5 !px-6 text-sm">
                <User size={18}/> دخول / تسجيل
              </ModernButton>
            )}
          </div>
        </div>
      </div>
    </header>
  );

  // ==========================================
  // الصفحة الرئيسية (Bento Grid Style)
  // ==========================================
  const MarketplaceHomeView = () => (
    <div className="animate-in fade-in duration-500 pb-16">
      <main className="container mx-auto px-4 pt-6">
        
        {/* --- Hero Section (Bento Grid) --- */}
        <div className="grid grid-cols-1 md:grid-cols-4 md:grid-rows-2 gap-4 mb-16">
          
          {/* Main Hero Card (Spans 2 columns, 2 rows) */}
          <div className="md:col-span-2 md:row-span-2 bg-slate-900 rounded-[2.5rem] p-10 flex flex-col justify-center relative overflow-hidden">
            <div className="absolute -top-20 -right-20 w-64 h-64 bg-purple-600/20 rounded-full blur-3xl"></div>
            <div className="relative z-10">
              <span className="inline-flex items-center gap-2 py-1.5 px-4 rounded-full bg-white/10 text-purple-400 text-sm font-bold mb-6 border border-white/5 shadow-sm">
                <TrendingUp size={16}/> منصة الأردن الأولى للمهن
              </span>
              <h2 className="text-4xl md:text-5xl font-extrabold text-white mb-6 leading-[1.3]">
                أنجز أعمالك مع <span className="text-purple-400">أفضل الصنايعية</span> في المملكة.
              </h2>
              <p className="text-slate-400 mb-8 text-lg leading-relaxed">
                سواء كنت تبحث عن صيانة سريعة، تشطيب كامل، أو مبرمج لمشروعك، نحن نربطك بالكفاءات الموثوقة.
              </p>
              <div className="flex gap-4">
                {currentUser?.role === 'client' ? (
                  <ModernButton onClick={() => navigateTo('post_job')} variant="accent">اطرح مشروعك الآن</ModernButton>
                ) : (
                  <ModernButton onClick={() => navigateTo('auth')} variant="accent">سجل مجاناً وابدأ</ModernButton>
                )}
              </div>
            </div>
          </div>

          {/* Directory Access Card */}
          <div className="md:col-span-2 bg-gradient-to-br from-purple-100 to-purple-50 rounded-[2.5rem] p-8 flex flex-col justify-between group cursor-pointer border border-purple-100" onClick={() => navigateTo('directory')}>
            <div>
              <div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-purple-600 mb-4 shadow-sm group-hover:scale-110 transition-transform">
                <Search size={24} />
              </div>
              <h3 className="text-2xl font-bold text-slate-900 mb-2">تصفح دليل المهنيين</h3>
              <p className="text-slate-600">ابحث عن مقاولين موثوقين حسب محافظتك وتخصصهم الدقيق.</p>
            </div>
            <div className="mt-6 flex justify-end">
              <div className="bg-white p-3 rounded-2xl text-purple-600 shadow-sm"><ChevronLeft size={20}/></div>
            </div>
          </div>

          {/* Stats Card 1 */}
          <div className="bg-white rounded-[2.5rem] p-8 shadow-sm border border-slate-100 flex flex-col justify-center items-center text-center">
            <div className="text-4xl font-black text-slate-900 mb-2">+{contractors.length}</div>
            <div className="text-slate-500 font-bold text-sm">مهني ومقاول مسجل</div>
          </div>

          {/* Stats Card 2 */}
          <div className="bg-emerald-50 rounded-[2.5rem] p-8 border border-emerald-100 flex flex-col justify-center items-center text-center">
            <div className="text-4xl font-black text-emerald-600 mb-2">+{tenders.length}</div>
            <div className="text-emerald-700 font-bold text-sm">عطاء ومشروع متاح</div>
          </div>
        </div>

        {/* --- Tenders List (Bento Style) --- */}
        <div className="flex justify-between items-end mb-8 px-2">
          <h3 className="text-2xl font-black text-slate-900 flex items-center gap-2"><ListTodo className="text-purple-600"/> أحدث المشاريع (العطاءات)</h3>
          <button onClick={() => navigateTo('home')} className="text-slate-500 font-bold text-sm hover:text-slate-900">عرض الكل</button>
        </div>
        
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {tenders.slice(0, 9).map(tender => (
            <div key={tender.id} className="bg-white rounded-[2rem] p-8 border border-slate-100 shadow-sm hover:shadow-xl hover:border-purple-200 transition-all duration-300 flex flex-col h-full">
              <div className="flex justify-between items-start mb-6">
                <span className="bg-slate-100 text-slate-800 px-3 py-1.5 rounded-xl text-xs font-bold">{tender.category}</span>
                <span className="text-xs font-bold text-slate-400 bg-slate-50 px-2.5 py-1.5 rounded-xl flex items-center gap-1.5"><Clock size={14}/> {tender.postDate}</span>
              </div>
              <h4 className="text-xl font-bold text-slate-900 mb-3">{tender.title}</h4>
              <p className="text-slate-500 text-sm mb-6 line-clamp-2 flex-grow leading-relaxed">{tender.description}</p>
              
              <div className="flex justify-between items-center bg-slate-50 p-4 rounded-2xl">
                <div className="text-sm font-bold text-slate-600 flex items-center gap-1.5"><MapPin size={16} className="text-slate-400"/> {tender.location}</div>
                <div className="text-sm font-black text-purple-700 bg-purple-100 px-3 py-1.5 rounded-xl">{tender.bidsCount} عروض</div>
              </div>
            </div>
          ))}
        </div>

        {/* --- SEO Keywords Section (Bento Style Footer Module) --- */}
        <div className="mt-16 bg-slate-900 rounded-[2.5rem] p-10 relative overflow-hidden">
          <div className="absolute top-0 right-0 w-full h-full bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-5"></div>
          <h3 className="text-xl font-bold text-white mb-6 flex items-center gap-2"><Hash className="text-purple-400"/> تخصصات وكلمات شائعة</h3>
          <div className="flex flex-wrap gap-3 relative z-10">
            {SEO_KEYWORDS.map((keyword, index) => (
              <span key={index} className="bg-slate-800 text-slate-300 hover:text-white hover:bg-slate-700 px-4 py-2 rounded-xl text-sm font-medium transition-colors cursor-default border border-slate-700">
                {keyword}
              </span>
            ))}
          </div>
        </div>

      </main>
    </div>
  );

  // ==========================================
  // دليل المهنيين (Bento Style)
  // ==========================================
  const DirectoryView = () => {
    const [searchGov, setSearchGov] = useState("الكل");
    const [searchCat, setSearchCat] = useState("الكل");
    
    const filteredContractors = contractors
      .filter(c => searchCat === "الكل" || c.mainCategory === searchCat)
      .filter(c => searchGov === "الكل" || c.governorate === searchGov)
      .sort((a, b) => (a.isAvailable === b.isAvailable) ? 0 : a.isAvailable ? -1 : 1);

    return (
      <div className="bg-slate-100/50 py-8 min-h-screen animate-in fade-in">
        <div className="container mx-auto px-4">
          
          <div className="bg-white rounded-[2.5rem] p-8 shadow-sm border border-slate-200 mb-8 flex flex-col md:flex-row justify-between items-center gap-6">
            <div>
              <h2 className="text-3xl font-black text-slate-900 mb-2">دليل الصنايعية</h2>
              <p className="text-slate-500 font-medium">تصفح ملفات المهنيين الموثقين وتواصل معهم مباشرة.</p>
            </div>
            
            <div className="flex flex-col md:flex-row gap-4 w-full md:w-auto">
              <div className="relative w-full md:w-64">
                 <Filter className="absolute top-4 right-4 text-slate-400" size={20}/>
                 <select value={searchCat} onChange={(e) => setSearchCat(e.target.value)} className="w-full bg-slate-50 border-2 border-slate-100 rounded-2xl py-3.5 pr-12 pl-4 outline-none focus:border-purple-500 font-bold text-slate-700 appearance-none">
                   <option value="الكل">كل التخصصات</option>
                   {MAIN_CATEGORIES.map(c => <option key={c} value={c}>{c}</option>)}
                 </select>
              </div>
              <div className="relative w-full md:w-64">
                 <MapPin className="absolute top-4 right-4 text-slate-400" size={20}/>
                 <select value={searchGov} onChange={(e) => setSearchGov(e.target.value)} className="w-full bg-slate-50 border-2 border-slate-100 rounded-2xl py-3.5 pr-12 pl-4 outline-none focus:border-purple-500 font-bold text-slate-700 appearance-none">
                   <option value="الكل">كل المحافظات</option>
                   {GOVERNORATES.map(g => <option key={g} value={g}>{g}</option>)}
                 </select>
              </div>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredContractors.slice(0, 30).map(contractor => (
              <div key={contractor.id} className="bg-white rounded-[2rem] border border-slate-100 p-4 shadow-sm hover:shadow-xl transition-all duration-300 flex flex-col group">
                <div className="h-48 bg-slate-100 rounded-[1.5rem] relative flex items-center justify-center overflow-hidden mb-4">
                   {contractor.portfolio.length > 0 ? (
                     <img src={contractor.portfolio[0].after} alt="عمل" className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
                   ) : <div className="text-slate-400"><ImageIcon size={40}/></div>}
                   {contractor.isAvailable && (
                     <div className="absolute top-3 right-3 bg-white/90 backdrop-blur-md text-slate-900 text-xs font-bold px-3 py-1.5 rounded-xl shadow-sm flex items-center gap-1.5">
                       <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span> متاح
                     </div>
                   )}
                </div>
                
                <div className="px-2 flex-1 flex flex-col">
                  <div className="flex justify-between items-start mb-1">
                    <span className="text-xs font-bold text-purple-600">{contractor.subSpecialty}</span>
                    <div className="flex items-center text-slate-900 font-extrabold text-sm bg-slate-50 px-2 py-1 rounded-lg">
                      <Star size={14} className="text-amber-500 mr-1" fill="currentColor" /> {contractor.rating}
                    </div>
                  </div>
                  
                  <h3 className="font-extrabold text-xl text-slate-900 mb-1 flex items-center gap-1.5">
                    {contractor.shopName} {contractor.isVerified && <ShieldCheck size={18} className="text-blue-500"/>}
                  </h3>
                  <div className="text-sm font-medium text-slate-500 flex items-center gap-1.5 mb-3"><MapPin size={16} className="text-slate-400"/> {contractor.governorate}</div>
                  
                  <p className="text-sm text-slate-500 mb-5 line-clamp-2 flex-1 leading-relaxed">{contractor.about}</p>
                  
                  <ModernButton onClick={() => navigateTo('public_profile', contractor)} variant="outline" className="w-full text-sm !rounded-xl border-slate-200 bg-slate-50 hover:bg-slate-100 hover:border-slate-300">
                    عرض الملف الكامل <ChevronLeft size={16}/>
                  </ModernButton>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  };

  // ==========================================
  // التسجيل والدخول (Bento Modal Style)
  // ==========================================
  const AuthView = () => {
    const [step, setStep] = useState(1);
    const [role, setRole] = useState('contractor');
    const [formData, setFormData] = useState({
      fullName: '', phone: '',
      shopName: '', regType: REG_TYPES[0], mainCategory: MAIN_CATEGORIES[1],
      subSpecialty: '', experience: EXP_LEVELS[1], governorate: GOVERNORATES[0], coveredAreas: ''
    });

    const handleChange = (e) => setFormData({...formData, [e.target.name]: e.target.value});

    const handleNext = (e) => {
      e.preventDefault();
      if(role === 'client') {
        setCurrentUser({ id: Date.now(), name: formData.fullName, phone: formData.phone, role });
        navigateTo('home');
      } else {
        setStep(2); 
      }
    };

    const handleFinish = (e) => {
      e.preventDefault();
      const newContractor = {
        id: Date.now(),
        fullName: formData.fullName,
        shopName: formData.shopName || `المعلم ${formData.fullName}`,
        phone: formData.phone,
        extraPhone: "",
        role: "contractor",
        regType: formData.regType,
        mainCategory: formData.mainCategory,
        subSpecialty: formData.subSpecialty,
        experience: formData.experience,
        governorate: formData.governorate,
        coveredAreas: formData.coveredAreas,
        about: "حساب جديد. يرجى تعديل النبذة لتجذب الزبائن.",
        hasTransport: "نعم",
        pricingModel: PRICING_MODELS[0],
        rating: "5.0",
        isAvailable: true,
        isVerified: false,
        badges: [],
        stats: { totalRequests: 0, completedJobs: 0, profileViews: 0 },
        portfolio: [],
        requests: []
      };
      setContractors([newContractor, ...contractors]);
      setCurrentUser(newContractor);
      navigateTo('dashboard');
    };

    return (
      <div className="bg-slate-100/50 py-16 min-h-screen flex items-center justify-center px-4 animate-in fade-in zoom-in-95 duration-300">
        <div className="bg-white p-8 md:p-12 rounded-[3rem] shadow-xl border border-slate-100 w-full max-w-xl relative overflow-hidden">
          <div className="absolute -top-32 -right-32 w-64 h-64 bg-purple-600 opacity-10 rounded-full blur-3xl"></div>
          
          <div className="text-center mb-10 relative z-10">
            <h2 className="text-3xl font-extrabold text-slate-900 mb-2">
              {step === 1 ? 'مرحباً بك في صنايعي.جو' : 'أكمل ملفك المهني'}
            </h2>
            <p className="text-slate-500 font-medium">
              {step === 1 ? 'سجل مجاناً وابدأ بإنجاز أعمالك أو زيادة دخلك' : 'بياناتك المهنية تهم الزبائن'}
            </p>
          </div>

          {step === 1 && (
            <form onSubmit={handleNext} className="space-y-6 relative z-10">
              <div>
                <label className="block text-sm font-bold text-slate-700 mb-3">حدد نوع حسابك:</label>
                <div className="grid grid-cols-2 gap-4">
                  <label className={`border-2 rounded-3xl p-5 text-center cursor-pointer transition-all duration-300 ${role === 'client' ? 'border-slate-900 bg-slate-900 text-white shadow-xl shadow-slate-900/20 scale-[1.02]' : 'border-slate-100 text-slate-500 hover:bg-slate-50'}`}>
                    <input type="radio" className="hidden" checked={role === 'client'} onChange={() => setRole('client')} />
                    <User size={32} className={`mx-auto mb-3 ${role === 'client' ? 'text-purple-400' : ''}`}/>
                    <div className="font-extrabold text-lg">زبون</div>
                    <div className={`text-xs font-medium mt-1 ${role === 'client' ? 'text-slate-300' : 'text-slate-400'}`}>أبحث عن مهنيين</div>
                  </label>
                  <label className={`border-2 rounded-3xl p-5 text-center cursor-pointer transition-all duration-300 ${role === 'contractor' ? 'border-purple-600 bg-purple-600 text-white shadow-xl shadow-purple-600/30 scale-[1.02]' : 'border-slate-100 text-slate-500 hover:bg-slate-50'}`}>
                    <input type="radio" className="hidden" checked={role === 'contractor'} onChange={() => setRole('contractor')} />
                    <HardHat size={32} className={`mx-auto mb-3 ${role === 'contractor' ? 'text-slate-100' : ''}`}/>
                    <div className="font-extrabold text-lg">مهني</div>
                    <div className={`text-xs font-medium mt-1 ${role === 'contractor' ? 'text-purple-100' : 'text-slate-400'}`}>أريد تقديم خدماتي</div>
                  </label>
                </div>
              </div>
              
              <div className="space-y-4 pt-4">
                <div>
                  <input name="fullName" required value={formData.fullName} onChange={handleChange} type="text" placeholder="الاسم الكامل" className="w-full bg-slate-50 border-2 border-slate-100 rounded-2xl py-4 px-5 outline-none focus:border-slate-900 focus:bg-white transition-all font-bold text-slate-800" />
                </div>
                <div>
                  <input name="phone" required value={formData.phone} onChange={handleChange} type="tel" dir="ltr" placeholder="رقم الهاتف (07XXXXXXXX)" className="w-full bg-slate-50 border-2 border-slate-100 rounded-2xl py-4 px-5 outline-none focus:border-slate-900 focus:bg-white transition-all font-bold text-slate-800 text-right" />
                </div>
              </div>
              
              <ModernButton type="submit" variant="dark" className="w-full mt-8 py-4 text-lg !rounded-2xl">
                {role === 'client' ? 'دخول للمنصة' : 'التالي'} <ChevronLeft size={20}/>
              </ModernButton>
            </form>
          )}

          {step === 2 && (
            <form onSubmit={handleFinish} className="space-y-5 relative z-10 animate-in slide-in-from-right-8 duration-300">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="md:col-span-2">
                   <label className="block text-xs font-bold text-slate-500 mb-1 ml-2">اسم المحل أو مؤسستك</label>
                   <input name="shopName" value={formData.shopName} onChange={handleChange} type="text" placeholder="مثال: مؤسسة الأفق" className="w-full bg-slate-50 border-2 border-slate-100 rounded-xl py-3 px-4 outline-none focus:border-purple-500 font-bold" />
                </div>
                <div className="md:col-span-2">
                   <select name="regType" value={formData.regType} onChange={handleChange} className="w-full bg-slate-50 border-2 border-slate-100 rounded-xl py-3 px-4 outline-none focus:border-purple-500 font-bold">
                     {REG_TYPES.map(t=><option key={t}>{t}</option>)}
                   </select>
                </div>
                <div>
                   <select name="mainCategory" value={formData.mainCategory} onChange={handleChange} className="w-full bg-slate-50 border-2 border-slate-100 rounded-xl py-3 px-4 outline-none focus:border-purple-500 font-bold">
                     {MAIN_CATEGORIES.map(t=><option key={t}>{t}</option>)}
                   </select>
                </div>
                <div>
                   <input name="subSpecialty" required value={formData.subSpecialty} onChange={handleChange} type="text" placeholder="تخصصك الدقيق (بليط..)" className="w-full bg-slate-50 border-2 border-slate-100 rounded-xl py-3 px-4 outline-none focus:border-purple-500 font-bold" />
                </div>
                <div>
                   <select name="governorate" value={formData.governorate} onChange={handleChange} className="w-full bg-slate-50 border-2 border-slate-100 rounded-xl py-3 px-4 outline-none focus:border-purple-500 font-bold">
                     {GOVERNORATES.map(t=><option key={t}>{t}</option>)}
                   </select>
                </div>
                <div>
                   <input name="coveredAreas" required value={formData.coveredAreas} onChange={handleChange} type="text" placeholder="مناطق التغطية" className="w-full bg-slate-50 border-2 border-slate-100 rounded-xl py-3 px-4 outline-none focus:border-purple-500 font-bold" />
                </div>
                <div className="md:col-span-2">
                   <select name="experience" value={formData.experience} onChange={handleChange} className="w-full bg-slate-50 border-2 border-slate-100 rounded-xl py-3 px-4 outline-none focus:border-purple-500 font-bold">
                     {EXP_LEVELS.map(t=><option key={t}>{t}</option>)}
                   </select>
                </div>
              </div>
              
              <div className="flex gap-3 pt-4">
                <ModernButton type="button" variant="secondary" onClick={() => setStep(1)} className="px-4 !rounded-xl">
                  <ChevronRight size={20}/>
                </ModernButton>
                <ModernButton type="submit" variant="primary" className="flex-1 !rounded-xl">
                  حفظ ودخول للوحة التحكم
                </ModernButton>
              </div>
            </form>
          )}
        </div>
      </div>
    );
  };

  // ==========================================
  // لوحة تحكم المهني (Bento Dashboard)
  // ==========================================
  const ContractorDashboardView = () => {
    const currentContractorData = contractors.find(c => c.id === currentUser.id);
    const [activeTab, setActiveTab] = useState('overview'); 
    const [formData, setFormData] = useState(currentContractorData);
    const [biddingTender, setBiddingTender] = useState(null);
    const [bidForm, setBidForm] = useState({ price: '', time: '', note: '' });

    if (!currentContractorData) return <div className="p-10 text-center">جاري التحميل...</div>;

    const updateGlobalContractorState = (updatedData) => {
      const newContractors = contractors.map(c => c.id === updatedData.id ? updatedData : c);
      setContractors(newContractors);
      setCurrentUser(updatedData);
      setFormData(updatedData);
    };

    const toggleAvailability = () => updateGlobalContractorState({ ...currentContractorData, isAvailable: !currentContractorData.isAvailable });

    const handleSaveSettings = (e) => {
      e.preventDefault();
      updateGlobalContractorState(formData);
      alert('تم حفظ البيانات بنجاح في ملفك!');
    };

    const handleAddPortfolioImage = () => {
      const newId = Date.now();
      const newImg = `https://picsum.photos/400/300?random=${newId}`;
      const updatedPortfolio = [...formData.portfolio, { id: newId, title: `عمل ${formData.portfolio.length + 1}`, before: newImg, after: newImg }];
      setFormData({...formData, portfolio: updatedPortfolio});
    };

    const handleRemovePortfolioImage = (idToRemove) => {
      const updatedPortfolio = formData.portfolio.filter(item => item.id !== idToRemove);
      setFormData({...formData, portfolio: updatedPortfolio});
    };

    const handleOpenBid = (tender) => {
      setBiddingTender(tender);
      setBidForm({ price: '', time: '', note: '' });
    };

    const handleBidSubmit = (e) => {
      e.preventDefault();
      const updatedTenders = tenders.map(t => t.id === biddingTender.id ? { ...t, bidsCount: t.bidsCount + 1 } : t);
      setTenders(updatedTenders);
      alert('تم إرسال عرض السعر للزبون.');
      setBiddingTender(null); 
    };

    return (
      <div className="bg-slate-100 min-h-screen pb-20 md:pb-0 flex flex-col md:flex-row font-sans">
        
        {/* Sidebar (Bento Style Floating) */}
        <aside className="hidden md:flex flex-col w-72 bg-white m-4 rounded-[2.5rem] shadow-sm border border-slate-200 min-h-[calc(100vh-2rem)] fixed right-0 top-0 pt-8 z-50">
          <div className="px-6 mb-8 text-center relative">
             <div className="w-24 h-24 mx-auto bg-slate-900 rounded-[2rem] flex items-center justify-center text-4xl font-extrabold mb-4 text-white shadow-xl">
               {currentContractorData.fullName.charAt(0)}
             </div>
             <h2 className="font-bold text-lg text-slate-900 leading-tight mb-1">{currentContractorData.shopName}</h2>
             <span className="bg-purple-100 text-purple-700 px-3 py-1 rounded-lg text-xs font-bold">{currentContractorData.subSpecialty}</span>
          </div>
          
          <nav className="flex-1 space-y-2 px-4">
            {[
              { id: 'overview', icon: Briefcase, label: 'لوحة القيادة' },
              { id: 'requests', icon: MessageSquare, label: 'طلباتي' },
              { id: 'market', icon: Search, label: 'سوق المشاريع' },
              { id: 'settings', icon: Settings, label: 'إعدادات وصور' }
            ].map(item => (
              <button 
                key={item.id}
                onClick={() => setActiveTab(item.id)} 
                className={`w-full flex items-center gap-3 px-5 py-3.5 rounded-2xl transition-all duration-300 font-bold ${activeTab === item.id ? 'bg-slate-900 text-white shadow-md' : 'text-slate-500 hover:bg-slate-50 hover:text-slate-900'}`}
              >
                <item.icon size={20}/> {item.label}
              </button>
            ))}
          </nav>
          
          <div className="p-4 mt-auto">
             <button onClick={() => navigateTo('home')} className="w-full flex items-center justify-center gap-2 text-slate-500 hover:text-rose-500 hover:bg-rose-50 py-3 rounded-2xl font-bold transition-colors border border-slate-100"><LogOut size={18}/> خروج للمنصة</button>
          </div>
        </aside>

        {/* Dashboard Main Content */}
        <main className="flex-1 md:pr-[20rem] p-4 md:p-6">
          <div className="max-w-5xl mx-auto">
            
            {/* --- Overview (Bento Grid) --- */}
            {activeTab === 'overview' && (
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 animate-in fade-in duration-500">
                
                {/* Welcome Card (Spans 2 columns) */}
                <div className="md:col-span-2 bg-slate-900 rounded-[2.5rem] p-8 shadow-sm text-white relative overflow-hidden">
                  <div className="absolute -top-10 -left-10 w-40 h-40 bg-purple-500/30 rounded-full blur-2xl"></div>
                  <div className="relative z-10 flex flex-col md:flex-row justify-between items-start md:items-center gap-6 h-full">
                    <div>
                      <h2 className="text-3xl font-extrabold mb-2">أهلاً بك، {currentContractorData.fullName.split(' ')[0]}</h2>
                      <p className="text-slate-400">تابع أعمالك واحرص على تحديث صور مشاريعك لزيادة طلباتك.</p>
                    </div>
                    <div className="bg-white/10 backdrop-blur-md px-6 py-4 rounded-2xl border border-white/10">
                      <div className="text-sm font-bold text-slate-300 mb-2">الظهور في الدليل</div>
                      <button onClick={toggleAvailability} className={`relative inline-flex h-8 w-16 items-center rounded-full transition-colors duration-300 focus:outline-none ${currentContractorData.isAvailable ? 'bg-emerald-500' : 'bg-slate-500'}`}>
                        <span className={`inline-block h-6 w-6 transform rounded-full bg-white transition duration-300 shadow-sm ${currentContractorData.isAvailable ? 'translate-x-1 -translate-x-9' : 'translate-x-1'}`}/>
                      </button>
                    </div>
                  </div>
                </div>

                {/* Rating Card */}
                <div className="bg-gradient-to-br from-amber-400 to-amber-500 rounded-[2.5rem] p-8 text-white shadow-sm flex flex-col justify-center items-center text-center">
                  <Star size={36} fill="currentColor" className="mb-3 opacity-90"/>
                  <div className="text-5xl font-black mb-1">{currentContractorData.rating}</div>
                  <div className="font-bold opacity-90">تقييم الزبائن</div>
                </div>

                {/* Stats Grid Mini Bento */}
                <div className="md:col-span-3 grid grid-cols-2 md:grid-cols-4 gap-4">
                  {[
                    { label: "طلبات واصلة", value: currentContractorData.requests.length, color: "text-slate-900" },
                    { label: "أعمال منجزة", value: currentContractorData.stats.completedJobs, color: "text-emerald-600" },
                    { label: "زيارات لملفك", value: currentContractorData.stats.profileViews, color: "text-purple-600" }
                  ].map((stat, idx) => (
                    <div key={idx} className={`bg-white p-6 rounded-[2rem] shadow-sm border border-slate-100 flex flex-col justify-center ${idx===0 && 'md:col-span-2'}`}>
                      <div className={`text-4xl font-black ${stat.color} mb-1`}>{stat.value}</div>
                      <div className="text-sm font-bold text-slate-500">{stat.label}</div>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* --- Market (Bento Cards) --- */}
             {activeTab === 'market' && (
              <div className="space-y-6 animate-in fade-in duration-500">
                <div className="bg-white rounded-[2.5rem] p-8 border border-slate-100 shadow-sm">
                  <h2 className="text-2xl font-extrabold text-slate-900 mb-2">سوق المشاريع</h2>
                  <p className="text-slate-500 font-medium">قدم أسعارك على طلبات الزبائن لزيادة فرصة حصولك على عمل.</p>
                </div>
                
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  {tenders.slice(0, 10).map(tender => (
                    <div key={tender.id} className="bg-white rounded-[2rem] p-6 border border-slate-100 shadow-sm hover:shadow-lg transition-shadow flex flex-col">
                      <div className="flex items-center gap-2 mb-3">
                         <span className="bg-slate-50 text-slate-700 text-xs px-3 py-1.5 rounded-lg font-bold border border-slate-200">{tender.category}</span>
                         <span className="text-slate-400 text-xs flex items-center gap-1 font-bold"><MapPin size={14}/> {tender.location}</span>
                      </div>
                      <h3 className="font-extrabold text-slate-900 text-lg mb-2">{tender.title}</h3>
                      <p className="text-slate-500 text-sm mb-6 flex-grow">{tender.description}</p>
                      <ModernButton onClick={() => handleOpenBid(tender)} variant="dark" className="w-full text-sm !rounded-xl !py-2.5">
                        <Gavel size={16}/> قدم عرض سعر
                      </ModernButton>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {/* --- Settings & Portfolio (Bento Forms) --- */}
            {activeTab === 'settings' && (
              <form onSubmit={handleSaveSettings} className="space-y-6 pb-10 animate-in fade-in duration-500">
                
                {/* Portfolio Section */}
                <div className="bg-white rounded-[2.5rem] p-8 shadow-sm border border-slate-100">
                  <div className="flex justify-between items-center mb-6">
                    <h3 className="text-xl font-extrabold text-slate-900">صور أعمالك (قبل وبعد)</h3>
                    <ModernButton onClick={handleAddPortfolioImage} variant="secondary" className="!py-2 !px-4 text-sm !rounded-xl">
                      <Camera size={16}/> إضافة صورة
                    </ModernButton>
                  </div>
                  
                  {formData.portfolio.length === 0 ? (
                    <div className="bg-slate-50 rounded-3xl p-8 text-center border-2 border-dashed border-slate-200">
                      <ImageIcon size={32} className="mx-auto text-slate-400 mb-3"/>
                      <h4 className="font-bold text-slate-700 mb-1">لا توجد صور</h4>
                      <p className="text-sm text-slate-500">أضف صور أعمالك لجذب المزيد من الزبائن.</p>
                    </div>
                  ) : (
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      {formData.portfolio.map((item, index) => (
                        <div key={item.id} className="relative bg-slate-50 rounded-[1.5rem] p-3 border border-slate-100">
                          <button type="button" onClick={() => handleRemovePortfolioImage(item.id)} className="absolute top-4 right-4 bg-white text-rose-500 p-2 rounded-xl shadow-md z-10 hover:bg-rose-50 transition-colors">
                            <Trash2 size={16}/>
                          </button>
                          <div className="h-32 rounded-xl overflow-hidden relative mb-3">
                            <img src={item.after} alt="عمل" className="w-full h-full object-cover"/>
                          </div>
                          <input type="text" value={item.title} onChange={(e) => {
                             const newPort = [...formData.portfolio]; newPort[index].title = e.target.value; setFormData({...formData, portfolio: newPort});
                          }} className="w-full bg-white border border-slate-200 rounded-xl px-3 py-2 text-sm font-bold text-slate-700 outline-none focus:border-slate-900" placeholder="وصف الصورة" />
                        </div>
                      ))}
                    </div>
                  )}
                </div>

                {/* Profile Form Section */}
                <div className="bg-white rounded-[2.5rem] p-8 shadow-sm border border-slate-100">
                  <h3 className="text-xl font-extrabold text-slate-900 mb-6">معلوماتك المهنية</h3>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="md:col-span-2">
                      <label className="block text-xs font-bold text-slate-500 mb-2 ml-2">نبذة مختصرة (تظهر في الدليل)</label>
                      <textarea required rows="3" value={formData.about} onChange={e=>setFormData({...formData, about: e.target.value})} className="w-full bg-slate-50 border-2 border-slate-100 rounded-2xl py-3 px-4 outline-none focus:border-slate-900 font-bold text-slate-800"></textarea>
                    </div>
                    <div>
                      <label className="block text-xs font-bold text-slate-500 mb-2 ml-2">اسم المحل / الشهرة</label>
                      <input required type="text" value={formData.shopName} onChange={e=>setFormData({...formData, shopName: e.target.value})} className="w-full bg-slate-50 border-2 border-slate-100 rounded-2xl py-3 px-4 outline-none focus:border-slate-900 font-bold text-slate-800" />
                    </div>
                    <div>
                      <label className="block text-xs font-bold text-slate-500 mb-2 ml-2">التخصص الدقيق</label>
                      <input required type="text" value={formData.subSpecialty} onChange={e=>setFormData({...formData, subSpecialty: e.target.value})} className="w-full bg-slate-50 border-2 border-slate-100 rounded-2xl py-3 px-4 outline-none focus:border-slate-900 font-bold text-slate-800" />
                    </div>
                  </div>
                  <ModernButton type="submit" variant="dark" className="w-full mt-6">
                    حفظ ونشر التعديلات
                  </ModernButton>
                </div>
              </form>
            )}

            {/* --- Modal (Bento Style) --- */}
            {biddingTender && (
              <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-slate-900/40 backdrop-blur-md animate-in fade-in duration-200">
                <div className="bg-white rounded-[2.5rem] shadow-2xl w-full max-w-md overflow-hidden relative animate-in zoom-in-95 duration-300">
                  <div className="p-8 pb-6">
                    <h3 className="font-black text-slate-900 text-2xl mb-1">تقديم عرض سعر</h3>
                    <p className="text-slate-500 text-sm font-medium">على مشروع: {biddingTender.title}</p>
                  </div>
                  <div className="px-8 pb-8">
                    <form onSubmit={handleBidSubmit} className="space-y-4">
                      <div className="grid grid-cols-2 gap-4">
                        <div>
                          <label className="block text-xs font-bold text-slate-500 mb-2 ml-2">السعر (دينار)</label>
                          <input required type="number" value={bidForm.price} onChange={e=>setBidForm({...bidForm, price: e.target.value})} className="w-full bg-slate-50 border-2 border-slate-100 rounded-2xl py-3 px-4 outline-none focus:border-slate-900 font-bold" placeholder="0" />
                        </div>
                        <div>
                          <label className="block text-xs font-bold text-slate-500 mb-2 ml-2">المدة (أيام)</label>
                          <input required type="number" value={bidForm.time} onChange={e=>setBidForm({...bidForm, time: e.target.value})} className="w-full bg-slate-50 border-2 border-slate-100 rounded-2xl py-3 px-4 outline-none focus:border-slate-900 font-bold" placeholder="0" />
                        </div>
                      </div>
                      <div>
                        <label className="block text-xs font-bold text-slate-500 mb-2 ml-2">ملاحظات للزبون</label>
                        <textarea required rows="3" value={bidForm.note} onChange={e=>setBidForm({...bidForm, note: e.target.value})} className="w-full bg-slate-50 border-2 border-slate-100 rounded-2xl py-3 px-4 outline-none focus:border-slate-900 font-bold" placeholder="اشرح عرضك..."></textarea>
                      </div>
                      <div className="flex gap-3 pt-4">
                        <ModernButton type="button" variant="secondary" onClick={() => setBiddingTender(null)} className="flex-1 !rounded-2xl">إلغاء</ModernButton>
                        <ModernButton type="submit" variant="dark" className="flex-1 !rounded-2xl">تأكيد <Send size={18}/></ModernButton>
                      </div>
                    </form>
                  </div>
                </div>
              </div>
            )}
            
          </div>
        </main>

        {/* Mobile Bottom Nav */}
        <div className="md:hidden fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-xl border-t border-slate-100 flex justify-between px-2 py-2 pb-safe z-50">
          <button onClick={() => setActiveTab('overview')} className={`flex flex-col items-center p-2 flex-1 rounded-2xl transition-all ${activeTab === 'overview' ? 'text-slate-900 bg-slate-100' : 'text-slate-400'}`}><Briefcase size={22} /></button>
          <button onClick={() => setActiveTab('market')} className={`flex flex-col items-center p-2 flex-1 rounded-2xl transition-all ${activeTab === 'market' ? 'text-slate-900 bg-slate-100' : 'text-slate-400'}`}><Search size={22} /></button>
          <button onClick={() => setActiveTab('settings')} className={`flex flex-col items-center p-2 flex-1 rounded-2xl transition-all ${activeTab === 'settings' ? 'text-slate-900 bg-slate-100' : 'text-slate-400'}`}><Settings size={22} /></button>
        </div>
      </div>
    );
  };

  return (
    <div dir="rtl" className="font-sans text-slate-800 bg-slate-100/50 min-h-screen flex flex-col selection:bg-purple-200">
      {currentView !== 'dashboard' && <GlobalHeader />}
      <div className="flex-grow relative">
        {currentView === 'home' && <MarketplaceHomeView />}
        {currentView === 'directory' && <DirectoryView />}
        {currentView === 'auth' && <AuthView />}
        {currentView === 'dashboard' && <ContractorDashboardView />}
        {currentView === 'post_job' && (
           <div className="py-32 text-center animate-in fade-in zoom-in"><h2 className="text-3xl font-extrabold mb-4 text-slate-900">نموذج طرح المشاريع للزبائن</h2><button onClick={()=>navigateTo('home')} className="text-purple-600 font-bold hover:underline">عودة للرئيسية</button></div>
        )}
      </div>
    </div>
  );
}