import React from 'react';
import { Head, Link } from '@inertiajs/react';
import { 
    Briefcase, 
    User, 
    ShieldCheck, 
    ArrowRight,
    Globe,
    Zap
} from 'lucide-react';

export default function MobileWelcome() {
    return (
        <div className="min-h-screen bg-white font-sans text-slate-900 flex flex-col max-w-md mx-auto shadow-2xl relative overflow-hidden">
            <Head title="Welcome" />
            
            {/* Background Decor */}
            <div className="absolute top-[-10%] right-[-10%] w-64 h-64 bg-blue-50 rounded-full blur-3xl opacity-50" />
            <div className="absolute bottom-[-10%] left-[-10%] w-64 h-64 bg-[#185FA5]/5 rounded-full blur-3xl opacity-50" />

            {/* Language Selector */}
            <div className="px-6 pt-12 flex justify-end relative z-10">
                <button className="flex items-center space-x-2 bg-slate-50 px-4 py-2 rounded-2xl border border-slate-100 active:scale-95 transition-all">
                    <Globe className="w-4 h-4 text-[#185FA5]" />
                    <span className="text-[10px] font-black uppercase tracking-widest">English</span>
                </button>
            </div>

            <div className="flex-1 px-8 flex flex-col justify-center space-y-12 relative z-10">
                {/* Hero */}
                <div className="space-y-6 text-center">
                    <div className="flex justify-center">
                        <div className="w-20 h-20 bg-[#185FA5] rounded-[32px] flex items-center justify-center shadow-2xl shadow-blue-500/30">
                            <ShieldCheck className="w-10 h-10 text-white" />
                        </div>
                    </div>
                    <div className="space-y-2">
                        <h1 className="text-4xl font-black tracking-tighter uppercase leading-none">Marketplace</h1>
                        <p className="text-[11px] font-black text-slate-300 uppercase tracking-[0.3em]">Direct Hiring Portal</p>
                    </div>
                </div>

                {/* Selection Cards */}
                <div className="space-y-4">
                    <Link 
                        href="/mobile/employer/login"
                        className="group bg-white p-8 rounded-[40px] border-2 border-slate-50 shadow-sm flex items-center justify-between active:scale-95 transition-all hover:border-[#185FA5] hover:shadow-xl hover:shadow-blue-500/10"
                    >
                        <div className="flex items-center space-x-6">
                            <div className="w-16 h-16 bg-slate-50 rounded-[24px] flex items-center justify-center group-hover:bg-blue-50 transition-colors">
                                <Briefcase className="w-8 h-8 text-[#185FA5]" />
                            </div>
                            <div className="text-left">
                                <h3 className="text-xl font-black tracking-tight uppercase leading-none mb-2">Employer</h3>
                                <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">I want to hire</p>
                            </div>
                        </div>
                        <ArrowRight className="w-6 h-6 text-slate-200 group-hover:text-[#185FA5] transition-colors" />
                    </Link>

                    <Link 
                        href="/mobile/worker/register"
                        className="group bg-white p-8 rounded-[40px] border-2 border-slate-50 shadow-sm flex items-center justify-between active:scale-95 transition-all hover:border-[#185FA5] hover:shadow-xl hover:shadow-blue-500/10"
                    >
                        <div className="flex items-center space-x-6">
                            <div className="w-16 h-16 bg-slate-50 rounded-[24px] flex items-center justify-center group-hover:bg-blue-50 transition-colors">
                                <User className="w-8 h-8 text-[#185FA5]" />
                            </div>
                            <div className="text-left">
                                <h3 className="text-xl font-black tracking-tight uppercase leading-none mb-2">Worker</h3>
                                <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">I want a job</p>
                            </div>
                        </div>
                        <ArrowRight className="w-6 h-6 text-slate-200 group-hover:text-[#185FA5] transition-colors" />
                    </Link>
                </div>

                <div className="text-center pt-4">
                    <div className="flex items-center justify-center space-x-2 text-[10px] font-black text-slate-300 uppercase tracking-widest">
                        <Zap className="w-3 h-3 text-amber-500 fill-amber-500" />
                        <span>Trusted by 10k+ users</span>
                    </div>
                </div>
            </div>

            {/* Footer Links */}
            <div className="px-8 pb-12 text-center relative z-10">
                <p className="text-[11px] font-black text-slate-400 uppercase tracking-widest leading-loose">
                    Need Help? <br />
                    <Link href="/support" className="text-[#185FA5] underline underline-offset-4 decoration-2">Contact Support</Link>
                </p>
            </div>
        </div>
    );
}
