import React from 'react';
import { Head, Link } from '@inertiajs/react';
import EmployerLayout from '../../Layouts/EmployerLayout';
import { useTranslation } from '../../lib/LanguageContext';
import { 
    Bookmark, 
    MessageSquare, 
    CalendarDays, 
    CreditCard, 
    Search, 
    ArrowRight, 
    Heart, 
    CheckCircle2, 
    Info, 
    Clock, 
    ChevronRight,
    UserCircle2,
    Plus,
    Activity,
    TrendingUp,
    ShieldCheck,
    AlertTriangle,
    Star,
    Send,
    HelpCircle,
    UserCheck,
    Lock
} from 'lucide-react';

export default function Dashboard({ 
    employer, 
    stats, 
    shortlisted_workers, 
    recent_messages, 
    announcements, 
    recommended_workers = [], 
    saved_searches = [] 
}) {
    const isSubActive = employer.subscription_status === 'active';
    const isExpiringSoon = stats.days_remaining <= 7;
    const { t } = useTranslation();

    return (
        <EmployerLayout title={t('control_center', 'Sponsor Control Center')}>
            <Head title={t('dashboard_title', 'Sponsor Dashboard - Verified UAE Domestic Workers')} />

            <div className="space-y-8 pb-12">
                {/* 1. Alerts & Warning Banners */}
                {!isSubActive && (
                    <div className="bg-gradient-to-r from-rose-500/10 to-red-500/10 border border-rose-300 rounded-2xl p-5 flex flex-col sm:flex-row items-center justify-between shadow-sm animate-pulse gap-4">
                        <div className="flex items-center space-x-4">
                            <div className="w-12 h-12 rounded-2xl bg-rose-500/15 flex items-center justify-center text-rose-600 flex-shrink-0">
                                <Lock className="w-6 h-6" />
                            </div>
                            <div>
                                <h4 className="font-black text-sm text-slate-900">{t('expired_pass_title', 'Your Sponsor Subscription Pass Has Expired!')}</h4>
                                <p className="text-xs text-slate-500 font-bold mt-1">{t('expired_pass_desc', 'Direct communication, candidate dossiers, and messaging are locked. Renew your annual sponsor subscription now to resume hiring.')}</p>
                            </div>
                        </div>
                        <Link 
                            href="/employer/subscription"
                            className="bg-rose-600 hover:bg-rose-700 text-white px-5 py-3 rounded-xl text-xs font-black uppercase tracking-wider transition-all shadow-md shadow-rose-600/20 flex items-center space-x-1.5 shrink-0"
                        >
                            <span>{t('renew_sub', 'Renew Subscription')}</span>
                            <ArrowRight className="w-4 h-4" />
                        </Link>
                    </div>
                )}

                {isExpiringSoon && isSubActive && (
                    <div className="bg-gradient-to-r from-amber-500/10 to-orange-500/10 border border-amber-300 rounded-2xl p-4 flex items-center justify-between shadow-xs">
                        <div className="flex items-center space-x-3">
                            <div className="w-10 h-10 rounded-xl bg-amber-500/15 flex items-center justify-center text-amber-600 flex-shrink-0">
                                <AlertTriangle className="w-5 h-5 animate-pulse" />
                            </div>
                            <div>
                                <h4 className="font-bold text-sm text-slate-800">{t('expiring_pass_title', 'Your Premium Sponsor Pass is expiring soon!')}</h4>
                                <p className="text-xs text-slate-500 font-medium">
                                    {t('expiring_pass_desc', 'Only {days} days left. Renew now to avoid losing contact access to 500+ verified candidates.').replace('{days}', stats.days_remaining)}
                                </p>
                            </div>
                        </div>
                        <Link 
                            href="/employer/subscription"
                            className="bg-amber-600 hover:bg-amber-700 text-white px-4 py-2 rounded-xl text-xs font-bold transition-all shadow-sm flex items-center space-x-1"
                        >
                            <span>{t('renew_now', 'Renew Now')}</span>
                            <ArrowRight className="w-3.5 h-3.5" />
                        </Link>
                    </div>
                )}

                {/* Welcome Banner */}
                <div className="bg-gradient-to-br from-[#185FA5] via-[#104D89] to-blue-950 rounded-3xl p-6 sm:p-8 text-white shadow-md flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6 relative overflow-hidden select-none border border-blue-800">
                    <div className="absolute -right-10 -bottom-10 w-64 h-64 bg-white/5 rounded-full blur-3xl pointer-events-none" />
                    <div className="absolute left-1/3 top-1/4 w-32 h-32 bg-sky-400/10 rounded-full blur-2xl pointer-events-none" />
                    
                    <div className="space-y-4 z-10 max-w-2xl">
                        <div className="inline-flex items-center space-x-2 px-3 py-1 bg-white/10 rounded-full text-xs font-semibold backdrop-blur-md border border-white/10">
                            <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
                            <span>{t('sub_status', 'Subscription Status')}: <span className="text-emerald-300 font-bold uppercase">{employer.subscription_status}</span></span>
                            <span className="text-blue-300">|</span>
                            <span>{stats.days_remaining} {t('days_left', 'Days Left')}</span>
                        </div>

                        <h1 className="text-3xl sm:text-4xl font-black tracking-tight">
                            {t('welcome_back', 'Welcome Back')}, {employer.name}
                        </h1>

                        <p className="text-blue-100 text-sm leading-relaxed font-medium">
                            {t('welcome_desc_dash', 'Hire direct, MOHRE-compliant domestic workers with zero middleman commissions. Browse our updated database of candidates with OCR passport checks.')}
                        </p>
                    </div>

                    <div className="z-10 flex flex-wrap gap-3 flex-shrink-0">
                        <Link
                            href="/employer/workers"
                            className="bg-white text-[#185FA5] hover:bg-slate-100 px-6 py-3.5 rounded-xl font-bold text-xs shadow-md transition-all flex items-center justify-center space-x-2 group"
                        >
                            <Search className="w-4 h-4 text-[#185FA5] group-hover:scale-110 transition-transform" />
                            <span>{t('browse_workers', 'Browse 500+ Verified Workers')}</span>
                            <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                        </Link>
                    </div>
                </div>

                {/* 2. Top-level Stats & Analytics Grid */}
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                    {/* Subscription Pass status card */}
                    <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-xs flex flex-col justify-between space-y-4 relative group hover:border-[#185FA5] transition-all">
                        <div className="flex items-center justify-between">
                            <div className="w-12 h-12 rounded-xl bg-blue-50 text-[#185FA5] flex items-center justify-center flex-shrink-0 border border-blue-100 group-hover:scale-105 transition-transform">
                                <CreditCard className="w-6 h-6" />
                            </div>
                            <span className="text-[10px] font-black text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-md border border-emerald-100">
                                ACTIVE BILLING
                            </span>
                        </div>
                        <div>
                            <div className="text-xs font-semibold text-slate-400 uppercase tracking-widest">{t('sponsor_pass_tier', 'Sponsor Pass Tier')}</div>
                            <div className="text-lg font-bold text-slate-800 mt-1">{employer.plan_name}</div>
                            <div className="text-[11px] text-slate-500 font-medium mt-1">{t('renews', 'Renews')}: {employer.subscription_expires_at}</div>
                        </div>
                        <Link href="/employer/subscription" className="text-xs font-bold text-[#185FA5] hover:underline flex items-center space-x-1 pt-2 border-t border-slate-100">
                            <span>{t('manage_billing', 'Manage billing & invoices')}</span>
                            <ChevronRight className="w-3.5 h-3.5" />
                        </Link>
                    </div>

                    {/* Contacted Workers Stat Card */}
                    <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-xs flex flex-col justify-between space-y-4 relative group hover:border-[#185FA5] transition-all">
                        <div className="flex items-center justify-between">
                            <div className="w-12 h-12 rounded-xl bg-amber-50 text-amber-600 flex items-center justify-center flex-shrink-0 border border-amber-100 group-hover:scale-105 transition-transform">
                                <MessageSquare className="w-5 h-5" />
                            </div>
                            <span className="text-[10px] font-black text-amber-600 bg-amber-50 px-2 py-0.5 rounded-md border border-amber-100">
                                ENGAGED
                            </span>
                        </div>
                        <div>
                            <div className="text-xs font-semibold text-slate-400 uppercase tracking-widest">{t('contacted_workers_title', 'Contacted Workers')}</div>
                            <div className="text-3xl font-black text-slate-800 mt-1">{stats.contacted_workers_count}</div>
                            <div className="text-[11px] text-slate-500 font-medium mt-1">{t('active_conversations_sub', 'Active candidate chat channels')}</div>
                        </div>
                        <Link href="/employer/messages" className="text-xs font-bold text-[#185FA5] hover:underline flex items-center space-x-1 pt-2 border-t border-slate-100">
                            <span>{t('view_messages', 'Open message center')}</span>
                            <ChevronRight className="w-3.5 h-3.5" />
                        </Link>
                    </div>

                    {/* Hired Count Stat Card */}
                    <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-xs flex flex-col justify-between space-y-4 relative group hover:border-[#185FA5] transition-all">
                        <div className="flex items-center justify-between">
                            <div className="w-12 h-12 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center flex-shrink-0 border border-emerald-100 group-hover:scale-105 transition-transform">
                                <UserCheck className="w-5 h-5" />
                            </div>
                            <span className="text-[10px] font-black text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded-md border border-emerald-100">
                                HIRED SECURELY
                            </span>
                        </div>
                        <div>
                            <div className="text-xs font-semibold text-slate-400 uppercase tracking-widest">{t('total_hired_workers', 'Total Hired Workers')}</div>
                            <div className="text-3xl font-black text-slate-800 mt-1">{stats.hired_count}</div>
                            <div className="text-[11px] text-slate-500 font-medium mt-1">{t('direct_contracts', 'Direct contracts initiated')}</div>
                        </div>
                        <Link href="/employer/candidates" className="text-xs font-bold text-[#185FA5] hover:underline flex items-center space-x-1 pt-2 border-t border-slate-100">
                            <span>{t('track_active_staff', 'Track active staff')}</span>
                            <ChevronRight className="w-3.5 h-3.5" />
                        </Link>
                    </div>

                    {/* Shortlist Counter */}
                    <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-xs flex flex-col justify-between space-y-4 relative group hover:border-[#185FA5] transition-all">
                        <div className="flex items-center justify-between">
                            <div className="w-12 h-12 rounded-xl bg-purple-50 text-purple-600 flex items-center justify-center flex-shrink-0 border border-purple-100 group-hover:scale-105 transition-transform">
                                <Bookmark className="w-5 h-5" />
                            </div>
                            <span className="text-[10px] font-black text-purple-600 bg-purple-50 px-2 py-0.5 rounded-md border border-purple-100">
                                SAVED LIST
                            </span>
                        </div>
                        <div>
                            <div className="text-xs font-semibold text-slate-400 uppercase tracking-widest">{t('shortlisted_candidates', 'Shortlisted Candidates')}</div>
                            <div className="text-3xl font-black text-slate-800 mt-1">{stats.shortlisted_count}</div>
                            <div className="text-[11px] text-slate-500 font-medium mt-1">{t('bookmark_list', 'Bookmark list for interviews')}</div>
                        </div>
                        <Link href="/employer/shortlist" className="text-xs font-bold text-[#185FA5] hover:underline flex items-center space-x-1 pt-2 border-t border-slate-100">
                            <span>{t('open_shortlist', 'Open shortlist book')}</span>
                            <ChevronRight className="w-3.5 h-3.5" />
                        </Link>
                    </div>
                </div>

                {/* 3. Analytics & Quick Action Section */}
                <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
                    {/* Worker Activity Analytics Module (Col 8) */}
                    <div className="lg:col-span-8 bg-white p-6 rounded-3xl border border-slate-200 shadow-sm space-y-6">
                        <div className="pb-3 border-b border-slate-100">
                            <div className="flex items-center space-x-2">
                                <Activity className="w-5 h-5 text-[#185FA5]" />
                                <h3 className="font-extrabold text-base text-slate-900">{t('discover_insights', 'Discover Insights & Market Stats')}</h3>
                            </div>
                        </div>

                        <div className="space-y-6">
                            {/* Dubai General Market Stats */}
                            <div className="space-y-3">
                                <div className="text-[10px] font-black text-slate-400 uppercase tracking-widest pl-1">{t('dubai_insights', 'Dubai General Market Insights')}</div>
                                <div className="grid grid-cols-3 gap-4 text-center">
                                    <div className="p-4 bg-slate-50 rounded-2xl border border-slate-100 flex flex-col justify-between">
                                        <div className="text-xl font-black text-slate-900">1,284</div>
                                        <div className="text-[9px] text-slate-500 font-bold uppercase tracking-wider mt-1">{t('hired_dubai', 'Hired using app in Dubai')}</div>
                                    </div>
                                    <div className="p-4 bg-slate-50 rounded-2xl border border-slate-100 flex flex-col justify-between">
                                        <div className="text-xs font-black text-[#185FA5] uppercase leading-snug">{t('cooking_care', 'Cooking, Care, Driving')}</div>
                                        <div className="text-[9px] text-slate-500 font-bold uppercase tracking-wider mt-1">{t('top_skills', 'Top Skills Hired')}</div>
                                    </div>
                                    <div className="p-4 bg-slate-50 rounded-2xl border border-slate-100 flex flex-col justify-between">
                                        <div className="text-xl font-black text-emerald-600">1.4%</div>
                                        <div className="text-[9px] text-slate-500 font-bold uppercase tracking-wider mt-1">{t('turnover_rate', 'Turnover rate')}</div>
                                    </div>
                                </div>
                            </div>

                            {/* Your own activity */}
                            <div className="space-y-3">
                                <div className="text-[10px] font-black text-slate-400 uppercase tracking-widest pl-1">{t('sponsor_activity', 'Your Sponsor Activity Stats')}</div>
                                <div className="grid grid-cols-3 gap-4 text-center">
                                    <div className="p-4 bg-blue-50/30 rounded-2xl border border-blue-100/50 flex flex-col justify-between">
                                        <div className="text-2xl font-black text-slate-800">14</div>
                                        <div className="text-[9px] text-slate-500 font-bold uppercase tracking-wider mt-1">{t('workers_contacted', 'Workers Contacted')}</div>
                                    </div>
                                    <div className="p-4 bg-blue-50/30 rounded-2xl border border-blue-100/50 flex flex-col justify-between">
                                        <div className="text-2xl font-black text-slate-800">{stats.shortlisted_count}</div>
                                        <div className="text-[9px] text-slate-500 font-bold uppercase tracking-wider mt-1">{t('shortlist', 'Shortlist')}</div>
                                    </div>
                                    <div className="p-4 bg-blue-50/30 rounded-2xl border border-blue-100/50 flex flex-col justify-between">
                                        <div className="text-2xl font-black text-emerald-600">{stats.hired_count}</div>
                                        <div className="text-[9px] text-slate-500 font-bold uppercase tracking-wider mt-1">{t('secure_hires', 'Secure Hires')}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Quick Actions Panel (Col 4) */}
                    <div className="lg:col-span-4 bg-white p-6 rounded-3xl border border-slate-200 shadow-xs flex flex-col justify-between space-y-6">
                        <div className="space-y-1">
                            <h3 className="font-bold text-base text-slate-900">{t('quick_actions', 'Quick Actions')}</h3>
                            <p className="text-xs text-slate-500 font-medium">{t('speed_up', 'Speed up your sponsorship process.')}</p>
                        </div>

                        <div className="space-y-2.5 flex-1 py-2">
                            <Link 
                                href="/employer/workers?category=Childcare" 
                                className="w-full p-3.5 bg-slate-50 hover:bg-blue-50/50 border border-slate-200 hover:border-[#185FA5]/40 rounded-2xl transition-all flex items-center space-x-3 text-left group"
                            >
                                <div className="w-9 h-9 rounded-xl bg-purple-100/50 text-purple-600 flex items-center justify-center flex-shrink-0 group-hover:scale-105 transition-transform">
                                    <Star className="w-4 h-4" />
                                </div>
                                <div className="truncate">
                                    <div className="text-xs font-bold text-slate-800 group-hover:text-[#185FA5] transition-colors">{t('find_nannies', 'Find Baby Care & Nannies')}</div>
                                    <div className="text-[10px] text-slate-500 truncate">{t('browse_nannies', 'Browse premium verified nannies')}</div>
                                </div>
                            </Link>

                            <a 
                                href="https://wa.me/971501112222" 
                                target="_blank"
                                rel="noreferrer"
                                className="w-full p-3.5 bg-slate-50 hover:bg-emerald-50/30 border border-slate-200 hover:border-emerald-500/40 rounded-2xl transition-all flex items-center space-x-3 text-left group"
                            >
                                <div className="w-9 h-9 rounded-xl bg-emerald-100/50 text-emerald-600 flex items-center justify-center flex-shrink-0 group-hover:scale-105 transition-transform">
                                    <MessageSquare className="w-4 h-4" />
                                </div>
                                <div className="truncate">
                                    <div className="text-xs font-bold text-slate-800 group-hover:text-emerald-700 transition-colors flex items-center space-x-1">
                                        <span>{t('whatsapp_support', 'Direct WhatsApp Support')}</span>
                                        <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
                                    </div>
                                    <div className="text-[10px] text-slate-500 truncate">{t('chat_manager', 'Chat with a recruitment manager')}</div>
                                </div>
                            </a>
                        </div>

                        <div className="p-3 bg-emerald-50 border border-emerald-100 rounded-2xl text-[10px] text-emerald-800 font-bold flex items-center space-x-2">
                            <ShieldCheck className="w-4 h-4 text-emerald-600 flex-shrink-0" />
                            <span>{t('legal_platform', '100% Legal UAE Agency-Free Platform')}</span>
                        </div>
                    </div>
                </div>

                {/* 4. Detailed Workspace Rows (Col 12 Grid) */}
                <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
                    {/* Left Column: Recommended Workers, Shortlist, Chats */}
                    <div className="lg:col-span-8 space-y-8">

                        {/* My Shortlist Module */}
                        <div className="bg-white rounded-3xl border border-slate-200 shadow-xs p-6 space-y-6">
                            <div className="flex items-center justify-between">
                                <div className="flex items-center space-x-2">
                                    <Bookmark className="w-5 h-5 text-[#185FA5]" />
                                    <h3 className="font-bold text-base text-slate-900">{t('active_shortlist', 'Active Shortlist')} ({shortlisted_workers.length})</h3>
                                </div>
                                <Link href="/employer/shortlist" className="text-xs font-bold text-[#185FA5] hover:underline flex items-center space-x-0.5">
                                    <span>{t('view_book', 'View book')}</span>
                                    <ChevronRight className="w-4 h-4" />
                                </Link>
                            </div>

                            {shortlisted_workers?.length > 0 ? (
                                <div className="flex space-x-4 overflow-x-auto pb-2 scrollbar-thin">
                                    {shortlisted_workers.map((worker) => (
                                        <div key={worker.id} className="w-56 bg-slate-50 rounded-2xl p-4 border border-slate-200/70 flex-shrink-0 space-y-3 relative hover:border-[#185FA5] hover:bg-white transition-all">
                                            <div className="flex items-center space-x-3">
                                                <div className="w-10 h-10 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center font-bold text-base flex-shrink-0 border border-blue-200">
                                                    {worker.name.charAt(0)}
                                                </div>
                                                <div className="truncate">
                                                    <div className="font-bold text-sm text-slate-800 truncate flex items-center space-x-1">
                                                        <span>{worker.name}</span>
                                                        {worker.verified && <CheckCircle2 className="w-3.5 h-3.5 text-emerald-600 flex-shrink-0" />}
                                                    </div>
                                                    <div className="text-[10px] text-slate-500 truncate font-semibold">{worker.nationality}</div>
                                                </div>
                                            </div>

                                            <div className="space-y-1">
                                                <div className="text-[10px] font-semibold text-slate-400 uppercase tracking-tighter">{t('category', 'Category')}:</div>
                                                <div className="inline-block px-2 py-0.5 bg-white border border-slate-200 rounded-md text-xs font-semibold text-slate-700">
                                                    {worker.category || 'General Helper'}
                                                </div>
                                            </div>

                                            <Link 
                                                href={`/employer/workers/${worker.id}`}
                                                className="w-full mt-2 bg-white hover:bg-slate-50 text-[#185FA5] border border-slate-200 text-center rounded-lg py-1.5 text-[10px] font-black flex items-center justify-center transition-colors"
                                            >
                                                {t('open_profile', 'Open Profile')}
                                            </Link>
                                        </div>
                                    ))}
                                </div>
                            ) : (
                                <div className="text-center py-10 bg-slate-50 rounded-2xl border-2 border-dashed border-slate-200 space-y-2">
                                    <Bookmark className="w-8 h-8 text-slate-300 mx-auto" />
                                    <div className="text-xs font-bold text-slate-500">{t('shortlist_candidates_desc', 'Shortlist candidates to compare their documents side-by-side')}</div>
                                </div>
                            )}
                        </div>

                        {/* Recent Chats / Message Center */}
                        <div className="bg-white rounded-3xl border border-slate-200 shadow-xs p-6 space-y-6">
                            <div className="flex items-center justify-between">
                                <div className="flex items-center space-x-2">
                                    <MessageSquare className="w-5 h-5 text-[#185FA5]" />
                                    <h3 className="font-bold text-base text-slate-900">{t('recent_chats', 'Recent Chats')}</h3>
                                </div>
                                <Link href="/employer/messages" className="text-xs font-bold text-[#185FA5] hover:underline flex items-center space-x-0.5">
                                    <span>{t('all_channels', 'All channels')}</span>
                                    <ChevronRight className="w-4 h-4" />
                                </Link>
                            </div>

                            <div className="divide-y divide-slate-100">
                                {recent_messages?.length > 0 ? (
                                    recent_messages.map((msg) => (
                                        <Link
                                            key={msg.id}
                                            href={`/employer/messages/${msg.id}`}
                                            className="flex items-start space-x-4 py-4 hover:bg-slate-50 px-3 rounded-2xl transition-colors group"
                                        >
                                            <div className="w-10 h-10 rounded-xl bg-blue-50 text-[#185FA5] flex items-center justify-center font-bold text-sm flex-shrink-0 border border-blue-100">
                                                {msg.worker_name.charAt(0)}
                                            </div>
                                            <div className="flex-1 min-w-0">
                                                <div className="flex items-center justify-between">
                                                    <div className="font-bold text-xs text-slate-800 group-hover:text-[#185FA5] transition-colors truncate">
                                                        {msg.worker_name}
                                                    </div>
                                                    <div className="flex items-center space-x-2">
                                                        <span className="text-[9px] font-semibold text-slate-400">{msg.sent_at}</span>
                                                        {msg.unread && (
                                                            <span className="w-2 h-2 rounded-full bg-red-500 animate-pulse border border-white" />
                                                        )}
                                                    </div>
                                                </div>
                                                <p className="text-xs text-slate-600 truncate mt-0.5 font-medium">
                                                    {msg.last_message}
                                                </p>
                                            </div>
                                        </Link>
                                    ))
                                ) : (
                                    <div className="text-center py-8 text-xs text-slate-400">
                                        {t('no_chats', 'No recent chat logs found. Find workers to start conversing.')}
                                    </div>
                                )}
                            </div>
                        </div>
                    </div>

                    {/* Right Column: Saved Searches, Announcements, Regulatory details */}
                    <div className="lg:col-span-4 space-y-8">
                        {/* Charity Events Module */}
                        <div className="bg-white rounded-3xl border border-slate-200 shadow-xs p-6 space-y-6">
                            <div className="flex items-center justify-between">
                                <div className="flex items-center space-x-2">
                                    <Heart className="w-5 h-5 text-rose-500 fill-rose-500/20" />
                                    <h3 className="font-extrabold text-base text-slate-900">{t('charity_drives', 'Community Charity Drives')}</h3>
                                </div>
                                <span className="text-[9px] font-black bg-rose-50 text-rose-600 px-2 py-0.5 rounded-full uppercase tracking-wider">
                                    {t('live_events', 'Live Events')}
                                </span>
                            </div>

                            <div className="space-y-4">
                                {announcements?.map((ann) => (
                                    <div key={ann.id} className="p-4 bg-rose-50/20 border border-rose-100/70 rounded-2xl space-y-3 relative group hover:border-rose-300 hover:bg-white transition-all">
                                        <div className="flex items-center justify-between text-[9px] font-bold text-rose-600 uppercase tracking-wider">
                                            <span>❤️ {t('charity_drive', 'Charity Drive')}</span>
                                            <span>{ann.created_at}</span>
                                        </div>
                                        <div>
                                            <h4 className="font-black text-xs text-slate-900 tracking-tight group-hover:text-rose-600 transition-colors">{ann.title}</h4>
                                            <p className="text-[11px] text-slate-500 font-medium leading-relaxed mt-1">{ann.body}</p>
                                        </div>

                                        {/* Metas */}
                                        <div className="grid grid-cols-2 gap-2 text-[10px] bg-slate-50/60 p-2.5 rounded-xl border border-slate-100 font-bold text-slate-600">
                                            <div className="flex items-center space-x-1 truncate">
                                                <span>🎁</span>
                                                <span className="truncate">{t('provided_items', 'Provided Items')}: {ann.provided_items}</span>
                                            </div>
                                            <div className="flex items-center space-x-1 truncate">
                                                <span>📅</span>
                                                <span className="truncate">{t('event_date', 'Event Date')}: {ann.event_date}</span>
                                            </div>
                                        </div>

                                        {ann.location_pin && (
                                            <a
                                                href={ann.location_pin}
                                                target="_blank"
                                                rel="noopener noreferrer"
                                                className="w-full bg-white hover:bg-rose-50 text-rose-600 border border-rose-200 text-center rounded-lg py-1.5 text-[10px] font-black flex items-center justify-center space-x-1 transition-colors"
                                            >
                                                <span>📍 {t('open_maps', 'Open Google Maps Location Pin')}</span>
                                            </a>
                                        )}
                                    </div>
                                ))}
                            </div>
                        </div>

                        {/* Direct Sponsorship Compliance card */}
                        <div className="bg-gradient-to-br from-indigo-950 to-blue-900 rounded-3xl p-6 text-white border border-indigo-900 shadow-sm relative overflow-hidden space-y-4">
                            <div className="absolute right-0 top-0 w-24 h-24 bg-white/5 rounded-full blur-xl pointer-events-none" />
                            <div className="w-10 h-10 rounded-xl bg-white/10 flex items-center justify-center border border-white/10 text-white">
                                <ShieldCheck className="w-6 h-6 text-emerald-400" />
                            </div>
                            <div className="space-y-2">
                                <h4 className="font-bold text-sm tracking-tight text-white">{t('mohre_compliant', 'UAE Tadbeer & MOHRE Compliant')}</h4>
                                <p className="text-[11px] text-blue-200 leading-relaxed font-medium">
                                    {t('mohre_desc', 'Our direct contract system aligns automatically with the Ministry of Human Resources and Emiratisation guidelines. Fully legal, zero agent fees, complete transparency.')}
                                </p>
                            </div>
                            <div className="pt-2">
                                <a 
                                    href="https://www.mohre.gov.ae/" 
                                    target="_blank" 
                                    rel="noreferrer" 
                                    className="text-xs font-bold text-emerald-400 hover:text-emerald-300 flex items-center space-x-1"
                                >
                                    <span>{t('visit_mohre', 'Visit MOHRE UAE website')}</span>
                                    <ArrowRight className="w-3.5 h-3.5" />
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </EmployerLayout>
    );
}
