import React, { useEffect } from 'react';
import { Head, router } from '@inertiajs/react';
import { ShieldCheck } from 'lucide-react';

export default function EmployerSplash() {
    useEffect(() => {
        const timer = setTimeout(() => {
            router.get('/mobile/employer/welcome');
        }, 2000);
        return () => clearTimeout(timer);
    }, []);

    return (
        <div className="min-h-screen bg-[#D8F3FF] flex flex-col items-center justify-center p-8 max-w-md mx-auto relative overflow-hidden">
            <Head title="Welcome to Marketplace" />
            
            {/* Animated Background Elements */}
            <div className="absolute top-[-10%] right-[-10%] w-64 h-64 bg-white/40 rounded-full blur-3xl animate-pulse" />
            <div className="absolute bottom-[-10%] left-[-10%] w-80 h-80 bg-[#185FA5]/10 rounded-full blur-3xl animate-bounce duration-[3000ms]" />
            
            <div className="relative flex flex-col items-center space-y-8 animate-in fade-in zoom-in duration-1000">
                <div className="w-24 h-24 bg-gradient-to-br from-[#185FA5] to-[#2573c0] rounded-[32px] flex items-center justify-center shadow-[0_20px_40px_rgba(24,95,165,0.3)] border-4 border-white/20">
                    <ShieldCheck className="w-12 h-12 text-white" strokeWidth={2.5} />
                </div>
                
                <div className="text-center space-y-2">
                    <h1 className="text-4xl font-black text-[#141B34] tracking-tighter uppercase leading-none">
                        Job<span className="text-[#185FA5]">Sift</span>
                    </h1>
                    <p className="text-[10px] font-black text-[#185FA5]/60 uppercase tracking-[0.4em] ml-1">Employer Edition</p>
                </div>
            </div>

            <div className="absolute bottom-12 flex flex-col items-center space-y-4">
                <div className="flex space-x-1.5">
                    <div className="w-1.5 h-1.5 bg-[#185FA5] rounded-full animate-bounce" />
                    <div className="w-1.5 h-1.5 bg-[#185FA5] rounded-full animate-bounce [animation-delay:0.2s]" />
                    <div className="w-1.5 h-1.5 bg-[#185FA5] rounded-full animate-bounce [animation-delay:0.4s]" />
                </div>
                <span className="text-[10px] font-black text-[#3B46D1]/40 uppercase tracking-widest">Version 2.0.26</span>
            </div>
        </div>
    );
}
