import React, { useState } from 'react'; import { useForm, Head, Link } from '@inertiajs/react'; import { CheckCircle, Camera, Eye, EyeOff, X, Loader2, FileText, AlertCircle, CreditCard, ShieldCheck, Lock, User, Mail, Phone as PhoneIcon, ArrowRight, ArrowLeft, Check, Globe, ChevronLeft, ChevronRight, Zap, Shield, Trophy } from 'lucide-react'; export default function EmployerRegister() { 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: '', source: 'mobile', }); const [showPassword, setShowPassword] = useState(false); const [frontFileName, setFrontFileName] = useState(null); const [backFileName, setBackFileName] = useState(null); const plans = [ { id: 'basic', name: 'Basic Search', price: '99', icon: Zap, color: 'text-blue-500 bg-blue-50', features: ['Browse 500+ workers', '10 Shortlists'] }, { id: 'premium', name: 'Premium Pass', price: '199', icon: Shield, color: 'text-[#185FA5] bg-blue-50', popular: true, features: ['Unlimited lists', 'Direct Messaging'] }, { id: 'vip', name: 'VIP Concierge', price: '499', icon: Trophy, color: 'text-amber-500 bg-amber-50', features: ['Assigned Manager', 'Full Warranty'] }, ]; 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'); }; return (
{/* Minimal Header */}
Step {step} / 4
{/* Header Text */}

{step === 1 && "Create Account"} {step === 2 && "Identity Vetting"} {step === 3 && "Choose Plan"} {step === 4 && "Checkout"}

{step === 1 && "Start your professional hiring journey."} {step === 2 && "Verified ID is mandatory for compliance."} {step === 3 && "Select a package that fits your needs."} {step === 4 && "Secure payment via encrypted gateway."}

{/* Step 1: Account Info */} {step === 1 && (
setData('name', e.target.value)} placeholder="Enter your full name" className="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-[24px] text-sm font-medium focus:bg-white focus:border-[#185FA5] focus:ring-4 focus:ring-blue-500/10 transition-all outline-none" required />
setData('email', e.target.value)} placeholder="your@email.com" className="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-[24px] text-sm font-medium focus:bg-white focus:border-[#185FA5] focus:ring-4 focus:ring-blue-500/10 transition-all outline-none" required />
setData('phone', e.target.value)} placeholder="+971 50 000 0000" className="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-[24px] text-sm font-medium focus:bg-white focus:border-[#185FA5] focus:ring-4 focus:ring-blue-500/10 transition-all outline-none" required />
setData('password', e.target.value)} placeholder="Min. 8 characters" className="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-[24px] text-sm font-medium focus:bg-white focus:border-[#185FA5] focus:ring-4 focus:ring-blue-500/10 transition-all outline-none" required />
)} {/* Step 2: Emirates ID */} {step === 2 && (

Your ID is encrypted and handled securely as per UAE data protection laws.

{[ { field: 'emirates_id_front', label: 'EID Front Side', file: frontFileName }, { field: 'emirates_id_back', label: 'EID Back Side', file: backFileName } ].map((slot) => (
{slot.file ? (
{slot.file}
) : ( )}
))}
)} {/* Step 3: Plans */} {step === 3 && (
{plans.map((p) => ( ))}
)} {/* Step 4: Payment */} {step === 4 && (
{/* Card Visual */}
{data.card_number || '•••• •••• •••• ••••'}
Card Holder
{data.name || 'Your Name'}
Expiry
{data.expiry || 'MM/YY'}
setData('card_number', e.target.value.replace(/\W/gi, '').replace(/(.{4})/g, '$1 ').trim())} placeholder="Card Number" className="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-[24px] text-sm font-medium focus:bg-white focus:border-[#185FA5] transition-all outline-none" required />
setData('expiry', e.target.value.replace(/^(\d{2})/, '$1/'))} placeholder="MM/YY" className="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-[24px] text-sm font-medium focus:bg-white focus:border-[#185FA5] transition-all outline-none text-center" required /> setData('cvc', e.target.value)} placeholder="CVC" className="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-[24px] text-sm font-medium focus:bg-white focus:border-[#185FA5] transition-all outline-none text-center" required />
Total to Pay
{plans.find(p => p.id === data.selected_plan)?.price} AED
)}

Already joined? Sign In

); }