import React from 'react';
import { Head, Link } from '@inertiajs/react';
import { Clock, CheckCircle } from 'lucide-react';

export default function PendingVerification() {
    return (
        <div className="min-h-screen flex flex-col justify-center items-center px-4 bg-slate-50 font-sans">
            <Head title="Verification Pending - Sponsor Portal" />

            <div className="w-full max-w-md bg-white rounded-2xl shadow-sm border border-slate-200 p-8 text-center space-y-6">
                <div className="w-16 h-16 bg-amber-50 rounded-full flex items-center justify-center mx-auto border border-amber-200">
                    <Clock className="w-8 h-8 text-amber-600 animate-pulse" />
                </div>

                <div className="space-y-2">
                    <h1 className="text-2xl font-bold text-gray-900 tracking-tight">Account Under Review</h1>
                    <p className="text-sm text-gray-600">
                        Thank you for registering. We have received your Emirates ID documents and our team is currently verifying your details.
                    </p>
                </div>

                <div className="bg-slate-50 p-4 rounded-xl border border-slate-100 text-xs text-left space-y-2 text-slate-600">
                    <div className="flex items-center space-x-2">
                        <CheckCircle className="w-4 h-4 text-emerald-600" />
                        <span>Emirates ID front scan received</span>
                    </div>
                    <div className="flex items-center space-x-2">
                        <CheckCircle className="w-4 h-4 text-emerald-600" />
                        <span>Emirates ID back scan received</span>
                    </div>
                    <div className="flex items-center space-x-2">
                        <CheckCircle className="w-4 h-4 text-emerald-600" />
                        <span>Review expected within 24 hours</span>
                    </div>
                </div>

                <Link
                    href="/employer/dashboard"
                    className="w-full bg-[#185FA5] hover:bg-[#144f8a] text-white rounded-xl h-11 font-semibold text-sm transition-colors shadow-sm flex items-center justify-center"
                >
                    Proceed to Dashboard Preview
                </Link>
            </div>
        </div>
    );
}
