import React from 'react';
import { Head, Link } from '@inertiajs/react';
import { 
    TrendingUp, 
    Users, 
    CheckCircle2, 
    ArrowRight, 
    Shield, 
    Lock,
    Globe,
    Zap
} from 'lucide-react';

export default function PublicStats({ total_workers, avg_hires, total_hires_all }) {
    return (
        <div className="min-h-screen bg-slate-900 text-white flex flex-col justify-between selection:bg-emerald-500 selection:text-slate-900">
            <Head title="Platform Performance & Trust Metrics - Direct Hire Marketplace" />

            {/* Navigation Header */}
            <header className="border-b border-white/10 bg-slate-950/50 backdrop-blur-md sticky top-0 z-50">
                <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
                    <div className="flex items-center space-x-3">
                        <div className="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center font-bold text-lg text-white shadow-lg shadow-blue-500/30">
                            M
                        </div>
                        <span className="font-extrabold tracking-tight text-lg text-white">
                            Direct<span className="text-blue-400">Market</span>
                        </span>
                    </div>
                    <div className="flex items-center space-x-4">
                        <Link 
                            href="/employer/login" 
                            className="text-sm font-semibold text-slate-300 hover:text-white transition-colors px-4 py-2"
                        >
                            Sign In
                        </Link>
                        <Link 
                            href="/employer/register" 
                            className="bg-blue-600 hover:bg-blue-500 text-white text-sm font-bold px-5 py-2.5 rounded-xl transition-all shadow-md shadow-blue-600/20"
                        >
                            Register
                        </Link>
                    </div>
                </div>
            </header>

            {/* Hero Section */}
            <main className="flex-grow py-20 px-6 max-w-5xl mx-auto w-full flex flex-col justify-center space-y-16">
                <div className="text-center space-y-6 max-w-3xl mx-auto">
                    <div className="inline-flex items-center space-x-2 px-3 py-1 bg-emerald-500/10 rounded-full text-xs font-semibold text-emerald-400 border border-emerald-500/20">
                        <span className="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse" />
                        <span>Live Platform Growth Metrics</span>
                    </div>
                    <h1 className="text-4xl sm:text-5xl font-black tracking-tight leading-none text-slate-100">
                        Transparency First. <br className="hidden sm:block"/>
                        <span className="bg-gradient-to-r from-blue-400 via-indigo-400 to-emerald-400 bg-clip-text text-transparent">Direct & Verified Hiring.</span>
                    </h1>
                    <p className="text-slate-400 text-base sm:text-lg max-w-2xl mx-auto font-medium">
                        Real-time stats from the region's premier zero-middlemen domestic helper platform. No recruiters, no hidden commissions, just honest data.
                    </p>
                </div>

                {/* Stats Grid */}
                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                    {/* Worker Profiles Card */}
                    <div className="bg-slate-950/40 border border-white/10 p-8 rounded-3xl backdrop-blur-md relative overflow-hidden group hover:border-blue-500/30 transition-all flex flex-col justify-between h-64 shadow-xl">
                        <div className="absolute top-0 right-0 w-32 h-32 bg-blue-500/5 rounded-full blur-2xl group-hover:bg-blue-500/10 transition-colors" />
                        <div className="w-12 h-12 rounded-2xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center text-blue-400">
                            <Users className="w-6 h-6" />
                        </div>
                        <div className="space-y-2">
                            <div className="text-4xl font-extrabold tracking-tight text-white">
                                {total_workers.toLocaleString()}+
                            </div>
                            <div className="text-sm font-semibold text-slate-400 uppercase tracking-wider">
                                Worker Profiles
                            </div>
                            <p className="text-xs text-slate-500 font-medium">
                                Active, background-checked domestic workers ready for sponsorship.
                            </p>
                        </div>
                    </div>

                    {/* Avg Monthly Hires Card */}
                    <div className="bg-slate-950/40 border border-white/10 p-8 rounded-3xl backdrop-blur-md relative overflow-hidden group hover:border-emerald-500/30 transition-all flex flex-col justify-between h-64 shadow-xl">
                        <div className="absolute top-0 right-0 w-32 h-32 bg-emerald-500/5 rounded-full blur-2xl group-hover:bg-emerald-500/10 transition-colors" />
                        <div className="w-12 h-12 rounded-2xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-400">
                            <TrendingUp className="w-6 h-6" />
                        </div>
                        <div className="space-y-2">
                            <div className="text-4xl font-extrabold tracking-tight text-white">
                                {avg_hires.toLocaleString()}+
                            </div>
                            <div className="text-sm font-semibold text-slate-400 uppercase tracking-wider">
                                Avg Monthly Hires
                            </div>
                            <p className="text-xs text-slate-500 font-medium">
                                Average number of successful matches completed directly on our app.
                            </p>
                        </div>
                    </div>

                    {/* Total Successful Hires */}
                    <div className="bg-slate-950/40 border border-white/10 p-8 rounded-3xl backdrop-blur-md relative overflow-hidden group hover:border-purple-500/30 transition-all flex flex-col justify-between h-64 shadow-xl">
                        <div className="absolute top-0 right-0 w-32 h-32 bg-purple-500/5 rounded-full blur-2xl group-hover:bg-purple-500/10 transition-colors" />
                        <div className="w-12 h-12 rounded-2xl bg-purple-500/10 border border-purple-500/20 flex items-center justify-center text-purple-400">
                            <CheckCircle2 className="w-6 h-6" />
                        </div>
                        <div className="space-y-2">
                            <div className="text-4xl font-extrabold tracking-tight text-white">
                                {total_hires_all.toLocaleString()}+
                            </div>
                            <div className="text-sm font-semibold text-slate-400 uppercase tracking-wider">
                                Total Hires Done
                            </div>
                            <p className="text-xs text-slate-500 font-medium">
                                Direct employment contracts signed by registered sponsors in Dubai.
                            </p>
                        </div>
                    </div>
                </div>

                {/* Additional Trust Points */}
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6 pt-8 border-t border-white/10">
                    <div className="flex items-start space-x-3">
                        <Shield className="w-5 h-5 text-blue-400 shrink-0 mt-0.5" />
                        <div>
                            <h4 className="font-bold text-sm text-slate-200">MOHRE Compliant</h4>
                            <p className="text-xs text-slate-400 font-medium mt-1">Every direct hire follows official UAE regulations seamlessly.</p>
                        </div>
                    </div>
                    <div className="flex items-start space-x-3">
                        <Lock className="w-5 h-5 text-emerald-400 shrink-0 mt-0.5" />
                        <div>
                            <h4 className="font-bold text-sm text-slate-200">OCR Identity Checks</h4>
                            <p className="text-xs text-slate-400 font-medium mt-1">Passports and Emirates IDs are checked using secure AI technology.</p>
                        </div>
                    </div>
                    <div className="flex items-start space-x-3">
                        <Zap className="w-5 h-5 text-purple-400 shrink-0 mt-0.5" />
                        <div>
                            <h4 className="font-bold text-sm text-slate-200">Zero Agency Fees</h4>
                            <p className="text-xs text-slate-400 font-medium mt-1">Hire direct and save up to AED 15,000 on middleman charges.</p>
                        </div>
                    </div>
                </div>

                {/* CTA Box */}
                <div className="bg-gradient-to-br from-[#185FA5] to-blue-950 rounded-3xl p-8 sm:p-10 border border-blue-800 text-center relative overflow-hidden shadow-2xl space-y-6">
                    <div className="absolute -left-10 -bottom-10 w-64 h-64 bg-white/5 rounded-full blur-3xl pointer-events-none" />
                    <h2 className="text-2xl sm:text-3xl font-extrabold text-white">Start Direct Hiring Today</h2>
                    <p className="text-blue-100 text-sm max-w-xl mx-auto font-medium">
                        Join thousands of UAE sponsors who hire nannies, maids, cooks, and drivers directly and securely.
                    </p>
                    <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
                        <Link 
                            href="/employer/register" 
                            className="w-full sm:w-auto bg-white text-blue-900 hover:bg-slate-100 px-8 py-4 rounded-2xl font-black text-sm transition-all shadow-lg flex items-center justify-center space-x-2 group"
                        >
                            <span>Get Started Now</span>
                            <ArrowRight className="w-4 h-4 text-blue-900 group-hover:translate-x-1 transition-transform" />
                        </Link>
                    </div>
                </div>
            </main>

            {/* Footer */}
            <footer className="border-t border-white/5 bg-slate-950 py-8 text-center text-xs text-slate-500 font-medium">
                &copy; {new Date().getFullYear()} DirectMarket. All rights reserved. Compliant with UAE MOHRE guidelines.
            </footer>
        </div>
    );
}
