import React from 'react';
import { Head, Link } from '@inertiajs/react';
import { 
    Briefcase, 
    ArrowRight, 
    Sparkles,
    ShieldCheck,
    Users
} from 'lucide-react';

export default function EmployerWelcome() {
    return (
        <div className="min-h-screen bg-[#D8F3FF] flex flex-col max-w-md mx-auto relative overflow-hidden">
            <Head title="Welcome" />
            
            {/* Artistic Header Background */}
            <div className="h-[45vh] relative overflow-hidden">
                <div className="absolute inset-0 bg-gradient-to-b from-[#185FA5] to-[#2573c0] rounded-b-[60px] shadow-2xl" />
                <div className="absolute top-[10%] left-[10%] w-32 h-32 bg-white/10 rounded-full blur-2xl" />
                <div className="absolute bottom-[20%] right-[-10%] w-64 h-64 bg-emerald-400/20 rounded-full blur-3xl" />
                
                <div className="relative h-full flex flex-col items-center justify-center p-8 space-y-6 text-center animate-in slide-in-from-top duration-700">
                    <div className="w-20 h-20 bg-white/20 backdrop-blur-xl rounded-[28px] border border-white/30 flex items-center justify-center shadow-2xl">
                        <ShieldCheck className="w-10 h-10 text-white" strokeWidth={2.5} />
                    </div>
                    <div className="space-y-2">
                        <h1 className="text-3xl font-black text-white tracking-tighter uppercase leading-none">
                            Find Top <br /> Talent Fast
                        </h1>
                        <p className="text-blue-100/70 text-[11px] font-bold uppercase tracking-[0.2em]">The Future of Recruitment</p>
                    </div>
                </div>
            </div>

            <div className="flex-1 px-8 pt-10 space-y-10 animate-in slide-in-from-bottom duration-700">
                <div className="space-y-6">
                    <div className="flex items-start space-x-5">
                        <div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shadow-lg shadow-blue-500/5 shrink-0">
                            <Users className="w-6 h-6 text-[#185FA5]" strokeWidth={2.5} />
                        </div>
                        <div className="space-y-1">
                            <h4 className="font-black text-[#141B34] text-sm uppercase tracking-tight">Verified Workers</h4>
                            <p className="text-[11px] text-slate-400 font-bold uppercase tracking-tight leading-relaxed">Access 10,000+ pre-vetted domestic and commercial workers.</p>
                        </div>
                    </div>

                    <div className="flex items-start space-x-5">
                        <div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center shadow-lg shadow-blue-500/5 shrink-0">
                            <Sparkles className="w-6 h-6 text-[#22D39B]" strokeWidth={2.5} />
                        </div>
                        <div className="space-y-1">
                            <h4 className="font-black text-[#141B34] text-sm uppercase tracking-tight">AI Matching</h4>
                            <p className="text-[11px] text-slate-400 font-bold uppercase tracking-tight leading-relaxed">Our smart engine matches workers based on your specific needs.</p>
                        </div>
                    </div>
                </div>

                <div className="space-y-4 pt-4">
                    <Link 
                        href="/mobile/employer/login"
                        className="w-full h-18 bg-[#185FA5] text-white rounded-[28px] font-black text-sm uppercase tracking-[0.2em] shadow-[0_15px_35px_rgba(24,95,165,0.3)] flex items-center justify-center space-x-3 active:scale-95 transition-all"
                    >
                        <span>Login to Portal</span>
                        <ArrowRight className="w-5 h-5" strokeWidth={3} />
                    </Link>
                    <Link 
                        href="/mobile/employer/register"
                        className="w-full h-18 bg-white text-[#185FA5] rounded-[28px] font-black text-sm uppercase tracking-[0.2em] shadow-lg flex items-center justify-center active:scale-95 transition-all border-2 border-white"
                    >
                        <span>Join as Employer</span>
                    </Link>
                </div>
            </div>

            <div className="px-8 pb-10 text-center">
                <p className="text-[10px] font-black text-slate-400 uppercase tracking-widest leading-loose">
                    By continuing you agree to our <br />
                    <span className="text-[#185FA5] underline underline-offset-4">Terms of Service</span>
                </p>
            </div>
        </div>
    );
}
