import React, { useState, useEffect } from 'react';
import {
  School,
  ShieldCheck,
  UploadCloud,
  Image as ImageIcon,
  CheckCircle2,
  AlertCircle,
  LogOut,
  User,
  ExternalLink,
  Plus,
  Trash2,
  Eye,
  EyeOff,
  X,
  Bell,
  Calendar,
  Database,
  ArrowUpRight,
  Sparkles,
  Lock,
  ChevronRight,
  Activity,
  Server,
  Users,
  FileText,
  MessageSquare,
  Send,
  Clock,
  Laptop,
  Search,
  Edit3,
  GraduationCap,
  RotateCcw,
  Key,
  Copy,
  Check,
  Palette,
  Settings,
  RefreshCw,
  Globe,
  Sliders,
  Paintbrush
} from 'lucide-react';

interface GTKRecord {
  id: number;
  nama: string;
  nuptk: string;
  npk: string;
  nik: string;
  passwordEmisGtk: string;
  jabatan: string;
  mapel: string;
  statusPegawai: string;
  sertifikasi: string;
  statusSimpatika: string;
  jtm: number;
  pendidikan: string;
  tmt: string;
  noHp: string;
}

interface PhotoRecord {
  id: number;
  title: string;
  category: string;
  date: string;
  url: string;
  caption: string;
}

interface AnnouncementRecord {
  id: number;
  title: string;
  date: string;
  category: string;
  urgent: boolean;
  text: string;
}

type ThemeKey = 'emerald' | 'indigo' | 'amber' | 'blue' | 'rose';

interface ThemeConfig {
  name: string;
  primary: string;
  accentBg: string;
  accentText: string;
  accentBorder: string;
  accentBadge: string;
  gradientBtn: string;
  glowBg: string;
  glowHero: string;
  activeTab: string;
  previewColor: string;
}

const themeMap: Record<ThemeKey, ThemeConfig> = {
  emerald: {
    name: 'Emerald Green (Klasik)',
    primary: 'emerald',
    accentBg: 'bg-emerald-500 hover:bg-emerald-400',
    accentText: 'text-emerald-400',
    accentBorder: 'border-emerald-500/30',
    accentBadge: 'bg-emerald-950 text-emerald-400 border-emerald-500/40',
    gradientBtn: 'from-emerald-400 to-teal-500 hover:from-emerald-300 hover:to-teal-400',
    glowBg: 'bg-emerald-600/15',
    glowHero: 'bg-emerald-500/10',
    activeTab: 'bg-emerald-500 text-slate-950 shadow-emerald-500/20',
    previewColor: 'bg-emerald-500'
  },
  indigo: {
    name: 'Indigo Cyber',
    primary: 'indigo',
    accentBg: 'bg-indigo-500 hover:bg-indigo-400',
    accentText: 'text-indigo-400',
    accentBorder: 'border-indigo-500/30',
    accentBadge: 'bg-indigo-950 text-indigo-400 border-indigo-500/40',
    gradientBtn: 'from-indigo-400 to-purple-500 hover:from-indigo-300 hover:to-purple-400',
    glowBg: 'bg-indigo-600/15',
    glowHero: 'bg-indigo-500/10',
    activeTab: 'bg-indigo-500 text-slate-950 shadow-indigo-500/20',
    previewColor: 'bg-indigo-500'
  },
  amber: {
    name: 'Islamic Gold Amber',
    primary: 'amber',
    accentBg: 'bg-amber-500 hover:bg-amber-400',
    accentText: 'text-amber-400',
    accentBorder: 'border-amber-500/30',
    accentBadge: 'bg-amber-950 text-amber-400 border-amber-500/40',
    gradientBtn: 'from-amber-400 to-yellow-500 hover:from-amber-300 hover:to-yellow-400',
    glowBg: 'bg-amber-600/15',
    glowHero: 'bg-amber-500/10',
    activeTab: 'bg-amber-500 text-slate-950 shadow-amber-500/20',
    previewColor: 'bg-amber-500'
  },
  blue: {
    name: 'Ocean Azure Blue',
    primary: 'sky',
    accentBg: 'bg-sky-500 hover:bg-sky-400',
    accentText: 'text-sky-400',
    accentBorder: 'border-sky-500/30',
    accentBadge: 'bg-sky-950 text-sky-400 border-sky-500/40',
    gradientBtn: 'from-sky-400 to-blue-500 hover:from-sky-300 hover:to-blue-400',
    glowBg: 'bg-sky-600/15',
    glowHero: 'bg-sky-500/10',
    activeTab: 'bg-sky-500 text-slate-950 shadow-sky-500/20',
    previewColor: 'bg-sky-500'
  },
  rose: {
    name: 'Crimson Rose Premium',
    primary: 'rose',
    accentBg: 'bg-rose-500 hover:bg-rose-400',
    accentText: 'text-rose-400',
    accentBorder: 'border-rose-500/30',
    accentBadge: 'bg-rose-950 text-rose-400 border-rose-500/40',
    gradientBtn: 'from-rose-400 to-pink-500 hover:from-rose-300 hover:to-pink-400',
    glowBg: 'bg-rose-600/15',
    glowHero: 'bg-rose-500/10',
    activeTab: 'bg-rose-500 text-slate-950 shadow-rose-500/20',
    previewColor: 'bg-rose-500'
  }
};

