import React from 'react';
import { Head, Link } from '@inertiajs/react';
import { 
    ArrowLeft,
    MoreVertical,
    Briefcase,
    MapPin,
    Users,
    ChevronRight,
    Clock,
    ShieldCheck,
    DollarSign,
    Star,
    Phone,
    Calendar
} from 'lucide-react';

export default function WorkerJobDetail() {
    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="Job Details" />
            
            {/* Header */}
            <div className="px-6 pt-12 pb-4 bg-white flex items-center justify-between border-b border-slate-50 sticky top-0 z-50">
                <button onClick={() => window.history.back()} className="w-10 h-10 flex items-center justify-center text-slate-900">
                    <ArrowLeft className="w-5 h-5" />
                </button>
                <h1 className="text-sm font-black uppercase tracking-widest">Details</h1>
                <button className="w-10 h-10 flex items-center justify-center text-slate-900">
                    <MoreVertical className="w-5 h-5" />
                </button>
            </div>

            <div className="flex-1 overflow-y-auto pb-32">
                {/* Job Icon & Title */}
                <div className="flex flex-col items-center py-10 space-y-6">
                    <div className="w-20 h-20 rounded-full bg-slate-50 border border-slate-100 flex items-center justify-center shadow-sm">
                        <div className="w-14 h-14 rounded-full bg-white shadow-md flex items-center justify-center">
                            <Briefcase className="w-8 h-8 text-slate-900" />
                        </div>
                    </div>
                    <div className="text-center space-y-2">
                        <h2 className="text-2xl font-black tracking-tight">Driver needed</h2>
                        <p className="text-[10px] text-slate-400 font-bold uppercase tracking-widest flex items-center justify-center space-x-1">
                            <MapPin className="w-3 h-3" />
                            <span>High street avenue London, UK</span>
                        </p>
                    </div>
                </div>


                {/* Stats Grid */}
                <div className="px-6 grid grid-cols-2 gap-4 mb-10">
                    <div className="bg-[#F9F9F9] p-5 rounded-3xl border border-slate-50 flex items-center space-x-4">
                        <div className="w-10 h-10 rounded-2xl bg-blue-50 text-[#185FA5] flex items-center justify-center">
                            <DollarSign className="w-5 h-5" />
                        </div>
                        <div>
                            <p className="text-[9px] text-slate-400 font-black uppercase tracking-widest leading-none mb-1">Salary</p>
                            <p className="text-xs font-black text-slate-900">$15</p>
                        </div>
                    </div>
                    <div className="bg-[#F9F9F9] p-5 rounded-3xl border border-slate-50 flex items-center space-x-4">
                        <div className="w-10 h-10 rounded-2xl bg-orange-50 text-orange-500 flex items-center justify-center">
                            <Clock className="w-5 h-5" />
                        </div>
                        <div>
                            <p className="text-[9px] text-slate-400 font-black uppercase tracking-widest leading-none mb-1">Job type</p>
                            <p className="text-xs font-black text-slate-900">Part time</p>
                        </div>
                    </div>
                    <div className="bg-[#F9F9F9] p-5 rounded-3xl border border-slate-50 flex items-center space-x-4">
                        <div className="w-10 h-10 rounded-2xl bg-emerald-50 text-emerald-500 flex items-center justify-center">
                            <Star className="w-5 h-5" />
                        </div>
                        <div>
                            <p className="text-[9px] text-slate-400 font-black uppercase tracking-widest leading-none mb-1">Skill</p>
                            <p className="text-xs font-black text-slate-900">Expert</p>
                        </div>
                    </div>
                    <div className="bg-[#F9F9F9] p-5 rounded-3xl border border-slate-50 flex items-center space-x-4">
                        <div className="w-10 h-10 rounded-2xl bg-purple-50 text-purple-500 flex items-center justify-center">
                            <ShieldCheck className="w-5 h-5" />
                        </div>
                        <div>
                            <p className="text-[9px] text-slate-400 font-black uppercase tracking-widest leading-none mb-1">Payment</p>
                            <p className="text-xs font-black text-slate-900">Verified</p>
                        </div>
                    </div>
                </div>

                {/* Description */}
                <div className="px-6 space-y-4 mb-10">
                    <h3 className="font-black text-sm uppercase tracking-tight">Description</h3>
                    <p className="text-xs text-slate-500 leading-relaxed font-medium">
                        An outstanding executer that consistently delivers more than expected & start mentoring experience man to drive my vehicle safely and efficiently. <span className="text-[#185FA5] font-black uppercase tracking-widest cursor-pointer">Read More</span>
                    </p>
                </div>

                {/* Additional Details */}
                <div className="px-6 space-y-6">
                    <h3 className="font-black text-sm uppercase tracking-tight">Additional details</h3>
                    <div className="space-y-4">
                        <div className="flex items-center justify-between py-2 border-b border-slate-50">
                            <div className="flex items-center space-x-3">
                                <Briefcase className="w-4 h-4 text-slate-300" />
                                <span className="text-[11px] font-bold text-slate-400 uppercase tracking-widest">Offer type</span>
                            </div>
                            <span className="text-[11px] font-black text-slate-900 uppercase">Contractual</span>
                        </div>
                        <div className="flex items-center justify-between py-2 border-b border-slate-50">
                            <div className="flex items-center space-x-3">
                                <Calendar className="w-4 h-4 text-slate-300" />
                                <span className="text-[11px] font-bold text-slate-400 uppercase tracking-widest">Start from</span>
                            </div>
                            <div className="text-right">
                                <span className="text-[11px] font-black text-slate-900 uppercase block">26 Aug, 2023</span>
                                <span className="text-[9px] text-slate-400 font-bold uppercase">9:00 am to 6:00 pm</span>
                            </div>
                        </div>
                        <div className="flex items-center justify-between py-2 border-b border-slate-50">
                            <div className="flex items-center space-x-3">
                                <Phone className="w-4 h-4 text-slate-300" />
                                <span className="text-[11px] font-bold text-slate-400 uppercase tracking-widest">Contact</span>
                            </div>
                            <span className="text-[11px] font-black text-slate-900">(702) 555-0122</span>
                        </div>
                        <div className="flex items-center justify-between py-2 border-b border-slate-50">
                            <div className="flex items-center space-x-3">
                                <Clock className="w-4 h-4 text-slate-300" />
                                <span className="text-[11px] font-bold text-slate-400 uppercase tracking-widest">Posted</span>
                            </div>
                            <span className="text-[11px] font-black text-slate-900 uppercase">2 days ago</span>
                        </div>
                    </div>
                </div>
            </div>

            {/* Footer Apply Button */}
            <div className="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white/90 backdrop-blur-xl border-t border-slate-100 p-6 z-50">
                <button className="w-full bg-[#185FA5] text-white py-5 rounded-[28px] font-black text-[12px] uppercase tracking-[0.2em] shadow-2xl shadow-blue-500/20 active:scale-95 transition-all">
                    Apply Now
                </button>
            </div>
        </div>
    );
}
