import React, { useState, useEffect, useRef } from 'react';
import { initializeApp } from 'firebase/app';
import { 
  getAuth, 
  signInWithEmailAndPassword, 
  createUserWithEmailAndPassword, 
  signOut, 
  onAuthStateChanged,
  signInWithCustomToken,
  signInAnonymously
} from 'firebase/auth';
import { 
  getFirestore, 
  collection, 
  addDoc, 
  query, 
  onSnapshot, 
  orderBy, 
  serverTimestamp,
  doc,
  deleteDoc,
  updateDoc,
  where,
  getDocs,
  limit,
  setDoc,
  writeBatch
} from 'firebase/firestore';
import { 
  Building2, MapPin, Briefcase, User, Phone, Mail, Menu, X, PlusCircle, 
  Search, Hammer, HardHat, CheckCircle, LogOut, ChevronRight, Globe, 
  FileText, CreditCard, Plane, Download, Bitcoin, Wallet, Landmark, 
  Heart, Target, Users, ShieldCheck, QrCode, Calendar, Lock, Filter,
  MessageCircle, Settings, Send, Headphones, Bell, Info, FileQuestion,
  GraduationCap, Award, Database, RefreshCw, EyeOff
} from 'lucide-react';

// --- Firebase Configuration & Initialization ---
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'default-app-id';

// --- Helper Components ---

const AdPlaceholder = ({ format = "horizontal" }) => {
  return (
    <div className={`bg-gray-100 border-2 border-dashed border-gray-300 flex flex-col items-center justify-center text-gray-400 text-sm my-6 p-4 rounded ${format === 'vertical' ? 'h-[600px] w-full' : 'h-[120px] w-full'}`}>
      <span className="font-bold mb-1">Advertisement Space</span>
      <span className="text-xs text-center">Google AdSense / Sponsorship</span>
    </div>
  );
};

const NewsTicker = ({ text }) => {
  if (!text) return null;
  return (
    <div className="bg-amber-600 text-white py-2 overflow-hidden relative z-50 shadow-md">
      <div className="whitespace-nowrap animate-marquee inline-block font-medium px-4">
        <Bell size={16} className="inline mr-2 mb-1" /> {text}
      </div>
      <style>{`
        @keyframes marquee {
          0% { transform: translateX(100vw); }
          100% { transform: translateX(-100%); }
        }
        .animate-marquee {
          animation: marquee 20s linear infinite;
        }
      `}</style>
    </div>
  );
};

const ChatRoom = ({ roomId, user, title, type = 'public' }) => {
  const [messages, setMessages] = useState([]);
  const [newMessage, setNewMessage] = useState('');
  const dummy = useRef();

  useEffect(() => {
    if (!user) return; // Guard against unauthenticated queries

    const q = query(
      collection(db, 'artifacts', appId, 'public', 'data', `chat_${roomId}`), 
      orderBy('createdAt', 'asc')
    );
    const unsubscribe = onSnapshot(q, (snapshot) => {
      setMessages(snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })));
      setTimeout(() => dummy.current?.scrollIntoView({ behavior: 'smooth' }), 100);
    });
    return () => unsubscribe();
  }, [roomId, user]);

  const sendMessage = async (e) => {
    e.preventDefault();
    if (!newMessage.trim() || !user) return;

    const msgData = {
      text: newMessage,
      createdAt: serverTimestamp(),
      uid: user.uid,
      displayName: user.email.split('@')[0],
      isAdmin: user.email === 'admin@alwatan.com'
    };

    await addDoc(collection(db, 'artifacts', appId, 'public', 'data', `chat_${roomId}`), msgData);
    
    if (type === 'support') {
       const threadId = roomId.replace('support_', '');
       await setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'support_threads', threadId), {
         lastMessage: newMessage,
         updatedAt: serverTimestamp(),
         userEmail: user.email,
         userId: user.uid,
         hasUnread: true
       }, { merge: true });
    }

    setNewMessage('');
  };

  return (
    <div className="flex flex-col h-[500px] bg-gray-50 rounded-lg border shadow-sm">
      <div className="bg-slate-800 text-white p-3 rounded-t-lg flex justify-between items-center">
        <span className="font-bold flex items-center">
          {type === 'support' ? <Headphones size={18} className="mr-2"/> : <Users size={18} className="mr-2"/>}
          {title}
        </span>
      </div>
      
      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {messages.map(msg => (
          <div key={msg.id} className={`flex ${msg.uid === user?.uid ? 'justify-end' : 'justify-start'}`}>
            <div className={`max-w-[70%] rounded-lg p-3 ${
              msg.uid === user?.uid 
                ? 'bg-amber-600 text-white rounded-br-none' 
                : msg.isAdmin 
                  ? 'bg-red-600 text-white rounded-bl-none' 
                  : 'bg-white border text-gray-800 rounded-bl-none'
            }`}>
              <p className="text-xs opacity-75 font-bold mb-1">
                {msg.isAdmin ? 'Support Team' : msg.displayName}
              </p>
              <p className="text-sm">{msg.text}</p>
            </div>
          </div>
        ))}
        <div ref={dummy}></div>
      </div>

      <form onSubmit={sendMessage} className="p-3 bg-white border-t rounded-b-lg flex gap-2">
        <input
          value={newMessage}
          onChange={(e) => setNewMessage(e.target.value)}
          placeholder={user ? "Type a message..." : "Login to chat"}
          disabled={!user}
          className="flex-1 border rounded px-3 py-2 text-sm focus:outline-none focus:border-amber-500"
        />
        <button type="submit" disabled={!user} className="bg-slate-900 text-white p-2 rounded hover:bg-slate-800 disabled:opacity-50">
          <Send size={18} />
        </button>
      </form>
    </div>
  );
};

// --- Main Components ---

