import React, { useState } from 'react'; import { useForm, Head, Link } from '@inertiajs/react'; import { CheckCircle, Camera, Eye, EyeOff, X, Loader2, FileText, AlertCircle, CreditCard, ShieldCheck, ChevronRight, Lock, User, Mail, Phone as PhoneIcon, ArrowRight, ArrowLeft, Check, Briefcase } from 'lucide-react'; export default function Register() { const [step, setStep] = useState(1); const { data, setData, post, processing, errors } = useForm({ name: '', email: '', phone: '', password: '', password_confirmation: '', emirates_id_front: null, emirates_id_back: null, selected_plan: 'premium', card_number: '', expiry: '', cvc: '', }); const [showPassword, setShowPassword] = useState(false); const [frontFileName, setFrontFileName] = useState(null); const [backFileName, setBackFileName] = useState(null); const plans = [ { id: 'basic', name: 'Basic Search', price: '99', features: ['Browse 500+ workers', 'Shortlist up to 10', 'Standard vetting'] }, { id: 'premium', name: 'Premium Pass', price: '199', features: ['Unlimited shortlisting', 'Direct messaging', 'Priority scheduling'], popular: true }, { id: 'vip', name: 'VIP Concierge', price: '499', features: ['Assigned manager', 'Medical guarantee', 'Free replacements'] }, ]; const nextStep = () => setStep(prev => prev + 1); const prevStep = () => setStep(prev => prev - 1); const handleFileChange = (e, field) => { const file = e.target.files[0]; if (file) { setData(field, file); const sizeMb = (file.size / (1024 * 1024)).toFixed(1); if (field === 'emirates_id_front') { setFrontFileName(`${file.name} (${sizeMb} MB)`); } else { setBackFileName(`${file.name} (${sizeMb} MB)`); } } }; const removeFile = (field) => { setData(field, null); if (field === 'emirates_id_front') { setFrontFileName(null); } else { setBackFileName(null); } }; const handleSubmit = (e) => { e.preventDefault(); post('/employer/register'); }; const renderStepIndicator = () => (
{[1, 2, 3, 4].map((s) => (
= s ? 'bg-[#185FA5] text-white border-blue-100 scale-110 shadow-lg' : 'bg-white text-slate-400 border-slate-50' }`}> {step > s ? : s}
))}
); return (
{/* Left Brand Panel */}
M
Marketplace

The Secure Hub for Direct Hiring.

Join 12,000+ employers hiring domestic workers directly with verified documentation.

{[ { title: 'Verified Profiles', desc: 'Every worker is OCR vetted and legally checked.', icon: ShieldCheck }, { title: 'Instant Access', desc: 'Connect with candidates in seconds after verification.', icon: ArrowRight }, { title: 'Zero Fees', desc: 'No recruitment agency commissions, ever.', icon: CheckCircle } ].map((feat, i) => (

{feat.title}

{feat.desc}

))}
Empowering Household Recruitment Since 2024
{/* Right Registration Content */}

Employer Enrollment

Step {step} of 4: { step === 1 ? 'Account Security' : step === 2 ? 'Identity Verification' : step === 3 ? 'Choose Your Plan' : 'Secure Payment' }

{renderStepIndicator()}
{/* Step 1: Account Creation */} {step === 1 && (
setData('name', e.target.value)} placeholder="e.g. Abdullah Bin Ahmed" className="w-full pl-12 pr-4 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-4 focus:ring-blue-100 transition-all outline-none" required />
setData('email', e.target.value)} placeholder="employer@domain.com" className="w-full pl-12 pr-4 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-4 focus:ring-blue-100 transition-all outline-none" required />
setData('phone', e.target.value)} placeholder="+971 XX XXX XXXX" className="w-full pl-12 pr-4 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-4 focus:ring-blue-100 transition-all outline-none" required />
setData('password', e.target.value)} placeholder="••••••••" className="w-full pl-12 pr-12 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-4 focus:ring-blue-100 transition-all outline-none" required />
setData('password_confirmation', e.target.value)} placeholder="••••••••" className="w-full px-5 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-4 focus:ring-blue-100 transition-all outline-none" required />
)} {/* Step 2: Emirates ID */} {step === 2 && (

In compliance with UAE Labor Law, all employers must verify their identity using a valid Emirates ID before accessing the marketplace.

{[ { field: 'emirates_id_front', label: 'Emirates ID Front', file: frontFileName }, { field: 'emirates_id_back', label: 'Emirates ID Back', file: backFileName } ].map((slot) => (
{slot.file ? (
{slot.file}
) : ( )}
))}
)} {/* Step 3: Plan Selection */} {step === 3 && (
{plans.map((p) => ( ))}
)} {/* Step 4: Secure Payment */} {step === 4 && (
{data.card_number || '•••• •••• •••• ••••'}
Card Holder
{data.name || 'Your Name'}
Expires
{data.expiry || 'MM/YY'}
setData('card_number', e.target.value.replace(/\W/gi, '').replace(/(.{4})/g, '$1 ').trim())} placeholder="4242 4242 4242 4242" className="w-full pl-12 pr-4 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-4 focus:ring-blue-100 transition-all outline-none" required />
setData('expiry', e.target.value.replace(/^(\d{2})/, '$1/'))} placeholder="MM/YY" className="w-full px-5 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-4 focus:ring-blue-100 transition-all outline-none text-center" required />
setData('cvc', e.target.value)} placeholder="CVC" className="w-full px-5 py-4 bg-slate-50 border-none rounded-2xl text-sm font-bold focus:ring-4 focus:ring-blue-100 transition-all outline-none text-center" required />
Total Amount
{plans.find(p => p.id === data.selected_plan)?.price} AED

Secured by 256-bit AES encryption

)}

Already part of the network?{' '} Authorize Account

); }