import React, { useState, useEffect } from 'react';
import { 
  Search, Menu, Phone, Mail, ChevronRight, 
  LogIn, Users, FileText, FileCheck, Upload, 
  Home, CheckCircle, Building, MapPin, AlertCircle,
  ChevronLeft, ArrowRight, X, Calendar, Globe, Image as ImageIcon,
  Loader, Plus, Trash2, Edit, Save, LayoutDashboard, LogOut,
  Bell, BarChart3, HelpCircle, Key, Settings, UserPlus, Lock, ShieldAlert,
  Info, Briefcase, ArrowUp, MessageCircle, List
} from 'lucide-react';

// --- CONSTANTS & DATA ---

// FIXED: Renamed to match state initialization
const INITIAL_SEARCH_OPTIONS = {
  version: ["Versi 2.0", "Versi 3.0"],
  category: ["Merit", "Terbuka", "Terus", "Bebas"],
  type: ["Rumah Selangorku", "Komersial Mampu Milik", "Kedai / Industri Mampu Milik"],
  district: ["Gombak", "Hulu Langat", "Hulu Selangor", "Klang", "Kuala Langat", "Kuala Selangor", "Petaling", "Sabak Bernam", "Sepang"]
};

const SEARCH_FIELDS = [
    { key: 'version', label: 'Versi Projek' },
    { key: 'category', label: 'Kategori' },
    { key: 'type', label: 'Jenis Projek' },
    { key: 'district', label: 'Daerah' }
];

const PROCESS_STEPS = [
  { id: 1, title: "Daftar", icon: Users, desc: "Daftar akaun pengguna" },
  { id: 2, title: "Mohon", icon: FileText, desc: "Pilih projek & mohon" },
  { id: 3, title: "Semakan", icon: FileCheck, desc: "Tapisan kelayakan LPHS" },
  { id: 4, title: "Dokumen", icon: Upload, desc: "Muat naik dokumen" },
  { id: 5, title: "Tawaran", icon: Mail, desc: "Terima surat tawaran" },
  { id: 6, title: "Miliki", icon: Home, desc: "Serahan kunci rumah" }
];

const STATISTICS = [
    { label: "Permohonan", value: "145,203", icon: FileText },
    { label: "Projek Lulus", value: "428", icon: CheckCircle },
    { label: "Unit Ditawar", value: "32,450", icon: Building },
    { label: "Pemilik", value: "28,900", icon: Key }
];

const FAQS = [
    { q: "Siapakah yang layak memohon Rumah Selangorku?", a: "Warganegara Malaysia berumur 18 tahun ke atas, pendapatan isi rumah tidak melebihi RM14,500, dan belum memiliki rumah di Selangor." },
    { q: "Berapa lama tempoh sah laku permohonan?", a: "Tempoh sah laku permohonan adalah selama 2 tahun. Pemohon perlu mengemaskini maklumat sekiranya terdapat perubahan." },
    { q: "Adakah saya boleh memilih lokasi rumah?", a: "Ya, pemohon boleh memilih daerah dan mukim yang dikehendaki semasa membuat permohonan dalam sistem." },
    { q: "Bagaimanakah cara untuk menyemak status permohonan?", a: "Status permohonan boleh disemak dengan log masuk ke akaun anda di portal ini dan melihat pada menu 'Semakan'." },
    { q: "Adakah saya perlu membayar sebarang yuran pendaftaran?", a: "Tiada sebarang yuran pendaftaran dikenakan oleh LPHS. Sila berhati-hati dengan pihak ketiga yang meminta bayaran." }
];

const INITIAL_AGENCIES = [
    { id: 1, name: "LPHS", logo: null }, 
    { id: 2, name: "MBSJ", logo: null },
    { id: 3, name: "MBSA", logo: null },
    { id: 4, name: "MPKj", logo: null },
    { id: 5, name: "MPSp", logo: null }
];

const INITIAL_PROJECTS = [
  { 
    id: 1, 
    title: "RUMAH SELANGORKU IDAMAN SARI", 
    developer: "Permodalan Negeri Selangor Bhd",
    location: "Puchong, Petaling",
    full_address: "PT 12345, Jalan Puchong Utama, 47100 Puchong, Selangor.",
    price: "RM 250,000.00",
    type: "Rumah Selangorku",
    status: "Buka",
    details: {
        pbt: "MBSJ", lease: "Leasehold", startDate: "2023-01-01", endDate: "2025-12-31",
        developer_contact: "03-5510 2477", developer_email: "sales@pnsb.com.my", developer_pic: "En. Azlan"
    },
    gallery: [
        "https://images.unsplash.com/photo-1580587771525-78b9dba3b91d?auto=format&fit=crop&q=80&w=600",
        "https://images.unsplash.com/photo-1613490493576-7fde63acd811?auto=format&fit=crop&q=80&w=600",
        "https://images.unsplash.com/photo-1512917774080-9991f1c4c750?auto=format&fit=crop&q=80&w=600"
    ]
  },
  { 
    id: 2, 
    title: "PANGSAPURI SERI KENANGA (JENIS C)", 
    developer: "Tetuan Hartanah Jaya Sdn Bhd",
    location: "Serendah, Hulu Selangor",
    full_address: "Lot 455, Mukim Serendah, Daerah Hulu Selangor.",
    price: "RM 150,000.00",
    type: "Rumah Selangorku",
    status: "Terhad",
    details: {
        pbt: "MPHS", lease: "Freehold", startDate: "2022-03-15", endDate: "2025-03-15",
        developer_contact: "03-6021 8888", developer_email: "enquiry@hartanahjaya.com", developer_pic: "Cik Sarah"
    },
    gallery: [
        "https://images.unsplash.com/photo-1570129477492-45c003edd2be?auto=format&fit=crop&q=80&w=600",
        "https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?auto=format&fit=crop&q=80&w=600",
        "https://images.unsplash.com/photo-1484154218962-a1c002085d2f?auto=format&fit=crop&q=80&w=600"
    ]
  },
  { 
    id: 3, 
    title: "RESIDENSI HARAPAN MULIA", 
    developer: "Cyberview Sdn Bhd",
    location: "Cyberjaya, Sepang",
    full_address: "Persiaran Apec, Cyber 8, 63000 Cyberjaya.",
    price: "RM 200,000.00",
    type: "Rumah Selangorku",
    status: "Buka",
    details: {
        pbt: "MPSp", lease: "Freehold", startDate: "2023-06-10", endDate: "2026-06-10",
        developer_contact: "03-8315 6111", developer_email: "sales@cyberview.com.my", developer_pic: "Mr. Tan"
    },
    gallery: [
        "https://images.unsplash.com/photo-1564013799919-ab600027ffc6?auto=format&fit=crop&q=80&w=600",
        "https://images.unsplash.com/photo-1574362848149-11496d93a7c7?auto=format&fit=crop&q=80&w=600",
        "https://images.unsplash.com/photo-1592595896551-12b371d546d5?auto=format&fit=crop&q=80&w=600"
    ]
  },
  { 
    id: 4, 
    title: "VISTA PERDANA", 
    developer: "Gamuda Land",
    location: "Kuala Langat",
    full_address: "Bandar Rimbayu, 42500 Telok Panglima Garang.",
    price: "RM 180,000.00",
    type: "Rumah Selangorku",
    status: "Buka",
    details: {
        pbt: "MPKL", lease: "Leasehold", startDate: "2023-10-10", endDate: "2026-10-10",
        developer_contact: "03-5112 3333", developer_email: "rimbayu@gamudaland.com.my", developer_pic: "En. Hakim"
    },
    gallery: [
        "https://images.unsplash.com/photo-1568605114967-8130f3a36994?auto=format&fit=crop&q=80&w=600",
        "https://images.unsplash.com/photo-1570129477492-45c003edd2be?auto=format&fit=crop&q=80&w=600",
        "https://images.unsplash.com/photo-1512915922686-57c11dde9b6b?auto=format&fit=crop&q=80&w=600"
    ]
  },
  { 
    id: 5, 
    title: "IDAMAN ABADI", 
    developer: "Tropicana Corp",
    location: "Kajang 2",
    full_address: "Persiaran Tropicana Heights, 43000 Kajang.",
    price: "RM 250,000.00",
    type: "Rumah Idaman",
    status: "Terhad",
    details: {
        pbt: "MPKj", lease: "Freehold", startDate: "2022-06-05", endDate: "2025-06-05",
        developer_contact: "03-8733 8888", developer_email: "enquiry@tropicanacorp.com.my", developer_pic: "Mr. Lee"
    },
    gallery: [
        "https://images.unsplash.com/photo-1600596542815-60c37c663045?auto=format&fit=crop&q=80&w=600",
        "https://images.unsplash.com/photo-1513584685908-95c9e2d01361?auto=format&fit=crop&q=80&w=600"
    ]
  },
  { 
    id: 6, 
    title: "SELANGORKU MAKMUR", 
    developer: "MBI Selangor",
    location: "Klang",
    full_address: "Jalan Meru, 41050 Klang.",
    price: "RM 42,000.00",
    type: "Rumah Selangorku",
    status: "Buka",
    details: {
        pbt: "MBDK", lease: "Leasehold", startDate: "2024-03-01", endDate: "2027-03-01",
        developer_contact: "03-3371 1111", developer_email: "sales@mbiselangor.com.my", developer_pic: "Cik Nurul"
    },
    gallery: ["https://images.unsplash.com/photo-1582268611958-ebfd161ef9cf?auto=format&fit=crop&q=80&w=600",
    "https://images.unsplash.com/photo-1584622050111-993a426fbf0a?auto=format&fit=crop&q=80&w=600"]
  },
  { 
    id: 7, 
    title: "PANGSAPURI MAWAR", 
    developer: "Eco World",
    location: "Semenyih, Hulu Langat",
    full_address: "Eco Majestic, 43500 Semenyih, Selangor.",
    price: "RM 100,000.00",
    type: "Rumah Selangorku",
    status: "Buka",
    details: {
        pbt: "MPKj", lease: "Freehold", startDate: "2023-09-15", endDate: "2026-09-15",
        developer_contact: "03-8723 2255", developer_email: "eco.majestic@ecoworld.my", developer_pic: "Mr. Chan"
    },
    gallery: [
        "https://images.unsplash.com/photo-1560185007-cde436f6a4d0?auto=format&fit=crop&q=80&w=600",
        "https://images.unsplash.com/photo-1560185893-a55cbc8c5768?auto=format&fit=crop&q=80&w=600"
    ]
  },
  { 
    id: 8, 
    title: "RESIDENSI BAYU", 
    developer: "Sime Darby Property",
    location: "Sg Besar",
    full_address: "Jalan Bernam, 45300 Sungai Besar, Selangor.",
    price: "RM 150,000.00",
    type: "Rumah Selangorku",
    status: "Buka",
    details: {
        pbt: "MDSB", lease: "Leasehold", startDate: "2023-11-20", endDate: "2026-11-20",
        developer_contact: "03-3224 2222", developer_email: "enquiry@simedarby.com", developer_pic: "En. Hafiz"
    },
    gallery: [
        "https://images.unsplash.com/photo-1568605114967-8130f3a36994?auto=format&fit=crop&q=80&w=600",
        "https://images.unsplash.com/photo-1570129477492-45c003edd2be?auto=format&fit=crop&q=80&w=600"
    ]
  }
];