// 1. Navigation Bar
const Navbar = ({ user, setView, view, handleLogout, settings }) => {
  const [isOpen, setIsOpen] = useState(false);
  const isUserLoggedIn = user && !user.isAnonymous;
  const displayName = user?.email ? user.email.split('@')[0] : 'Guest';
  const isAdmin = user?.email === 'admin@alwatan.com';

  return (
    <>
      <NewsTicker text={settings?.newsTicker || "Welcome to Al-Watan International Group - Your Gateway to Global Opportunities."} />
      
      <nav className="bg-slate-900 text-white shadow-lg sticky top-0 z-50 border-b border-amber-600">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-20">
            <div className="flex items-center cursor-pointer" onClick={() => setView('home')}>
              <Globe className="h-10 w-10 text-amber-500 mr-2" />
              <div>
                <span className="font-bold text-xl tracking-wider block">AL-WATAN</span>
                <span className="text-xs text-amber-500 tracking-widest uppercase">International Group</span>
              </div>
            </div>
            
            <div className="hidden md:block">
              <div className="ml-10 flex items-baseline space-x-4">
                <button onClick={() => setView('home')} className={`px-3 py-2 rounded-md text-sm font-medium hover:text-amber-500 transition ${view === 'home' ? 'text-amber-500' : 'text-gray-300'}`}>Home</button>
                <button onClick={() => setView('jobs')} className={`px-3 py-2 rounded-md text-sm font-medium hover:text-amber-500 transition ${view === 'jobs' ? 'text-amber-500' : 'text-gray-300'}`}>Browse Jobs</button>
                <button onClick={() => setView('services')} className={`px-3 py-2 rounded-md text-sm font-medium hover:text-amber-500 transition ${view === 'services' ? 'text-amber-500' : 'text-gray-300'}`}>Offer Letter</button>
                <button onClick={() => setView('institute')} className={`px-3 py-2 rounded-md text-sm font-medium hover:text-amber-500 transition ${view === 'institute' ? 'text-amber-500' : 'text-gray-300'}`}>Institute</button>
                <button onClick={() => setView('verify')} className={`px-3 py-2 rounded-md text-sm font-medium hover:text-amber-500 transition ${view === 'verify' ? 'text-amber-500' : 'text-gray-300'}`}>Verify</button>
                <button onClick={() => setView('support')} className={`px-3 py-2 rounded-md text-sm font-medium hover:text-amber-500 transition ${view === 'support' ? 'text-amber-500' : 'text-gray-300'}`}>Support</button>
                
                {isAdmin && (
                  <button onClick={() => setView('admin')} className="bg-red-600 text-white px-3 py-2 rounded-md text-sm font-bold animate-pulse">
                    Admin
                  </button>
                )}

                {isUserLoggedIn ? (
                  <div className="flex items-center gap-4 ml-4">
                    <span className="text-xs text-gray-400">User: {displayName}</span>
                    <button onClick={handleLogout} className="bg-slate-800 hover:bg-slate-700 p-2 rounded-full transition">
                      <LogOut size={18} />
                    </button>
                  </div>
                ) : (
                  <button onClick={() => setView('login')} className="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-md text-sm font-medium transition ml-4">
                    Login
                  </button>
                )}
              </div>
            </div>
            
            <div className="-mr-2 flex md:hidden">
              <button onClick={() => setIsOpen(!isOpen)} className="bg-slate-800 p-2 rounded-md text-gray-400 hover:text-white focus:outline-none">
                {isOpen ? <X size={24} /> : <Menu size={24} />}
              </button>
            </div>
          </div>
        </div>

        {isOpen && (
          <div className="md:hidden bg-slate-800 pb-4">
            <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
              <button onClick={() => {setView('home'); setIsOpen(false)}} className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-white hover:bg-slate-700">Home</button>
              <button onClick={() => {setView('jobs'); setIsOpen(false)}} className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-white hover:bg-slate-700">Jobs</button>
              <button onClick={() => {setView('institute'); setIsOpen(false)}} className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-white hover:bg-slate-700">Institute</button>
              <button onClick={() => {setView('verify'); setIsOpen(false)}} className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-white hover:bg-slate-700">Verify</button>
              {isUserLoggedIn ? (
                <button onClick={handleLogout} className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-red-400 hover:bg-slate-700">Logout</button>
              ) : (
                <button onClick={() => {setView('login'); setIsOpen(false)}} className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-amber-500 hover:bg-slate-700">Login</button>
              )}
            </div>
          </div>
        )}
      </nav>
    </>
  );
};

// 2. Home Page
const Home = ({ setView, settings }) => {
  const defaultBanner = 'https://images.unsplash.com/photo-1521737604893-d14cc237f11d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80';
  
  return (
  <div className="animate-fade-in">
    {/* Hero Section */}
    <div className="relative bg-slate-900 h-[500px] md:h-[600px] flex items-center justify-center overflow-hidden">
      <div 
        className="absolute inset-0 opacity-40 bg-cover bg-center transition-all duration-1000"
        style={{ backgroundImage: `url('${settings?.bannerUrl || defaultBanner}')` }}
      ></div>
      <div className="relative z-10 text-center px-4 max-w-5xl">
        <h1 className="text-4xl md:text-7xl font-extrabold text-white mb-6 leading-tight drop-shadow-lg">
          Your Gateway to a <span className="text-amber-500">Brighter Future</span>
        </h1>
        <p className="text-lg md:text-2xl text-gray-200 mb-10 max-w-3xl mx-auto font-light drop-shadow-md">
          We process dreams, not just visas. Join thousands who found success with Al-Watan.
        </p>
        <div className="flex flex-col sm:flex-row justify-center gap-6">
          <button onClick={() => setView('jobs')} className="bg-amber-600 hover:bg-amber-700 text-white px-8 py-4 rounded-lg font-bold transition transform hover:scale-105 shadow-lg flex items-center justify-center text-lg">
            <Search className="mr-2" size={24}/> Find a Job
          </button>
          <button onClick={() => setView('institute')} className="bg-white hover:bg-gray-100 text-slate-900 px-8 py-4 rounded-lg font-bold transition transform hover:scale-105 shadow-lg flex items-center justify-center text-lg">
            <GraduationCap className="mr-2" size={24}/> Get Certified
          </button>
        </div>
      </div>
    </div>
    <div className="max-w-7xl mx-auto px-4"><AdPlaceholder /></div>
    <div className="bg-white py-16 px-4">
      <div className="max-w-4xl mx-auto text-center">
        <Target className="h-12 w-12 text-amber-500 mx-auto mb-4" />
        <h2 className="text-3xl font-bold text-slate-900 mb-4">Our Mission</h2>
        <p className="text-xl text-gray-600">Empowering humanity by eradicating unemployment and building a world of equal opportunities for everyone, everywhere.</p>
        <button onClick={() => setView('mission')} className="mt-6 text-amber-600 font-bold hover:underline">Read Full Mission</button>
      </div>
    </div>
  </div>
)};

