import React from 'react';
import { Head, Link } from '@inertiajs/react';
import EmployerLayout from '@/Layouts/EmployerLayout';
import { 
    CheckCircle2, 
    ArrowRight, 
    Users, 
    MessageSquare,
    Sparkles
} from 'lucide-react';

export default function Success({ worker }) {
    return (
        <EmployerLayout title="Offer Sent">
            <Head title="Hiring Offer Sent" />

            <div className="max-w-xl mx-auto py-12 px-4 select-none">
                <div className="bg-white rounded-3xl border border-slate-200 shadow-xl overflow-hidden text-center p-12 space-y-8 relative">
                    {/* Decorative elements */}
                    <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-emerald-400 to-[#185FA5]" />
                    <Sparkles className="absolute top-8 left-8 w-6 h-6 text-emerald-200" />
                    <Sparkles className="absolute bottom-8 right-8 w-8 h-8 text-blue-100" />

                    <div className="space-y-4">
                        <div className="w-24 h-24 bg-emerald-50 rounded-full flex items-center justify-center mx-auto border-4 border-white shadow-lg animate-bounce">
                            <CheckCircle2 className="w-12 h-12 text-emerald-500" />
                        </div>
                        <h1 className="text-3xl font-black text-slate-900 tracking-tight">Offer Sent!</h1>
                        <p className="text-slate-500 font-bold text-sm max-w-xs mx-auto leading-relaxed uppercase tracking-widest">
                            Your hiring offer has been successfully sent to <span className="text-[#185FA5]">{worker.name}</span>.
                        </p>
                    </div>

                    <div className="bg-slate-50 rounded-2xl p-6 border border-slate-100 space-y-3">
                        <h3 className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">What's next?</h3>
                        <ul className="text-left space-y-4">
                            <li className="flex items-start space-x-3 text-xs font-bold text-slate-700">
                                <div className="w-5 h-5 bg-white rounded-lg flex items-center justify-center flex-shrink-0 shadow-sm border border-slate-100 text-[#185FA5]">1</div>
                                <span>The worker will receive a notification and SMS with your offer details.</span>
                            </li>
                            <li className="flex items-start space-x-3 text-xs font-bold text-slate-700">
                                <div className="w-5 h-5 bg-white rounded-lg flex items-center justify-center flex-shrink-0 shadow-sm border border-slate-100 text-[#185FA5]">2</div>
                                <span>You can track their response in your "Hired Workers" dashboard.</span>
                            </li>
                        </ul>
                    </div>

                    <div className="flex flex-col space-y-3 pt-4">
                        <Link
                            href="/employer/candidates"
                            className="w-full bg-[#185FA5] text-white py-4 rounded-xl font-black text-xs uppercase tracking-widest shadow-xl shadow-blue-500/20 hover:bg-[#144f8a] transition-all flex items-center justify-center space-x-2 group"
                        >
                            <span>Go to Hired Workers</span>
                            <Users className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                        </Link>
                        
                        <Link
                            href="/employer/workers"
                            className="w-full bg-white text-slate-600 border border-slate-200 py-4 rounded-xl font-black text-xs uppercase tracking-widest hover:bg-slate-50 transition-all flex items-center justify-center space-x-2"
                        >
                            <span>Find More Workers</span>
                            <ArrowRight className="w-4 h-4" />
                        </Link>
                    </div>
                </div>
            </div>
        </EmployerLayout>
    );
}