// --- COMPONENTS ---

const ConditionsModal = ({ onClose }) => (
    <div className="fixed inset-0 z-[70] flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm animate-fade-in">
        <div className="bg-white w-full max-w-2xl rounded-lg shadow-2xl overflow-hidden relative">
            <div className="bg-[#d00000] px-6 py-4 flex justify-between items-center text-white">
                <h3 className="font-bold text-lg flex items-center gap-2"><CheckCircle className="text-white"/> Syarat Kelayakan Penuh</h3>
                <button onClick={onClose} className="hover:bg-white/20 p-1 rounded"><X size={24} /></button>
            </div>
            <div className="p-8 max-h-[80vh] overflow-y-auto">
                <div className="space-y-6">
                    <div>
                        <h4 className="font-bold text-gray-800 mb-2 border-b pb-2">1. Syarat Umum</h4>
                        <ul className="list-disc pl-5 text-sm text-gray-600 space-y-1">
                            <li>Warganegara Malaysia.</li>
                            <li>Berumur 18 tahun ke atas.</li>
                            <li>Pemohon dan pasangan tidak memiliki sebarang jenis rumah di Negeri Selangor.</li>
                            <li>Pemohon bujang yang mempunyai tanggungan keluarga layak memohon.</li>
                        </ul>
                    </div>
                    
                    <div>
                        <h4 className="font-bold text-gray-800 mb-2 border-b pb-2">2. Had Pendapatan Isi Rumah (Bulanan)</h4>
                        <div className="bg-gray-50 rounded p-4 border border-gray-200 text-sm">
                            <div className="grid grid-cols-2 gap-2 mb-2">
                                <span className="font-bold text-[#d00000]">Rumah Selangorku Jenis A</span>
                                <span>Tidak melebihi RM3,000.00</span>
                            </div>
                            <div className="grid grid-cols-2 gap-2 mb-2">
                                <span className="font-bold text-[#d00000]">Rumah Selangorku Jenis B, C, D, E</span>
                                <span>Tidak melebihi RM14,500.00</span>
                            </div>
                        </div>
                    </div>

                    <div className="bg-blue-50 p-4 rounded border border-blue-200 flex gap-3 items-start">
                        <Info className="text-blue-600 shrink-0 mt-1" size={20} />
                        <p className="text-xs text-blue-800 leading-relaxed">
                            Dokumen sokongan seperti penyata gaji, penyata KWSP, dan salinan kad pengenalan wajib dimuat naik semasa permohonan dibuat.
                        </p>
                    </div>
                </div>
            </div>
            <div className="p-4 border-t bg-gray-50 text-right">
                <button onClick={onClose} className="px-6 py-2 bg-gray-800 text-white rounded text-sm font-bold hover:bg-gray-900">Tutup</button>
            </div>
        </div>
    </div>
);