// 3. Technical Institute
const TechnicalInstitute = ({ user, setView }) => {
  const [formData, setFormData] = useState({ fullName: '', trade: '', experience: '', mobile: '', dob: '' });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submittedId, setSubmittedId] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!user || user.isAnonymous) return alert("Please Sign In first.");
    if (!formData.dob) return alert("Date of Birth is required for verification.");
    
    setIsSubmitting(true);
    try {
        const docRef = await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'institute_applications'), {
            ...formData,
            userId: user.uid,
            email: user.email,
            status: 'Pending',
            createdAt: serverTimestamp()
        });
        setSubmittedId(docRef.id);
    } catch (error) {
        alert("Error submitting application.");
    }
    setIsSubmitting(false);
  };

  if (submittedId) return <div className="p-10 text-center min-h-screen flex flex-col justify-center items-center"><h2 className="text-2xl font-bold text-green-600">Application Submitted!</h2><p className="text-gray-600 mt-2">Save your Reference ID for verification:</p><p className="font-mono bg-amber-100 text-amber-900 inline-block p-3 rounded mt-2 text-xl font-bold select-all">{submittedId}</p><button onClick={()=>setView('home')} className="mt-6 bg-slate-900 text-white px-6 py-2 rounded">Back to Home</button></div>;

  return (
    <div className="min-h-screen bg-gray-50 animate-fade-in">
      <div className="bg-slate-900 text-white py-16 px-4 text-center">
        <GraduationCap size={64} className="mx-auto text-amber-500 mb-4"/>
        <h1 className="text-4xl font-bold mb-2">Al-Watan Technical Institute</h1>
        <p className="text-xl text-gray-300">Convert your Experience into a Recognized Degree.</p>
      </div>
      <div className="max-w-6xl mx-auto py-12 px-4 grid md:grid-cols-2 gap-12">
        <div className="space-y-6">
            <h2 className="text-3xl font-bold text-slate-800 border-l-4 border-amber-600 pl-4">RPL Program</h2>
            <p className="text-gray-600 text-lg leading-relaxed">
                Do you have the skills but lack the certificate?
                <br/>
                Through our <strong>Recognition of Prior Learning (RPL)</strong> program, professionals like Electricians, Plumbers, Mechanics, and IT specialists can get certified based on their practical experience.
            </p>
            <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
                <h3 className="font-bold text-lg mb-4">Benefits</h3>
                <ul className="space-y-3 text-gray-700">
                    <li className="flex items-center"><CheckCircle size={20} className="text-green-600 mr-3"/> Valid for Visas</li>
                    <li className="flex items-center"><CheckCircle size={20} className="text-green-600 mr-3"/> Higher Salary Potential</li>
                    <li className="flex items-center"><CheckCircle size={20} className="text-green-600 mr-3"/> Global Recognition</li>
                </ul>
            </div>
        </div>
        <div className="bg-white p-8 rounded-xl shadow-lg border-t-4 border-amber-500">
            <h3 className="text-2xl font-bold mb-6 text-slate-800">Apply for Certification</h3>
            <form onSubmit={handleSubmit} className="space-y-5">
                <input className="w-full border p-3 rounded" value={formData.fullName} onChange={e => setFormData({...formData, fullName: e.target.value})} required placeholder="Full Name (As per ID)" />
                <input className="w-full border p-3 rounded" value={formData.trade} onChange={e => setFormData({...formData, trade: e.target.value})} required placeholder="Trade (e.g. Electrician)" />
                <input type="number" className="w-full border p-3 rounded" value={formData.experience} onChange={e => setFormData({...formData, experience: e.target.value})} required placeholder="Years of Experience" />
                <input type="date" className="w-full border p-3 rounded" value={formData.dob} onChange={e => setFormData({...formData, dob: e.target.value})} required title="Date of Birth" />
                <input className="w-full border p-3 rounded" value={formData.mobile} onChange={e => setFormData({...formData, mobile: e.target.value})} required placeholder="Mobile Number" />
                <button type="submit" disabled={isSubmitting} className="w-full bg-slate-900 text-white py-3 rounded font-bold hover:bg-slate-800 transition">
                    {isSubmitting ? 'Submitting...' : 'Submit Assessment Request'}
                </button>
            </form>
        </div>
      </div>
    </div>
  );
};

