import React from 'react';
import { Head, Link } from '@inertiajs/react';
import EmployerMobileLayout from './Layouts/EmployerMobileLayout';
import { Check, ShieldCheck, Zap, Star, Trophy } from 'lucide-react';

export default function EmployerSubscription() {
    const plans = [
        { 
            id: 'basic', 
            name: 'Basic Search', 
            price: '99', 
            icon: Zap, 
            color: 'bg-slate-50 text-slate-400',
            features: ['Browse 500+ workers', 'Shortlist up to 10', 'Email support'] 
        },
        { 
            id: 'premium', 
            name: 'Premium Pass', 
            price: '199', 
            icon: Star, 
            color: 'bg-blue-50 text-blue-600',
            popular: true,
            features: ['Unlimited shortlisting', 'Direct messaging', 'Priority profile view', '24/7 Support'] 
        },
        { 
            id: 'vip', 
            name: 'VIP Concierge', 
            price: '499', 
            icon: Trophy, 
            color: 'bg-amber-50 text-amber-500',
            features: ['Assigned manager', 'Medical guarantee', 'Replacement warranty', 'Legal assistance'] 
        },
    ];

    return (
        <EmployerMobileLayout>
            <Head title="Subscription" />
            
            <div className="p-6 space-y-8">
                {/* Header */}
                <div className="text-center space-y-2 py-4">
                    <h1 className="text-2xl font-bold tracking-tight">Choose Your Plan</h1>
                    <p className="text-sm text-slate-500 font-medium max-w-[250px] mx-auto">Select a package that fits your hiring needs.</p>
                </div>

                {/* Plan Cards Stacked */}
                <div className="space-y-6 pb-20">
                    {plans.map((plan) => (
                        <div key={plan.id} className={`bg-white rounded-[32px] p-8 border shadow-sm relative overflow-hidden transition-all active:scale-[0.98] ${
                            plan.popular ? 'border-[#141B34] border-2 shadow-xl' : 'border-slate-100'
                        }`}>
                            {plan.popular && (
                                <div className="absolute top-0 right-0 bg-[#141B34] text-white px-6 py-1.5 rounded-bl-2xl text-[9px] font-black uppercase tracking-widest">
                                    Most Popular
                                </div>
                            )}

                            <div className="space-y-6">
                                <div className="flex items-center space-x-4">
                                    <div className={`w-14 h-14 rounded-2xl flex items-center justify-center ${plan.color}`}>
                                        <plan.icon className="w-7 h-7" />
                                    </div>
                                    <div className="space-y-1">
                                        <h3 className="text-lg font-bold">{plan.name}</h3>
                                        <div className="flex items-baseline space-x-1">
                                            <span className="text-2xl font-black text-slate-900">{plan.price}</span>
                                            <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">AED / Mo</span>
                                        </div>
                                    </div>
                                </div>

                                <div className="space-y-4">
                                    {plan.features.map((feature, i) => (
                                        <div key={i} className="flex items-center space-x-3">
                                            <div className="w-5 h-5 rounded-full bg-emerald-50 flex items-center justify-center">
                                                <Check className="w-3 h-3 text-emerald-500" strokeWidth={3} />
                                            </div>
                                            <span className="text-xs text-slate-600 font-medium">{feature}</span>
                                        </div>
                                    ))}
                                </div>

                                <button className={`w-full py-4 rounded-2xl font-bold text-sm uppercase tracking-widest transition-all ${
                                    plan.popular 
                                        ? 'bg-[#141B34] text-white shadow-lg' 
                                        : 'bg-slate-50 text-slate-900 hover:bg-slate-100'
                                }`}>
                                    Select {plan.name}
                                </button>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </EmployerMobileLayout>
    );
}