const AdminDashboard = ({ 
    projects, setProjects, 
    users, setUsers, 
    config, setConfig,
    agencies, setAgencies,
    searchOptions, setSearchOptions,
    onLogout 
}) => {
    const [activeTab, setActiveTab] = useState('projects');
    const [isEditing, setIsEditing] = useState(false);
    const [currentProject, setCurrentProject] = useState(null);
    const [previewImages, setPreviewImages] = useState([]);
    const [newUser, setNewUser] = useState({ username: '', password: '' });
    const [selectedField, setSelectedField] = useState('district');
    const [newValue, setNewValue] = useState('');

    // --- PROJECT HANDLERS ---
    const handleAddNew = () => {
        setCurrentProject({
            id: Date.now(),
            title: "", developer: "", location: "", full_address: "", price: "RM ", type: "Rumah Selangorku", status: "Buka",
            details: { pbt: "", lease: "Leasehold", startDate: "", endDate: "", developer_contact: "", developer_email: "", developer_pic: "" },
            gallery: []
        });
        setPreviewImages([]);
        setIsEditing(true);
    };

    const handleEdit = (project) => {
        setCurrentProject({ ...project });
        setPreviewImages(project.gallery || []);
        setIsEditing(true);
    };

    const handleDelete = (id) => {
        if (window.confirm("Adakah anda pasti mahu memadam projek ini?")) setProjects(prev => prev.filter(p => p.id !== id));
    };

    const handleSave = (e) => {
        e.preventDefault();
        const projectToSave = { ...currentProject, gallery: previewImages };
        setProjects(prev => {
            const exists = prev.find(p => p.id === projectToSave.id);
            return exists ? prev.map(p => p.id === projectToSave.id ? projectToSave : p) : [...prev, projectToSave];
        });
        setIsEditing(false);
    };

    const handleImageUpload = (e) => {
        if (e.target.files) {
            const files = Array.from(e.target.files);
            const newImages = files.map(file => URL.createObjectURL(file));
            setPreviewImages(prev => [...prev, ...newImages]);
        }
    };

    // --- USER HANDLERS ---
    const handleAddUser = () => {
        if(newUser.username && newUser.password) {
            setUsers([...users, { id: Date.now(), ...newUser }]);
            setNewUser({ username: '', password: '' });
            alert("Pengguna ditambah!");
        }
    };

    const handleDeleteUser = (id) => {
        if(window.confirm("Padam pengguna?")) setUsers(users.filter(u => u.id !== id));
    };

    // --- AGENCY HANDLERS ---
    const handleAgencyUpload = (e) => {
        if (e.target.files[0]) {
            const newAgency = {
                id: Date.now(),
                name: "Agensi Baru",
                logo: URL.createObjectURL(e.target.files[0])
            };
            setAgencies([...agencies, newAgency]);
        }
    };

    const handleDeleteAgency = (id) => {
        if(window.confirm("Padam agensi ini?")) setAgencies(agencies.filter(a => a.id !== id));
    };

    // --- SEARCH OPTIONS HANDLERS ---
    const handleAddSearchOption = () => {
        if (newValue.trim()) {
            setSearchOptions(prev => ({
                ...prev,
                [selectedField]: [...prev[selectedField], newValue]
            }));
            setNewValue('');
        }
    };

    const handleDeleteSearchOption = (valToDelete) => {
        if(window.confirm("Padam pilihan ini?")) {
            setSearchOptions(prev => ({
                ...prev,
                [selectedField]: prev[selectedField].filter(val => val !== valToDelete)
            }));
        }
    };

    // --- SETTING HANDLERS ---
    const handleLogoUpload = (e) => {
        if(e.target.files[0]) setConfig({...config, logo: URL.createObjectURL(e.target.files[0])});
    };
    
    const handleHeroUpload = (e) => {
        if(e.target.files[0]) setConfig({...config, heroImage: URL.createObjectURL(e.target.files[0])});
    };

    if (isEditing) {
        return (
            <div className="min-h-screen bg-gray-100 p-4 md:p-8 font-sans">
                <div className="max-w-4xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden">
                    <div className="bg-[#2d3436] px-6 py-4 flex justify-between items-center text-white">
                        <h2 className="font-bold text-lg flex items-center gap-2"><Edit size={20} /> {currentProject.title ? "Kemaskini Projek" : "Tambah Projek Baru"}</h2>
                        <button onClick={() => setIsEditing(false)} className="text-gray-400 hover:text-white"><X /></button>
                    </div>
                    <form onSubmit={handleSave} className="p-6 space-y-6">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div className="space-y-2"><label className="text-xs font-bold text-gray-500 uppercase">Nama Projek</label><input required type="text" className="w-full border p-2 rounded text-sm" value={currentProject.title} onChange={e => setCurrentProject({...currentProject, title: e.target.value})} /></div>
                            <div className="space-y-2"><label className="text-xs font-bold text-gray-500 uppercase">Nama Pemaju</label><input required type="text" className="w-full border p-2 rounded text-sm" value={currentProject.developer} onChange={e => setCurrentProject({...currentProject, developer: e.target.value})} /></div>
                            <div className="space-y-2"><label className="text-xs font-bold text-gray-500 uppercase">Lokasi (Daerah)</label><input required type="text" className="w-full border p-2 rounded text-sm" value={currentProject.location} onChange={e => setCurrentProject({...currentProject, location: e.target.value})} /></div>
                            <div className="space-y-2"><label className="text-xs font-bold text-gray-500 uppercase">Harga</label><input required type="text" className="w-full border p-2 rounded text-sm" value={currentProject.price} onChange={e => setCurrentProject({...currentProject, price: e.target.value})} /></div>
                            <div className="space-y-2"><label className="text-xs font-bold text-gray-500 uppercase">Status</label><select className="w-full border p-2 rounded text-sm" value={currentProject.status} onChange={e => setCurrentProject({...currentProject, status: e.target.value})}><option>Buka</option><option>Terhad</option><option>Penuh</option></select></div>
                            <div className="space-y-2"><label className="text-xs font-bold text-gray-500 uppercase">Jenis</label><select className="w-full border p-2 rounded text-sm" value={currentProject.type} onChange={e => setCurrentProject({...currentProject, type: e.target.value})}><option>Rumah Selangorku</option><option>Rumah Idaman</option></select></div>
                        </div>
                        <div className="border-t pt-6">
                            <h3 className="font-bold text-gray-800 mb-4 text-sm uppercase">Galeri</h3>
                            <div className="flex items-center gap-4 mb-4">
                                <label className="cursor-pointer bg-gray-100 border-2 border-dashed border-gray-300 rounded-lg p-4 flex flex-col items-center justify-center w-32 h-32 text-gray-500"><Upload size={24} /><span className="text-xs">Muat Naik</span><input type="file" multiple accept="image/*" className="hidden" onChange={handleImageUpload} /></label>
                                <div className="flex gap-4 overflow-x-auto pb-2">{previewImages.map((img, idx) => (<div key={idx} className="relative w-32 h-32 shrink-0 rounded border group"><img src={img} className="w-full h-full object-cover" alt="prev"/><button type="button" onClick={() => setPreviewImages(prev => prev.filter((_, i) => i !== idx))} className="absolute top-1 right-1 bg-red-600 text-white p-1 rounded-full opacity-0 group-hover:opacity-100"><X size={12} /></button></div>))}</div>
                            </div>
                        </div>
                        <div className="flex justify-end gap-3 pt-6 border-t">
                            <button type="button" onClick={() => setIsEditing(false)} className="px-6 py-2 rounded border text-gray-600 text-sm font-bold">Batal</button>
                            <button type="submit" className="px-6 py-2 rounded bg-[#d00000] text-white hover:bg-red-800 text-sm font-bold flex items-center gap-2"><Save size={16} /> Simpan</button>
                        </div>
                    </form>
                </div>
            </div>
        );
    }

    return (
        <div className="min-h-screen bg-gray-100 font-sans flex flex-col md:flex-row">
            <aside className="w-full md:w-64 bg-[#2d3436] text-white flex flex-col">
                <div className="p-6 border-b border-gray-700"><h1 className="font-bold text-xl text-[#ffcc00]">LPHS Admin</h1><p className="text-xs text-gray-400 mt-1">Sistem Pengurusan</p></div>
                <nav className="flex-1 p-4 space-y-2">
                    <button onClick={() => setActiveTab('projects')} className={`w-full flex items-center gap-3 px-4 py-3 rounded text-sm font-bold ${activeTab==='projects'?'bg-[#d00000]':'hover:bg-gray-700'}`}><LayoutDashboard size={18} /> Projek</button>
                    <button onClick={() => setActiveTab('search')} className={`w-full flex items-center gap-3 px-4 py-3 rounded text-sm font-bold ${activeTab==='search'?'bg-[#d00000]':'hover:bg-gray-700'}`}><List size={18} /> Carian</button>
                    <button onClick={() => setActiveTab('users')} className={`w-full flex items-center gap-3 px-4 py-3 rounded text-sm font-bold ${activeTab==='users'?'bg-[#d00000]':'hover:bg-gray-700'}`}><Users size={18} /> Pengguna</button>
                    <button onClick={() => setActiveTab('agencies')} className={`w-full flex items-center gap-3 px-4 py-3 rounded text-sm font-bold ${activeTab==='agencies'?'bg-[#d00000]':'hover:bg-gray-700'}`}><Briefcase size={18} /> Agensi</button>
                    <button onClick={() => setActiveTab('settings')} className={`w-full flex items-center gap-3 px-4 py-3 rounded text-sm font-bold ${activeTab==='settings'?'bg-[#d00000]':'hover:bg-gray-700'}`}><Settings size={18} /> Tetapan</button>
                </nav>
                <div className="p-4 border-t border-gray-700"><button onClick={onLogout} className="w-full flex items-center gap-2 text-gray-400 hover:text-white text-sm font-bold"><LogOut size={16} /> Log Keluar</button></div>
            </aside>
            <main className="flex-1 p-8 overflow-y-auto">
                
                {/* PROJECTS TAB */}
                {activeTab === 'projects' && (
                    <>
                        <div className="flex justify-between items-center mb-8"><h2 className="text-2xl font-bold text-gray-800">Senarai Projek Hartanah</h2><button onClick={handleAddNew} className="bg-[#2d3436] text-white px-4 py-2 rounded shadow flex items-center gap-2 font-bold text-sm"><Plus size={16} /> Tambah Projek</button></div>
                        <div className="bg-white rounded-lg shadow overflow-hidden">
                            <div className="overflow-x-auto">
                                <table className="w-full text-left border-collapse">
                                    <thead className="bg-gray-50 text-gray-500 text-xs uppercase font-bold"><tr><th className="p-4 border-b">ID</th><th className="p-4 border-b">Projek</th><th className="p-4 border-b">Lokasi</th><th className="p-4 border-b">Status</th><th className="p-4 border-b text-right">Tindakan</th></tr></thead>
                                    <tbody className="text-sm divide-y divide-gray-100">
                                        {projects.map((project) => (
                                            <tr key={project.id} className="hover:bg-gray-50">
                                                <td className="p-4 text-gray-400">#{project.id.toString().slice(-4)}</td>
                                                <td className="p-4 font-bold text-gray-800">{project.title}</td>
                                                <td className="p-4 text-gray-600">{project.location}</td>
                                                <td className="p-4"><span className={`px-2 py-1 rounded text-[10px] font-bold uppercase ${project.status === 'Buka' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'}`}>{project.status}</span></td>
                                                <td className="p-4 text-right space-x-2"><button onClick={() => handleEdit(project)} className="p-2 text-blue-600 hover:bg-blue-50 rounded"><Edit size={16} /></button><button onClick={() => handleDelete(project.id)} className="p-2 text-red-600 hover:bg-red-50 rounded"><Trash2 size={16} /></button></td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </>
                )}

                {/* CARIAN TAB (NEW) */}
                {activeTab === 'search' && (
                    <>
                        <div className="flex justify-between items-center mb-8"><h2 className="text-2xl font-bold text-gray-800">Pengurusan Carian</h2></div>
                        <div className="bg-white rounded-lg shadow p-6">
                            
                            {/* Selector */}
                            <div className="mb-6">
                                <label className="text-xs font-bold text-gray-500 uppercase block mb-2">Pilih Kategori untuk Disunting</label>
                                <div className="flex gap-2 overflow-x-auto pb-2">
                                    {SEARCH_FIELDS.map(field => (
                                        <button 
                                            key={field.key} 
                                            onClick={() => setSelectedField(field.key)}
                                            className={`px-4 py-2 rounded-full text-sm font-bold whitespace-nowrap transition-colors ${selectedField === field.key ? 'bg-[#d00000] text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
                                        >
                                            {field.label}
                                        </button>
                                    ))}
                                </div>
                            </div>

                            {/* Add New */}
                            <div className="flex gap-4 mb-6 border-b border-gray-100 pb-6">
                                <input 
                                    type="text" 
                                    value={newValue} 
                                    onChange={e => setNewValue(e.target.value)} 
                                    placeholder={`Tambah ${SEARCH_FIELDS.find(f => f.key === selectedField)?.label} baru...`}
                                    className="flex-1 border p-2 rounded text-sm"
                                />
                                <button onClick={handleAddSearchOption} className="bg-green-600 text-white px-6 py-2 rounded font-bold text-sm flex items-center gap-2 hover:bg-green-700"><Plus size={16}/> Tambah</button>
                            </div>

                            {/* List */}
                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                {searchOptions[selectedField]?.map((option, index) => (
                                    <div key={index} className="flex justify-between items-center p-3 bg-gray-50 rounded border border-gray-200 group">
                                        <span className="text-sm font-medium text-gray-700">{option}</span>
                                        <button onClick={() => handleDeleteSearchOption(option)} className="text-gray-400 hover:text-red-600 opacity-0 group-hover:opacity-100 transition-opacity"><Trash2 size={16}/></button>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </>
                )}

                {/* USERS TAB */}
                {activeTab === 'users' && (
                    <>
                        <div className="flex justify-between items-center mb-8"><h2 className="text-2xl font-bold text-gray-800">Pengurusan Admin</h2></div>
                        <div className="bg-white p-6 rounded-lg shadow-sm mb-8 border border-gray-200">
                            <h3 className="font-bold text-gray-800 mb-4 flex items-center gap-2"><UserPlus size={18}/> Tambah Admin Baru</h3>
                            <div className="flex gap-4 items-end">
                                <div className="space-y-1 flex-1"><label className="text-xs font-bold text-gray-500 uppercase">ID Pengguna</label><input type="text" value={newUser.username} onChange={e=>setNewUser({...newUser, username: e.target.value})} className="w-full border p-2 rounded text-sm" /></div>
                                <div className="space-y-1 flex-1"><label className="text-xs font-bold text-gray-500 uppercase">Kata Laluan</label><input type="text" value={newUser.password} onChange={e=>setNewUser({...newUser, password: e.target.value})} className="w-full border p-2 rounded text-sm" /></div>
                                <button onClick={handleAddUser} className="bg-[#d00000] text-white px-6 py-2 rounded font-bold text-sm h-10">Tambah</button>
                            </div>
                        </div>
                        <div className="bg-white rounded-lg shadow overflow-hidden">
                            <table className="w-full text-left border-collapse">
                                <thead className="bg-gray-50 text-gray-500 text-xs uppercase font-bold"><tr><th className="p-4 border-b">ID</th><th className="p-4 border-b">Kata Laluan</th><th className="p-4 border-b text-right">Tindakan</th></tr></thead>
                                <tbody className="text-sm divide-y divide-gray-100">{users.map(u => (<tr key={u.id} className="hover:bg-gray-50"><td className="p-4 font-bold">{u.username}</td><td className="p-4 text-gray-500 font-mono">{u.password}</td><td className="p-4 text-right"><button onClick={()=>handleDeleteUser(u.id)} className="text-red-600 hover:bg-red-50 px-3 py-1 rounded text-xs font-bold border border-red-200">Padam</button></td></tr>))}</tbody>
                            </table>
                        </div>
                    </>
                )}

                {/* AGENCIES TAB */}
                {activeTab === 'agencies' && (
                    <>
                        <div className="flex justify-between items-center mb-8"><h2 className="text-2xl font-bold text-gray-800">Agensi Kerjasama</h2></div>
                        <div className="bg-white p-8 rounded-lg shadow-sm mb-8 border border-gray-200 text-center">
                            <label className="cursor-pointer inline-flex flex-col items-center gap-2">
                                <div className="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-200 transition-colors"><Upload size={24}/></div>
                                <span className="text-sm font-bold text-[#d00000]">Muat Naik Logo Baru</span>
                                <input type="file" accept="image/*" className="hidden" onChange={handleAgencyUpload} />
                            </label>
                        </div>
                        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
                            {agencies.map(agency => (
                                <div key={agency.id} className="bg-white border rounded-lg p-4 flex flex-col items-center relative group hover:shadow-md transition-all">
                                    <button onClick={() => handleDeleteAgency(agency.id)} className="absolute top-2 right-2 bg-red-600 text-white p-1 rounded-full opacity-0 group-hover:opacity-100 transition-opacity"><X size={12}/></button>
                                    {agency.logo ? <img src={agency.logo} className="h-12 w-auto object-contain mb-2" /> : <div className="h-12 w-24 bg-gray-200 rounded flex items-center justify-center text-xs font-bold text-gray-500 mb-2">{agency.name}</div>}
                                    <span className="text-[10px] font-bold text-gray-500 uppercase">{agency.name}</span>
                                </div>
                            ))}
                        </div>
                    </>
                )}

                {/* SETTINGS TAB */}
                {activeTab === 'settings' && (
                    <>
                        <div className="flex justify-between items-center mb-8"><h2 className="text-2xl font-bold text-gray-800">Tetapan Sistem</h2></div>
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                            <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
                                <h3 className="font-bold text-gray-800 mb-6 border-b pb-2">Maklumat Utama</h3>
                                <div className="space-y-4">
                                    <div className="space-y-2"><label className="text-xs font-bold text-gray-500 uppercase">Tajuk Portal</label><input type="text" value={config.name} onChange={e => setConfig({...config, name: e.target.value})} className="w-full border p-2 rounded text-sm"/></div>
                                    <div className="space-y-2"><label className="text-xs font-bold text-gray-500 uppercase">No. WhatsApp</label><input type="text" value={config.whatsapp} onChange={e => setConfig({...config, whatsapp: e.target.value})} className="w-full border p-2 rounded text-sm"/></div>
                                </div>
                            </div>
                            <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
                                <h3 className="font-bold text-gray-800 mb-6 border-b pb-2">Gambar & Logo</h3>
                                <div className="space-y-6">
                                    <div className="flex items-center gap-4"><img src={config.logo} className="w-16 h-16 object-contain border rounded bg-gray-50" /><div><p className="text-xs font-bold text-gray-500 uppercase mb-1">Logo Portal</p><input type="file" accept="image/*" onChange={handleLogoUpload} className="text-xs" /></div></div>
                                    <div className="flex items-center gap-4"><img src={config.heroImage} className="w-24 h-16 object-cover border rounded" /><div><p className="text-xs font-bold text-gray-500 uppercase mb-1">Gambar Utama</p><input type="file" accept="image/*" onChange={handleHeroUpload} className="text-xs" /></div></div>
                                </div>
                            </div>
                        </div>
                    </>
                )}
            </main>
        </div>
    );
};

// --- PUBLIC COMPONENTS ---

const Header = ({ config, onLoginRequest }) => (
  <header className="bg-white border-b border-gray-200 sticky top-0 z-50">
    <div className="bg-[#f8f9fa] border-b border-gray-100 py-1 hidden md:block">
      <div className="max-w-[1200px] mx-auto px-4 flex justify-end items-center gap-4 text-xs text-gray-500">
         <span>Portal Rasmi Kerajaan Negeri Selangor</span><span>|</span><span className="flex items-center gap-1"><Phone size={12} /> +603-5510 2177</span>
      </div>
    </div>
    <div className="max-w-[1200px] mx-auto px-4 py-4">
      <div className="flex justify-between items-center">
        <div className="flex items-center gap-3">
           <img src={config.logo} className="h-14 w-auto drop-shadow-sm" alt="Logo" />
           <div className="h-10 w-[1px] bg-gray-300 mx-2 hidden sm:block"></div>
           <div>
             <h1 className="text-lg md:text-xl font-extrabold text-[#d00000] leading-none tracking-tight whitespace-pre-wrap">{config.name}</h1>
             <p className="text-[10px] text-gray-500 uppercase tracking-widest font-semibold mt-1 hidden md:block">Lembaga Perumahan dan Hartanah Selangor</p>
           </div>
        </div>
        <div className="hidden lg:flex items-center gap-2">
           {["Laman Utama", "Maklumat", "Manual", "Muat Turun", "Hubungi Kami"].map(link => <a key={link} href="#" className="px-3 py-2 text-sm font-bold text-gray-600 hover:text-[#d00000] transition-colors uppercase text-[11px] tracking-wide">{link}</a>)}
        </div>
        <button className="lg:hidden text-gray-600"><Menu size={28} /></button>
      </div>
    </div>
  </header>
);

const HeroSection = ({ config }) => (
    <section className="relative h-[500px] md:h-[600px] bg-gray-200 overflow-hidden group">
        <img src={config.heroImage} className="w-full h-full object-cover" alt="Banner" />
        <div className="absolute inset-0 flex items-center justify-between px-4 lg:px-12 z-10 pointer-events-none">
             <button className="bg-black/20 text-white p-3 rounded-full hover:bg-black/50 pointer-events-auto transition-colors backdrop-blur-sm opacity-0 group-hover:opacity-100"><ChevronLeft size={28} /></button>
             <button className="bg-black/20 text-white p-3 rounded-full hover:bg-black/50 pointer-events-auto transition-colors backdrop-blur-sm opacity-0 group-hover:opacity-100"><ChevronRight size={28} /></button>
        </div>
        <div className="absolute bottom-12 w-full flex justify-center gap-2.5 z-10">
            <div className="w-2.5 h-2.5 bg-[#d00000] rounded-full shadow-sm cursor-pointer"></div>
            <div className="w-2.5 h-2.5 bg-white/70 rounded-full shadow-sm hover:bg-white cursor-pointer transition-colors"></div>
        </div>
        <div className="absolute bottom-0 w-full bg-[#2d3436]/95 text-white py-3 z-20 backdrop-blur-sm border-t border-white/10 shadow-lg">
             <div className="max-w-[1200px] mx-auto px-4 flex items-center gap-4">
                 <span className="bg-[#d00000] text-[10px] font-bold px-3 py-1 rounded uppercase shrink-0 animate-pulse text-white">Terkini</span>
                 <div className="text-xs truncate font-medium text-gray-200">Pemberitahuan: Sistem akan mengalami penyelenggaraan berjadual pada 12 Disember 2024.</div>
             </div>
        </div>
    </section>
);

const SearchWidget = ({ whatsappNumber, searchOptions }) => {
  const [criteria, setCriteria] = useState({ version: '', category: '', type: '', district: '' });
  
  const handleSearch = () => {
    if (!criteria.version || !criteria.category || !criteria.type || !criteria.district) { 
        alert("Sila pilih sekurang-kurangnya satu kriteria carian."); 
        return; 
    }

    const message = 
        `Salam, saya berminat untuk membuat semakan projek hartanah dengan kriteria berikut:%0a%0a` +
        `📌 *Versi Projek:* ${criteria.version || 'Semua'}%0a` +
        `📌 *Kategori:* ${criteria.category || 'Semua'}%0a` +
        `📌 *Jenis Projek:* ${criteria.type || 'Semua'}%0a` +
        `📌 *Daerah:* ${criteria.district || 'Semua'}%0a%0a` +
        `Mohon bantuan pihak tuan/puan untuk semakan lanjut. Terima kasih.`;
        
    window.open(`https://wa.me/${whatsappNumber}?text=${message}`, '_blank');
  };

  const handleReset = () => {
      setCriteria({ version: '', category: '', type: '', district: '' });
  };

  return (
      <div className="bg-white rounded-lg shadow-xl border-t-4 border-[#d00000] p-8 -mt-10 relative z-20 mx-4 lg:mx-0">
         <div className="flex flex-col md:flex-row justify-between mb-6 border-b border-gray-100 pb-4"><h3 className="text-xl font-bold text-gray-800 flex items-center gap-2"><Search className="text-[#d00000]" /> Carian Projek Hartanah</h3></div>
         <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            {SEARCH_FIELDS.map((field) => (
                <div key={field.key} className="space-y-2">
                    <label className="text-xs font-bold text-gray-600 uppercase">{field.label}</label>
                    <select 
                        value={criteria[field.key]} 
                        onChange={e=>setCriteria({...criteria, [field.key]: e.target.value})} 
                        className="w-full border p-2.5 text-sm rounded focus:ring-1 focus:ring-[#d00000] outline-none"
                    >
                        <option value="">Pilih</option>
                        {searchOptions[field.key]?.map(o=><option key={o} value={o}>{o}</option>)}
                    </select>
                </div>
            ))}
         </div>
         <div className="flex justify-end gap-3">
            <button onClick={handleReset} className="text-gray-500 text-sm font-bold px-4 py-2 hover:text-gray-800">Set Semula</button>
            <button onClick={handleSearch} className="bg-[#25D366] hover:bg-[#128C7E] text-white px-6 py-2.5 rounded font-bold text-sm shadow-md flex items-center gap-2 transition-colors">
                <MessageCircle size={18} /> Hantar WhatsApp
            </button>
        </div>
      </div>
  );
};

const FAQSection = () => {
    const [showAll, setShowAll] = useState(false);
    const visibleFaqs = showAll ? FAQS : FAQS.slice(0, 3);
    
    const allFaqs = [
        ...FAQS,
        { q: "Bagaimanakah cara untuk menyemak status permohonan?", a: "Status permohonan boleh disemak dengan log masuk ke akaun anda di portal ini dan melihat pada menu 'Semakan'." },
        { q: "Adakah saya perlu membayar sebarang yuran pendaftaran?", a: "Tiada sebarang yuran pendaftaran dikenakan oleh LPHS. Sila berhati-hati dengan pihak ketiga yang meminta bayaran." },
        { q: "Bolehkah saya memohon jika saya bekerja sendiri?", a: "Boleh. Anda perlu menyertakan dokumen sokongan pendapatan seperti penyata bank 6 bulan terkini dan pendaftaran perniagaan (SSM) jika ada." }
    ];
    
    const displayFaqs = showAll ? allFaqs : allFaqs.slice(0, 3);

    return (
        <section className="py-16 bg-white border-t border-gray-200">
            <div className="max-w-[1000px] mx-auto px-4">
                <h3 className="text-2xl font-bold text-center text-gray-800 mb-10">Soalan Lazim</h3>
                <div className="space-y-4">
                    {displayFaqs.map((faq, i) => (
                        <div key={i} className="border border-gray-200 rounded-lg p-5 hover:shadow-md transition-shadow cursor-pointer bg-gray-50">
                            <h4 className="font-bold text-gray-800 mb-2 flex items-start gap-3"><HelpCircle size={20} className="text-[#d00000] shrink-0 mt-0.5" /> {faq.q}</h4>
                            <p className="text-sm text-gray-600 ml-8">{faq.a}</p>
                        </div>
                    ))}
                </div>
                <div className="text-center mt-8">
                    <button onClick={() => setShowAll(!showAll)} className="text-[#d00000] font-bold text-sm border-b border-[#d00000] pb-1 hover:text-red-800 transition-colors">
                        {showAll ? "Tutup Soalan Lazim" : "Lihat Lagi Soalan Lazim"}
                    </button>
                </div>
            </div>
        </section>
    );
};

const AgenciesSection = ({ agencies }) => (
    <section className="py-12 bg-gray-100 border-t border-gray-200">
        <div className="max-w-[1200px] mx-auto px-4 text-center">
            <h4 className="text-xs font-bold text-gray-500 uppercase tracking-widest mb-8">Agensi Kerjasama</h4>
            <div className="flex flex-wrap justify-center gap-8 opacity-60 grayscale hover:grayscale-0 transition-all">
                {agencies?.map(agency => (
                    agency.logo ? 
                    <img key={agency.id} src={agency.logo} className="h-12 w-auto object-contain" alt={agency.name} /> :
                    <div key={agency.id} className="h-12 w-32 bg-gray-300 rounded flex items-center justify-center font-bold text-gray-500 text-xs">{agency.name}</div>
                ))}
            </div>
        </div>
    </section>
);

const ProjectModal = ({ project, onClose }) => {
    if (!project) return null;
    const images = project.gallery && project.gallery.length > 0 ? project.gallery : ["https://images.unsplash.com/photo-1580587771525-78b9dba3b91d?auto=format&fit=crop&q=80&w=600"];
    const details = project.details || {}; 

    const handleWhatsApp = () => {
        const phone = "60186609796";
        const message = `Salam, saya berminat untuk mengetahui lebih lanjut mengenai projek *${project.title}* oleh *${project.developer}*.`;
        window.open(`https://wa.me/${phone}?text=${encodeURIComponent(message)}`, '_blank');
    };

    return (
        <div className="fixed inset-0 z-[60] flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm animate-fade-in">
            <div className="bg-white w-full max-w-5xl rounded-lg shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
                <div className="bg-white border-b border-gray-200 px-6 py-4 flex justify-between items-start">
                    <div><h2 className="text-xl md:text-2xl font-bold text-[#d00000] uppercase leading-tight mb-1">{project.title}</h2><p className="text-xs text-gray-500 flex items-center gap-1"><MapPin size={12} /> {project.full_address}</p></div>
                    <button onClick={onClose} className="text-gray-400 hover:text-[#d00000]"><X size={24} /></button>
                </div>
                <div className="overflow-y-auto p-6 bg-gray-50">
                    <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                        <div className="lg:col-span-2 space-y-6">
                            <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
                                <h3 className="font-bold text-gray-800 border-l-4 border-[#ffcc00] pl-3 mb-4 text-sm uppercase">Maklumat Projek</h3>
                                <div className="grid grid-cols-1 md:grid-cols-2 gap-y-4 gap-x-8 text-sm">
                                    <div><p className="text-xs text-gray-500 mb-1">Harga Bermula</p><p className="font-bold text-lg text-[#d00000]">{project.price}</p></div>
                                    <div><p className="text-xs text-gray-500 mb-1">Jenis Projek</p><p className="font-bold text-gray-800">{project.type}</p></div>
                                    <div><p className="text-xs text-gray-500 mb-1">PBT</p><p className="font-medium text-gray-700">{details.pbt || '-'}</p></div>
                                    <div><p className="text-xs text-gray-500 mb-1">Pegangan</p><p className="font-medium text-gray-700">{details.lease || '-'}</p></div>
                                    <div><p className="text-xs text-gray-500 mb-1">Jangka Mula</p><div className="flex items-center gap-2 font-medium text-gray-700"><Calendar size={14} className="text-gray-400" /> {details.startDate || '-'}</div></div>
                                    <div><p className="text-xs text-gray-500 mb-1">Jangka Siap</p><div className="flex items-center gap-2 font-medium text-gray-700"><Calendar size={14} className="text-gray-400" /> {details.endDate || '-'}</div></div>
                                </div>
                            </div>
                            <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
                                <h3 className="font-bold text-gray-800 border-l-4 border-blue-600 pl-3 mb-4 text-sm uppercase flex items-center gap-2">Galeri Projek</h3>
                                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                                    {images.map((img, index) => (
                                        <div key={index} className="aspect-video bg-gray-100 rounded-lg overflow-hidden border border-gray-200"><img src={img} className="w-full h-full object-cover" alt="Gallery" /></div>
                                    ))}
                                </div>
                            </div>
                        </div>
                        <div className="lg:col-span-1">
                            <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-100 h-full">
                                <h3 className="font-bold text-gray-800 border-l-4 border-gray-800 pl-3 mb-6 text-sm uppercase">Maklumat Pemaju</h3>
                                <div className="space-y-6">
                                    <div><p className="text-xs text-gray-500 uppercase font-bold mb-1">Nama Pemaju</p><p className="text-sm font-bold text-gray-800 leading-tight">{project.developer}</p></div>
                                    <div><p className="text-xs text-gray-500 uppercase font-bold mb-1">No. Telefon</p><p className="text-sm text-[#d00000] font-bold">{details.developer_contact || '-'}</p></div>
                                    <div><p className="text-xs text-gray-500 uppercase font-bold mb-1">Emel</p><p className="text-sm text-blue-600 break-all">{details.developer_email || '-'}</p></div>
                                    <button onClick={handleWhatsApp} className="w-full bg-[#25D366] hover:bg-[#128C7E] text-white py-3 rounded text-sm font-bold transition-colors flex items-center justify-center gap-2 shadow-sm">
                                        <MessageCircle size={18} /> Hubungi via WhatsApp
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

const ProjectCard = ({ project, onSelect }) => {
   const imageSrc = project.gallery && project.gallery.length > 0 ? project.gallery[0] : "https://images.unsplash.com/photo-1580587771525-78b9dba3b91d?auto=format&fit=crop&q=80&w=600";
   return (
      <div className="bg-white border border-gray-200 rounded-lg hover:shadow-xl transition-all duration-300 overflow-hidden flex flex-col group">
          <div className="h-48 bg-gray-200 relative overflow-hidden">
              <img src={imageSrc} className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" alt="Project" />
              <div className="absolute top-3 right-3 bg-[#ffcc00] text-black text-[10px] font-bold px-2.5 py-1 rounded shadow-sm uppercase tracking-wide">{project.status}</div>
              <div className="absolute bottom-3 left-3 text-white"><span className="text-[10px] bg-[#d00000] px-2 py-0.5 rounded mb-1 inline-block">{project.type}</span></div>
          </div>
          <div className="p-5 flex flex-col flex-grow">
              <h4 onClick={() => onSelect(project)} className="text-gray-900 font-bold text-sm mb-3 line-clamp-2 leading-snug group-hover:text-[#d00000] transition-colors cursor-pointer">{project.title}</h4>
              <div className="space-y-3 text-xs text-gray-600 mb-6 flex-grow border-t border-gray-50 pt-3">
                  <p className="flex items-start gap-2"><Building size={14} className="mt-0.5 text-[#d00000] shrink-0" /><span className="font-medium">{project.developer}</span></p>
                  <p className="flex items-start gap-2"><MapPin size={14} className="mt-0.5 text-[#d00000] shrink-0" /><span>{project.location}</span></p>
              </div>
              <div className="pt-4 border-t border-gray-100 flex justify-between items-end">
                  <div><p className="text-[10px] text-gray-400 uppercase">Harga Mula</p><span className="text-[#d00000] font-bold text-lg leading-none">{project.price}</span></div>
                  <button onClick={() => onSelect(project)} className="text-white text-xs font-bold bg-gray-900 px-4 py-2 rounded hover:bg-[#d00000] transition-colors">Lihat</button>
              </div>
          </div>
      </div>
   );
};

// --- FLOATING CONTROLS ---
const FloatingControls = ({ whatsappNumber }) => {
    const [showScrollTop, setShowScrollTop] = useState(false);

    useEffect(() => {
        const checkScroll = () => {
            if (window.scrollY > 300) setShowScrollTop(true);
            else setShowScrollTop(false);
        };
        window.addEventListener('scroll', checkScroll);
        return () => window.removeEventListener('scroll', checkScroll);
    }, []);

    const scrollToTop = () => {
        window.scrollTo({ top: 0, behavior: 'smooth' });
    };

    return (
        <div className="fixed bottom-6 right-6 flex flex-col gap-3 z-40">
            <a 
                href={`https://wa.me/${whatsappNumber}`} 
                target="_blank" 
                rel="noreferrer"
                className="bg-[#25D366] hover:bg-[#128C7E] text-white p-3 rounded-full shadow-lg transition-transform hover:scale-110 flex items-center justify-center"
            >
                <MessageCircle size={24} />
            </a>
            {showScrollTop && (
                <button 
                    onClick={scrollToTop}
                    className="bg-gray-800 hover:bg-gray-900 text-white p-3 rounded-full shadow-lg transition-all animate-fade-in hover:scale-110"
                >
                    <ArrowUp size={24} />
                </button>
            )}
        </div>
    );
};

// --- MAIN APP COMPONENT ---

export default function App() {
  const [view, setView] = useState('public');
  const [projects, setProjects] = useState(INITIAL_PROJECTS);
  const [selectedProject, setSelectedProject] = useState(null);
  const [visibleCount, setVisibleCount] = useState(6);
  const [showConditions, setShowConditions] = useState(false);
  const [adminUser, setAdminUser] = useState('');
  const [adminPass, setAdminPass] = useState('');
  const [isLockedOut, setIsLockedOut] = useState(false);
  const [loginAttempts, setLoginAttempts] = useState(0);
  const [captcha, setCaptcha] = useState({ q: "5 + 3", a: 8 });
  const [captchaInput, setCaptchaInput] = useState('');
  
  // Admin State Management
  const [users, setUsers] = useState([{id: 1, username: 'admin', password: 'admin'}]);
  const [agencies, setAgencies] = useState(INITIAL_AGENCIES);
  const [searchOptions, setSearchOptions] = useState(INITIAL_SEARCH_OPTIONS); // NEW: Search Options State
  const [config, setConfig] = useState({
      name: "SISTEM PERMOHONAN HARTANAH \nNEGERI SELANGOR",
      logo: "https://upload.wikimedia.org/wikipedia/commons/e/ee/Coat_of_arms_of_Selangor.svg",
      heroImage: "https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80&w=2000",
      whatsapp: "60186609796"
  });

  useEffect(() => {
    generateCaptcha();
  }, []);

  const generateCaptcha = () => {
    const a = Math.floor(Math.random() * 10);
    const b = Math.floor(Math.random() * 10);
    setCaptcha({ q: `${a} + ${b}`, a: a + b });
    setCaptchaInput('');
  };

  const handleAdminLogin = (e) => {
      e.preventDefault();
      if (isLockedOut) return;

      if (parseInt(captchaInput) !== captcha.a) {
          alert("Captcha salah! Sila cuba lagi.");
          generateCaptcha();
          return;
      }

      const user = users.find(u => u.username === adminUser && u.password === adminPass);
      if (user) {
          setView('admin');
          setLoginAttempts(0);
      } else {
          const newAttempts = loginAttempts + 1;
          setLoginAttempts(newAttempts);
          alert(`ID atau Kata Laluan salah! Percubaan ${newAttempts}/3`);
          if (newAttempts >= 3) {
              setIsLockedOut(true);
              alert("Akaun dikunci selama 30 saat kerana terlalu banyak percubaan gagal.");
              setTimeout(() => {
                  setIsLockedOut(false);
                  setLoginAttempts(0);
              }, 30000);
          }
      }
  };

  const handleAdminLogout = () => {
      setView('public');
      setAdminUser('');
      setAdminPass('');
  };

  if (view === 'admin') {
      return (
          <AdminDashboard 
            projects={projects} 
            setProjects={setProjects} 
            users={users} 
            setUsers={setUsers} 
            config={config} 
            setConfig={setConfig}
            agencies={agencies}
            setAgencies={setAgencies}
            searchOptions={searchOptions} // NEW
            setSearchOptions={setSearchOptions} // NEW
            onLogout={handleAdminLogout} 
          />
      );
  }
  
  if (view === 'login') return (
      <div className="min-h-screen bg-gray-900 flex items-center justify-center p-4">
          <div className="bg-white rounded-lg shadow-2xl p-8 w-full max-w-md relative">
              <button onClick={() => setView('public')} className="absolute top-4 right-4 text-gray-400 hover:text-black"><X /></button>
              <div className="text-center mb-8">
                  <h2 className="text-2xl font-bold text-gray-800">Log Masuk Admin</h2>
                  <p className="text-sm text-gray-500">Sistem Pengurusan LPHS</p>
              </div>
              
              {isLockedOut ? (
                  <div className="bg-red-50 text-red-700 p-4 rounded-lg flex items-center gap-3 mb-4">
                      <ShieldAlert size={24} />
                      <div>
                          <p className="font-bold">Akaun Dikunci</p>
                          <p className="text-xs">Sila tunggu 30 saat.</p>
                      </div>
                  </div>
              ) : (
                  <form onSubmit={handleAdminLogin} className="space-y-6">
                      <div>
                          <label className="text-xs font-bold text-gray-500 uppercase mb-1 block">ID Pengguna</label>
                          <input type="text" className="w-full border p-3 rounded" value={adminUser} onChange={e => setAdminUser(e.target.value)} placeholder="Masukkan ID" />
                      </div>
                      <div>
                          <label className="text-xs font-bold text-gray-500 uppercase mb-1 block">Kata Laluan</label>
                          <input type="password" className="w-full border p-3 rounded" value={adminPass} onChange={e => setAdminPass(e.target.value)} placeholder="Masukkan Kata Laluan" />
                      </div>
                      <div>
                          <label className="text-xs font-bold text-gray-500 uppercase mb-1 block">Soalan Keselamatan: {captcha.q} = ?</label>
                          <input type="number" className="w-full border p-3 rounded" value={captchaInput} onChange={e => setCaptchaInput(e.target.value)} placeholder="Jawapan" />
                      </div>
                      <button className="w-full bg-[#d00000] text-white py-3 rounded font-bold hover:bg-red-800">Masuk</button>
                  </form>
              )}
          </div>
      </div>
  );

  return (
    <div className="min-h-screen bg-[#f4f6f9] font-sans text-gray-800">
      <Header config={config} onLoginRequest={() => setView('login')} />
      <HeroSection config={config} />
      
      {selectedProject && <ProjectModal project={selectedProject} onClose={() => setSelectedProject(null)} />}
      {showConditions && <ConditionsModal onClose={() => setShowConditions(false)} />}
      
      {/* Floating Controls */}
      <FloatingControls whatsappNumber={config.whatsapp} />

      <div className="max-w-[1200px] mx-auto pb-20 px-4">
          <SearchWidget whatsappNumber={config.whatsapp} searchOptions={searchOptions} />
          
          <section className="mt-16">
              <div className="text-center mb-16">
                  <h2 className="text-3xl font-bold text-gray-800 relative inline-block pb-4">Proses Permohonan<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-16 h-1 bg-[#d00000]"></div></h2>
                  <p className="text-gray-500 mt-2 text-sm">Panduan langkah demi langkah untuk memiliki kediaman anda</p>
              </div>
              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
                  {PROCESS_STEPS.map(step => {
                      const Icon = step.icon;
                      return (
                          <div key={step.id} className="flex flex-col items-center text-center p-4 hover:-translate-y-1 transition-transform bg-white rounded shadow-sm group">
                              <div className="w-12 h-12 bg-[#d00000] text-white rounded-full flex items-center justify-center mb-3"><Icon size={20}/></div>
                              <h4 className="font-bold text-sm">{step.title}</h4>
                              <p className="text-xs text-gray-500 mt-1">{step.desc}</p>
                          </div>
                      );
                  })}
              </div>
          </section>

          <section className="mt-24 grid grid-cols-1 lg:grid-cols-12 gap-8">
              <div className="lg:col-span-4">
                  <div className="bg-white rounded-lg shadow-md border-t-4 border-[#ffcc00] p-6">
                      <h3 className="text-lg font-bold text-gray-800 flex items-center gap-2 mb-6"><CheckCircle className="text-[#ffcc00] fill-current" /> Syarat Kelayakan</h3>
                      <ul className="space-y-4">
                          {[{t:"Warganegara", d:"Malaysia"}, {t:"Umur", d:"18 Tahun Ke Atas"}, {t:"Pendapatan", d:"Tidak Lebih RM14,500"}].map((c, i) => (
                              <li key={i} className="text-sm border-b pb-2"><span className="font-bold block text-gray-700">{c.t}</span><span className="text-gray-500">{c.d}</span></li>
                          ))}
                      </ul>
                      <div className="mt-6 text-center">
                          <button 
                              onClick={() => setShowConditions(true)} 
                              className="text-[#d00000] font-bold text-xs uppercase border border-[#d00000] px-4 py-2 rounded hover:bg-[#d00000] hover:text-white w-full transition-colors"
                          >
                              Baca Syarat Penuh
                          </button>
                      </div>
                  </div>
              </div>
              <div className="lg:col-span-8">
                   <div className="flex justify-between items-center mb-6 bg-white p-4 rounded shadow-sm border-l-4 border-[#d00000]">
                       <h3 className="text-lg font-bold text-gray-800">Senarai Projek Terkini</h3>
                   </div>
                   <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                       {projects.slice(0, visibleCount).map((project) => (
                           <ProjectCard key={project.id} project={project} onSelect={setSelectedProject} />
                       ))}
                   </div>
                   {visibleCount < projects.length && (
                        <div className="mt-12 flex justify-center w-full">
                            <button
                                onClick={() => setVisibleCount(prev => prev + 6)}
                                className="bg-white border border-gray-300 hover:border-[#d00000] text-gray-700 hover:text-[#d00000] px-8 py-3 rounded-full font-bold text-sm shadow-sm flex items-center justify-center gap-2 transition-all active:scale-95 w-full sm:w-auto"
                            >
                                <Loader size={16} className="animate-spin" />
                                <span>Muat Lebih Banyak</span>
                            </button>
                        </div>
                   )}
              </div>
          </section>

          <FAQSection />
          <AgenciesSection agencies={agencies} />
      </div>
      
      <footer className="bg-[#1e272e] text-gray-400 text-sm border-t-4 border-[#d00000]">
          <div className="max-w-[1200px] mx-auto px-4 py-16">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
                  <div><h4 className="text-white font-bold text-sm mb-6 uppercase tracking-wider border-b border-gray-600 pb-2 inline-block">Hubungi Kami</h4><div className="space-y-4 text-xs"><p className="flex items-center gap-3"><Phone size={16} className="text-[#ffcc00]"/> +603-5510 2177</p><p className="flex items-center gap-3"><Mail size={16} className="text-[#ffcc00]"/> aduan.korporat@lphs.gov.my</p></div></div>
                  
                  {/* STATISTICS RESTORED TO FOOTER with nice Grid */}
                  <div>
                      <h4 className="text-white font-bold text-sm mb-6 uppercase tracking-wider border-b border-gray-600 pb-2 inline-block">Statistik Semasa</h4>
                      <div className="grid grid-cols-2 gap-3">
                          {STATISTICS.map((stat, i) => {
                              const Icon = stat.icon;
                              return (
                                  <div key={i} className="bg-white/5 p-3 rounded-lg border border-white/5 hover:bg-white/10 transition-colors group cursor-pointer">
                                      <div className="flex items-center gap-2 mb-1">
                                          <Icon size={14} className="text-gray-400 group-hover:text-[#ffcc00] transition-colors"/>
                                          <span className="text-[10px] text-gray-400 uppercase tracking-wider">{stat.label}</span>
                                      </div>
                                      <span className="block text-[#ffcc00] font-bold font-mono text-lg">{stat.value}</span>
                                  </div>
                              )
                          })}
                      </div>
                  </div>
              </div>
          </div>
          <div className="bg-[#111] py-5 border-t border-white/5 text-center relative">
              <p className="text-[10px] uppercase">© 2024 Lembaga Perumahan dan Hartanah Selangor.</p>
              <div className="text-center mt-4">
                  <button onClick={() => setView('login')} className="text-xs text-gray-600 hover:text-white underline">Admin Login</button>
              </div>
          </div>
      </footer>
    </div>
  );
}