// 4. Admin Dashboard (Updated with Admin Setup and Massive Demo)
const AdminDashboard = ({ user, settings }) => {
  const [activeTab, setActiveTab] = useState('apps');
  const [apps, setApps] = useState([]);
  const [instApps, setInstApps] = useState([]);
  const [newBanner, setNewBanner] = useState(settings?.bannerUrl || '');
  const [newTicker, setNewTicker] = useState(settings?.newsTicker || '');
  const [isGenerating, setIsGenerating] = useState(false);

  useEffect(() => {
    if (!user || user?.email !== 'admin@alwatan.com') return;
    
    const q1 = query(collection(db, 'artifacts', appId, 'public', 'data', 'applications'), orderBy('createdAt', 'desc'));
    const unsub1 = onSnapshot(q1, (s) => setApps(s.docs.map(d => ({id: d.id, ...d.data()}))));
    
    const q2 = query(collection(db, 'artifacts', appId, 'public', 'data', 'institute_applications'), orderBy('createdAt', 'desc'));
    const unsub2 = onSnapshot(q2, (s) => setInstApps(s.docs.map(d => ({id: d.id, ...d.data()}))));

    return () => { unsub1(); unsub2(); }
  }, [user]);

  const saveSettings = async () => {
      await setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'settings', 'config'), { bannerUrl: newBanner, newsTicker: newTicker, updatedAt: serverTimestamp() });
      alert("Settings Saved!");
  };

  const updateStatus = async (collectionName, id, status) => {
      await updateDoc(doc(db, 'artifacts', appId, 'public', 'data', collectionName, id), { status, approvedAt: status === 'Approved' ? serverTimestamp() : null });
  };

  const createAdminAccount = async () => {
      try {
          await createUserWithEmailAndPassword(auth, 'admin@alwatan.com', '125412');
          alert("Admin account created! Please login.");
      } catch (e) {
          alert("Could not create account (Maybe already exists): " + e.message);
      }
  };

  const generateMassiveDemo = async () => {
      if (!window.confirm("Generate Global Jobs? This will add realistic jobs visible to everyone.")) return;
      setIsGenerating(true);
      try {
          const batch = writeBatch(db);
          
          const jobTitles = ["Civil Engineer", "Software Engineer", "Nurse", "Accountant", "Project Manager", "Electrician", "Driver", "Chef", "Teacher", "Sales Manager", "Marketing Specialist", "Mechanical Engineer", "Safety Officer", "Receptionist", "Data Analyst"];
          const countries = ["USA", "UK", "Canada", "Australia", "Germany", "Saudi Arabia", "UAE", "Qatar", "Kuwait", "Oman", "Bahrain", "Poland", "France", "Italy", "Japan", "Singapore", "Malaysia"];
          const cities = {
              "USA": ["New York", "Texas", "California"],
              "UK": ["London", "Manchester", "Birmingham"],
              "Canada": ["Toronto", "Vancouver", "Montreal"],
              "Saudi Arabia": ["Riyadh", "Jeddah", "Dammam"],
              "UAE": ["Dubai", "Abu Dhabi", "Sharjah"],
          };
          const categories = ["Construction", "IT", "Medical", "Finance", "Management", "Skilled Trades", "Transportation", "Hospitality", "Education", "Sales", "Marketing", "Engineering", "Safety", "Admin"];

          // Generate 50 realistic jobs
          for(let i=0; i<50; i++) {
              const ref = doc(collection(db, 'artifacts', appId, 'public', 'data', 'jobs'));
              const country = countries[Math.floor(Math.random() * countries.length)];
              const cityList = cities[country] || ["Capital City", "Major City"];
              const location = cityList[Math.floor(Math.random() * cityList.length)];
              const title = jobTitles[Math.floor(Math.random() * jobTitles.length)];
              const category = categories[Math.floor(Math.random() * categories.length)];
              
              batch.set(ref, {
                  title: title,
                  country: country,
                  location: location,
                  category: category,
                  gender: Math.random() > 0.5 ? 'Any' : (Math.random() > 0.5 ? 'Male' : 'Female'),
                  type: 'Full-time',
                  description: `We are hiring a skilled ${title} for our branch in ${location}, ${country}. Competitive salary and visa sponsorship available.`,
                  contactEmail: `hr@${country.toLowerCase().replace(/\s/g,'')}-jobs.com`,
                  isHidden: false, // PUBLICLY VISIBLE
                  createdAt: serverTimestamp()
              });
          }
          await batch.commit();
          alert("Success! 50 Global Jobs added to Public Database.");
      } catch (e) {
          alert("Error: " + e.message);
      }
      setIsGenerating(false);
  };

  // Allow non-admins to see "Create Admin" button if they are anonymous, for setup purposes
  if (user?.email !== 'admin@alwatan.com') {
      return (
          <div className="min-h-screen flex items-center justify-center bg-gray-100 flex-col">
              <div className="p-10 text-center bg-white rounded shadow">
                  <h2 className="text-xl font-bold text-red-600 mb-4">Access Denied</h2>
                  <p className="mb-6">You must be logged in as <b>admin@alwatan.com</b></p>
                  <button onClick={createAdminAccount} className="bg-slate-900 text-white px-4 py-2 rounded hover:bg-slate-800">
                      Setup Admin Account (125412)
                  </button>
              </div>
          </div>
      );
  }

  return (
    <div className="min-h-screen bg-gray-100 p-8">
        <h1 className="text-2xl font-bold mb-4">Admin Dashboard</h1>
        <div className="flex gap-2 mb-4 flex-wrap">
            <button onClick={()=>setActiveTab('apps')} className={`px-4 py-2 rounded ${activeTab==='apps'?'bg-slate-900 text-white':'bg-white'}`}>Job Apps</button>
            <button onClick={()=>setActiveTab('institute')} className={`px-4 py-2 rounded ${activeTab==='institute'?'bg-slate-900 text-white':'bg-white'}`}>Institute Apps</button>
            <button onClick={()=>setActiveTab('settings')} className={`px-4 py-2 rounded ${activeTab==='settings'?'bg-slate-900 text-white':'bg-white'}`}>Settings</button>
            <button onClick={generateMassiveDemo} disabled={isGenerating} className="px-4 py-2 rounded bg-green-600 text-white flex items-center">
                {isGenerating ? <RefreshCw className="animate-spin mr-2"/> : <Globe size={16} className="mr-2"/>} 
                Generate Global Jobs (Public)
            </button>
        </div>

        {activeTab === 'settings' && (
            <div className="bg-white p-4 rounded max-w-md space-y-4">
                <h3 className="font-bold">Website Configuration</h3>
                <input value={newBanner} onChange={e=>setNewBanner(e.target.value)} placeholder="Banner URL" className="w-full border p-2"/>
                <input value={newTicker} onChange={e=>setNewTicker(e.target.value)} placeholder="Ticker Text" className="w-full border p-2"/>
                <button onClick={saveSettings} className="bg-green-600 text-white px-4 py-2 rounded">Save Changes</button>
            </div>
        )}

        {activeTab === 'apps' && (
            <div className="bg-white rounded p-4">
                <h3 className="font-bold mb-4">Job Offer Applications</h3>
                {apps.map(a=><div key={a.id} className="border-b p-2 flex justify-between items-center"><div><div className="font-bold">{a.fullName}</div><div className="text-xs">{a.email} | {a.country}</div></div><div><span className={`text-xs p-1 rounded mr-2 ${a.status==='Approved'?'bg-green-200':'bg-yellow-200'}`}>{a.status}</span>{a.status==='Pending'&&<button onClick={()=>updateStatus('applications', a.id, 'Approved')} className="bg-green-500 text-white px-2 py-1 rounded text-xs">Approve</button>}</div></div>)}
            </div>
        )}

        {activeTab === 'institute' && (
            <div className="bg-white rounded p-4">
                <h3 className="font-bold mb-4">Institute Certification Requests</h3>
                {instApps.map(a=><div key={a.id} className="border-b p-2 flex justify-between items-center"><div><div className="font-bold">{a.fullName}</div><div className="text-xs">{a.trade} | Exp: {a.experience} yrs</div></div><div><span className={`text-xs p-1 rounded mr-2 ${a.status==='Approved'?'bg-green-200':'bg-yellow-200'}`}>{a.status}</span>{a.status==='Pending'&&<button onClick={()=>updateStatus('institute_applications', a.id, 'Approved')} className="bg-green-500 text-white px-2 py-1 rounded text-xs">Approve</button>}</div></div>)}
                {instApps.length === 0 && <p className="text-gray-500 text-center">No institute applications.</p>}
            </div>
        )}
    </div>
  );
};