export default function App() {
  // State Autentikasi & Tampilan
  const [isAdminLoggedIn, setIsAdminLoggedIn] = useState<boolean>(false);
  const [currentView, setCurrentView] = useState<'public' | 'admin' | 'login'>('public');
  const [adminTab, setAdminTab] = useState<'database-gtk' | 'upload-foto' | 'pengumuman' | 'update-website'>('database-gtk');
  const [loginEmail, setLoginEmail] = useState<string>('alwikahfi');
  const [loginPassword, setLoginPassword] = useState<string>('operator123');
  const [loginError, setLoginError] = useState<string>('');

  // Config Website Kustom & Tema Dinamis
  const [activeTheme, setActiveTheme] = useState<ThemeKey>('emerald');
  const [siteConfig, setSiteConfig] = useState({
    schoolName: 'MA MAMBAUL HIKMAH',
    subTitle: 'Sistem Informasi Data Pokok Madrasah & Ekosistem IT',
    heroTitle: 'Integrasi Layanan Data & Ekosistem Digital Madrasah',
    heroSubtitle: 'Portal resmi pengelolaan data Guru & Tenaga Kependidikan (GTK), akses server Rapor Digital Madrasah (RDM), serta pengaduan verval data peserta didik secara langsung.',
    runningAnnouncement: 'Selamat datang di Portal Operator MA Mambaul Hikmah. Layanan data terpadu EMIS 4.0, SIMPATIKA, & RDM Aktif.',
    whatsappNumber: '6281234567890',
    lastUpdated: '03 Sep 2026, 08:30 WIB'
  });

  // State Form Update Website di Admin Panel
  const [tempConfig, setTempConfig] = useState({ ...siteConfig });
  const [tempTheme, setTempTheme] = useState<ThemeKey>('emerald');
  const [isUpdatingSite, setIsUpdatingSite] = useState<boolean>(false);

  // Dynamic style object helper
  const theme = themeMap[activeTheme];

  // Jam Operasional Digital
  const [timeString, setTimeString] = useState<string>('');
  useEffect(() => {
    const updateTimer = () => {
      const now = new Date();
      setTimeString(
        now.toLocaleTimeString('id-ID', {
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
          hour12: false
        }) + ' WIB'
      );
    };
    updateTimer();
    const interval = setInterval(updateTimer, 1000);
    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    try {
      const path = window.location.pathname || '';
      const hash = window.location.hash || '';
      if (path.endsWith('/login') || hash === '#/login' || hash === '#login') {
        setCurrentView('login');
      }
    } catch {
      // Safe fallback
    }

    const handlePopState = () => {
      try {
        const path = window.location.pathname || '';
        const hash = window.location.hash || '';
        if (path.endsWith('/login') || hash === '#/login' || hash === '#login') {
          setCurrentView('login');
        } else if (!isAdminLoggedIn) {
          setCurrentView('public');
        }
      } catch {
        // Safe fallback
      }
    };

    window.addEventListener('popstate', handlePopState);
    return () => window.removeEventListener('popstate', handlePopState);
  }, [isAdminLoggedIn]);

  // State Notifikasi Toast
  const [toast, setToast] = useState<{ show: boolean; message: string; type: 'success' | 'error' | 'info' }>({
    show: false,
    message: '',
    type: 'success'
  });

  const showToast = (message: string, type: 'success' | 'error' | 'info' = 'success') => {
    setToast({ show: true, message, type });
    setTimeout(() => {
      setToast({ show: false, message: '', type: 'success' });
    }, 3500);
  };

  // State Visibilitas Password EMIS GTK di Admin Table
  const [visiblePasswords, setVisiblePasswords] = useState<{ [id: number]: boolean }>({});
  const [copiedId, setCopiedId] = useState<number | null>(null);

  const togglePasswordVisibility = (id: number) => {
    setVisiblePasswords((prev) => ({ ...prev, [id]: !prev[id] }));
  };

  const copyToClipboard = (text: string, id: number, label: string) => {
    navigator.clipboard.writeText(text);
    setCopiedId(id);
    showToast(`${label} berhasil disalin!`, 'info');
    setTimeout(() => setCopiedId(null), 2000);
  };

  // Master Data GTK
  const [gtkList, setGtkList] = useState<GTKRecord[]>([
    {
      id: 1,
      nama: 'Drs. H. Ahmad Fauzi, M.Pd.I',
      nuptk: '4538749651200032',
      npk: '849201948201',
      nik: '3509121508750001',
      passwordEmisGtk: 'FauziEmis2026!',
      jabatan: 'Kepala Madrasah / Guru Fiqih',
      mapel: 'Fiqih & Ushul Fiqih',
      statusPegawai: 'PNS Kemenag',
      sertifikasi: 'Sudah Sertifikasi',
      statusSimpatika: 'Aktif (S25a Valid)',
      jtm: 24,
      pendidikan: 'S2 Magister Pendidikan Islam',
      tmt: '01 Juli 2008',
      noHp: '081234567801'
    },
    {
      id: 2,
      nama: 'Siti Nurhaliza, S.Pd.',
      nuptk: '8342751653300021',
      npk: '729103859201',
      nik: '3509125406880002',
      passwordEmisGtk: 'Nurhaliza99#',
      jabatan: 'Guru Matematika',
      mapel: 'Matematika Peminatan & Wajib',
      statusPegawai: 'PPPK',
      sertifikasi: 'Sudah Sertifikasi',
      statusSimpatika: 'Aktif (S25a Valid)',
      jtm: 28,
      pendidikan: 'S1 Pendidikan Matematika',
      tmt: '10 Januari 2015',
      noHp: '081234567802'
    },
    {
      id: 3,
      nama: 'Muhammad Hasan Basri, S.Kom.',
      nuptk: '1947762664130043',
      npk: '619204859102',
      nik: '3509122311920004',
      passwordEmisGtk: 'HasanB2026*',
      jabatan: 'Guru Informatika & Teknisi Lab',
      mapel: 'Informatika & Komputer',
      statusPegawai: 'Non-ASN / GTT',
      sertifikasi: 'Belum Sertifikasi',
      statusSimpatika: 'Aktif (Ajuan S25)',
      jtm: 24,
      pendidikan: 'S1 Teknik Informatika',
      tmt: '15 Juli 2019',
      noHp: '081234567803'
    },
    {
      id: 4,
      nama: 'Nurul Hidayah, S.Pd.I.',
      nuptk: '6245758660300012',
      npk: '539102849201',
      nik: '3509124903910003',
      passwordEmisGtk: 'NurulArab2026',
      jabatan: 'Guru Bahasa Arab',
      mapel: 'Bahasa Arab & Hadits',
      statusPegawai: 'Non-ASN / GTT',
      sertifikasi: 'Sudah Sertifikasi',
      statusSimpatika: 'Aktif (S25a Valid)',
      jtm: 26,
      pendidikan: 'S1 Pendidikan Bahasa Arab',
      tmt: '01 Agustus 2017',
      noHp: '081234567804'
    },
    {
      id: 5,
      nama: 'Bambang Triyono, S.E.',
      nuptk: '-',
      npk: '429103849103',
      nik: '3509121804860005',
      passwordEmisGtk: 'BambangTU2026!',
      jabatan: 'Kepala Tata Usaha & Kepegawaian',
      mapel: 'Administrasi Madrasah',
      statusPegawai: 'Non-ASN / PTT',
      sertifikasi: 'Bukan Guru',
      statusSimpatika: 'Aktif (Tendik)',
      jtm: 0,
      pendidikan: 'S1 Ekonomi Akuntansi',
      tmt: '02 Mei 2012',
      noHp: '081234567805'
    }
  ]);

  // Public Search State
  const [publicGtkInput, setPublicGtkInput] = useState<string>('');
  const [publicGtkFilter, setPublicGtkFilter] = useState<string>('Semua');
  const [hasSearched, setHasSearched] = useState<boolean>(false);
  const [publicSearchResults, setPublicSearchResults] = useState<GTKRecord[]>([]);
  const [selectedGtkModal, setSelectedGtkModal] = useState<GTKRecord | null>(null);

  const handleExecuteSearchGtk = (e?: React.FormEvent) => {
    if (e) e.preventDefault();

    const query = publicGtkInput.trim().toLowerCase();
    if (!query) {
      showToast('Masukkan nama, NUPTK, NPK, atau mapel yang dicari!', 'info');
      return;
    }

    const results = gtkList.filter((gtk) => {
      const matchQuery =
        gtk.nama.toLowerCase().includes(query) ||
        gtk.nuptk.includes(query) ||
        gtk.npk.includes(query) ||
        gtk.mapel.toLowerCase().includes(query) ||
        gtk.jabatan.toLowerCase().includes(query);

      if (publicGtkFilter === 'Semua') return matchQuery;
      if (publicGtkFilter === 'Sertifikasi') return matchQuery && gtk.sertifikasi === 'Sudah Sertifikasi';
      if (publicGtkFilter === 'PNS/PPPK')
        return matchQuery && (gtk.statusPegawai.includes('PNS') || gtk.statusPegawai.includes('PPPK'));
      if (publicGtkFilter === 'GTT') return matchQuery && gtk.statusPegawai.includes('GTT');
      return matchQuery;
    });

    setPublicSearchResults(results);
    setHasSearched(true);
    showToast(`Ditemukan ${results.length} data pendidik.`, 'success');
  };

  const handleResetSearchGtk = () => {
    setPublicGtkInput('');
    setHasSearched(false);
    setPublicSearchResults([]);
    showToast('Form pencarian telah direset.', 'info');
  };

  // Admin GTK CRUD State
  const [adminGtkSearch, setAdminGtkSearch] = useState<string>('');
  const [showGtkFormModal, setShowGtkFormModal] = useState<boolean>(false);
  const [isEditingGtk, setIsEditingGtk] = useState<boolean>(false);
  const [currentGtkForm, setCurrentGtkForm] = useState<GTKRecord>({
    id: 0,
    nama: '',
    nuptk: '',
    npk: '',
    nik: '',
    passwordEmisGtk: '',
    jabatan: '',
    mapel: '',
    statusPegawai: 'PNS Kemenag',
    sertifikasi: 'Sudah Sertifikasi',
    statusSimpatika: 'Aktif (S25a Valid)',
    jtm: 24,
    pendidikan: 'S1',
    tmt: '',
    noHp: ''
  });

  const handleOpenAddGtk = () => {
    setIsEditingGtk(false);
    setCurrentGtkForm({
      id: 0,
      nama: '',
      nuptk: '',
      npk: '',
      nik: '',
      passwordEmisGtk: 'Madrasah2026!',
      jabatan: 'Guru Mata Pelajaran',
      mapel: '',
      statusPegawai: 'Non-ASN / GTT',
      sertifikasi: 'Belum Sertifikasi',
      statusSimpatika: 'Aktif (S25a Valid)',
      jtm: 24,
      pendidikan: 'S1 Pendidikan',
      tmt: new Date().toLocaleDateString('id-ID', { day: '2-digit', month: 'long', year: 'numeric' }),
      noHp: ''
    });
    setShowGtkFormModal(true);
  };

  const handleOpenEditGtk = (gtk: GTKRecord) => {
    setIsEditingGtk(true);
    setCurrentGtkForm({ ...gtk });
    setShowGtkFormModal(true);
  };

  const handleSaveGtk = (e: React.FormEvent) => {
    e.preventDefault();
    if (!currentGtkForm.nama.trim()) {
      showToast('Nama guru / tendik wajib diisi!', 'error');
      return;
    }

    if (isEditingGtk) {
      setGtkList(gtkList.map((g) => (g.id === currentGtkForm.id ? { ...currentGtkForm } : g)));
      showToast(`Data GTK "${currentGtkForm.nama}" berhasil diperbarui!`, 'success');
    } else {
      const newEntry: GTKRecord = {
        ...currentGtkForm,
        id: Date.now()
      };
      setGtkList([newEntry, ...gtkList]);
      showToast(`GTK baru "${newEntry.nama}" berhasil ditambahkan!`, 'success');
    }
    setShowGtkFormModal(false);
  };

  const handleDeleteGtk = (id: number, nama: string) => {
    setGtkList(gtkList.filter((g) => g.id !== id));
    showToast(`Data GTK ${nama} telah dihapus dari sistem.`, 'info');
  };

  // State Form Verval PD
  const [vervalForm, setVervalForm] = useState({
    namaSiswa: '',
    nisn: '',
    nik: '',
    kelas: 'X - 1 (Fase E)',
    kategori: 'Perbaikan Ejaan Nama Siswa',
    dataLama: '',
    dataBaru: '',
    dokumen: 'Akta Kelahiran & Kartu Keluarga',
    catatan: ''
  });

  const handleVervalSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    if (!vervalForm.namaSiswa || !vervalForm.nisn || !vervalForm.nik || !vervalForm.dataLama || !vervalForm.dataBaru) {
      showToast('Mohon lengkapi seluruh kolom formulir bertanda wajib!', 'error');
      return;
    }

    const message = 
`*PENGADUAN PERBAIKAN DATA SISWA (VERVAL PD)*
*${siteConfig.schoolName}*
====================================
• *Nama Siswa:* ${vervalForm.namaSiswa}
• *NISN:* ${vervalForm.nisn}
• *NIK Siswa:* ${vervalForm.nik}
• *Kelas:* ${vervalForm.kelas}
------------------------------------
• *Jenis Perubahan:* ${vervalForm.kategori}
• *Data Lama (Keliru):* ${vervalForm.dataLama}
• *Data Baru (Valid):* ${vervalForm.dataBaru}
• *Dokumen Bukti:* ${vervalForm.dokumen}
• *Catatan Tambahan:* ${vervalForm.catatan || '-'}
====================================
_Diajukan melalui Portal Resmi Operator Madrasah._
_Foto bukti berkas (Akta/KK/Ijazah) segera saya lampirkan di chat ini._`;

    const encodedMessage = encodeURIComponent(message);
    const waUrl = `https://api.whatsapp.com/send?phone=${siteConfig.whatsappNumber}&text=${encodedMessage}`;

    window.open(waUrl, '_blank');
    showToast('Mengarahkan ke WhatsApp Operator...', 'success');
  };

  // Ekosistem Layanan IT
  const services = [
    {
      id: 'rdm',
      name: 'Rapor Digital Madrasah (RDM)',
      tag: 'Server Mandiri MA',
      status: 'Online',
      ping: '24ms',
      url: 'https://rdmma.mtsmambaulhikmah.sch.id/',
      desc: 'Pengolahan nilai akademik kurikulum merdeka, cetak leger, dan buku rapor siswa terpusat.',
      featured: true,
      icon: <Server className="w-6 h-6" />
    },
    {
      id: 'emis',
      name: 'EMIS 4.0 Kemenag',
      tag: 'Pusat Data Pokok',
      status: 'Aktif',
      ping: '42ms',
      url: 'https://emis.kemenag.go.id',
      desc: 'Master database kelembagaan, registrasi siswa aktif, rombel, dan sarana prasarana nasional.',
      featured: false,
      icon: <Database className="w-6 h-6" />
    },
    {
      id: 'emis-gtk',
      name: 'EMIS GTK',
      tag: 'Administrasi PTK',
      status: 'Online',
      ping: '38ms',
      url: 'https://emisgtk.kemenag.go.id/',
      desc: 'Sertifikasi guru, ajuan S25a, S29, keaktifan NPK/NUPTK, dan pencairan tunjangan profesi.',
      featured: false,
      icon: <Users className="w-6 h-6" />
    },
    {
      id: 'vervalpd',
      name: 'Verval Peserta Didik',
      tag: 'Pusdatin Kemdikbud',
      status: 'Tersinkron',
      ping: '31ms',
      url: 'https://vervalpd.data.kemendikdasmen.go.id/index.php/Csekolah',
      desc: 'Validasi NIK kependudukan Dukcapil, verifikasi NISN ganda, dan penerbitan nomor ijazah.',
      featured: false,
      icon: <FileText className="w-6 h-6" />
    },
    {
      id: 'pdum',
      name: 'PDUM (Pangkalan Data Ujian)',
      tag: 'Asesmen Madrasah',
      status: 'Siap',
      ping: '29ms',
      url: 'https://pdum.kemenag.go.id/',
      desc: 'Pengelolaan data peserta Asesmen Madrasah, pencetakan DNT, kartu peserta, dan nomor ujian.',
      featured: false,
      icon: <Laptop className="w-6 h-6" />
    },
    {
      id: 'nisn',
      name: 'Cek NISN',
      tag: 'Nomor Induk Siswa Nasional',
      status: 'Online',
      ping: '48ms',
      url: 'https://nisn.data.kemendikdasmen.go.id/',
      desc: 'Monitoring nomor induk siswa nasional dan status keaktifan peserta didik.',
      featured: false,
      icon: <Activity className="w-6 h-6" />
    }
  ];

  // Gallery State
  const [gallery, setGallery] = useState<PhotoRecord[]>([
    {
      id: 1,
      title: 'Sinkronisasi Server RDM Semester Genap',
      category: 'Infrastruktur Data',
      date: '02 Sep 2026',
      url: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?q=80&w=900&auto=format&fit=crop',
      caption: 'Maintenance berkala dan backup database Rapor Digital Madrasah di ruang server operator.'
    },
    {
      id: 2,
      title: 'Pelaksanaan Gladi Bersih Asesmen Madrasah Berbasis Komputer',
      category: 'Evaluasi Akademik',
      date: '20 Agu 2026',
      url: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=900&auto=format&fit=crop',
      caption: 'Monitoring client CBT dan kesiapan jaringan gigabit LAN di Laboratorium Komputer 1.'
    },
    {
      id: 3,
      title: 'Pemberkasan Dokumen S25a & Verifikasi SIMPATIKA GTK',
      category: 'Administrasi GTK',
      date: '15 Jul 2026',
      url: 'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?q=80&w=900&auto=format&fit=crop',
      caption: 'Validasi jadwal mengajar 24 jam tatap muka mingguan dewan guru untuk ajuan SKBK.'
    }
  ]);

  const [newPhotoTitle, setNewPhotoTitle] = useState<string>('');
  const [newPhotoCategory, setNewPhotoCategory] = useState<string>('Infrastruktur Data');
  const [newPhotoCaption, setNewPhotoCaption] = useState<string>('');
  const [newPhotoPreview, setNewPhotoPreview] = useState<string | null>(null);
  const [isUploading, setIsUploading] = useState<boolean>(false);

  // Announcements State
  const [announcements, setAnnouncements] = useState<AnnouncementRecord[]>([
    {
      id: 1,
      title: 'Akses Portal RDM Telah Diarahkan ke Subdomain Mandiri',
      date: '01 Sep 2026',
      category: 'Sistem RDM',
      urgent: true,
      text: 'Kepada Yth. Bapak/Ibu Dewan Guru, portal RDM kini aktif di https://rdmma.mtsmambaulhikmah.sch.id/. Nilai asesmen kurikulum merdeka dapat diinput secara bertahap.'
    },
    {
      id: 2,
      title: 'Pembersihan Residu NISN Siswa Kelas XII Menjelang Kelulusan',
      date: '28 Agu 2026',
      category: 'Verval PD',
      urgent: true,
      text: 'Bagi siswa yang nama atau tempat tanggal lahir di ijazah SMP berbeda dengan KK/Akta, segera isi formulir pengaduan perbaikan data di bawah untuk diproses ke Pusdatin.'
    },
    {
      id: 3,
      title: 'Cetak Surat Pengantar Aktivasi Rekening SimPel PIP Tahap 2',
      date: '20 Agu 2026',
      category: 'Kesiswaan',
      urgent: false,
      text: 'Daftar penerima SK Nominasi PIP telah ditempel di papan pengumuman. Surat rekomendasi madrasah untuk bank penyalur dapat diambil di meja operator.'
    }
  ]);

  const [newAnnTitle, setNewAnnTitle] = useState<string>('');
  const [newAnnCategory, setNewAnnCategory] = useState<string>('Sistem RDM');
  const [newAnnText, setNewAnnText] = useState<string>('');
  const [newAnnUrgent, setNewAnnUrgent] = useState<boolean>(false);

  const [previewModalPhoto, setPreviewModalPhoto] = useState<PhotoRecord | null>(null);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    if (!file.type.startsWith('image/')) {
      showToast('Harap pilih berkas gambar yang sah (JPG/PNG)', 'error');
      return;
    }
    const reader = new FileReader();
    reader.onload = (event) => setNewPhotoPreview(event.target?.result as string);
    reader.readAsDataURL(file);
  };

  const handleSavePhoto = (e: React.FormEvent) => {
    e.preventDefault();
    if (!newPhotoTitle.trim() || !newPhotoPreview) {
      showToast('Lengkapi judul dan berkas foto!', 'error');
      return;
    }
    setIsUploading(true);
    setTimeout(() => {
      setGallery([
        {
          id: Date.now(),
          title: newPhotoTitle,
          category: newPhotoCategory,
          date: new Date().toLocaleDateString('id-ID', { day: '2-digit', month: 'short', year: 'numeric' }),
          url: newPhotoPreview,
          caption: newPhotoCaption || 'Dokumentasi kegiatan resmi madrasah.'
        },
        ...gallery
      ]);
      setNewPhotoTitle('');
      setNewPhotoCaption('');
      setNewPhotoPreview(null);
      setIsUploading(false);
      showToast('Aset foto berhasil dipublikasikan ke galeri!', 'success');
    }, 700);
  };

  const handleAddAnnouncement = (e: React.FormEvent) => {
    e.preventDefault();
    if (!newAnnTitle.trim() || !newAnnText.trim()) return;
    setAnnouncements([
      {
        id: Date.now(),
        title: newAnnTitle,
        date: new Date().toLocaleDateString('id-ID', { day: '2-digit', month: 'short' }),
        category: newAnnCategory,
        urgent: newAnnUrgent,
        text: newAnnText
      },
      ...announcements
    ]);
    setNewAnnTitle('');
    setNewAnnText('');
    setNewAnnUrgent(false);
    showToast('Edaran resmi berhasil disiarkan.', 'success');
  };

  // Eksekusi Update Website & Tema
  const handleExecuteUpdateWebsite = (e: React.FormEvent) => {
    e.preventDefault();
    setIsUpdatingSite(true);

    setTimeout(() => {
      const now = new Date();
      const timestampString = now.toLocaleDateString('id-ID', {
        day: '2-digit',
        month: 'short',
        year: 'numeric'
      }) + `, ${now.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' })} WIB`;

      setActiveTheme(tempTheme);
      setSiteConfig({
        ...tempConfig,
        lastUpdated: timestampString
      });

      setIsUpdatingSite(false);
      showToast('Website & Tema berhasil diperbarui secara langsung!', 'success');
    }, 800);
  };

  const handleResetThemeDefault = () => {
    setTempTheme('emerald');
    setTempConfig({
      schoolName: 'MA MAMBAUL HIKMAH',
      subTitle: 'Sistem Informasi Data Pokok Madrasah & Ekosistem IT',
      heroTitle: 'Integrasi Layanan Data & Ekosistem Digital Madrasah',
      heroSubtitle: 'Portal resmi pengelolaan data Guru & Tenaga Kependidikan (GTK), akses server Rapor Digital Madrasah (RDM), serta pengaduan verval data peserta didik secara langsung.',
      runningAnnouncement: 'Selamat datang di Portal Operator MA Mambaul Hikmah. Layanan data terpadu EMIS 4.0, SIMPATIKA, & RDM Aktif.',
      whatsappNumber: '6281234567890',
      lastUpdated: siteConfig.lastUpdated
    });
    showToast('Draf pengaturan telah dikembalikan ke standar.', 'info');
  };

  const handleLoginSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (loginEmail === 'operator@madrasah.sch.id' && loginPassword === 'operator123') {
      setIsAdminLoggedIn(true);
      setCurrentView('admin');
      setLoginError('');
      showToast('Otorisasi Root Operator Disetujui!', 'success');
    } else {
      setLoginError('Kredensial tidak valid. Silakan gunakan akun demo.');
    }
  };

  const handleLogout = () => {
    setIsAdminLoggedIn(false);
    setCurrentView('public');
    showToast('Sesi operator telah ditutup dengan aman.', 'info');
  };

  const filteredAdminGtk = gtkList.filter(
    (gtk) =>
      gtk.nama.toLowerCase().includes(adminGtkSearch.toLowerCase()) ||
      gtk.nuptk.includes(adminGtkSearch) ||
      gtk.npk.includes(adminGtkSearch) ||
      gtk.mapel.toLowerCase().includes(adminGtkSearch.toLowerCase()) ||
      gtk.passwordEmisGtk.toLowerCase().includes(adminGtkSearch.toLowerCase())
  );

  if (currentView === 'login') {
    return (
      <div className="min-h-screen bg-[#060913] flex items-center justify-center p-4 relative overflow-hidden font-sans">
        <div className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] ${theme.glowBg} rounded-full blur-[140px] pointer-events-none`}></div>
        <div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff05_1px,transparent_1px),linear-gradient(to_bottom,#ffffff05_1px,transparent_1px)] bg-[size:32px_32px] opacity-20 pointer-events-none"></div>

        <div className={`bg-[#0b1120]/90 backdrop-blur-2xl p-8 sm:p-11 rounded-[2.5rem] border ${theme.accentBorder} shadow-2xl w-full max-w-md relative z-10`}>
          <button
            onClick={() => setCurrentView('public')}
            className="absolute top-6 right-6 text-slate-500 hover:text-white transition-colors p-1 rounded-lg"
          >
            <X className="w-5 h-5" />
          </button>

          <div className="mb-8 text-center">
            <div className={`w-16 h-16 bg-gradient-to-br ${theme.gradientBtn} rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-xl shadow-black/40 border border-white/20`}>
              <ShieldCheck className="w-8 h-8 text-slate-950" />
            </div>
            <h2 className="text-2xl font-black text-white tracking-tight">Otorisasi Operator</h2>
            <p className="text-slate-400 text-xs mt-1.5 font-medium">Panel Kendali Data {siteConfig.schoolName}</p>
          </div>

          {loginError && (
            <div className="mb-5 p-3.5 bg-rose-500/10 border border-rose-500/30 text-rose-400 text-xs rounded-xl flex items-center gap-2.5">
              <AlertCircle className="w-4 h-4 shrink-0" />
              <span>{loginError}</span>
            </div>
          )}

          <form onSubmit={handleLoginSubmit} className="space-y-4">
            <div>
              <label className="block text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-2">ID Surel Operator</label>
              <div className="relative">
                <User className={`w-4 h-4 ${theme.accentText} absolute left-4 top-1/2 -translate-y-1/2`} />
                <input
                  type="email"
                  required
                  value={loginEmail}
                  onChange={(e) => setLoginEmail(e.target.value)}
                  className="w-full pl-11 pr-4 py-3 rounded-xl bg-slate-900/80 border border-slate-700/80 focus:outline-none focus:border-slate-500 text-slate-100 text-sm placeholder:text-slate-600"
                  placeholder="operator@madrasah.sch.id"
                />
              </div>
            </div>

            <div>
              <label className="block text-[11px] font-bold text-slate-400 uppercase tracking-wider mb-2">Kata Sandi Sistem</label>
              <div className="relative">
                <Lock className={`w-4 h-4 ${theme.accentText} absolute left-4 top-1/2 -translate-y-1/2`} />
                <input
                  type="password"
                  required
                  value={loginPassword}
                  onChange={(e) => setLoginPassword(e.target.value)}
                  className="w-full pl-11 pr-4 py-3 rounded-xl bg-slate-900/80 border border-slate-700/80 focus:outline-none focus:border-slate-500 text-slate-100 text-sm placeholder:text-slate-600"
                  placeholder="••••••••"
                />
              </div>
            </div>

            <button
              type="submit"
              className={`w-full py-3.5 mt-2 bg-gradient-to-r ${theme.gradientBtn} text-slate-950 rounded-xl font-bold text-sm shadow-lg transition-all flex items-center justify-center gap-2`}
            >
              Masuk ke Console Operator <ChevronRight className="w-4 h-4" />
            </button>
          </form>

          <div className="mt-8 pt-6 border-t border-slate-800 text-center">
            <p className="text-[11px] text-slate-500">
              Demo Akses Cepat: <code className={`${theme.accentText} bg-slate-900 px-1.5 py-0.5 rounded border border-slate-800`}>operator@madrasah.sch.id</code> / <code className={`${theme.accentText} bg-slate-900 px-1.5 py-0.5 rounded border border-slate-800`}>operator123</code>
            </p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-[#070a13] text-slate-300 font-sans flex flex-col selection:bg-slate-700 selection:text-white">
      {/* RUNNING TEXT ANNOUNCEMENT BANNER */}
      {siteConfig.runningAnnouncement && (
        <div className={`bg-gradient-to-r ${theme.gradientBtn} text-slate-950 py-1.5 px-4 text-xs font-bold overflow-hidden shadow-md flex items-center justify-between`}>
          <div className="flex items-center gap-2 shrink-0 pr-4 border-r border-slate-950/20 font-black">
            <Bell className="w-3.5 h-3.5 animate-bounce" /> PENGUMUMAN SINKRONISASI
          </div>
          <div className="truncate flex-1 px-4 text-[11px] font-semibold">
            {siteConfig.runningAnnouncement}
          </div>
          <div className="hidden sm:flex items-center gap-2 text-[10px] shrink-0 font-mono opacity-80">
            <span>Terakhir Diperbarui: {siteConfig.lastUpdated}</span>
          </div>
        </div>
      )}

      {/* Toast Notification */}
      {toast.show && (
        <div className={`fixed bottom-6 right-6 z-50 flex items-center gap-3 px-5 py-3.5 rounded-2xl bg-[#0f172a] border ${theme.accentBorder} shadow-2xl shadow-black text-slate-100 backdrop-blur-xl`}>
          {toast.type === 'success' && <CheckCircle2 className={`w-5 h-5 ${theme.accentText} shrink-0`} />}
          {toast.type === 'error' && <AlertCircle className="w-5 h-5 text-rose-400 shrink-0" />}
          {toast.type === 'info' && <Bell className="w-5 h-5 text-cyan-400 shrink-0" />}
          <span className="font-semibold text-xs sm:text-sm">{toast.message}</span>
        </div>
      )}

      {/* MODAL LIGHTBOX FOTO */}
      {previewModalPhoto && (
        <div className="fixed inset-0 z-50 bg-black/90 backdrop-blur-md flex items-center justify-center p-4">
          <div className={`bg-[#0b1220] rounded-3xl max-w-4xl w-full overflow-hidden border ${theme.accentBorder} shadow-2xl relative`}>
            <button
              onClick={() => setPreviewModalPhoto(null)}
              className="absolute top-4 right-4 bg-black/60 hover:bg-black text-white p-2 rounded-xl transition-colors z-10 border border-white/10"
            >
              <X className="w-5 h-5" />
            </button>
            <div className="max-h-[65vh] bg-black flex items-center justify-center overflow-hidden">
              <img
                src={previewModalPhoto.url}
                alt={previewModalPhoto.title}
                className="max-h-[65vh] w-auto object-contain"
              />
            </div>
            <div className="p-6">
              <div className="flex items-center gap-3 mb-2">
                <span className={`px-3 py-1 ${theme.accentBadge} text-xs font-bold rounded-lg`}>
                  {previewModalPhoto.category}
                </span>
                <span className="text-xs text-slate-400 flex items-center gap-1">
                  <Calendar className="w-3.5 h-3.5 text-slate-500" />
                  {previewModalPhoto.date}
                </span>
              </div>
              <h3 className="text-lg font-bold text-white mb-1.5">{previewModalPhoto.title}</h3>
              <p className="text-slate-400 text-xs sm:text-sm leading-relaxed">{previewModalPhoto.caption}</p>
            </div>
          </div>
        </div>
      )}

      {/* MODAL RINCIAN PROFIL GTK (PUBLIK / DETAIL) */}
      {selectedGtkModal && (
        <div className="fixed inset-0 z-50 bg-black/85 backdrop-blur-sm flex items-center justify-center p-4">
          <div className={`bg-[#0e1628] rounded-3xl max-w-2xl w-full p-6 sm:p-8 border ${theme.accentBorder} shadow-2xl relative`}>
            <button
              onClick={() => setSelectedGtkModal(null)}
              className="absolute top-5 right-5 text-slate-400 hover:text-white p-2 rounded-xl transition-colors"
            >
              <X className="w-5 h-5" />
            </button>

            <div className="flex items-start gap-4 mb-6 pb-5 border-b border-slate-800">
              <div className={`w-14 h-14 rounded-2xl bg-gradient-to-br ${theme.gradientBtn} flex items-center justify-center text-slate-950 font-black text-xl shadow-lg shrink-0`}>
                {selectedGtkModal.nama.charAt(0)}
              </div>
              <div>
                <span className={`px-2.5 py-0.5 rounded text-[10px] font-bold uppercase ${theme.accentBadge} mb-1 inline-block`}>
                  {selectedGtkModal.statusPegawai}
                </span>
                <h3 className="text-lg sm:text-xl font-bold text-white">{selectedGtkModal.nama}</h3>
                <p className="text-xs text-slate-400">{selectedGtkModal.jabatan}</p>
              </div>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
              <div className="p-3.5 rounded-2xl bg-slate-900/80 border border-slate-800">
                <span className="text-slate-500 block mb-1">NUPTK Resmi</span>
                <span className="font-mono font-bold text-slate-200 text-sm">{selectedGtkModal.nuptk}</span>
              </div>
              <div className="p-3.5 rounded-2xl bg-slate-900/80 border border-slate-800">
                <span className="text-slate-500 block mb-1">NPK (Nomor Pendidik Kemenag)</span>
                <span className="font-mono font-bold text-slate-200 text-sm">{selectedGtkModal.npk}</span>
              </div>
              
              {/* KOLOM PASSWORD EMIS GTK */}
              <div className={`p-3.5 rounded-2xl bg-slate-900/80 border ${theme.accentBorder} col-span-1 sm:col-span-2`}>
                <div className="flex items-center justify-between mb-1">
                  <span className={`${theme.accentText} font-bold flex items-center gap-1.5`}>
                    <Key className="w-3.5 h-3.5 text-amber-400" /> Password EMIS GTK
                  </span>
                  {isAdminLoggedIn && (
                    <button
                      onClick={() => copyToClipboard(selectedGtkModal.passwordEmisGtk, selectedGtkModal.id, 'Password EMIS GTK')}
                      className={`text-[11px] text-slate-400 hover:${theme.accentText} flex items-center gap-1 transition-colors`}
                    >
                      {copiedId === selectedGtkModal.id ? <Check className={`w-3.5 h-3.5 ${theme.accentText}`} /> : <Copy className="w-3.5 h-3.5" />}
                      <span>{copiedId === selectedGtkModal.id ? 'Tersalin' : 'Salin Password'}</span>
                    </button>
                  )}
                </div>
                {isAdminLoggedIn ? (
                  <span className={`font-mono font-bold ${theme.accentText} text-sm bg-slate-950/80 px-3 py-1.5 rounded-xl border border-slate-800 block w-fit`}>
                    {selectedGtkModal.passwordEmisGtk || 'Belum diatur'}
                  </span>
                ) : (
                  <span className="text-slate-500 text-[11px] italic">
                    Diarsipkan secara aman oleh Operator Madrasah.
                  </span>
                )}
              </div>

              <div className="p-3.5 rounded-2xl bg-slate-900/80 border border-slate-800">
                <span className="text-slate-500 block mb-1">Mata Pelajaran Diampu</span>
                <span className={`font-semibold ${theme.accentText}`}>{selectedGtkModal.mapel}</span>
              </div>
              <div className="p-3.5 rounded-2xl bg-slate-900/80 border border-slate-800">
                <span className="text-slate-500 block mb-1">Beban Mengajar Mingguan</span>
                <span className="font-bold text-white text-sm">{selectedGtkModal.jtm} JTM / Minggu</span>
              </div>
              <div className="p-3.5 rounded-2xl bg-slate-900/80 border border-slate-800">
                <span className="text-slate-500 block mb-1">Status Sertifikasi Guru</span>
                <span className="font-bold text-teal-300">{selectedGtkModal.sertifikasi}</span>
              </div>
              <div className="p-3.5 rounded-2xl bg-slate-900/80 border border-slate-800">
                <span className="text-slate-500 block mb-1">Keaktifan SIMPATIKA Kemenag</span>
                <span className={`font-bold ${theme.accentText}`}>{selectedGtkModal.statusSimpatika}</span>
              </div>
              <div className="p-3.5 rounded-2xl bg-slate-900/80 border border-slate-800">
                <span className="text-slate-500 block mb-1">Pendidikan Terakhir</span>
                <span className="font-medium text-slate-300">{selectedGtkModal.pendidikan}</span>
              </div>
              <div className="p-3.5 rounded-2xl bg-slate-900/80 border border-slate-800">
                <span className="text-slate-500 block mb-1">TMT Pendidik</span>
                <span className="font-medium text-slate-300">{selectedGtkModal.tmt}</span>
              </div>
            </div>

            <div className="mt-6 pt-4 border-t border-slate-800 flex items-center justify-between">
              <span className="text-[11px] text-slate-500">Data tersinkronisasi dengan EMIS GTK & SIMPATIKA</span>
              <button
                onClick={() => setSelectedGtkModal(null)}
                className={`px-5 py-2 ${theme.accentBg} text-slate-950 font-bold rounded-xl text-xs transition-all`}
              >
                Tutup Jendela
              </button>
            </div>
          </div>
        </div>
      )}

      {/* MODAL FORM GTK (TAMBAH / EDIT) */}
      {showGtkFormModal && (
        <div className="fixed inset-0 z-50 bg-black/85 backdrop-blur-sm flex items-center justify-center p-4 overflow-y-auto">
          <div className={`bg-[#0e1628] rounded-3xl max-w-2xl w-full p-6 sm:p-8 border ${theme.accentBorder} shadow-2xl relative my-8`}>
            <button
              onClick={() => setShowGtkFormModal(false)}
              className="absolute top-5 right-5 text-slate-400 hover:text-white p-2 rounded-xl transition-colors"
            >
              <X className="w-5 h-5" />
            </button>

            <div className="mb-6 pb-4 border-b border-slate-800">
              <h3 className="text-xl font-bold text-white flex items-center gap-2">
                <GraduationCap className={`w-5 h-5 ${theme.accentText}`} />
                {isEditingGtk ? 'Perbarui Data Guru & Tenaga Pendidik' : 'Tambah GTK Baru ke Database'}
              </h3>
              <p className="text-xs text-slate-400 mt-1">
                Data ini akan tampil pada pencarian guru mandiri (EMIS GTK) dan rekapitulasi operator.
              </p>
            </div>

            <form onSubmit={handleSaveGtk} className="space-y-4">
              <div>
                <label className="block text-[11px] font-bold text-slate-300 uppercase mb-1">
                  Nama Lengkap & Gelar <span className="text-rose-400">*</span>
                </label>
                <input
                  type="text"
                  required
                  value={currentGtkForm.nama}
                  onChange={(e) => setCurrentGtkForm({ ...currentGtkForm, nama: e.target.value })}
                  placeholder="Cth: Drs. H. Ahmad Fauzi, M.Pd.I"
                  className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-slate-700 text-white text-xs focus:border-slate-500 focus:outline-none"
                />
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div>
                  <label className="block text-[11px] font-bold text-slate-300 uppercase mb-1">NUPTK</label>
                  <input
                    type="text"
                    value={currentGtkForm.nuptk}
                    onChange={(e) => setCurrentGtkForm({ ...currentGtkForm, nuptk: e.target.value })}
                    placeholder="16 digit NUPTK (atau -)"
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-slate-700 text-white text-xs focus:border-slate-500 focus:outline-none"
                  />
                </div>
                <div>
                  <label className="block text-[11px] font-bold text-slate-300 uppercase mb-1">NPK Kemenag</label>
                  <input
                    type="text"
                    value={currentGtkForm.npk}
                    onChange={(e) => setCurrentGtkForm({ ...currentGtkForm, npk: e.target.value })}
                    placeholder="NPK aktif pendidik"
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-slate-700 text-white text-xs focus:border-slate-500 focus:outline-none"
                  />
                </div>
                <div>
                  <label className={`block text-[11px] font-bold ${theme.accentText} uppercase mb-1 flex items-center gap-1`}>
                    <Key className="w-3 h-3 text-amber-400" /> Password EMIS GTK
                  </label>
                  <input
                    type="text"
                    value={currentGtkForm.passwordEmisGtk}
                    onChange={(e) => setCurrentGtkForm({ ...currentGtkForm, passwordEmisGtk: e.target.value })}
                    placeholder="Password EMIS GTK"
                    className={`w-full px-4 py-2.5 rounded-xl bg-slate-900 border ${theme.accentBorder} ${theme.accentText} font-mono text-xs focus:outline-none`}
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-[11px] font-bold text-slate-300 uppercase mb-1">Mata Pelajaran Diampu</label>
                  <input
                    type="text"
                    value={currentGtkForm.mapel}
                    onChange={(e) => setCurrentGtkForm({ ...currentGtkForm, mapel: e.target.value })}
                    placeholder="Cth: Matematika / Fiqih"
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-slate-700 text-white text-xs focus:border-slate-500 focus:outline-none"
                  />
                </div>
                <div>
                  <label className="block text-[11px] font-bold text-slate-300 uppercase mb-1">Jabatan / Tugas Utama</label>
                  <input
                    type="text"
                    value={currentGtkForm.jabatan}
                    onChange={(e) => setCurrentGtkForm({ ...currentGtkForm, jabatan: e.target.value })}
                    placeholder="Cth: Guru MP / Wali Kelas"
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-slate-700 text-white text-xs focus:border-slate-500 focus:outline-none"
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div>
                  <label className="block text-[11px] font-bold text-slate-300 uppercase mb-1">Status Kepegawaian</label>
                  <select
                    value={currentGtkForm.statusPegawai}
                    onChange={(e) => setCurrentGtkForm({ ...currentGtkForm, statusPegawai: e.target.value })}
                    className="w-full px-3 py-2.5 rounded-xl bg-slate-900 border border-slate-700 text-white text-xs focus:border-slate-500 focus:outline-none"
                  >
                    <option value="PNS Kemenag">PNS Kemenag</option>
                    <option value="PPPK">PPPK</option>
                    <option value="Non-ASN / GTT">Non-ASN / GTT</option>
                    <option value="Non-ASN / PTT">Non-ASN / PTT</option>
                  </select>
                </div>
                <div>
                  <label className="block text-[11px] font-bold text-slate-300 uppercase mb-1">Status Sertifikasi</label>
                  <select
                    value={currentGtkForm.sertifikasi}
                    onChange={(e) => setCurrentGtkForm({ ...currentGtkForm, sertifikasi: e.target.value })}
                    className="w-full px-3 py-2.5 rounded-xl bg-slate-900 border border-slate-700 text-white text-xs focus:border-slate-500 focus:outline-none"
                  >
                    <option value="Sudah Sertifikasi">Sudah Sertifikasi</option>
                    <option value="Belum Sertifikasi">Belum Sertifikasi</option>
                    <option value="Bukan Guru">Bukan Guru</option>
                  </select>
                </div>
                <div>
                  <label className="block text-[11px] font-bold text-slate-300 uppercase mb-1">Jam Mengajar (JTM)</label>
                  <input
                    type="number"
                    value={currentGtkForm.jtm}
                    onChange={(e) => setCurrentGtkForm({ ...currentGtkForm, jtm: parseInt(e.target.value, 10) || 0 })}
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-slate-700 text-white text-xs focus:border-slate-500 focus:outline-none"
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-[11px] font-bold text-slate-300 uppercase mb-1">Pendidikan Terakhir</label>
                  <input
                    type="text"
                    value={currentGtkForm.pendidikan}
                    onChange={(e) => setCurrentGtkForm({ ...currentGtkForm, pendidikan: e.target.value })}
                    placeholder="Cth: S1 Pendidikan Agama Islam"
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-slate-700 text-white text-xs focus:border-slate-500 focus:outline-none"
                  />
                </div>
                <div>
                  <label className="block text-[11px] font-bold text-slate-300 uppercase mb-1">TMT Tugas</label>
                  <input
                    type="text"
                    value={currentGtkForm.tmt}
                    onChange={(e) => setCurrentGtkForm({ ...currentGtkForm, tmt: e.target.value })}
                    placeholder="Cth: 01 Juli 2018"
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-slate-700 text-white text-xs focus:border-slate-500 focus:outline-none"
                  />
                </div>
              </div>

              <div className="pt-4 border-t border-slate-800 flex items-center justify-end gap-3">
                <button
                  type="button"
                  onClick={() => setShowGtkFormModal(false)}
                  className="px-5 py-2.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-xl font-bold text-xs transition-all"
                >
                  Batal
                </button>
                <button
                  type="submit"
                  className={`px-6 py-2.5 ${theme.accentBg} text-slate-950 rounded-xl font-bold text-xs shadow-lg transition-all`}
                >
                  {isEditingGtk ? 'Simpan Perubahan' : 'Tambahkan GTK Baru'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* HEADER */}
      <header className={`bg-[#0b1120]/90 backdrop-blur-xl border-b ${theme.accentBorder} sticky top-0 z-40`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
          <div className="flex items-center gap-3.5 cursor-pointer" onClick={() => setCurrentView('public')}>
            <div className={`w-12 h-12 rounded-2xl bg-gradient-to-br ${theme.gradientBtn} flex items-center justify-center text-slate-950 font-black shadow-lg border border-white/30`}>
              <School className="w-6 h-6" />
            </div>
            <div>
              <div className="flex items-center gap-2">
                <h1 className="text-lg font-black tracking-tight text-white">{siteConfig.schoolName}</h1>
                <span className={`px-2 py-0.5 rounded-full text-[10px] font-extrabold ${theme.accentBadge}`}>
                  PORTAL OPERATOR
                </span>
              </div>
              <p className="text-xs text-slate-400 font-medium">{siteConfig.subTitle}</p>
            </div>
          </div>

          <div className="flex items-center gap-4">
            <div className="hidden lg:flex items-center gap-2.5 px-3.5 py-2 rounded-xl bg-slate-900/80 border border-slate-800 text-xs">
              <Clock className={`w-4 h-4 ${theme.accentText}`} />
              <span className="font-mono text-slate-200">{timeString || 'WIB'}</span>
            </div>

            {isAdminLoggedIn ? (
              <div className="flex items-center gap-2">
                <button
                  onClick={() => setCurrentView(currentView === 'admin' ? 'public' : 'admin')}
                  className={`px-4 py-2 rounded-xl font-bold text-xs transition-all flex items-center gap-2 ${
                    currentView === 'admin'
                      ? `${theme.activeTab}`
                      : 'bg-slate-800 hover:bg-slate-700 text-white'
                  }`}
                >
                  <span>{currentView === 'admin' ? 'Lihat Tampilan Publik' : 'Console Operator'}</span>
                </button>

                <button
                  onClick={handleLogout}
                  className="p-2 rounded-xl bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 border border-rose-500/30 transition-all"
                  title="Keluar Sesi"
                >
                  <LogOut className="w-4 h-4" />
                </button>
              </div>
            ) : (
              <button
                onClick={() => setCurrentView('login')}
                className={`px-4 py-2.5 rounded-xl bg-gradient-to-r ${theme.gradientBtn} text-slate-950 font-bold text-xs shadow-lg transition-all flex items-center gap-2`}
              >
                <ShieldCheck className="w-4 h-4" />
                <span>Otorisasi Admin</span>
              </button>
            )}
          </div>
        </div>
      </header>

      {currentView === 'admin' && isAdminLoggedIn ? (
        /* ================= ADMIN CONSOLE WORKSPACE ================= */
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex-1 w-full space-y-6">
          <div className={`flex flex-col md:flex-row md:items-center justify-between gap-4 p-6 bg-[#0c1322] border ${theme.accentBorder} rounded-3xl shadow-xl`}>
            <div>
              <div className={`flex items-center gap-2 ${theme.accentText} text-xs font-bold uppercase mb-1`}>
                <ShieldCheck className="w-4 h-4" /> Sesi Root Operator Madrasah Aktif
              </div>
              <h2 className="text-2xl font-black text-white">Console Kelola Data Pokok & Tampilan</h2>
              <p className="text-xs text-slate-400 mt-1">
                Akses tingkat tinggi untuk administrasi GTK, posting edaran, galeri, dan kustomisasi tema website.
              </p>
            </div>

            <div className="flex flex-wrap gap-2">
              <button
                onClick={() => setAdminTab('database-gtk')}
                className={`px-4 py-2.5 rounded-xl text-xs font-bold transition-all flex items-center gap-2 ${
                  adminTab === 'database-gtk'
                    ? `${theme.activeTab}`
                    : 'bg-slate-900 hover:bg-slate-800 text-slate-300 border border-slate-800'
                }`}
              >
                <Users className="w-4 h-4" /> Database GTK ({gtkList.length})
              </button>
              <button
                onClick={() => setAdminTab('upload-foto')}
                className={`px-4 py-2.5 rounded-xl text-xs font-bold transition-all flex items-center gap-2 ${
                  adminTab === 'upload-foto'
                    ? `${theme.activeTab}`
                    : 'bg-slate-900 hover:bg-slate-800 text-slate-300 border border-slate-800'
                }`}
              >
                <ImageIcon className="w-4 h-4" /> Galeri Foto
              </button>
              <button
                onClick={() => setAdminTab('pengumuman')}
                className={`px-4 py-2.5 rounded-xl text-xs font-bold transition-all flex items-center gap-2 ${
                  adminTab === 'pengumuman'
                    ? `${theme.activeTab}`
                    : 'bg-slate-900 hover:bg-slate-800 text-slate-300 border border-slate-800'
                }`}
              >
                <Bell className="w-4 h-4" /> Siarkan Edaran
              </button>

              {/* TAB UPDATE WEBSITE */}
              <button
                onClick={() => {
                  setAdminTab('update-website');
                  setTempConfig({ ...siteConfig });
                  setTempTheme(activeTheme);
                }}
                className={`px-4 py-2.5 rounded-xl text-xs font-bold transition-all flex items-center gap-2 ${
                  adminTab === 'update-website'
                    ? `${theme.activeTab}`
                    : 'bg-slate-900 hover:bg-slate-800 text-amber-400 border border-amber-500/30'
                }`}
              >
                <Palette className="w-4 h-4" /> Update Website & Tema
              </button>
            </div>
          </div>

          {/* TAB 1: DATABASE GTK TABLE */}
          {adminTab === 'database-gtk' && (
            <div className="bg-[#0b1120] border border-slate-800 rounded-3xl p-6 shadow-xl space-y-4">
              <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <div className="relative flex-1 max-w-md">
                  <Search className="w-4 h-4 text-slate-500 absolute left-3.5 top-1/2 -translate-y-1/2" />
                  <input
                    type="text"
                    value={adminGtkSearch}
                    onChange={(e) => setAdminGtkSearch(e.target.value)}
                    placeholder="Cari NUPTK, NPK, nama guru, password, atau mapel..."
                    className="w-full pl-10 pr-4 py-2.5 rounded-xl bg-slate-900 border border-slate-800 text-xs text-white focus:border-slate-600 focus:outline-none"
                  />
                </div>

                <button
                  onClick={handleOpenAddGtk}
                  className={`px-4 py-2.5 rounded-xl ${theme.accentBg} text-slate-950 font-bold text-xs flex items-center gap-2 shadow-lg transition-all self-start sm:self-auto`}
                >
                  <Plus className="w-4 h-4" /> Tambah GTK Baru
                </button>
              </div>

              <div className="overflow-x-auto rounded-2xl border border-slate-800">
                <table className="w-full text-left text-xs">
                  <thead className="bg-slate-900/90 text-slate-400 uppercase text-[10px] tracking-wider border-b border-slate-800">
                    <tr>
                      <th className="p-4 font-bold">Nama Pendidik</th>
                      <th className="p-4 font-bold">NUPTK / NPK</th>
                      <th className="p-4 font-bold text-amber-400 flex items-center gap-1">
                        <Key className="w-3.5 h-3.5" /> Password EMIS GTK
                      </th>
                      <th className="p-4 font-bold">Mata Pelajaran</th>
                      <th className="p-4 font-bold">Status Pegawai</th>
                      <th className="p-4 font-bold">Sertifikasi</th>
                      <th className="p-4 font-bold text-center">Aksi Operasional</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-800/80 text-slate-300">
                    {filteredAdminGtk.map((gtk) => {
                      const isPassVisible = visiblePasswords[gtk.id];
                      return (
                        <tr key={gtk.id} className="hover:bg-slate-900/50 transition-colors">
                          <td className="p-4 font-bold text-white">
                            <div>{gtk.nama}</div>
                            <div className="text-[11px] text-slate-500 font-normal">{gtk.jabatan}</div>
                          </td>
                          <td className="p-4 font-mono text-slate-300">
                            <div>{gtk.nuptk}</div>
                            <div className="text-[10px] text-slate-500">NPK: {gtk.npk}</div>
                          </td>

                          {/* TAMPILAN PASS EMIS GTK DEGAN VISIBILITY & COPY */}
                          <td className="p-4 font-mono">
                            <div className="flex items-center gap-2 bg-slate-900 px-3 py-1.5 rounded-xl border border-slate-800 w-fit">
                              <span className={`${theme.accentText} font-bold text-xs`}>
                                {isPassVisible ? (
                                  gtk.passwordEmisGtk || '-'
                                ) : (
                                  '••••••••'
                                )}
                              </span>
                              <button
                                onClick={() => togglePasswordVisibility(gtk.id)}
                                className="text-slate-500 hover:text-slate-200 transition-colors p-0.5"
                                title={isPassVisible ? 'Sembunyikan Password' : 'Tampilkan Password'}
                              >
                                {isPassVisible ? <EyeOff className="w-3.5 h-3.5" /> : <Eye className="w-3.5 h-3.5" />}
                              </button>
                              <button
                                onClick={() => copyToClipboard(gtk.passwordEmisGtk, gtk.id, 'Password EMIS GTK')}
                                className={`text-slate-500 hover:${theme.accentText} transition-colors p-0.5`}
                                title="Salin Password"
                              >
                                {copiedId === gtk.id ? <Check className={`w-3.5 h-3.5 ${theme.accentText}`} /> : <Copy className="w-3.5 h-3.5" />}
                              </button>
                            </div>
                          </td>

                          <td className={`p-4 ${theme.accentText} font-medium`}>{gtk.mapel}</td>
                          <td className="p-4">
                            <span className="px-2 py-1 rounded bg-slate-800 text-slate-300 text-[10px] font-semibold">
                              {gtk.statusPegawai}
                            </span>
                          </td>
                          <td className="p-4">
                            <span className={`px-2 py-1 rounded text-[10px] font-bold ${
                              gtk.sertifikasi === 'Sudah Sertifikasi'
                                ? `${theme.accentBadge}`
                                : 'bg-slate-800 text-slate-400'
                            }`}>
                              {gtk.sertifikasi}
                            </span>
                          </td>
                          <td className="p-4">
                            <div className="flex items-center justify-center gap-2">
                              <button
                                onClick={() => handleOpenEditGtk(gtk)}
                                className="p-2 rounded-lg bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-400 transition-colors"
                                title="Edit Data"
                              >
                                <Edit3 className="w-4 h-4" />
                              </button>
                              <button
                                onClick={() => handleDeleteGtk(gtk.id, gtk.nama)}
                                className="p-2 rounded-lg bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 transition-colors"
                                title="Hapus GTK"
                              >
                                <Trash2 className="w-4 h-4" />
                              </button>
                            </div>
                          </td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
            </div>
          )}

          {/* TAB 2: UPLOAD FOTO GALERI */}
          {adminTab === 'upload-foto' && (
            <div className="bg-[#0b1120] border border-slate-800 rounded-3xl p-6 shadow-xl max-w-3xl mx-auto space-y-6">
              <div className="border-b border-slate-800 pb-4">
                <h3 className="text-lg font-bold text-white flex items-center gap-2">
                  <ImageIcon className={`w-5 h-5 ${theme.accentText}`} /> Upload Foto Dokumentasi Kegiatan
                </h3>
                <p className="text-xs text-slate-400 mt-1">Publikasikan dokumentasi server, kegiatan asesmen, atau rapat operator ke galeri publik.</p>
              </div>

              <form onSubmit={handleSavePhoto} className="space-y-4">
                <div>
                  <label className="block text-xs font-bold text-slate-300 mb-1">Judul Foto Dokumentasi</label>
                  <input
                    type="text"
                    required
                    value={newPhotoTitle}
                    onChange={(e) => setNewPhotoTitle(e.target.value)}
                    placeholder="Cth: Monitoring Jaringan CBT Asesmen Madrasah"
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-slate-700 text-xs text-white focus:border-slate-500 focus:outline-none"
                  />
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-xs font-bold text-slate-300 mb-1">Kategori Kegiatan</label>
                    <select
                      value={newPhotoCategory}
                      onChange={(e) => setNewPhotoCategory(e.target.value)}
                      className="w-full px-3 py-2.5 rounded-xl bg-slate-900 border border-slate-700 text-xs text-white focus:border-slate-500 focus:outline-none"
                    >
                      <option value="Infrastruktur Data">Infrastruktur Data</option>
                      <option value="Evaluasi Akademik">Evaluasi Akademik</option>
                      <option value="Administrasi GTK">Administrasi GTK</option>
                      <option value="Kegiatan Kesiswaan">Kegiatan Kesiswaan</option>
                    </select>
                  </div>

                  <div>
                    <label className="block text-xs font-bold text-slate-300 mb-1">Pilih Berkas Foto (JPG/PNG)</label>
                    <input
                      type="file"
                      accept="image/*"
                      onChange={handleFileChange}
                      className="w-full text-xs text-slate-400 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-semibold file:bg-slate-800 file:text-white hover:file:bg-slate-700 cursor-pointer"
                    />
                  </div>
                </div>

                {newPhotoPreview && (
                  <div className="p-3 bg-slate-900 rounded-2xl border border-slate-800 text-center">
                    <p className="text-[11px] text-slate-400 mb-2">Pratinjau Gambar:</p>
                    <img src={newPhotoPreview} alt="Preview" className="max-h-48 rounded-xl mx-auto object-cover" />
                  </div>
                )}

                <div>
                  <label className="block text-xs font-bold text-slate-300 mb-1">Keterangan / Caption Singkat</label>
                  <textarea
                    rows={3}
                    value={newPhotoCaption}
                    onChange={(e) => setNewPhotoCaption(e.target.value)}
                    placeholder="Berikan deskripsi singkat mengenai foto kegiatan..."
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-slate-700 text-xs text-white focus:border-slate-500 focus:outline-none"
                  />
                </div>

                <button
                  type="submit"
                  disabled={isUploading}
                  className={`w-full py-3 ${theme.accentBg} text-slate-950 font-bold text-xs rounded-xl shadow-lg transition-all flex items-center justify-center gap-2`}
                >
                  <UploadCloud className="w-4 h-4" />
                  <span>{isUploading ? 'Mengunggah Berkas...' : 'Publikasikan ke Galeri Foto'}</span>
                </button>
              </form>
            </div>
          )}

          {/* TAB 3: PENGUMUMAN */}
          {adminTab === 'pengumuman' && (
            <div className="bg-[#0b1120] border border-slate-800 rounded-3xl p-6 shadow-xl max-w-3xl mx-auto space-y-6">
              <div className="border-b border-slate-800 pb-4">
                <h3 className="text-lg font-bold text-white flex items-center gap-2">
                  <Bell className={`w-5 h-5 ${theme.accentText}`} /> Siarkan Pengumuman & Edaran Operator
                </h3>
                <p className="text-xs text-slate-400 mt-1">Buat informasi resmi terkait pengisian RDM, batas waktu Verval, atau instruksi SIMPATIKA.</p>
              </div>

              <form onSubmit={handleAddAnnouncement} className="space-y-4">
                <div>
                  <label className="block text-xs font-bold text-slate-300 mb-1">Judul Edaran / Pengumuman</label>
                  <input
                    type="text"
                    required
                    value={newAnnTitle}
                    onChange={(e) => setNewAnnTitle(e.target.value)}
                    placeholder="Cth: Pembukaan Input Nilai RDM Semester Ganjil"
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-slate-700 text-xs text-white focus:border-slate-500 focus:outline-none"
                  />
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-xs font-bold text-slate-300 mb-1">Kategori Edaran</label>
                    <select
                      value={newAnnCategory}
                      onChange={(e) => setNewAnnCategory(e.target.value)}
                      className="w-full px-3 py-2.5 rounded-xl bg-slate-900 border border-slate-700 text-xs text-white focus:border-slate-500 focus:outline-none"
                    >
                      <option value="Sistem RDM">Sistem RDM</option>
                      <option value="Verval PD">Verval PD</option>
                      <option value="SIMPATIKA">SIMPATIKA</option>
                      <option value="Kesiswaan">Kesiswaan</option>
                      <option value="Informasi Umum">Informasi Umum</option>
                    </select>
                  </div>

                  <div className="flex items-center pt-5">
                    <label className="flex items-center gap-2 text-xs font-bold text-slate-300 cursor-pointer">
                      <input
                        type="checkbox"
                        checked={newAnnUrgent}
                        onChange={(e) => setNewAnnUrgent(e.target.checked)}
                        className="w-4 h-4 text-emerald-500 rounded bg-slate-900 border-slate-700 focus:ring-0"
                      />
                      <span>Tandai sebagai Penting / Urgent</span>
                    </label>
                  </div>
                </div>

                <div>
                  <label className="block text-xs font-bold text-slate-300 mb-1">Isi Lengkap Pengumuman</label>
                  <textarea
                    rows={4}
                    required
                    value={newAnnText}
                    onChange={(e) => setNewAnnText(e.target.value)}
                    placeholder="Tuliskan detail edaran resmi untuk dewan guru / siswa..."
                    className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-slate-700 text-xs text-white focus:border-slate-500 focus:outline-none"
                  />
                </div>

                <button
                  type="submit"
                  className={`w-full py-3 ${theme.accentBg} text-slate-950 font-bold text-xs rounded-xl shadow-lg transition-all flex items-center justify-center gap-2`}
                >
                  <Send className="w-4 h-4" />
                  <span>Siarkan Edaran Sekarang</span>
                </button>
              </form>
            </div>
          )}

          {/* TAB 4: UPDATE WEBSITE & TEMA */}
          {adminTab === 'update-website' && (
            <div className="bg-[#0b1120] border border-slate-800 rounded-3xl p-6 sm:p-8 shadow-xl max-w-4xl mx-auto space-y-8">
              <div className="border-b border-slate-800 pb-5 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <div>
                  <div className="flex items-center gap-2 text-amber-400 font-bold text-xs uppercase mb-1">
                    <Paintbrush className="w-4 h-4" /> Kustomisasi Visual & Informasi Halaman
                  </div>
                  <h3 className="text-2xl font-black text-white">Update & Ubah Tema Website</h3>
                  <p className="text-xs text-slate-400 mt-1">
                    Ganti warna tema aksen portal dan perbarui teks informasi utama kapan saja tanpa perlu menyentuh kode.
                  </p>
                </div>

                <button
                  type="button"
                  onClick={handleResetThemeDefault}
                  className="px-4 py-2 rounded-xl bg-slate-900 hover:bg-slate-800 text-slate-400 hover:text-white border border-slate-800 text-xs font-bold transition-all flex items-center gap-1.5 self-start sm:self-auto"
                >
                  <RotateCcw className="w-3.5 h-3.5" /> Reset Ke Standar
                </button>
              </div>

              <form onSubmit={handleExecuteUpdateWebsite} className="space-y-8">
                {/* 1. PILIH PALET TEMA WARNA */}
                <div className="space-y-3">
                  <label className="block text-xs font-bold uppercase tracking-wider text-slate-300 flex items-center gap-2">
                    <Palette className="w-4 h-4 text-amber-400" /> Pilih Tema Warna Website
                  </label>
                  <p className="text-xs text-slate-400">Pilih palet warna aksen visual untuk seluruh komponen aplikasi:</p>

                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3.5 pt-2">
                    {(Object.keys(themeMap) as ThemeKey[]).map((key) => {
                      const t = themeMap[key];
                      const isSelected = tempTheme === key;
                      return (
                        <div
                          key={key}
                          onClick={() => setTempTheme(key)}
                          className={`p-4 rounded-2xl border cursor-pointer transition-all flex items-center justify-between ${
                            isSelected
                              ? 'bg-slate-900 border-amber-400/80 shadow-lg shadow-amber-500/10'
                              : 'bg-slate-900/60 border-slate-800 hover:border-slate-700'
                          }`}
                        >
                          <div className="flex items-center gap-3">
                            <div className={`w-8 h-8 rounded-xl ${t.previewColor} flex items-center justify-center text-slate-950 font-black text-xs shadow-md`}>
                              ✓
                            </div>
                            <div>
                              <h4 className="text-xs font-bold text-white">{t.name}</h4>
                              <span className="text-[10px] text-slate-500 font-mono">Modus Dark Premium</span>
                            </div>
                          </div>

                          <input
                            type="radio"
                            name="siteTheme"
                            checked={isSelected}
                            onChange={() => setTempTheme(key)}
                            className="w-4 h-4 text-amber-400 bg-slate-900 border-slate-700 focus:ring-0"
                          />
                        </div>
                      );
                    })}
                  </div>
                </div>

                {/* 2. KUSTOMISASI KONTEN WEBSITE */}
                <div className="space-y-4 pt-4 border-t border-slate-800">
                  <label className="block text-xs font-bold uppercase tracking-wider text-slate-300 flex items-center gap-2">
                    <Sliders className="w-4 h-4 text-amber-400" /> Kustomisasi Teks Utama & Banner
                  </label>

                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-[11px] font-bold text-slate-400 mb-1">Nama Utama Lembaga / Madrasah</label>
                      <input
                        type="text"
                        required
                        value={tempConfig.schoolName}
                        onChange={(e) => setTempConfig({ ...tempConfig, schoolName: e.target.value })}
                        className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-slate-800 text-xs text-white focus:border-slate-600 focus:outline-none"
                      />
                    </div>

                    <div>
                      <label className="block text-[11px] font-bold text-slate-400 mb-1">Sub-Judul Header / Tagline</label>
                      <input
                        type="text"
                        required
                        value={tempConfig.subTitle}
                        onChange={(e) => setTempConfig({ ...tempConfig, subTitle: e.target.value })}
                        className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-slate-800 text-xs text-white focus:border-slate-600 focus:outline-none"
                      />
                    </div>
                  </div>

                  <div>
                    <label className="block text-[11px] font-bold text-slate-400 mb-1">Judul Halaman Utama (Hero Banner)</label>
                    <input
                      type="text"
                      required
                      value={tempConfig.heroTitle}
                      onChange={(e) => setTempConfig({ ...tempConfig, heroTitle: e.target.value })}
                      className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-slate-800 text-xs text-white focus:border-slate-600 focus:outline-none"
                    />
                  </div>

                  <div>
                    <label className="block text-[11px] font-bold text-slate-400 mb-1">Deskripsi Ringkas Halaman Utama</label>
                    <textarea
                      rows={3}
                      required
                      value={tempConfig.heroSubtitle}
                      onChange={(e) => setTempConfig({ ...tempConfig, heroSubtitle: e.target.value })}
                      className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-slate-800 text-xs text-white focus:border-slate-600 focus:outline-none"
                    />
                  </div>

                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                      <label className="block text-[11px] font-bold text-slate-400 mb-1">Teks Running Bar Pengumuman Atas</label>
                      <input
                        type="text"
                        value={tempConfig.runningAnnouncement}
                        onChange={(e) => setTempConfig({ ...tempConfig, runningAnnouncement: e.target.value })}
                        placeholder="Biarkan kosong jika ingin menyembunyikan running text"
                        className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-slate-800 text-xs text-white focus:border-slate-600 focus:outline-none"
                      />
                    </div>

                    <div>
                      <label className="block text-[11px] font-bold text-slate-400 mb-1">Nomor WhatsApp Operator Pengaduan Verval</label>
                      <input
                        type="text"
                        required
                        value={tempConfig.whatsappNumber}
                        onChange={(e) => setTempConfig({ ...tempConfig, whatsappNumber: e.target.value })}
                        placeholder="Format internasional cth: 6281234567890"
                        className="w-full px-4 py-2.5 rounded-xl bg-slate-900 border border-slate-800 text-xs text-white font-mono focus:border-slate-600 focus:outline-none"
                      />
                    </div>
                  </div>
                </div>

                {/* STATUS SINKRONISASI & TOMBOL SIMPAN */}
                <div className="pt-6 border-t border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-4">
                  <div className="text-xs text-slate-500 flex items-center gap-2">
                    <Globe className="w-4 h-4 text-emerald-400" />
                    <span>Terakhir dipublikasikan: <strong className="text-slate-300">{siteConfig.lastUpdated}</strong></span>
                  </div>

                  <button
                    type="submit"
                    disabled={isUpdatingSite}
                    className="w-full sm:w-auto px-8 py-3.5 bg-gradient-to-r from-amber-400 to-yellow-500 hover:from-amber-300 hover:to-yellow-400 text-slate-950 font-black text-xs rounded-2xl shadow-xl shadow-amber-500/20 transition-all flex items-center justify-center gap-2"
                  >
                    {isUpdatingSite ? (
                      <>
                        <RefreshCw className="w-4 h-4 animate-spin" />
                        <span>Menerapkan Pembaruan...</span>
                      </>
                    ) : (
                      <>
                        <CheckCircle2 className="w-4 h-4" />
                        <span>Simpan & Update Website Sekarang</span>
                      </>
                    )}
                  </button>
                </div>
              </form>
            </div>
          )}
        </div>
      ) : (
        <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex-1 w-full space-y-12">
          {/* HERO BANNER */}
          <div className={`relative rounded-[2.5rem] bg-gradient-to-br from-[#0c1322] via-[#09182a] to-[#07111e] border ${theme.accentBorder} p-8 sm:p-12 overflow-hidden shadow-2xl`}>
            <div className={`absolute top-0 right-0 w-96 h-96 ${theme.glowHero} rounded-full blur-[100px] pointer-events-none`}></div>

            <div className="relative z-10 max-w-3xl space-y-4">
              <div className={`inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full ${theme.accentBadge} text-xs font-bold`}>
                <Sparkles className="w-3.5 h-3.5" />
                <span>Pusat Kendali Data Pokok Madrasah Aliyah</span>
              </div>

              <h2 className="text-3xl sm:text-5xl font-black text-white tracking-tight leading-tight">
                {siteConfig.heroTitle}
              </h2>

              <p className="text-slate-300 text-xs sm:text-sm leading-relaxed">
                {siteConfig.heroSubtitle}
              </p>

              <div className="pt-2 flex flex-wrap gap-3">
                <a
                  href="https://rdmma.mtsmambaulhikmah.sch.id/"
                  target="_blank"
                  rel="noopener noreferrer"
                  className={`px-6 py-3 bg-gradient-to-r ${theme.gradientBtn} text-slate-950 rounded-2xl font-black text-xs shadow-xl transition-all flex items-center gap-2`}
                >
                  <Server className="w-4 h-4" /> Buka Server RDM Madrasah <ExternalLink className="w-3.5 h-3.5" />
                </a>

                <a
                  href="#pencarian-gtk"
                  className="px-6 py-3 bg-slate-900/90 hover:bg-slate-800 text-white border border-slate-700/80 rounded-2xl font-bold text-xs transition-all flex items-center gap-2"
                >
                  <Search className={`w-4 h-4 ${theme.accentText}`} /> Cari Data Guru (EMIS)
                </a>
              </div>
            </div>
          </div>

          {/* SEARCH SECTION */}
          <section id="pencarian-gtk" className="bg-[#0b1120] border border-slate-800 rounded-[2rem] p-6 sm:p-8 shadow-xl space-y-6">
            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-slate-800/80 pb-6">
              <div>
                <span className={`text-[10px] font-black uppercase tracking-wider ${theme.accentBadge} px-2.5 py-1 rounded-md`}>
                  Layanan Mandiri
                </span>
                <h3 className="text-xl sm:text-2xl font-black text-white mt-1">Pencarian Data Guru & Pendidik</h3>
                <p className="text-xs text-slate-400 mt-1">Cari data NUPTK, NPK, mata pelajaran, dan status keaktifan SIMPATIKA secara transparan.</p>
              </div>

              <div className="flex items-center gap-2 bg-slate-900 p-1.5 rounded-2xl border border-slate-800 self-start sm:self-auto">
                {['Semua', 'Sertifikasi', 'PNS/PPPK', 'GTT'].map((filter) => (
                  <button
                    key={filter}
                    onClick={() => setPublicGtkFilter(filter)}
                    className={`px-3 py-1.5 rounded-xl text-xs font-bold transition-all ${
                      publicGtkFilter === filter
                        ? `${theme.activeTab}`
                        : 'text-slate-400 hover:text-white'
                    }`}
                  >
                    {filter}
                  </button>
                ))}
              </div>
            </div>

            <form onSubmit={handleExecuteSearchGtk} className="flex flex-col sm:flex-row gap-3">
              <div className="relative flex-1">
                <Search className="w-5 h-5 text-slate-500 absolute left-4 top-1/2 -translate-y-1/2" />
                <input
                  type="text"
                  value={publicGtkInput}
                  onChange={(e) => setPublicGtkInput(e.target.value)}
                  placeholder="Ketikkan nama guru, NUPTK, NPK Kemenag, atau mata pelajaran..."
                  className="w-full pl-12 pr-4 py-3.5 rounded-2xl bg-slate-900 border border-slate-700 text-slate-100 text-xs sm:text-sm focus:outline-none focus:border-slate-500 placeholder:text-slate-600"
                />
              </div>

              <div className="flex gap-2">
                <button
                  type="submit"
                  className={`px-6 py-3.5 ${theme.accentBg} text-slate-950 font-bold text-xs rounded-2xl shadow-lg transition-all flex items-center justify-center gap-2 flex-1 sm:flex-none`}
                >
                  <Search className="w-4 h-4" /> Cari Pendidik
                </button>

                {hasSearched && (
                  <button
                    type="button"
                    onClick={handleResetSearchGtk}
                    className="p-3.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-2xl transition-all"
                    title="Reset Search"
                  >
                    <RotateCcw className="w-4 h-4" />
                  </button>
                )}
              </div>
            </form>

            {/* HASIL PENCARIAN GTK PUBLIK */}
            {hasSearched && (
              <div className="space-y-4 pt-2">
                <div className="flex items-center justify-between text-xs text-slate-400">
                  <span>Hasil Pencarian: <strong className="text-white">{publicSearchResults.length}</strong> pendidik ditemukan</span>
                </div>

                {publicSearchResults.length > 0 ? (
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {publicSearchResults.map((gtk) => (
                      <div
                        key={gtk.id}
                        className={`p-5 rounded-2xl bg-slate-900/90 border border-slate-800 hover:${theme.accentBorder} transition-all flex flex-col justify-between space-y-4`}
                      >
                        <div>
                          <div className="flex items-center justify-between mb-2">
                            <span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase ${theme.accentBadge}`}>
                              {gtk.statusPegawai}
                            </span>
                            <span className="text-[10px] text-slate-500 font-mono">NUPTK: {gtk.nuptk}</span>
                          </div>

                          <h4 className="font-bold text-white text-base">{gtk.nama}</h4>
                          <p className="text-xs text-slate-400">{gtk.jabatan}</p>

                          <div className="mt-3 pt-3 border-t border-slate-800/80 space-y-1.5 text-xs">
                            <div className="flex justify-between">
                              <span className="text-slate-500">Mata Pelajaran:</span>
                              <span className={`font-semibold ${theme.accentText}`}>{gtk.mapel}</span>
                            </div>
                            <div className="flex justify-between">
                              <span className="text-slate-500">Sertifikasi:</span>
                              <span className="text-slate-300">{gtk.sertifikasi}</span>
                            </div>
                          </div>
                        </div>

                        <button
                          onClick={() => setSelectedGtkModal(gtk)}
                          className="w-full py-2 bg-slate-800 hover:bg-slate-700 text-white rounded-xl text-xs font-bold transition-all flex items-center justify-center gap-1.5"
                        >
                          <Eye className={`w-3.5 h-3.5 ${theme.accentText}`} /> Lihat Profil Lengkap
                        </button>
                      </div>
                    ))}
                  </div>
                ) : (
                  <div className="p-8 rounded-2xl bg-slate-900/50 border border-slate-800 text-center space-y-2">
                    <AlertCircle className="w-8 h-8 text-slate-600 mx-auto" />
                    <p className="text-slate-400 text-xs">Tidak ada data pendidik yang cocok dengan kata kunci pencarian Anda.</p>
                  </div>
                )}
              </div>
            )}
          </section>

          {/* EKOSISTEM IT */}
          <section className="space-y-6">
            <div className="flex items-center justify-between">
              <div>
                <h3 className="text-xl sm:text-2xl font-black text-white">Ekosistem Layanan IT Madrasah</h3>
                <p className="text-xs text-slate-400 mt-1">Akses cepat ke seluruh portal resmi Kemenag, Pusdatin, dan server internal.</p>
              </div>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
              {services.map((srv) => (
                <div
                  key={srv.id}
                  className={`p-6 rounded-3xl border transition-all flex flex-col justify-between relative overflow-hidden group ${
                    srv.featured
                      ? `bg-gradient-to-br from-slate-900 via-slate-900 to-slate-950 ${theme.accentBorder} shadow-xl`
                      : 'bg-[#0b1120] border-slate-800 hover:border-slate-700'
                  }`}
                >
                  <div className="space-y-4">
                    <div className="flex items-center justify-between">
                      <div className={`p-3 rounded-2xl ${
                        srv.featured ? `${theme.accentBg} text-slate-950 font-bold` : `bg-slate-800 ${theme.accentText}`
                      }`}>
                        {srv.icon}
                      </div>

                      <div className="flex items-center gap-2">
                        <span className={`flex items-center gap-1 text-[10px] font-bold ${theme.accentBadge} px-2 py-0.5 rounded-full`}>
                          <span className={`w-1.5 h-1.5 rounded-full ${theme.accentBg} animate-pulse`}></span>
                          {srv.status}
                        </span>
                      </div>
                    </div>

                    <div>
                      <span className="text-[10px] font-bold text-slate-500 uppercase tracking-wider">{srv.tag}</span>
                      <h4 className={`text-base font-bold text-white group-hover:${theme.accentText} transition-colors`}>{srv.name}</h4>
                      <p className="text-slate-400 text-xs leading-relaxed mt-1.5">{srv.desc}</p>
                    </div>
                  </div>

                  <div className="pt-6 mt-4 border-t border-slate-800/80 flex items-center justify-between">
                    <span className="text-[10px] font-mono text-slate-500">Latency: {srv.ping}</span>
                    <a
                      href={srv.url}
                      target="_blank"
                      rel="noopener noreferrer"
                      className={`inline-flex items-center gap-1.5 text-xs font-bold ${theme.accentText} hover:opacity-80 transition-opacity`}
                    >
                      Buka Portal <ArrowUpRight className="w-3.5 h-3.5" />
                    </a>
                  </div>
                </div>
              ))}
            </div>
          </section>

          {/* FORM PENGAJUAN VERVAL PD */}
          <section className="bg-[#0b1120] border border-slate-800 rounded-[2.5rem] p-6 sm:p-10 shadow-2xl space-y-6">
            <div className="max-w-2xl space-y-2">
              <span className={`px-3 py-1 rounded-full text-[10px] font-bold ${theme.accentBadge}`}>
                Pusat Bantuan Siswa & Wali
              </span>
              <h3 className="text-xl sm:text-3xl font-black text-white">Layanan Pengaduan Verval PD (Perbaikan Data Siswa)</h3>
              <p className="text-xs sm:text-sm text-slate-400">
                Apabila terdapat kesalahan ejaan nama, NIK, tempat tanggal lahir pada NISN siswa, silakan ajukan formulir di bawah ini secara langsung ke WhatsApp Operator.
              </p>
            </div>

            <form onSubmit={handleVervalSubmit} className="space-y-4">
              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div>
                  <label className="block text-xs font-bold text-slate-300 mb-1">
                    Nama Lengkap Siswa <span className="text-rose-400">*</span>
                  </label>
                  <input
                    type="text"
                    required
                    value={vervalForm.namaSiswa}
                    onChange={(e) => setVervalForm({ ...vervalForm, namaSiswa: e.target.value })}
                    placeholder="Sesuai Akta Kelahiran"
                    className="w-full px-4 py-3 rounded-xl bg-slate-900 border border-slate-800 text-xs text-white focus:border-slate-600 focus:outline-none"
                  />
                </div>

                <div>
                  <label className="block text-xs font-bold text-slate-300 mb-1">
                    NISN Siswa (10 Digit) <span className="text-rose-400">*</span>
                  </label>
                  <input
                    type="text"
                    required
                    value={vervalForm.nisn}
                    onChange={(e) => setVervalForm({ ...vervalForm, nisn: e.target.value })}
                    placeholder="0012345678"
                    className="w-full px-4 py-3 rounded-xl bg-slate-900 border border-slate-800 text-xs text-white focus:border-slate-600 focus:outline-none font-mono"
                  />
                </div>

                <div>
                  <label className="block text-xs font-bold text-slate-300 mb-1">
                    NIK Siswa (16 Digit) <span className="text-rose-400">*</span>
                  </label>
                  <input
                    type="text"
                    required
                    value={vervalForm.nik}
                    onChange={(e) => setVervalForm({ ...vervalForm, nik: e.target.value })}
                    placeholder="3509123456780001"
                    className="w-full px-4 py-3 rounded-xl bg-slate-900 border border-slate-800 text-xs text-white focus:border-slate-600 focus:outline-none font-mono"
                  />
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-bold text-slate-300 mb-1">Kategori Perubahan Data</label>
                  <select
                    value={vervalForm.kategori}
                    onChange={(e) => setVervalForm({ ...vervalForm, kategori: e.target.value })}
                    className="w-full px-3 py-3 rounded-xl bg-slate-900 border border-slate-800 text-xs text-white focus:border-slate-600 focus:outline-none"
                  >
                    <option value="Perbaikan Ejaan Nama Siswa">Perbaikan Ejaan Nama Siswa</option>
                    <option value="Perbaikan Tempat / Tanggal Lahir">Perbaikan Tempat / Tanggal Lahir</option>
                    <option value="Perbaikan NIK / No. KK Kependudukan">Perbaikan NIK / No. KK Kependudukan</option>
                    <option value="Perbaikan Nama Ibu Kandung">Perbaikan Nama Ibu Kandung</option>
                    <option value="Sinkronisasi NISN Ganda">Sinkronisasi NISN Ganda</option>
                  </select>
                </div>

                <div>
                  <label className="block text-xs font-bold text-slate-300 mb-1">Kelas Siswa Saat Ini</label>
                  <select
                    value={vervalForm.kelas}
                    onChange={(e) => setVervalForm({ ...vervalForm, kelas: e.target.value })}
                    className="w-full px-3 py-3 rounded-xl bg-slate-900 border border-slate-800 text-xs text-white focus:border-slate-600 focus:outline-none"
                  >
                    <option value="X - 1 (Fase E)">X - 1 (Fase E)</option>
                    <option value="X - 2 (Fase E)">X - 2 (Fase E)</option>
                    <option value="XI - IPA (Fase F)">XI - IPA (Fase F)</option>
                    <option value="XI - IPS (Fase F)">XI - IPS (Fase F)</option>
                    <option value="XII - IPA">XII - IPA</option>
                    <option value="XII - IPS">XII - IPS</option>
                  </select>
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-bold text-slate-300 mb-1">
                    Data Lama (Yang Salah) <span className="text-rose-400">*</span>
                  </label>
                  <input
                    type="text"
                    required
                    value={vervalForm.dataLama}
                    onChange={(e) => setVervalForm({ ...vervalForm, dataLama: e.target.value })}
                    placeholder="Cth: Ahmad Faozi (Lahir: 12-05-2007)"
                    className="w-full px-4 py-3 rounded-xl bg-slate-900 border border-slate-800 text-xs text-white focus:border-slate-600 focus:outline-none"
                  />
                </div>

                <div>
                  <label className="block text-xs font-bold text-slate-300 mb-1">
                    Data Baru (Yang Benar Sesuai Akta/KK) <span className="text-rose-400">*</span>
                  </label>
                  <input
                    type="text"
                    required
                    value={vervalForm.dataBaru}
                    onChange={(e) => setVervalForm({ ...vervalForm, dataBaru: e.target.value })}
                    placeholder="Cth: Ahmad Fauzi (Lahir: 15-05-2007)"
                    className="w-full px-4 py-3 rounded-xl bg-slate-900 border border-slate-800 text-xs text-white focus:border-slate-600 focus:outline-none"
                  />
                </div>
              </div>

              <div>
                <label className="block text-xs font-bold text-slate-300 mb-1">Catatan Tambahan (Opsional)</label>
                <textarea
                  rows={2}
                  value={vervalForm.catatan}
                  onChange={(e) => setVervalForm({ ...vervalForm, catatan: e.target.value })}
                  placeholder="Informasi pendukung lainnya..."
                  className="w-full px-4 py-3 rounded-xl bg-slate-900 border border-slate-800 text-xs text-white focus:border-slate-600 focus:outline-none"
                />
              </div>

              <button
                type="submit"
                className={`w-full py-4 ${theme.accentBg} text-slate-950 font-black text-xs sm:text-sm rounded-2xl shadow-xl transition-all flex items-center justify-center gap-2`}
              >
                <MessageSquare className="w-5 h-5" />
                <span>Kirim Pengaduan Verval PD ke WhatsApp Operator</span>
              </button>
            </form>
          </section>

          {/* GALERI & EDARAN */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* GALERI FOTO (2 KOLOM) */}
            <div className="lg:col-span-2 space-y-6">
              <div className="flex items-center justify-between">
                <div>
                  <h3 className="text-xl font-black text-white">Galeri Dokumentasi Operator</h3>
                  <p className="text-xs text-slate-400 mt-0.5">Aktivitas pemeliharaan server, asesmen, dan pemberkasan GTK.</p>
                </div>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                {gallery.map((item) => (
                  <div
                    key={item.id}
                    onClick={() => setPreviewModalPhoto(item)}
                    className={`group bg-[#0b1120] border border-slate-800 hover:${theme.accentBorder} rounded-2xl overflow-hidden cursor-pointer transition-all shadow-lg flex flex-col justify-between`}
                  >
                    <div className="h-44 bg-slate-900 overflow-hidden relative">
                      <img
                        src={item.url}
                        alt={item.title}
                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                      />
                      <span className={`absolute top-3 left-3 px-2.5 py-1 bg-black/80 backdrop-blur-md ${theme.accentText} text-[10px] font-bold rounded-lg border border-white/10`}>
                        {item.category}
                      </span>
                    </div>

                    <div className="p-4 space-y-2">
                      <div className="text-[10px] text-slate-500 flex items-center gap-1">
                        <Calendar className="w-3 h-3" /> {item.date}
                      </div>
                      <h4 className={`font-bold text-white text-xs group-hover:${theme.accentText} transition-colors line-clamp-2`}>
                        {item.title}
                      </h4>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* PENGUMUMAN & EDARAN (1 KOLOM) */}
            <div className="space-y-6">
              <div className="flex items-center justify-between">
                <div>
                  <h3 className="text-xl font-black text-white">Edaran Resmi Operator</h3>
                  <p className="text-xs text-slate-400 mt-0.5">Instruksi dan pemberitahuan penting.</p>
                </div>
              </div>

              <div className="space-y-3">
                {announcements.map((ann) => (
                  <div
                    key={ann.id}
                    className={`p-4 rounded-2xl border transition-all space-y-2.5 ${
                      ann.urgent
                        ? 'bg-rose-950/20 border-rose-500/30'
                        : 'bg-[#0b1120] border-slate-800'
                    }`}
                  >
                    <div className="flex items-center justify-between">
                      <span className={`px-2 py-0.5 rounded text-[10px] font-bold ${
                        ann.urgent ? 'bg-rose-500 text-white' : `${theme.accentBadge}`
                      }`}>
                        {ann.category}
                      </span>
                      <span className="text-[10px] text-slate-500">{ann.date}</span>
                    </div>

                    <h4 className="font-bold text-white text-xs leading-snug">{ann.title}</h4>
                    <p className="text-slate-400 text-[11px] leading-relaxed">{ann.text}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </main>
      )}

      {/* FOOTER */}
      <footer className="bg-[#050811] border-t border-slate-800/80 mt-16 py-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-500">
          <div className="flex items-center gap-3">
            <div className={`w-8 h-8 rounded-xl ${theme.glowBg} border ${theme.accentBorder} flex items-center justify-center ${theme.accentText} font-black`}>
              MA
            </div>
            <div>
              <span className="font-bold text-slate-300 block">{siteConfig.schoolName}</span>
              <span className="text-[11px]">{siteConfig.subTitle}</span>
            </div>
          </div>

          <p className="text-[11px] text-center sm:text-right">
            © {new Date().getFullYear()} {siteConfig.schoolName}. Terintegrasi SIMPATIKA Kemenag & EMIS 4.0.
          </p>
        </div>
      </footer>
    </div>
  );
}