import React from 'react';
import { Head, Link } from '@inertiajs/react';
import { 
    Home, 
    MessageCircle, 
    User, 
    Compass,
    Bell,
    Calendar,
    ChevronRight,
    Megaphone,
    Search,
    ArrowLeft,
    Clock
} from 'lucide-react';

export default function WorkerAnnouncements() {
    const announcements = [
        { id: 1, title: "NEW PLATFORM UPDATE", date: "2 HOURS AGO", text: "We have simplified the verification process for all workers. Check your profile for details.", category: "SYSTEM" },
        { id: 2, title: "SAFETY GUIDELINES", date: "YESTERDAY", text: "Please review our updated safety protocols for household interviews.", category: "SECURITY" },
        { id: 3, title: "RAMADAN HOURS", date: "2 DAYS AGO", text: "Special support hours during the holy month of Ramadan have been updated.", category: "GENERAL" },
    ];

    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 pb-24">
            <Head title="Updates" />
            
            {/* Header */}
            <div className="px-6 pt-12 pb-6 bg-white sticky top-0 z-50">
                <div className="relative">
                    <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
                    <input
                        type="text"
                        placeholder="Search updates..."
                        className="w-full pl-12 pr-6 py-4 bg-[#F8FAFC] border-none rounded-2xl text-[11px] font-black uppercase tracking-tight shadow-sm focus:ring-4 focus:ring-blue-100 outline-none transition-all"
                    />
                </div>
            </div>

            <div className="flex-1 px-6 space-y-6 overflow-y-auto">
                {/* Section Title */}
                <div className="flex items-center space-x-2 pt-4 px-1">
                    <Megaphone className="w-4 h-4 text-[#185FA5]" />
                    <h2 className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">Latest Updates</h2>
                </div>

                {/* Cards */}
                <div className="space-y-6 pb-10">
                    {announcements.map((item) => (
                        <div key={item.id} className="bg-white p-8 rounded-[40px] border border-slate-100 shadow-xl shadow-slate-200/40 space-y-4 active:scale-[0.98] transition-all">
                            <div className="flex items-center justify-between">
                                <span className="bg-blue-50 text-[#185FA5] px-4 py-1.5 rounded-full text-[9px] font-black uppercase tracking-[0.1em]">{item.category}</span>
                                <div className="flex items-center text-[9px] font-black text-slate-300 uppercase tracking-widest">
                                    <Calendar className="w-3 h-3 mr-1.5" /> {item.date}
                                </div>
                            </div>
                            <div className="space-y-3">
                                <h3 className="font-black text-slate-900 text-[13px] uppercase tracking-tight leading-tight">{item.title}</h3>
                                <p className="text-xs text-slate-500 leading-relaxed font-medium">{item.text}</p>
                            </div>
                            <button className="flex items-center text-[10px] font-black text-[#185FA5] uppercase tracking-[0.1em] pt-2">
                                Read More <ChevronRight className="w-3 h-3 ml-1" />
                            </button>
                        </div>
                    ))}
                </div>
            </div>

            {/* Bottom Navigation */}
            <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 px-6 py-4 flex items-center justify-between z-50">
                <Link href="/mobile/worker/home" className="flex flex-col items-center space-y-1 text-slate-300">
                    <Home className="w-5 h-5" />
                    <span className="text-[8px] font-black uppercase tracking-tight">Home</span>
                </Link>
                <Link href="/mobile/worker/explore" className="flex flex-col items-center space-y-1 text-slate-300">
                    <Compass className="w-5 h-5" />
                    <span className="text-[8px] font-black uppercase tracking-tight">Explore</span>
                </Link>
                <Link href="/mobile/worker/announcements" className="flex flex-col items-center space-y-1 text-[#185FA5]">
                    <Bell className="w-5 h-5 fill-current" />
                    <span className="text-[8px] font-black uppercase tracking-tight">Updates</span>
                </Link>
                <Link href="/mobile/worker/chat" className="flex flex-col items-center space-y-1 text-slate-300">
                    <MessageCircle className="w-5 h-5" />
                    <span className="text-[8px] font-black uppercase tracking-tight">Chat</span>
                </Link>
                <Link href="/mobile/worker/profile" className="flex flex-col items-center space-y-1 text-slate-300">
                    <User className="w-5 h-5" />
                    <span className="text-[8px] font-black uppercase tracking-tight">Profile</span>
                </Link>
            </div>
        </div>
    );
}