// 5. Verification (Updated to support Certificates)
const Verification = () => {
  const [step, setStep] = useState('input');
  const [formData, setFormData] = useState({ id: '', email: '', dob: '' });
  const [docData, setDocData] = useState(null);
  const [docType, setDocType] = useState(null);
  const [error, setError] = useState('');

  const handleVerify = async (e) => {
      e.preventDefault();
      setStep('loading'); setError('');
      
      try {
          // Check Offer Letters
          let q = query(collection(db, 'artifacts', appId, 'public', 'data', 'applications'), where('__name__', '==', formData.id));
          let snap = await getDocs(q);
          let found = null;
          let type = 'offer';

          snap.forEach(d => { if(d.id === formData.id) found = d.data(); });

          // If not found, check Institute Applications
          if (!found) {
              q = query(collection(db, 'artifacts', appId, 'public', 'data', 'institute_applications'), where('__name__', '==', formData.id));
              snap = await getDocs(q);
              snap.forEach(d => { if(d.id === formData.id) found = d.data(); });
              if (found) type = 'certificate';
          }

          if (!found) { setError("ID not found."); setStep('input'); return; }
          if (found.email.toLowerCase() !== formData.email.toLowerCase() || found.dob !== formData.dob) { setError("Security Check Failed."); setStep('input'); return; }
          if (found.status !== 'Approved') { setError(`Document status is ${found.status}.`); setStep('input'); return; }

          setDocData({ id: formData.id, ...found });
          setDocType(type);
          setStep('result');

      } catch (err) { setError("System Error."); setStep('input'); }
  };

  if (step === 'result' && docData) {
      if (docType === 'certificate') {
          return (
            <div className="min-h-screen bg-gray-200 py-10 px-4 print:bg-white print:p-0 flex justify-center">
                <div className="bg-white shadow-2xl p-10 w-[210mm] min-h-[297mm] relative print:shadow-none border-[20px] border-double border-slate-900">
                    <div className="text-center border-b-2 border-slate-900 pb-6 mb-8">
                        <GraduationCap size={64} className="mx-auto text-amber-600 mb-4"/>
                        <h1 className="text-4xl font-serif font-bold text-slate-900 uppercase">Certificate of Competency</h1>
                        <p className="text-lg text-gray-600 mt-2">Al-Watan Technical Institute</p>
                    </div>
                    <div className="text-center space-y-6 my-16">
                        <p className="text-xl text-gray-600 italic">This is to certify that</p>
                        <h2 className="text-4xl font-bold text-slate-900 border-b-2 border-amber-500 inline-block pb-2 px-8">{docData.fullName}</h2>
                        <p className="text-xl text-gray-600 italic mt-6">Has successfully demonstrated professional competence in the trade of</p>
                        <h3 className="text-3xl font-bold text-slate-900 uppercase">{docData.trade}</h3>
                        <p className="text-gray-600 mt-4">Based on Recognition of Prior Learning (RPL) Assessment</p>
                    </div>
                    <div className="flex justify-between items-end mt-32 px-8">
                        <div className="text-center">
                            <img src={`https://api.qrserver.com/v1/create-qr-code/?size=120x120&data=${encodeURIComponent(docData.id)}`} alt="QR" className="border-2 border-black p-1 mb-2"/>
                            <p className="text-xs font-mono">{docData.id}</p>
                            <p className="text-xs text-gray-500">Scan to Verify</p>
                        </div>
                        <div className="text-center">
                            <div className="w-32 h-32 rounded-full border-4 border-amber-600 flex items-center justify-center mb-2 mx-auto opacity-80">
                                <span className="font-bold text-amber-800 text-xs text-center">AWTI<br/>OFFICIAL<br/>SEAL</span>
                            </div>
                            <div className="border-t-2 border-black w-48 mx-auto mt-2"></div>
                            <p className="font-bold">Director of Certification</p>
                        </div>
                    </div>
                    <div className="text-center mt-12 text-xs text-gray-400">This certificate is electronically generated and can be verified online.</div>
                </div>
            </div>
          );
      }
      return (
          <div className="min-h-screen bg-gray-200 py-10 px-4 print:bg-white print:p-0 flex justify-center">
              <div className="bg-white shadow-2xl p-12 w-[210mm] min-h-[297mm] relative print:shadow-none">
                  <div className="flex justify-between items-start border-b-4 border-amber-600 pb-6 mb-8">
                      <div><h1 className="text-3xl font-bold text-slate-900 uppercase tracking-widest">Al-Watan</h1><p className="text-sm text-amber-600 font-bold uppercase tracking-widest">International Group</p></div>
                      <div className="text-right"><p className="text-sm text-gray-600">Global Head Office</p><p className="text-xs text-gray-500">London, United Kingdom</p></div>
                  </div>
                  <div className="mb-8">
                      <p className="mb-4"><strong>Date:</strong> {new Date().toLocaleDateString()} | <strong>Ref:</strong> {docData.id.substring(0,8).toUpperCase()}</p>
                      <p className="mb-4"><strong>To:</strong> {docData.fullName}</p>
                      <p className="mb-4"><strong>Subject: EMPLOYMENT OFFER LETTER</strong></p>
                      <div className="text-justify space-y-4 text-slate-800 leading-relaxed">
                          <p>Dear {docData.fullName},</p>
                          <p>We are pleased to confirm that <strong>Al-Watan International Group</strong> has approved your application for employment in <strong>{docData.country}</strong>.</p>
                      </div>
                  </div>
                  <div className="mt-16 border-t pt-8 flex items-center justify-between">
                      <div><img src={`https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(docData.id)}`} alt="QR" className="w-32 h-32 border p-1"/><p className="text-xs mt-1 text-center font-mono">{docData.id}</p></div>
                      <div className="text-right"><p className="font-bold text-slate-900">Hammad Bin Yousaf</p><p className="text-sm text-gray-600">Chairman & CEO</p></div>
                  </div>
              </div>
          </div>
      );
  }

  return (
    <div className="min-h-screen bg-slate-100 flex items-center justify-center p-4">
        <div className="bg-white p-8 rounded-lg shadow-xl max-w-md w-full">
            <div className="text-center mb-8">
                <ShieldCheck className="h-16 w-16 text-slate-900 mx-auto mb-4" />
                <h2 className="text-2xl font-bold text-slate-900">Document Verification</h2>
                <p className="text-gray-500 text-sm">Verify Offer Letters & Certificates</p>
            </div>
            {error && <div className="bg-red-50 text-red-600 p-3 rounded text-sm mb-4 border border-red-200">{error}</div>}
            <form onSubmit={handleVerify} className="space-y-4">
                <input type="text" value={formData.id} onChange={(e) => setFormData({...formData, id: e.target.value})} className="w-full border p-3 rounded bg-gray-50 font-mono" placeholder="Document ID" required />
                <input type="email" value={formData.email} onChange={(e) => setFormData({...formData, email: e.target.value})} className="w-full border p-3 rounded bg-gray-50" placeholder="Email Address" required />
                <input type="date" value={formData.dob} onChange={(e) => setFormData({...formData, dob: e.target.value})} className="w-full border p-3 rounded bg-gray-50" required />
                <button type="submit" className="w-full bg-amber-600 hover:bg-amber-700 text-white font-bold py-3 rounded transition flex items-center justify-center">
                    {step === 'loading' ? 'Verifying...' : <><Lock size={16} className="mr-2"/> Verify</>}
                </button>
            </form>
        </div>
    </div>
  );
};

// 6. Other Components (Privacy, Jobs, etc.)
const PrivacyPolicy = () => <div className="p-8"><h1>Privacy Policy</h1><p>We respect your privacy.</p></div>;

const JobPortal = ({ user, setView }) => {
    const [jobs, setJobs] = useState([]);
    const [openCommunity, setOpenCommunity] = useState(null);
    const [filterCountry, setFilterCountry] = useState('All');
    const [filterCategory, setFilterCategory] = useState('All');
    const [showPostModal, setShowPostModal] = useState(false);
    const [newJob, setNewJob] = useState({ title: '', country: 'Saudi Arabia', location: '', category: 'Construction', gender: 'Any', type: 'Full-time', description: '', contactEmail: '' });

    const isAdmin = user?.email === 'admin@alwatan.com';
    const canPostJob = user && !user.isAnonymous; // Kept as general user can post, but typically only admin

    useEffect(() => {
        if (!user) return; // Guard for permission denied
        
        const q = query(collection(db, 'artifacts', appId, 'public', 'data', 'jobs'), orderBy('createdAt', 'desc'));
        const unsubscribe = onSnapshot(q, 
          (s) => setJobs(s.docs.map(d => ({id: d.id, ...d.data()}))),
          (err) => console.error("Error", err)
        );
        return () => unsubscribe();
    }, [user]);

    const handlePostJob = async (e) => {
        e.preventDefault();
        await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'jobs'), { ...newJob, createdAt: serverTimestamp(), employerId: user.uid });
        setShowPostModal(false);
    };

    const filteredJobs = jobs.filter(job => {
        const matchCountry = filterCountry === 'All' || job.country === filterCountry;
        const matchCat = filterCategory === 'All' || job.category === filterCategory;
        // Public sees ALL jobs (including newly generated ones which are not hidden)
        // Hidden field logic removed/ignored for mass jobs as requested "job public ko show hon"
        // But respecting isHidden if manually set for drafts
        const matchHidden = !job.isHidden; 
        return matchCountry && matchCat && matchHidden;
    });

    return (
        <div className="min-h-screen bg-gray-50 py-8 px-4">
            <div className="max-w-7xl mx-auto flex flex-col lg:flex-row gap-8">
                <div className="flex-1">
                    <div className="flex justify-between items-center mb-6">
                        <h2 className="text-3xl font-bold text-slate-800">Job Listings</h2>
                        {canPostJob && (
                            <button onClick={() => setShowPostModal(true)} className="bg-amber-600 text-white px-4 py-2 rounded flex items-center shadow-lg"><PlusCircle size={16} className="mr-2"/> Post Job</button>
                        )}
                    </div>
                    <div className="lg:hidden mb-6 space-y-2">
                        <select onChange={e=>setFilterCountry(e.target.value)} className="w-full border p-2 rounded"><option value="All">All Countries</option><option>Saudi Arabia</option><option>UAE</option><option>UK</option></select>
                        <select onChange={e=>setFilterCategory(e.target.value)} className="w-full border p-2 rounded"><option value="All">All Categories</option><option>Construction</option><option>IT</option></select>
                    </div>
                    <div className="space-y-6">
                        {filteredJobs.length === 0 && <p className="text-gray-500 text-center py-10">No active jobs found.</p>}
                        {filteredJobs.map((job, index) => (
                            <React.Fragment key={job.id}>
                                {index > 0 && index % 3 === 0 && <AdPlaceholder />}
                                <div className={`bg-white p-6 rounded-lg shadow-sm border hover:shadow-md transition border-gray-100`}>
                                    <div className="flex justify-between items-start">
                                        <div>
                                            <h3 className="font-bold text-xl text-slate-800">{job.title}</h3>
                                            <div className="flex flex-wrap gap-2 mt-2 text-sm text-gray-500">
                                                <span className="flex items-center"><Globe size={14} className="mr-1 text-amber-600" /> {job.country}</span>
                                                <span className="flex items-center"><MapPin size={14} className="mr-1 text-amber-600" /> {job.location}</span>
                                                <span className="flex items-center"><Briefcase size={14} className="mr-1 text-amber-600" /> {job.category}</span>
                                            </div>
                                        </div>
                                        <span className={`px-2 py-1 text-xs rounded font-bold ${job.gender === 'Male' ? 'bg-blue-50 text-blue-700' : job.gender === 'Female' ? 'bg-pink-50 text-pink-700' : 'bg-gray-100'}`}>{job.gender || 'Any'}</span>
                                    </div>
                                    <p className="mt-3 text-gray-600 text-sm line-clamp-2">{job.description}</p>
                                    <div className="flex gap-3 mt-4 pt-4 border-t border-gray-50">
                                        <a href={`mailto:${job.contactEmail}`} className="flex-1 bg-slate-900 hover:bg-slate-800 text-white py-2 rounded text-center text-sm transition">Apply via Email</a>
                                        <button onClick={() => setOpenCommunity(job)} className="flex-1 bg-green-600 hover:bg-green-700 text-white py-2 rounded text-center text-sm flex items-center justify-center transition"><MessageCircle size={16} className="mr-2"/> Job Community</button>
                                    </div>
                                </div>
                            </React.Fragment>
                        ))}
                    </div>
                </div>
                <div className="w-full lg:w-80 hidden lg:block space-y-6">
                    <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
                        <h3 className="font-bold text-lg mb-4 flex items-center"><Filter size={18} className="mr-2"/> Filter Jobs</h3>
                        <div className="space-y-4">
                            <div><label className="block text-sm text-gray-600 mb-1">Location</label><select onChange={e=>setFilterCountry(e.target.value)} className="w-full border p-2 rounded bg-gray-50"><option value="All">Global (All)</option><option>Saudi Arabia</option><option>UAE</option><option>Qatar</option><option>United Kingdom</option><option>Canada</option><option>USA</option></select></div>
                            <div><label className="block text-sm text-gray-600 mb-1">Sector</label><select onChange={e=>setFilterCategory(e.target.value)} className="w-full border p-2 rounded bg-gray-50"><option value="All">All Sectors</option><option>Construction</option><option>IT & Tech</option><option>Healthcare</option><option>Education</option><option>Oil & Gas</option></select></div>
                        </div>
                    </div>
                    <AdPlaceholder format="vertical" />
                    <div className="bg-amber-50 p-6 rounded-lg border border-amber-200">
                        <h3 className="font-bold text-amber-800 mb-2">Need a Visa?</h3>
                        <p className="text-sm text-amber-700 mb-4">Get your official offer letter processed today.</p>
                        <button onClick={() => setView('services')} className="w-full bg-amber-600 text-white py-2 rounded text-sm font-bold hover:bg-amber-700">Start Process</button>
                    </div>
                </div>
            </div>
            {openCommunity && (<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"><div className="bg-white rounded-lg w-full max-w-lg overflow-hidden relative shadow-2xl"><button onClick={() => setOpenCommunity(null)} className="absolute top-3 right-3 text-white bg-red-500 rounded-full p-1 z-10 hover:bg-red-600"><X size={16}/></button><ChatRoom roomId={openCommunity.id} user={user} title={`Community: ${openCommunity.title}`} type="public" /></div></div>)}
            {showPostModal && (<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50"><div className="bg-white rounded p-6 max-w-md w-full max-h-[90vh] overflow-y-auto"><div className="flex justify-between mb-4"><h3 className="text-xl font-bold">Post a Job</h3><button onClick={()=>setShowPostModal(false)}><X size={20}/></button></div><form onSubmit={handlePostJob} className="space-y-3"><input placeholder="Job Title" className="w-full border p-2 rounded" onChange={e=>setNewJob({...newJob, title: e.target.value})} required/><select className="w-full border p-2 rounded" onChange={e=>setNewJob({...newJob, country: e.target.value})}><option>Select Country</option><option>Saudi Arabia</option><option>UAE</option><option>Qatar</option><option>UK</option><option>Canada</option><option>USA</option></select><input placeholder="Location (City)" className="w-full border p-2 rounded" onChange={e=>setNewJob({...newJob, location: e.target.value})} required/><select className="w-full border p-2 rounded" onChange={e=>setNewJob({...newJob, category: e.target.value})}><option>Select Category</option><option>Construction</option><option>IT</option><option>Medical</option><option>Education</option></select><select className="w-full border p-2 rounded" onChange={e=>setNewJob({...newJob, gender: e.target.value})}><option value="Any">Any Gender</option><option>Male</option><option>Female</option></select><textarea placeholder="Job Description..." className="w-full border p-2 rounded" rows="4" onChange={e=>setNewJob({...newJob, description: e.target.value})} required/><input placeholder="Contact Email" className="w-full border p-2 rounded" onChange={e=>setNewJob({...newJob, contactEmail: e.target.value})} required/><button type="submit" className="w-full bg-amber-600 text-white py-2 rounded hover:bg-amber-700">Post Job</button></form></div></div>)}
        </div>
    );
};

const OfferLetterService = ({ user, setView }) => {
  const [country, setCountry] = useState('Saudi Arabia');
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [dob, setDob] = useState('');
  const [submittedId, setSubmittedId] = useState(null);
  const countries = ['Saudi Arabia', 'UAE', 'Qatar', 'United Kingdom', 'Canada', 'Poland', 'New Zealand', 'Australia', 'USA', 'Germany'];
  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!user || user.isAnonymous) return alert("Please Sign In.");
    if (!dob) return alert("Date of Birth required.");
    setIsSubmitting(true);
    try {
      const docRef = await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'applications'), {
        userId: user.uid, email: user.email, fullName: e.target.elements.fullName.value,
        country, fee: 'Free', dob, paymentMethod: 'AdSupported', status: 'Pending', createdAt: serverTimestamp()
      });
      setSubmittedId(docRef.id); setIsSubmitting(false);
    } catch { alert("Failed"); setIsSubmitting(false); }
  };
  if (submittedId) return <div className="p-10 text-center"><h2 className="text-2xl font-bold text-green-600">Application Submitted!</h2><p className="font-mono bg-gray-100 inline-block p-2 mt-2">ID: {submittedId}</p><br/><button onClick={()=>setView('home')} className="mt-4 bg-slate-900 text-white px-4 py-2 rounded">Home</button></div>;
  return (
    <div className="bg-gray-50 min-h-screen py-12 px-4">
      <div className="max-w-2xl mx-auto bg-white rounded shadow p-8">
        <h2 className="text-2xl font-bold mb-6">Apply for Offer Letter</h2>
        <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4"><strong className="font-bold">100% Free Service!</strong><span className="block sm:inline"> No payment required. Supported by Ads.</span></div>
        <form onSubmit={handleSubmit} className="space-y-4">
            <select value={country} onChange={(e) => setCountry(e.target.value)} className="w-full border p-2 rounded">{countries.map(c => <option key={c} value={c}>{c}</option>)}</select>
            <input name="fullName" placeholder="Full Name" className="w-full border p-2 rounded" required />
            <div className="text-xs text-gray-500">Date of Birth (Required for verification)</div>
            <input name="dob" type="date" value={dob} onChange={e=>setDob(e.target.value)} className="w-full border p-2 rounded" required />
            <button type="submit" disabled={isSubmitting} className="w-full bg-slate-900 text-white py-3 rounded">{isSubmitting ? 'Processing...' : 'Submit Application (Free)'}</button>
        </form>
      </div>
    </div>
  );
};

const SupportPage = ({ user }) => {
  const [selectedThread, setSelectedThread] = useState(null);
  const [threads, setThreads] = useState([]);
  const isAdmin = user?.email === 'admin@alwatan.com';
  useEffect(() => {
    if (!isAdmin) return;
    const q = query(collection(db, 'artifacts', appId, 'public', 'data', 'support_threads'), orderBy('updatedAt', 'desc'));
    const unsub = onSnapshot(q, (s) => setThreads(s.docs.map(d => ({id: d.id, ...d.data()}))));
    return () => unsub();
  }, [isAdmin]);
  if (!user || user.isAnonymous) return <div className="p-10 text-center">Please login to chat with support.</div>;
  if (isAdmin) {
    return (
      <div className="min-h-screen bg-gray-100 p-4 flex gap-4 h-[600px]">
        <div className="w-1/3 bg-white rounded shadow overflow-y-auto">
          <div className="p-4 border-b font-bold bg-slate-800 text-white">Inbox</div>
          {threads.map(t => (<div key={t.id} onClick={()=>setSelectedThread(t)} className={`p-4 border-b cursor-pointer ${selectedThread?.id===t.id?'bg-amber-100':''}`}><div className="font-bold text-sm">{t.userEmail}</div></div>))}
        </div>
        <div className="flex-1 bg-white rounded shadow p-4">{selectedThread ? <ChatRoom roomId={`support_${selectedThread.userId}`} user={user} title={`Chat: ${selectedThread.userEmail}`} type="support"/> : <div>Select Chat</div>}</div>
      </div>
    );
  }
  return <div className="min-h-screen bg-gray-100 p-4 flex justify-center"><div className="w-full max-w-2xl"><ChatRoom roomId={`support_${user.uid}`} user={user} title="Support" type="support"/></div></div>;
};

const Auth = ({ setView }) => {
    const [email, setEmail] = useState(''); const [pass, setPass] = useState('');
    return <div className="min-h-screen flex items-center justify-center bg-gray-100"><div className="bg-white p-8 rounded shadow w-80"><h2 className="text-xl font-bold mb-4">Login</h2><input onChange={e=>setEmail(e.target.value)} placeholder="Email" className="border p-2 w-full mb-2"/><input type="password" onChange={e=>setPass(e.target.value)} placeholder="Password" className="border p-2 w-full mb-4"/><button onClick={()=>signInWithEmailAndPassword(auth, email, pass).then(()=>setView('home')).catch(e=>alert(e.message))} className="bg-slate-900 text-white w-full py-2 rounded">Login</button><button onClick={()=>createUserWithEmailAndPassword(auth, email, pass).then(()=>setView('home')).catch(e=>alert(e.message))} className="mt-2 text-sm text-center w-full">Register</button></div></div>
};

const Mission = () => <div className="p-20 text-center"><h1 className="text-4xl font-bold">Our Mission</h1><p className="mt-4">To serve humanity.</p></div>;

// --- Main App ---
const App = () => {
  const [user, setUser] = useState(null);
  const [view, setView] = useState('home');
  const [settings, setSettings] = useState(null);

  useEffect(() => {
    const initAuth = async () => {
      if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
        await signInWithCustomToken(auth, __initial_auth_token);
      } else {
        await signInAnonymously(auth);
      }
    };
    initAuth();
    const unsubscribe = onAuthStateChanged(auth, setUser);
    return () => unsubscribe();
  }, []);

  // Settings listener in separate useEffect to respect user auth state if needed, though settings are public
  useEffect(() => {
      if (!user) return;
      const unsubSettings = onSnapshot(doc(db, 'artifacts', appId, 'public', 'data', 'settings', 'config'), (doc) => { if(doc.exists()) setSettings(doc.data()); });
      return () => unsubSettings();
  }, [user]);

  const handleLogout = async () => { await signOut(auth); setView('home'); };

  return (
    <div className="font-sans antialiased text-slate-900 bg-white min-h-screen flex flex-col">
      <Navbar user={user} setView={setView} view={view} handleLogout={handleLogout} settings={settings} />
      <main className="flex-grow">
        {view === 'home' && <Home setView={setView} settings={settings} />}
        {view === 'mission' && <Mission />}
        {view === 'jobs' && <JobPortal user={user} setView={setView} />}
        {view === 'services' && <OfferLetterService user={user} setView={setView} />}
        {view === 'institute' && <TechnicalInstitute user={user} setView={setView} />}
        {view === 'verify' && <Verification />}
        {view === 'admin' && <AdminDashboard user={user} settings={settings} />}
        {view === 'support' && <SupportPage user={user} />}
        {view === 'login' && <Auth setView={setView} />}
        {view === 'privacy' && <PrivacyPolicy />}
      </main>
      
      {view !== 'verify' && view !== 'login' && view !== 'support' && (
          <footer className="bg-slate-900 text-white py-12 px-4 border-t border-gray-800 mt-auto">
            <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
              <div className="col-span-1 md:col-span-2">
                <div className="flex items-center mb-4 text-amber-500 font-bold text-xl"><Globe className="mr-2"/> AL-WATAN</div>
                <p className="text-gray-400 text-sm">Connecting talent with opportunity across the globe. Your success is our mission.</p>
              </div>
              <div>
                <h4 className="font-bold mb-4">Legal</h4>
                <ul className="space-y-2 text-sm text-gray-400">
                  <li onClick={() => setView('privacy')} className="cursor-pointer hover:text-white">Privacy Policy</li>
                  <li className="cursor-pointer hover:text-white">Terms of Service</li>
                  <li className="cursor-pointer hover:text-white">Cookie Policy</li>
                </ul>
              </div>
              <div>
                <h4 className="font-bold mb-4">Contact</h4>
                <p className="text-sm text-gray-400">London, UK | Riyadh, KSA</p>
                <p className="text-sm text-gray-400 mt-2">info@al-watan.com</p>
              </div>
            </div>
            <div className="border-t border-gray-800 mt-8 pt-8 text-center text-xs text-gray-500">
              © 2024 Al-Watan International Group. All rights reserved.
            </div>
          </footer>
      )}
    </div>
  );
};

export default App;