```react
import React, { useState, useEffect, useRef } from 'react';
import { 
  Shield, 
  BookOpen, 
  Award, 
  Users, 
  Phone, 
  MapPin, 
  Mail, 
  CheckCircle, 
  Lock, 
  Unlock,
  Menu, 
  X, 
  Send, 
  MessageSquare, 
  Search, 
  Calendar, 
  ArrowRight, 
  ChevronRight,
  Eye,
  Info,
  Heart,
  Plus,
  Trash2,
  Edit3,
  Save,
  RefreshCw
} from 'lucide-react';

// Konfigurasi API Gemini
const apiKey = ""; // Disuntikkan otomatis oleh environment saat runtime

export default function App() {
  // --- 1. STATE MANAGEMENT KONTEN EDITABLE (ADMIN CMS) ---
  const [siteContent, setSiteContent] = useState({
    schoolName: "MAS Al Irsyad Muning Baru",
    fullName: "Madrasah Swasta Aliyah Al Irsyad Muning Baru",
    announcement: "Penerimaan Santri Baru (PSB) TA 2026/2027 Telah Resmi Dibuka!",
    heroTitle: "Membentuk Generasi Robbani, Unggul Sains & Teknologi",
    heroSubtitle: "MAS Al Irsyad Muning Baru mengintegrasikan pendidikan akhlakul karimah kepesantrenan dengan keunggulan akademik sains berstandar nasional dan global.",
    address: "Jl. KH. Akhmad Dahlan, Desa Muning Baru, Kec. Daha Selatan, Kab. Hulu Sungai Selatan, Kalimantan Selatan",
    phone: "+62 812-5555-4321",
    email: "humas@masalirsyadmuningbaru.sch.id",
    vision: "Terwujudnya generasi muda Muslim beraqidah lurus, berakhlak mulia, berprestasi dalam sains & teknologi, serta siap berkontribusi positif bagi kemaslahatan umat global.",
    accreditation: "A (Unggul)"
  });

  // State Tab & Menu Navigasi
  const [activeTab, setActiveTab] = useState('beranda');
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  
  // --- 2. STATE OTENTIKASI & PANEL ADMIN ---
  const [isAdminLoggedIn, setIsAdminLoggedIn] = useState(false);
  const [adminPasswordInput, setAdminPasswordInput] = useState('');
  const [loginError, setLoginError] = useState('');
  const [showLoginModal, setShowLoginModal] = useState(false);
  const [adminTab, setAdminTab] = useState('content'); // 'content' | 'students' | 'messages'

  // --- 3. STATE DATABASE SISWA (BISA DIEDIT/TAMBAH OLEH ADMIN) ---
  const [students, setStudents] = useState([
    { id: "1", nisn: "1234567890", nama: "Ahmad Fauzi Rahman", kelas: "XII IPA 1", status: "Aktif", tahunMasuk: "2024" },
    { id: "2", nisn: "0987654321", nama: "Siti Zulaiha Aminah", kelas: "XI IPS 2", status: "Aktif", tahunMasuk: "2025" },
    { id: "3", nisn: "1122334455", nama: "Muhammad Ridho Husaini", kelas: "X Keagamaan", status: "Aktif", tahunMasuk: "2026" }
  ]);
  const [newStudent, setNewStudent] = useState({ nisn: '', nama: '', kelas: 'XII IPA 1', status: 'Aktif', tahunMasuk: '2026' });
  const [studentError, setStudentError] = useState('');

  // --- 4. STATE KOTAK MASUK (PESAN DARI PENGUNJUNG UMUM) ---
  const [inboxMessages, setInboxMessages] = useState([
    { id: "1", nama: "H. Abdullah", email: "abdullah@gmail.com", pesan: "Assalamu'alaikum, apakah untuk pendaftaran santri baru jalur beasiswa tahfidz masih dibuka?", tanggal: "03 Juni 2026" },
    { id: "2", nama: "Siti Rahmah", email: "rahmah@outlook.com", pesan: "Mohon info brosur rincian biaya asrama putri MAS Al Irsyad Muning Baru.", tanggal: "02 Juni 2026" }
  ]);

  // State Verifikasi NISN oleh Publik
  const [searchNisn, setSearchNisn] = useState('');
  const [verificationResult, setVerificationResult] = useState(null);
  const [verificationError, setVerificationError] = useState('');

  // State Formulir Hubungi Kami
  const [contactForm, setContactForm] = useState({ nama: '', email: '', pesan: '' });
  const [contactStatus, setContactStatus] = useState(null);

  // --- 5. STATE ASISTEN AI GEMINI ---
  const [chatOpen, setChatOpen] = useState(false);
  const [messages, setMessages] = useState([
    { role: 'assistant', text: 'Assalamualaikum! Saya Asisten AI MAS Al Irsyad Muning Baru. Ada yang bisa saya bantu terkait informasi pendaftaran, program studi, kegiatan, atau sejarah madrasah kami?' }
  ]);
  const [userInput, setUserInput] = useState('');
  const [isAiTyping, setIsAiTyping] = useState(false);
  const chatEndRef = useRef(null);

  // Scroll otomatis percakapan AI
  useEffect(() => {
    if (chatEndRef.current) {
      chatEndRef.current.scrollIntoView({ behavior: 'smooth' });
    }
  }, [messages, chatOpen]);

  // --- FORM HANDLER & SANITASI ---
  
  // Login Admin
  const handleAdminLogin = (e) => {
    e.preventDefault();
    // Simulasi password aman
    if (adminPasswordInput === 'admin123') {
      setIsAdminLoggedIn(true);
      setLoginError('');
      setAdminPasswordInput('');
      setShowLoginModal(false);
      setActiveTab('admin'); // Langsung buka halaman admin
    } else {
      setLoginError('Password salah! Coba gunakan password simulasi: admin123');
    }
  };

  // Logout Admin
  const handleAdminLogout = () => {
    setIsAdminLoggedIn(false);
    if (activeTab === 'admin') {
      setActiveTab('beranda');
    }
  };

  // Update Konten Situs oleh Admin
  const handleUpdateContent = (key, value) => {
    setSiteContent(prev => ({
      ...prev,
      [key]: value
    }));
  };

  // Tambah Siswa Baru oleh Admin
  const handleAddStudent = (e) => {
    e.preventDefault();
    setStudentError('');

    if (newStudent.nisn.length !== 10) {
      setStudentError('NISN harus 10 digit angka!');
      return;
    }

    if (students.some(s => s.nisn === newStudent.nisn)) {
      setStudentError('Siswa dengan NISN tersebut sudah terdaftar.');
      return;
    }

    const createdStudent = {
      id: Date.now().toString(),
      ...newStudent
    };

    setStudents(prev => [createdStudent, ...prev]);
    setNewStudent({ nisn: '', nama: '', kelas: 'XII IPA 1', status: 'Aktif', tahunMasuk: '2026' });
  };

  // Hapus Siswa oleh Admin
  const handleDeleteStudent = (id) => {
    setStudents(prev => prev.filter(s => s.id !== id));
  };

  // Verifikasi NISN Terproteksi (Sisi Publik)
  const handleVerifyNisn = (e) => {
    e.preventDefault();
    setVerificationResult(null);
    setVerificationError('');

    const sanitizedInput = searchNisn.replace(/[^0-9]/g, '');
    
    if (sanitizedInput.length !== 10) {
      setVerificationError('NISN harus terdiri dari 10 digit angka.');
      return;
    }

    const matchedSiswa = students.find(s => s.nisn === sanitizedInput);

    if (matchedSiswa) {
      // Sensor Nama demi Privasi Publik (UU Pelindungan Data Pribadi)
      const namaAsli = matchedSiswa.nama;
      const kata = namaAsli.split(' ');
      const namaDisensor = kata.map(w => {
        if (w.length <= 2) return w;
        return w[0] + '*'.repeat(w.length - 2) + w[w.length - 1];
      }).join(' ');

      setVerificationResult({
        ...matchedSiswa,
        nama: namaDisensor
      });
    } else {
      setVerificationError('Data siswa tidak ditemukan atau tidak dipublikasikan demi perlindungan privasi.');
    }
  };

  // Kirim Pesan Kontak Publik (Disimpan ke Inbox Admin secara Real-time)
  const handleContactSubmit = (e) => {
    e.preventDefault();
    
    const sanitize = (text) => text.replace(/<[^>]*>/g, '').trim();
    
    const cleanNama = sanitize(contactForm.nama);
    const cleanEmail = sanitize(contactForm.email);
    const cleanPesan = sanitize(contactForm.pesan);

    if (!cleanNama || !cleanEmail || !cleanPesan) {
      setContactStatus({ type: 'error', text: 'Format isian tidak aman atau mengandung karakter mencurigakan.' });
      return;
    }

    setContactStatus({ type: 'loading', text: 'Mengirim pesan secara aman...' });

    // Tambah pesan ke inbox admin secara instan
    const tglHariIni = new Date().toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' });
    const newMessage = {
      id: Date.now().toString(),
      nama: cleanNama,
      email: cleanEmail,
      pesan: cleanPesan,
      tanggal: tglHariIni
    };

    setTimeout(() => {
      setInboxMessages(prev => [newMessage, ...prev]);
      setContactStatus({ 
        type: 'success', 
        text: `Terima kasih Kak ${cleanNama}, pesan Anda berhasil disaring dan dikirimkan secara aman ke tim sekretariat MAS Al Irsyad Muning Baru.` 
      });
      setContactForm({ nama: '', email: '', pesan: '' });
    }, 1200);
  };

  // Hapus Pesan dari Inbox Admin
  const handleDeleteMessage = (id) => {
    setInboxMessages(prev => prev.filter(m => m.id !== id));
  };

  // Panggilan API Gemini untuk Asisten AI Virtual
  const fetchGeminiResponse = async (userText, retries = 5, delay = 1000) => {
    const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`;
    
    const systemPrompt = `Kamu adalah Asisten AI Virtual resmi untuk website Madrasah Swasta Aliyah Al Irsyad Muning Baru (disingkat MAS Al Irsyad Muning Baru) yang berlokasi di Desa Muning Baru, Kecamatan Daha Selatan, Kabupaten Hulu Sungai Selatan, Kalimantan Selatan.
Berikan informasi ramah, terstruktur, edukatif, dan bernuansa islami.
Gunakan detail sekolah terbaru yang saat ini aktif:
- Nama Lengkap: Madrasah Swasta Aliyah Al Irsyad Muning Baru (MAS Al Irsyad Muning Baru)
- Akreditasi: ${siteContent.accreditation}
- Alamat: ${siteContent.address}
- Kontak: Telepon ${siteContent.phone} dan Email ${siteContent.email}
- Jurusan Unggulan: MIPA (Sains & Riset), IPS (Sosial & Kewirausahaan), dan Keagamaan Islam (Pendalaman Kitab Kuning, Tahfidz Al-Qur'an, dan Bahasa Arab).
- Visi: ${siteContent.vision}
- Pengumuman Aktif: ${siteContent.announcement}

Jawablah pertanyaan masyarakat umum atau calon wali murid dengan sangat santun, profesional, ringkas, dan mulailah dengan salam islami (Assalamu'alaikum).`;

    const payload = {
      contents: [{ parts: [{ text: userText }] }],
      systemInstruction: { parts: [{ text: systemPrompt }] }
    };

    try {
      const response = await fetch(url, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });

      if (!response.ok) throw new Error(`HTTP Error: ${response.status}`);

      const data = await response.json();
      return data.candidates?.[0]?.content?.parts?.[0]?.text || "Maaf, saya sedang mengalami kendala dalam merespon pesan Anda.";
    } catch (error) {
      if (retries > 0) {
        await new Promise(resolve => setTimeout(resolve, delay));
        return fetchGeminiResponse(userText, retries - 1, delay * 2);
      }
      throw error;
    }
  };

  // Mengirim Chat ke AI
  const handleSendChat = async (e) => {
    e.preventDefault();
    if (!userInput.trim()) return;

    const userText = userInput;
    setMessages(prev => [...prev, { role: 'user', text: userText }]);
    setUserInput('');
    setIsAiTyping(true);

    try {
      const reply = await fetchGeminiResponse(userText);
      setMessages(prev => [...prev, { role: 'assistant', text: reply }]);
    } catch (err) {
      setMessages(prev => [...prev, { 
        role: 'assistant', 
        text: 'Maaf, sistem AI MAS Al Irsyad Muning Baru sedang mengalami gangguan koneksi aman. Silakan coba sesaat lagi.' 
      }]);
    } finally {
      setIsAiTyping(false);
    }
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 flex flex-col font-sans selection:bg-emerald-100">
      
      {/* 1. TOP SECURE BANNER */}
      <div className="bg-emerald-950 text-emerald-300 text-xs py-2 px-4 flex justify-between items-center border-b border-emerald-900">
        <div className="flex items-center gap-2 mx-auto sm:mx-0">
          <Shield className="w-4 text-emerald-400 animate-pulse" />
          <span>Situs Resmi MAS Al Irsyad Muning Baru | Akses Publik Terproteksi</span>
        </div>
        <div className="hidden sm:flex items-center gap-4">
          <span className="flex items-center gap-1"><Lock className="w-3 text-emerald-400" /> Admin CMS Enabled</span>
          {isAdminLoggedIn ? (
            <span className="text-amber-400 font-bold flex items-center gap-1 animate-pulse">
              <Unlock className="w-3" /> Sesi Admin Aktif
            </span>
          ) : (
            <span className="text-slate-400">Mode Publik</span>
          )}
        </div>
      </div>

      {/* MARQUEE ANNOUNCEMENT (Editable by Admin) */}
      <div className="bg-amber-400 text-emerald-950 text-xs py-1.5 px-4 overflow-hidden relative border-b border-amber-300">
        <div className="whitespace-nowrap animate-marquee flex items-center gap-2">
          <span className="font-bold uppercase bg-emerald-900 text-white px-2 py-0.5 rounded text-[10px]">PENTING:</span>
          <span>{siteContent.announcement}</span>
        </div>
      </div>

      {/* 2. MAIN HEADER & NAVIGATION */}
      <header className="sticky top-0 z-40 bg-white/95 backdrop-blur-md border-b border-slate-200 shadow-sm">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex justify-between items-center">
          
          {/* Logo Brand */}
          <div className="flex items-center gap-3 cursor-pointer" onClick={() => setActiveTab('beranda')}>
            <div className="w-12 h-12 bg-emerald-800 rounded-xl flex items-center justify-center text-white font-black shadow-md border-2 border-amber-400">
              <span className="text-lg tracking-tighter">MAS</span>
            </div>
            <div>
              <h1 className="text-emerald-950 font-extrabold text-base sm:text-lg leading-tight tracking-tight">
                {siteContent.schoolName}
              </h1>
              <p className="text-[10px] text-slate-500 tracking-widest font-bold">MUTQA • UNGGUL • MANDIRI</p>
            </div>
          </div>

          {/* Desktop Nav */}
          <nav className="hidden md:flex items-center gap-1">
            <button 
              onClick={() => setActiveTab('beranda')}
              className={`px-3 py-2 rounded-lg text-sm font-semibold transition-all ${activeTab === 'beranda' ? 'bg-emerald-50 text-emerald-800 font-bold' : 'text-slate-600 hover:text-emerald-700 hover:bg-slate-100'}`}
            >
              Beranda
            </button>
            <button 
              onClick={() => setActiveTab('profil')}
              className={`px-3 py-2 rounded-lg text-sm font-semibold transition-all ${activeTab === 'profil' ? 'bg-emerald-50 text-emerald-800 font-bold' : 'text-slate-600 hover:text-emerald-700 hover:bg-slate-100'}`}
            >
              Profil MAS
            </button>
            <button 
              onClick={() => setActiveTab('akademik')}
              className={`px-3 py-2 rounded-lg text-sm font-semibold transition-all ${activeTab === 'akademik' ? 'bg-emerald-50 text-emerald-800 font-bold' : 'text-slate-600 hover:text-emerald-700 hover:bg-slate-100'}`}
            >
              Kurikulum
            </button>
            <button 
              onClick={() => setActiveTab('verifikasi')}
              className={`px-3 py-2 rounded-lg text-sm font-semibold transition-all flex items-center gap-1 ${activeTab === 'verifikasi' ? 'bg-emerald-50 text-emerald-800 font-bold' : 'text-slate-600 hover:text-emerald-700 hover:bg-slate-100'}`}
            >
              <Shield className="w-4 text-emerald-600" />
              Verifikasi Siswa
            </button>
            <button 
              onClick={() => setActiveTab('kontak')}
              className={`px-3 py-2 rounded-lg text-sm font-semibold transition-all ${activeTab === 'kontak' ? 'bg-emerald-50 text-emerald-800 font-bold' : 'text-slate-600 hover:text-emerald-700 hover:bg-slate-100'}`}
            >
              Hubungi Kami
            </button>

            {/* Admin Access Tab Button */}
            {isAdminLoggedIn && (
              <button 
                onClick={() => setActiveTab('admin')}
                className={`ml-2 px-3 py-2 rounded-lg text-sm font-bold transition-all bg-amber-400 text-emerald-950 flex items-center gap-1 ${activeTab === 'admin' ? 'ring-2 ring-emerald-800' : 'hover:bg-amber-500'}`}
              >
                <Unlock className="w-4 h-4" /> Panel Admin
              </button>
            )}
          </nav>

          {/* Action Area */}
          <div className="flex items-center gap-2">
            {/* Admin Lock/Unlock Button */}
            {!isAdminLoggedIn ? (
              <button 
                onClick={() => setShowLoginModal(true)}
                className="p-2 text-slate-500 hover:text-emerald-800 hover:bg-slate-100 rounded-lg transition-all"
                title="Login Admin Madrasah"
              >
                <Lock className="w-5 h-5" />
              </button>
            ) : (
              <button 
                onClick={handleAdminLogout}
                className="p-2 text-amber-600 hover:text-red-600 hover:bg-red-50 rounded-lg transition-all"
                title="Keluar Sesi Admin"
              >
                <Unlock className="w-5 h-5 animate-pulse" />
              </button>
            )}

            <button 
              onClick={() => setChatOpen(true)}
              className="bg-emerald-800 text-white px-3.5 py-2 rounded-lg text-xs sm:text-sm font-bold shadow-md hover:bg-emerald-900 transition-all flex items-center gap-1.5"
            >
              <MessageSquare className="w-4 h-4" />
              <span className="hidden sm:inline">Tanya AI</span>
            </button>
            
            <button 
              onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
              className="md:hidden p-2 rounded-lg hover:bg-slate-100 text-slate-700"
              aria-label="Toggle Menu"
            >
              {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
          </div>
        </div>
      </header>

      {/* Mobile Menu */}
      {isMobileMenuOpen && (
        <div className="md:hidden bg-white border-b border-slate-200 px-4 py-3 space-y-1.5 shadow-lg animate-fadeIn">
          <button 
            onClick={() => { setActiveTab('beranda'); setIsMobileMenuOpen(false); }}
            className={`w-full text-left px-4 py-2.5 rounded-lg text-sm font-semibold ${activeTab === 'beranda' ? 'bg-emerald-50 text-emerald-800' : 'text-slate-600'}`}
          >
            Beranda
          </button>
          <button 
            onClick={() => { setActiveTab('profil'); setIsMobileMenuOpen(false); }}
            className={`w-full text-left px-4 py-2.5 rounded-lg text-sm font-semibold ${activeTab === 'profil' ? 'bg-emerald-50 text-emerald-800' : 'text-slate-600'}`}
          >
            Profil MAS
          </button>
          <button 
            onClick={() => { setActiveTab('akademik'); setIsMobileMenuOpen(false); }}
            className={`w-full text-left px-4 py-2.5 rounded-lg text-sm font-semibold ${activeTab === 'akademik' ? 'bg-emerald-50 text-emerald-800' : 'text-slate-600'}`}
          >
            Kurikulum
          </button>
          <button 
            onClick={() => { setActiveTab('verifikasi'); setIsMobileMenuOpen(false); }}
            className={`w-full text-left px-4 py-2.5 rounded-lg text-sm font-semibold flex items-center gap-2 ${activeTab === 'verifikasi' ? 'bg-emerald-50 text-emerald-800' : 'text-slate-600'}`}
          >
            <Shield className="w-4 text-emerald-600" /> Verifikasi Siswa
          </button>
          <button 
            onClick={() => { setActiveTab('kontak'); setIsMobileMenuOpen(false); }}
            className={`w-full text-left px-4 py-2.5 rounded-lg text-sm font-semibold ${activeTab === 'kontak' ? 'bg-emerald-50 text-emerald-800' : 'text-slate-600'}`}
          >
            Hubungi Kami
          </button>
          {isAdminLoggedIn && (
            <button 
              onClick={() => { setActiveTab('admin'); setIsMobileMenuOpen(false); }}
              className={`w-full text-left px-4 py-2.5 rounded-lg text-sm font-bold bg-amber-400 text-emerald-950 ${activeTab === 'admin' ? 'ring-2 ring-emerald-800' : ''}`}
            >
              🔓 Panel Admin (Aktif)
            </button>
          )}
        </div>
      )}

      {/* 3. CORE CONTENTS */}
      <main className="flex-grow">
        
        {/* ==================== TAB 1: BERANDA ==================== */}
        {activeTab === 'beranda' && (
          <div className="animate-fadeIn">
            {/* Hero Section */}
            <section className="relative overflow-hidden bg-gradient-to-br from-emerald-900 via-emerald-850 to-slate-900 text-white py-20 px-4 sm:px-6 lg:px-8">
              <div className="absolute inset-0 bg-[radial-gradient(#047857_1px,transparent_1px)] [background-size:16px_16px] opacity-25"></div>
              
              {/* Admin Quick Editor Indicator */}
              {isAdminLoggedIn && (
                <div className="absolute top-4 left-4 bg-amber-400 text-emerald-950 text-xs font-bold px-3 py-1 rounded-full shadow-md z-10 flex items-center gap-1">
                  <Edit3 className="w-3 h-3" /> Admin Mode: Klik "Panel Admin" untuk merubah teks di bawah ini.
                </div>
              )}

              <div className="max-w-7xl mx-auto grid md:grid-cols-12 gap-12 items-center relative z-10">
                <div className="md:col-span-7 space-y-6">
                  <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/20 border border-emerald-400/30 text-emerald-300 text-xs font-semibold uppercase tracking-wider">
                    <CheckCircle className="w-4 h-4 text-emerald-400" /> Penerimaan Santri Baru TA 2026/2027 Dibuka
                  </div>
                  <h1 className="text-3xl sm:text-5xl font-black tracking-tight leading-tight">
                    {siteContent.heroTitle}
                  </h1>
                  <p className="text-slate-300 text-base sm:text-lg leading-relaxed max-w-xl">
                    {siteContent.heroSubtitle}
                  </p>
                  <div className="flex flex-col sm:flex-row gap-4 pt-2">
                    <button 
                      onClick={() => setActiveTab('akademik')}
                      className="bg-amber-500 hover:bg-amber-600 text-emerald-950 font-extrabold px-8 py-3.5 rounded-xl shadow-lg shadow-amber-500/20 transition-all text-center flex items-center justify-center gap-2 group"
                    >
                      <span>Lihat Program Studi</span>
                      <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                    </button>
                    <button 
                      onClick={() => setChatOpen(true)}
                      className="bg-white/10 hover:bg-white/20 text-white border border-white/20 font-semibold px-6 py-3.5 rounded-xl transition-all text-center"
                    >
                      Konsultasi Instan (AI)
                    </button>
                  </div>
                </div>

                {/* Hero Side Graphic */}
                <div className="md:col-span-5 flex justify-center">
                  <div className="relative w-72 h-72 sm:w-96 sm:h-96">
                    <div className="absolute inset-0 bg-amber-400 rounded-full filter blur-3xl opacity-20 animate-pulse"></div>
                    <div className="absolute inset-4 bg-emerald-500 rounded-full filter blur-2xl opacity-10"></div>
                    
                    <div className="relative w-full h-full bg-gradient-to-tr from-emerald-800 to-emerald-600 rounded-3xl border-4 border-emerald-300/40 shadow-2xl flex flex-col items-center justify-center p-8 text-center gap-5 overflow-hidden">
                      <div className="absolute top-0 right-0 p-3 bg-amber-400 text-emerald-950 font-black rounded-bl-2xl text-[10px] uppercase tracking-wider shadow">
                        Akreditasi {siteContent.accreditation}
                      </div>
                      <div className="w-16 h-16 bg-amber-400/20 rounded-full flex items-center justify-center text-amber-400 border border-amber-400/40">
                        <Award className="w-9 h-9" />
                      </div>
                      <div>
                        <h3 className="font-extrabold text-xl text-white tracking-wide uppercase">MAS AL IRSYAD</h3>
                        <p className="text-emerald-100 text-xs mt-1">Muning Baru, Hulu Sungai Selatan</p>
                      </div>
                      <div className="w-full bg-emerald-950/60 rounded-xl py-2.5 px-4 border border-emerald-600/30 text-[11px] text-emerald-300 flex items-center justify-center gap-1.5">
                        <Shield className="w-4 text-emerald-400" /> Database Publik Dienkripsi & Aman
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            {/* Quick Stats */}
            <section className="py-12 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
              <div className="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
                <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
                  <div className="text-3xl font-black text-emerald-800">{students.length + 120}+</div>
                  <div className="text-xs text-slate-500 font-bold mt-1">Siswa Terdaftar</div>
                </div>
                <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
                  <div className="text-3xl font-black text-emerald-800">97.8%</div>
                  <div className="text-xs text-slate-500 font-bold mt-1">Lulus SNMPTN/PTKIN</div>
                </div>
                <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
                  <div className="text-3xl font-black text-emerald-800">100%</div>
                  <div className="text-xs text-slate-500 font-bold mt-1">Bebas Biaya Formulir</div>
                </div>
                <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
                  <div className="text-3xl font-black text-emerald-800">A (Akr)</div>
                  <div className="text-xs text-slate-500 font-bold mt-1">Status Kemenag</div>
                </div>
              </div>
            </section>

            {/* Core Values Section */}
            <section className="bg-slate-100 py-16 px-4 border-y border-slate-200">
              <div className="max-w-7xl mx-auto space-y-12">
                <div className="text-center space-y-3">
                  <h2 className="text-2xl sm:text-3xl font-extrabold text-emerald-950">Mengapa Memilih MAS Al Irsyad Muning Baru?</h2>
                  <p className="text-slate-500 max-w-2xl mx-auto text-sm">Fokus utama madrasah adalah memberikan pendidikan yang seimbang antara IPTEK dan IMTAQ demi kesuksesan santri.</p>
                </div>

                <div className="grid md:grid-cols-3 gap-8">
                  <div className="bg-white p-8 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-all">
                    <div className="w-12 h-12 bg-emerald-50 text-emerald-700 rounded-xl flex items-center justify-center mb-6">
                      <BookOpen className="w-6 h-6" />
                    </div>
                    <h3 className="font-bold text-lg text-slate-900 mb-2">Kurikulum Terintegrasi</h3>
                    <p className="text-slate-600 text-sm leading-relaxed">
                      Memadukan kurikulum Kementerian Agama dengan program riset ilmiah, tahfidz mutqin, serta kajian kitab klasik/pesantren.
                    </p>
                  </div>
                  
                  <div className="bg-white p-8 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-all">
                    <div className="w-12 h-12 bg-amber-50 text-amber-700 rounded-xl flex items-center justify-center mb-6">
                      <Award className="w-6 h-6" />
                    </div>
                    <h3 className="font-bold text-lg text-slate-900 mb-2">Prestasi & Karakter</h3>
                    <p className="text-slate-600 text-sm leading-relaxed">
                      Siswa dibimbing untuk meraih prestasi olimpiade sains (KSM) lokal maupun nasional dengan pembiasaan adab dan karakter mulia.
                    </p>
                  </div>

                  <div className="bg-white p-8 rounded-2xl border border-slate-200 shadow-sm hover:shadow-md transition-all">
                    <div className="w-12 h-12 bg-blue-50 text-blue-700 rounded-xl flex items-center justify-center mb-6">
                      <Users className="w-6 h-6" />
                    </div>
                    <h3 className="font-bold text-lg text-slate-900 mb-2">Lingkungan Asri & Aman</h3>
                    <p className="text-slate-600 text-sm leading-relaxed">
                      Terletak di Muning Baru, Daha Selatan dengan suasana yang damai, religius, serta kondusif bagi tumbuh kembang santri.
                    </p>
                  </div>
                </div>
              </div>
            </section>
          </div>
        )}

        {/* ==================== TAB 2: PROFIL MADRASAH ==================== */}
        {activeTab === 'profil' && (
          <div className="max-w-4xl mx-auto px-4 py-12 space-y-12 animate-fadeIn">
            <div className="space-y-3 text-center">
              <h2 className="text-2xl sm:text-3xl font-extrabold text-emerald-950">Profil MAS Al Irsyad Muning Baru</h2>
              <div className="w-20 h-1 bg-amber-400 mx-auto rounded-full"></div>
              <p className="text-slate-500 max-w-xl mx-auto text-sm">Madrasah Aliyah kebanggaan masyarakat Daha Selatan yang berkomitmen melahirkan lulusan berdaya saing tinggi.</p>
            </div>

            {/* Visi Misi */}
            <div className="bg-white p-8 rounded-2xl border border-slate-200 shadow-sm space-y-6">
              <div>
                <h3 className="text-lg font-bold text-emerald-800 flex items-center gap-2">
                  <Award className="w-5 h-5 text-amber-500" /> Visi Madrasah
                </h3>
                <p className="text-slate-700 italic mt-2 text-base sm:text-lg leading-relaxed pl-4 border-l-4 border-emerald-500">
                  "{siteContent.vision}"
                </p>
              </div>

              <hr className="border-slate-100" />

              <div>
                <h3 className="text-lg font-bold text-emerald-800 flex items-center gap-2">
                  <CheckCircle className="w-5 h-5 text-emerald-600" /> Strategi Pembelajaran & Misi
                </h3>
                <ul className="mt-3 space-y-2.5 text-sm text-slate-600">
                  <li className="flex items-start gap-2.5">
                    <span className="w-1.5 h-1.5 bg-emerald-600 rounded-full mt-2 shrink-0"></span>
                    <span>Menyelenggarakan tata kelola pembelajaran berbasis IT dan literasi digital yang sehat.</span>
                  </li>
                  <li className="flex items-start gap-2.5">
                    <span className="w-1.5 h-1.5 bg-emerald-600 rounded-full mt-2 shrink-0"></span>
                    <span>Mendalami ilmu-ilmu keislaman (*Tafsir*, *Hadits*, *Fiqih*) secara komprehensif.</span>
                  </li>
                  <li className="flex items-start gap-2.5">
                    <span className="w-1.5 h-1.5 bg-emerald-600 rounded-full mt-2 shrink-0"></span>
                    <span>Mempersiapkan kemandirian santri melalui pelatihan kewirausahaan lokal unggulan.</span>
                  </li>
                </ul>
              </div>
            </div>

            {/* Kepala Madrasah */}
            <div className="bg-emerald-950 text-white p-8 rounded-2xl shadow-md grid md:grid-cols-12 gap-8 items-center relative overflow-hidden">
              <div className="absolute inset-0 bg-[radial-gradient(#ffffff_1px,transparent_1px)] [background-size:24px_24px] opacity-5"></div>
              <div className="md:col-span-4 flex justify-center">
                <div className="w-44 h-44 bg-emerald-900 rounded-xl border-2 border-amber-400 flex items-center justify-center text-emerald-200 text-xs">
                  [Foto Kepala MAS]
                </div>
              </div>
              <div className="md:col-span-8 space-y-3">
                <span className="bg-amber-400 text-emerald-950 text-[10px] font-bold px-2 py-0.5 rounded uppercase tracking-wider">Sambutan Kepala</span>
                <p className="text-slate-300 text-sm italic leading-relaxed">
                  "Kami berkomitmen mengelola MAS Al Irsyad Muning Baru sebagai lembaga pendidikan yang sehat, inklusif, dan aman untuk publik. Dengan sistem admin terpusat, kami menjamin penyampaian informasi yang dinamis, akurat, dan terverifikasi secara berkala."
                </p>
                <div>
                  <h4 className="font-extrabold text-white text-base">Ustadz Drs. H. Sofyan Tsauri</h4>
                  <p className="text-emerald-300 text-xs uppercase tracking-widest mt-0.5">Kepala Madrasah MAS Al Irsyad</p>
                </div>
              </div>
            </div>
          </div>
        )}

        {/* ==================== TAB 3: AKADEMIK ==================== */}
        {activeTab === 'akademik' && (
          <div className="max-w-6xl mx-auto px-4 py-12 space-y-12 animate-fadeIn">
            <div className="space-y-3 text-center">
              <h2 className="text-2xl sm:text-3xl font-extrabold text-emerald-950">Pilihan Jurusan & Peminatan</h2>
              <div className="w-20 h-1 bg-amber-400 mx-auto rounded-full"></div>
              <p className="text-slate-500 max-w-xl mx-auto text-sm">Kurikulum MAS Al Irsyad Muning Baru disusun untuk membekali kecerdasan holistik.</p>
            </div>

            <div className="grid md:grid-cols-3 gap-8">
              {/* MIPA */}
              <div className="bg-white p-6 rounded-2xl border border-slate-200 flex flex-col justify-between shadow-sm">
                <div className="space-y-4">
                  <div className="w-10 h-10 bg-emerald-50 text-emerald-700 font-extrabold rounded-lg flex items-center justify-center text-sm">MIPA</div>
                  <h3 className="font-extrabold text-lg text-slate-900">Ilmu Alam Terpadu</h3>
                  <p className="text-slate-600 text-sm leading-relaxed">
                    Mengasah kemampuan riset, matematika, pemecahan masalah (coding), fisika, kimia, dan biologi berbasis praktikum aman.
                  </p>
                </div>
                <div className="pt-6 border-t border-slate-100 mt-6 text-xs text-emerald-700 font-bold">Fokus: Sains, IT & Kedokteran</div>
              </div>

              {/* IPS */}
              <div className="bg-white p-6 rounded-2xl border border-slate-200 flex flex-col justify-between shadow-sm">
                <div className="space-y-4">
                  <div className="w-10 h-10 bg-amber-50 text-amber-700 font-extrabold rounded-lg flex items-center justify-center text-sm">IPS</div>
                  <h3 className="font-extrabold text-lg text-slate-900">Ilmu Sosial & Keekonomian</h3>
                  <p className="text-slate-600 text-sm leading-relaxed">
                    Pembekalan kepemimpinan, sosiologi, tata kelola keuangan syariah, dan dasar hukum tata usaha negara yang etis.
                  </p>
                </div>
                <div className="pt-6 border-t border-slate-100 mt-6 text-xs text-amber-700 font-bold">Fokus: Hukum, Sosial & Bisnis Syariah</div>
              </div>

              {/* KEAGAMAAN */}
              <div className="bg-white p-6 rounded-2xl border border-slate-200 flex flex-col justify-between shadow-sm">
                <div className="space-y-4">
                  <div className="w-10 h-10 bg-blue-50 text-blue-700 font-extrabold rounded-lg flex items-center justify-center text-sm">AGM</div>
                  <h3 className="font-extrabold text-lg text-slate-900">Keagamaan Islam (Khusus)</h3>
                  <p className="text-slate-600 text-sm leading-relaxed">
                    Kajian literatur kitab kuning (Turats), tata bahasa Arab tingkat lanjut (Nahwu/Shorof), serta hafalan Al-Qur'an teruji.
                  </p>
                </div>
                <div className="pt-6 border-t border-slate-100 mt-6 text-xs text-blue-700 font-bold">Fokus: Ulama, Da'i & Guru Agama</div>
              </div>
            </div>
          </div>
        )}

        {/* ==================== TAB 4: VERIFIKASI SISWA ==================== */}
        {activeTab === 'verifikasi' && (
          <div className="max-w-3xl mx-auto px-4 py-12 space-y-8 animate-fadeIn">
            <div className="text-center space-y-3">
              <div className="p-3 bg-emerald-50 text-emerald-700 rounded-full inline-flex">
                <Shield className="w-8 h-8" />
              </div>
              <h2 className="text-2xl sm:text-3xl font-extrabold text-emerald-950">Verifikasi Status Siswa Secara Mandiri</h2>
              <div className="w-20 h-1 bg-amber-400 mx-auto rounded-full"></div>
              <p className="text-slate-500 max-w-lg mx-auto text-xs sm:text-sm">
                Mencegah penyalahgunaan informasi atau penipuan mengatasnamakan siswa {siteContent.schoolName}. Lakukan pengecekan status keaktifan di bawah ini.
              </p>
            </div>

            {/* NISN Search Card */}
            <div className="bg-white p-6 sm:p-8 rounded-2xl border border-slate-200 shadow-sm space-y-6">
              <form onSubmit={handleVerifyNisn} className="space-y-4">
                <div className="space-y-1.5">
                  <label className="text-xs font-bold text-slate-700 uppercase tracking-wider flex items-center gap-1.5">
                    <Lock className="w-4 h-4 text-slate-400" /> Masukkan NISN Siswa (10 Digit)
                  </label>
                  <div className="relative">
                    <input 
                      type="text" 
                      maxLength="10"
                      placeholder="Masukkan 10 digit angka" 
                      value={searchNisn}
                      onChange={(e) => setSearchNisn(e.target.value.replace(/[^0-9]/g, ''))}
                      className="w-full pl-4 pr-12 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-emerald-500 focus:outline-none font-mono tracking-widest text-sm"
                      required
                    />
                    <div className="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-400">
                      <Search className="w-5 h-5" />
                    </div>
                  </div>
                </div>

                <button 
                  type="submit" 
                  className="w-full bg-emerald-800 hover:bg-emerald-900 text-white font-bold py-3 px-6 rounded-xl text-sm transition-all shadow flex items-center justify-center gap-2"
                >
                  <Shield className="w-4 h-4" /> Cari Status Siswa
                </button>
              </form>

              {/* Data Privacy Disclaimer */}
              <div className="bg-slate-50 p-4 rounded-xl border border-slate-200/60 flex gap-3 text-xs text-slate-600 leading-relaxed">
                <Info className="w-5 h-5 text-emerald-700 shrink-0 mt-0.5" />
                <p>
                  <strong>Catatan Pelindungan Data:</strong> Sesuai dengan UU Perlindungan Data Pribadi, kami tidak menyajikan alamat rumah, nomor HP, atau nama wali secara publik. Admin MAS Al Irsyad mengelola database ini secara berkala melalui Dasbor Terenkripsi.
                </p>
              </div>

              {/* Search Result Display */}
              {verificationResult && (
                <div className="bg-emerald-50/40 p-6 rounded-xl border border-emerald-200 space-y-4 animate-scaleUp">
                  <div className="flex items-center gap-2 text-emerald-800 font-extrabold text-sm border-b border-emerald-100 pb-2">
                    <CheckCircle className="w-5 h-5 text-emerald-600" /> SISWA TERDAFTAR RESMI
                  </div>
                  <div className="grid grid-cols-2 gap-y-3 gap-x-2 text-xs sm:text-sm">
                    <div className="text-slate-500">Nama Lengkap (Disensor):</div>
                    <div className="text-slate-900 font-bold font-mono">{verificationResult.nama}</div>

                    <div className="text-slate-500">Kelas:</div>
                    <div className="text-slate-900 font-medium">{verificationResult.kelas}</div>

                    <div className="text-slate-500">Status Madrasah:</div>
                    <div>
                      <span className="bg-emerald-100 text-emerald-800 text-[10px] font-bold px-2.5 py-0.5 rounded-full uppercase tracking-wider">
                        {verificationResult.status}
                      </span>
                    </div>

                    <div className="text-slate-500">Tahun Masuk:</div>
                    <div className="text-slate-900 font-mono">{verificationResult.tahunMasuk}</div>
                  </div>
                </div>
              )}

              {verificationError && (
                <div className="bg-red-50 p-4 rounded-xl border border-red-200 text-red-800 text-xs sm:text-sm font-semibold flex items-center gap-2 animate-scaleUp">
                  <Info className="w-5 h-5 text-red-600 shrink-0" />
                  {verificationError}
                </div>
              )}
            </div>

            {/* Test Helper */}
            <div className="bg-white p-5 rounded-xl border border-slate-200 text-center space-y-2">
              <h4 className="text-xs font-bold text-slate-500 uppercase tracking-widest">Gunakan NISN Demo di bawah:</h4>
              <div className="flex flex-wrap justify-center gap-2.5">
                {students.slice(0, 3).map(student => (
                  <code 
                    key={student.id} 
                    onClick={() => setSearchNisn(student.nisn)}
                    className="cursor-pointer bg-slate-100 hover:bg-emerald-50 hover:text-emerald-800 px-3 py-1.5 rounded text-xs font-mono font-bold border border-slate-200 transition-all"
                  >
                    {student.nisn} ({student.nama.split(' ')[0]})
                  </code>
                ))}
              </div>
            </div>
          </div>
        )}

        {/* ==================== TAB 5: KONTAK ==================== */}
        {activeTab === 'kontak' && (
          <div className="max-w-6xl mx-auto px-4 py-12 animate-fadeIn space-y-12">
            <div className="text-center space-y-3">
              <h2 className="text-2xl sm:text-3xl font-extrabold text-emerald-950">Hubungi Kami</h2>
              <div className="w-20 h-1 bg-amber-400 mx-auto rounded-full"></div>
              <p className="text-slate-500 max-w-xl mx-auto text-sm">Jika Anda memiliki kritik, saran, atau pertanyaan kemitraan, hubungi kesekretariatan kami.</p>
            </div>

            <div className="grid md:grid-cols-12 gap-8 items-start">
              {/* Info Details */}
              <div className="md:col-span-5 bg-emerald-950 text-white p-8 rounded-2xl space-y-6 shadow-md relative overflow-hidden">
                <div className="absolute inset-0 bg-[radial-gradient(#ffffff_1px,transparent_1px)] [background-size:20px_20px] opacity-5"></div>
                <h3 className="text-lg font-bold text-amber-400 relative">Kontak Resmi</h3>
                <div className="space-y-4 text-xs sm:text-sm relative text-slate-300">
                  <div className="flex items-start gap-3">
                    <MapPin className="w-5 h-5 text-amber-400 shrink-0 mt-0.5" />
                    <span>{siteContent.address}</span>
                  </div>
                  <div className="flex items-center gap-3">
                    <Phone className="w-5 h-5 text-amber-400 shrink-0" />
                    <span>{siteContent.phone} (Hotline Humas)</span>
                  </div>
                  <div className="flex items-center gap-3">
                    <Mail className="w-5 h-5 text-amber-400 shrink-0" />
                    <span>{siteContent.email}</span>
                  </div>
                </div>
              </div>

              {/* Sanitized Message Form */}
              <div className="md:col-span-7 bg-white p-6 sm:p-8 rounded-2xl border border-slate-200 shadow-sm space-y-4">
                <h3 className="font-extrabold text-slate-900 text-lg flex items-center gap-2">
                  <Mail className="w-5 h-5 text-emerald-700" /> Hubungi Kesekretariatan
                </h3>
                <p className="text-xs text-slate-500">Pesan dikirim terenkripsi langsung ke Dasbor Admin Madrasah untuk segera ditindaklanjuti.</p>
                
                <form onSubmit={handleContactSubmit} className="space-y-4 pt-2">
                  <div className="grid sm:grid-cols-2 gap-4">
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Nama Anda</label>
                      <input 
                        type="text" 
                        value={contactForm.nama}
                        onChange={(e) => setContactForm({...contactForm, nama: e.target.value})}
                        className="w-full px-4 py-2 border border-slate-200 rounded-lg text-sm focus:ring-1 focus:ring-emerald-500 focus:outline-none"
                        placeholder="Contoh: Muhammad"
                        required
                      />
                    </div>
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Alamat Email</label>
                      <input 
                        type="email" 
                        value={contactForm.email}
                        onChange={(e) => setContactForm({...contactForm, email: e.target.value})}
                        className="w-full px-4 py-2 border border-slate-200 rounded-lg text-sm focus:ring-1 focus:ring-emerald-500 focus:outline-none"
                        placeholder="Contoh: muhammad@mail.com"
                        required
                      />
                    </div>
                  </div>

                  <div className="space-y-1">
                    <label className="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Pesan / Masukan</label>
                    <textarea 
                      value={contactForm.pesan}
                      rows="3"
                      onChange={(e) => setContactForm({...contactForm, pesan: e.target.value})}
                      className="w-full px-4 py-2 border border-slate-200 rounded-lg text-sm focus:ring-1 focus:ring-emerald-500 focus:outline-none"
                      placeholder="Bagaimana kami bisa membantu Anda?"
                      required
                    ></textarea>
                  </div>

                  <button 
                    type="submit" 
                    className="w-full bg-emerald-800 hover:bg-emerald-900 text-white font-bold py-2.5 rounded-lg text-xs sm:text-sm transition-all flex items-center justify-center gap-1.5"
                  >
                    <Send className="w-4 h-4" /> Kirim Pesan Aman
                  </button>
                </form>

                {contactStatus && (
                  <div className={`p-4 rounded-lg text-xs font-semibold animate-scaleUp ${
                    contactStatus.type === 'success' ? 'bg-emerald-100 text-emerald-800 border border-emerald-200' :
                    contactStatus.type === 'error' ? 'bg-red-50 text-red-800 border border-red-200' :
                    'bg-slate-100 text-slate-600 border border-slate-200'
                  }`}>
                    {contactStatus.text}
                  </div>
                )}
              </div>
            </div>
          </div>
        )}

        {/* ==================== TAB 6: ADMIN EDITABLE CMS DASHBOARD ==================== */}
        {activeTab === 'admin' && isAdminLoggedIn && (
          <div className="max-w-6xl mx-auto px-4 py-8 space-y-8 animate-fadeIn">
            
            {/* Admin Header */}
            <div className="bg-gradient-to-r from-emerald-900 to-emerald-800 text-white p-6 sm:p-8 rounded-2xl shadow-md flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
              <div className="space-y-1">
                <div className="flex items-center gap-2">
                  <span className="bg-amber-400 text-emerald-950 text-[10px] font-black px-2.5 py-1 rounded-full uppercase">Sesi Terverifikasi</span>
                  <span className="text-xs text-emerald-300 font-semibold font-mono">DIP_SEC_SECURE_256</span>
                </div>
                <h2 className="text-2xl font-black text-white">Dasbor Admin MAS Al Irsyad</h2>
                <p className="text-xs text-emerald-200">Kelola konten website publik secara langsung tanpa gangguan.</p>
              </div>
              <button 
                onClick={handleAdminLogout}
                className="bg-red-600 hover:bg-red-700 text-white font-bold px-4 py-2 rounded-xl text-xs transition-all self-start sm:self-center"
              >
                Tutup Sesi Admin
              </button>
            </div>

            {/* Sub-nav Admin */}
            <div className="flex border-b border-slate-200 gap-1 overflow-x-auto">
              <button 
                onClick={() => setAdminTab('content')}
                className={`px-4 py-2.5 text-xs sm:text-sm font-bold whitespace-nowrap border-b-2 transition-all ${adminTab === 'content' ? 'border-emerald-700 text-emerald-800' : 'border-transparent text-slate-500 hover:text-slate-800'}`}
              >
                📝 Edit Konten Utama
              </button>
              <button 
                onClick={() => setAdminTab('students')}
                className={`px-4 py-2.5 text-xs sm:text-sm font-bold whitespace-nowrap border-b-2 transition-all ${adminTab === 'students' ? 'border-emerald-700 text-emerald-800' : 'border-transparent text-slate-500 hover:text-slate-800'}`}
              >
                👥 Database Siswa ({students.length})
              </button>
              <button 
                onClick={() => setAdminTab('messages')}
                className={`px-4 py-2.5 text-xs sm:text-sm font-bold whitespace-nowrap border-b-2 transition-all ${adminTab === 'messages' ? 'border-emerald-700 text-emerald-800' : 'border-transparent text-slate-500 hover:text-slate-800'}`}
              >
                📥 Pesan Masuk ({inboxMessages.length})
              </button>
            </div>

            {/* Admin Tab 1: Edit Konten Website */}
            {adminTab === 'content' && (
              <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-6 animate-fadeIn">
                <h3 className="font-extrabold text-slate-900 text-base">Modifikasi Teks Website Publik</h3>
                <div className="grid sm:grid-cols-2 gap-6">
                  
                  {/* Edit Nama Sekolah */}
                  <div className="space-y-1">
                    <label className="text-[11px] font-extrabold text-slate-500 uppercase tracking-wider">Nama Pendek Madrasah</label>
                    <input 
                      type="text" 
                      value={siteContent.schoolName}
                      onChange={(e) => handleUpdateContent('schoolName', e.target.value)}
                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-xs font-semibold focus:outline-none focus:ring-1 focus:ring-emerald-500"
                    />
                  </div>

                  {/* Edit Nama Lengkap */}
                  <div className="space-y-1">
                    <label className="text-[11px] font-extrabold text-slate-500 uppercase tracking-wider">Nama Lengkap Instansi</label>
                    <input 
                      type="text" 
                      value={siteContent.fullName}
                      onChange={(e) => handleUpdateContent('fullName', e.target.value)}
                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-xs font-semibold focus:outline-none focus:ring-1 focus:ring-emerald-500"
                    />
                  </div>

                  {/* Edit Pengumuman Marquee */}
                  <div className="sm:col-span-2 space-y-1">
                    <label className="text-[11px] font-extrabold text-slate-500 uppercase tracking-wider">Teks Pengumuman Berjalan (Marquee)</label>
                    <input 
                      type="text" 
                      value={siteContent.announcement}
                      onChange={(e) => handleUpdateContent('announcement', e.target.value)}
                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-xs font-semibold focus:outline-none focus:ring-1 focus:ring-emerald-500"
                    />
                  </div>

                  {/* Edit Hero Title */}
                  <div className="sm:col-span-2 space-y-1">
                    <label className="text-[11px] font-extrabold text-slate-500 uppercase tracking-wider">Judul Utama Beranda (Hero Title)</label>
                    <input 
                      type="text" 
                      value={siteContent.heroTitle}
                      onChange={(e) => handleUpdateContent('heroTitle', e.target.value)}
                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-xs font-semibold focus:outline-none focus:ring-1 focus:ring-emerald-500"
                    />
                  </div>

                  {/* Edit Hero Subtitle */}
                  <div className="sm:col-span-2 space-y-1">
                    <label className="text-[11px] font-extrabold text-slate-500 uppercase tracking-wider">Sub-Judul Beranda (Hero Subtitle)</label>
                    <textarea 
                      rows="2"
                      value={siteContent.heroSubtitle}
                      onChange={(e) => handleUpdateContent('heroSubtitle', e.target.value)}
                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-xs font-semibold focus:outline-none focus:ring-1 focus:ring-emerald-500"
                    ></textarea>
                  </div>

                  {/* Edit Alamat */}
                  <div className="sm:col-span-2 space-y-1">
                    <label className="text-[11px] font-extrabold text-slate-500 uppercase tracking-wider">Alamat Lengkap Madrasah</label>
                    <input 
                      type="text" 
                      value={siteContent.address}
                      onChange={(e) => handleUpdateContent('address', e.target.value)}
                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-xs font-semibold focus:outline-none focus:ring-1 focus:ring-emerald-500"
                    />
                  </div>

                  {/* Edit Telepon */}
                  <div className="space-y-1">
                    <label className="text-[11px] font-extrabold text-slate-500 uppercase tracking-wider">Nomor Handphone Kontak</label>
                    <input 
                      type="text" 
                      value={siteContent.phone}
                      onChange={(e) => handleUpdateContent('phone', e.target.value)}
                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-xs font-semibold focus:outline-none focus:ring-1 focus:ring-emerald-500"
                    />
                  </div>

                  {/* Edit Email */}
                  <div className="space-y-1">
                    <label className="text-[11px] font-extrabold text-slate-500 uppercase tracking-wider">Email Resmi</label>
                    <input 
                      type="text" 
                      value={siteContent.email}
                      onChange={(e) => handleUpdateContent('email', e.target.value)}
                      className="w-full px-3 py-2 border border-slate-200 rounded-lg text-xs font-semibold focus:outline-none focus:ring-1 focus:ring-emerald-500"
                    />
                  </div>
                </div>

                <div className="bg-emerald-50 p-4 rounded-xl text-xs text-emerald-800 flex items-center gap-1.5 font-semibold">
                  <CheckCircle className="w-4 h-4 text-emerald-600" /> Seluruh perubahan di atas langsung diperbarui secara instan pada beranda web serta basis data bot AI.
                </div>
              </div>
            )}

            {/* Admin Tab 2: Manajemen Siswa */}
            {adminTab === 'students' && (
              <div className="grid md:grid-cols-12 gap-8 items-start animate-fadeIn">
                
                {/* Form Tambah Siswa */}
                <div className="md:col-span-4 bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4">
                  <h3 className="font-extrabold text-slate-900 text-sm">Pendaftaran Siswa Baru (Database)</h3>
                  
                  <form onSubmit={handleAddStudent} className="space-y-3.5">
                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-500 uppercase">NISN Siswa (10 Digit)</label>
                      <input 
                        type="text" 
                        maxLength="10"
                        placeholder="Contoh: 1234567890" 
                        value={newStudent.nisn}
                        onChange={(e) => setNewStudent({...newStudent, nisn: e.target.value.replace(/[^0-9]/g, '')})}
                        className="w-full px-3 py-2 border border-slate-200 rounded-lg text-xs focus:outline-none focus:ring-1 focus:ring-emerald-500"
                        required
                      />
                    </div>

                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-500 uppercase">Nama Lengkap</label>
                      <input 
                        type="text" 
                        placeholder="Masukkan nama lengkap siswa" 
                        value={newStudent.nama}
                        onChange={(e) => setNewStudent({...newStudent, nama: e.target.value})}
                        className="w-full px-3 py-2 border border-slate-200 rounded-lg text-xs focus:outline-none focus:ring-1 focus:ring-emerald-500"
                        required
                      />
                    </div>

                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-500 uppercase">Kelas & Jurusan</label>
                      <select 
                        value={newStudent.kelas}
                        onChange={(e) => setNewStudent({...newStudent, kelas: e.target.value})}
                        className="w-full px-3 py-2 border border-slate-200 rounded-lg text-xs bg-white focus:outline-none"
                      >
                        <option value="XII IPA 1">XII IPA 1</option>
                        <option value="XII IPA 2">XII IPA 2</option>
                        <option value="XI IPS 1">XI IPS 1</option>
                        <option value="XI IPS 2">XI IPS 2</option>
                        <option value="X Keagamaan">X Keagamaan</option>
                      </select>
                    </div>

                    <div className="space-y-1">
                      <label className="text-[10px] font-bold text-slate-500 uppercase">Tahun Masuk</label>
                      <input 
                        type="number" 
                        placeholder="Contoh: 2026" 
                        value={newStudent.tahunMasuk}
                        onChange={(e) => setNewStudent({...newStudent, tahunMasuk: e.target.value})}
                        className="w-full px-3 py-2 border border-slate-200 rounded-lg text-xs focus:outline-none focus:ring-1 focus:ring-emerald-500"
                        required
                      />
                    </div>

                    <button 
                      type="submit" 
                      className="w-full bg-emerald-800 hover:bg-emerald-900 text-white font-bold py-2 rounded-lg text-xs transition-all flex items-center justify-center gap-1.5"
                    >
                      <Plus className="w-4 h-4" /> Tambah ke Database
                    </button>
                  </form>

                  {studentError && (
                    <div className="text-red-600 bg-red-50 p-2.5 rounded-lg text-xs font-semibold">
                      {studentError}
                    </div>
                  )}
                </div>

                {/* Daftar Siswa Terdaftar */}
                <div className="md:col-span-8 bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4">
                  <h3 className="font-extrabold text-slate-900 text-sm">Daftar Aktif Siswa Terdaftar ({students.length})</h3>
                  
                  <div className="overflow-x-auto">
                    <table className="w-full text-xs text-left text-slate-600 border-collapse">
                      <thead>
                        <tr className="bg-slate-50 border-b border-slate-200 text-slate-700">
                          <th className="p-3">NISN</th>
                          <th className="p-3">Nama Lengkap</th>
                          <th className="p-3">Kelas</th>
                          <th className="p-3">Tahun</th>
                          <th className="p-3 text-center">Aksi</th>
                        </tr>
                      </thead>
                      <tbody>
                        {students.map((student) => (
                          <tr key={student.id} className="border-b border-slate-100 hover:bg-slate-50/50">
                            <td className="p-3 font-mono font-bold text-emerald-800">{student.nisn}</td>
                            <td className="p-3 font-semibold text-slate-900">{student.nama}</td>
                            <td className="p-3">{student.kelas}</td>
                            <td className="p-3 font-mono">{student.tahunMasuk}</td>
                            <td className="p-3 text-center">
                              <button 
                                onClick={() => handleDeleteStudent(student.id)}
                                className="p-1 text-red-500 hover:bg-red-50 rounded transition-all"
                                title="Hapus Siswa"
                              >
                                <Trash2 className="w-4 h-4" />
                              </button>
                            </td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            )}

            {/* Admin Tab 3: Pesan Masuk */}
            {adminTab === 'messages' && (
              <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4 animate-fadeIn">
                <h3 className="font-extrabold text-slate-900 text-base">Kotak Masuk Pesan Elektronik ({inboxMessages.length})</h3>
                
                {inboxMessages.length === 0 ? (
                  <div className="text-center py-12 text-slate-400 text-xs">
                    Belum ada pesan masuk dari pengunjung umum.
                  </div>
                ) : (
                  <div className="space-y-4">
                    {inboxMessages.map((msg) => (
                      <div key={msg.id} className="p-5 rounded-xl border border-slate-100 bg-slate-50/80 hover:bg-slate-50 transition-all flex flex-col sm:flex-row justify-between gap-4">
                        <div className="space-y-2">
                          <div className="flex flex-wrap items-center gap-2">
                            <span className="font-extrabold text-xs text-slate-900">{msg.nama}</span>
                            <span className="text-[10px] text-slate-400 font-mono">({msg.email})</span>
                            <span className="text-[9px] bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded font-bold">{msg.tanggal}</span>
                          </div>
                          <p className="text-slate-600 text-xs leading-relaxed max-w-3xl italic">
                            "{msg.pesan}"
                          </p>
                        </div>
                        <button 
                          onClick={() => handleDeleteMessage(msg.id)}
                          className="self-end sm:self-center p-2 text-red-500 hover:bg-red-100 rounded-lg transition-all"
                          title="Hapus Pesan"
                        >
                          <Trash2 className="w-4.5 h-4.5" />
                        </button>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            )}

          </div>
        )}

      </main>

      {/* 4. MODAL LOGIN ADMIN */}
      {showLoginModal && (
        <div className="fixed inset-0 z-50 bg-slate-950/40 backdrop-blur-sm flex items-center justify-center p-4">
          <div className="bg-white max-w-md w-full rounded-2xl border border-slate-200 shadow-2xl overflow-hidden p-6 space-y-4 animate-scaleUp">
            
            <div className="flex justify-between items-center pb-2 border-b border-slate-100">
              <div className="flex items-center gap-2">
                <div className="p-2 bg-emerald-50 text-emerald-700 rounded-lg">
                  <Lock className="w-5 h-5" />
                </div>
                <h3 className="font-black text-slate-900 text-sm sm:text-base">Login Admin MAS Al Irsyad</h3>
              </div>
              <button onClick={() => setShowLoginModal(false)} className="text-slate-400 hover:text-slate-600">
                <X className="w-5 h-5" />
              </button>
            </div>

            <form onSubmit={handleAdminLogin} className="space-y-4">
              <div className="space-y-1">
                <label className="text-[10px] font-bold text-slate-500 uppercase tracking-wider">Masukkan Sandi Keamanan</label>
                <input 
                  type="password" 
                  placeholder="Password Simulasi: admin123" 
                  value={adminPasswordInput}
                  onChange={(e) => setAdminPasswordInput(e.target.value)}
                  className="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-xs focus:ring-1 focus:ring-emerald-500 focus:outline-none"
                  required
                />
              </div>

              {loginError && (
                <div className="text-red-700 bg-red-50 p-2 rounded-lg text-[11px] font-semibold">
                  {loginError}
                </div>
              )}

              <button 
                type="submit" 
                className="w-full bg-emerald-800 hover:bg-emerald-900 text-white font-bold py-2.5 rounded-xl text-xs transition-all shadow-md"
              >
                Masuk ke Panel Admin
              </button>
            </form>
          </div>
        </div>
      )}

      {/* 5. FLOATING AI CHATBOT (GEMINI) */}
      <div className="fixed bottom-6 right-6 z-50">
        {!chatOpen ? (
          <button 
            onClick={() => setChatOpen(true)}
            className="w-14 h-14 bg-emerald-800 hover:bg-emerald-900 text-white rounded-full shadow-2xl flex items-center justify-center cursor-pointer transition-transform hover:scale-105 border-2 border-amber-400 relative group"
          >
            <MessageSquare className="w-6 h-6 animate-pulse" />
            <span className="absolute right-16 bg-emerald-950 text-white text-[10px] font-bold px-3 py-1.5 rounded-lg shadow-md whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-200 hidden sm:inline">
              Tanya Asisten AI MAS
            </span>
          </button>
        ) : (
          <div className="w-80 sm:w-96 bg-white border border-slate-200 rounded-2xl shadow-2xl flex flex-col overflow-hidden animate-scaleUp max-h-[480px]">
            {/* Header Chat */}
            <div className="bg-emerald-800 text-white p-4 flex justify-between items-center">
              <div className="flex items-center gap-2">
                <div className="w-8 h-8 bg-amber-400 rounded-lg flex items-center justify-center text-emerald-950 font-black text-xs">
                  AI
                </div>
                <div>
                  <h3 className="font-extrabold text-xs leading-none">Asisten Virtual MAS</h3>
                  <span className="text-[9px] text-emerald-200 flex items-center gap-1 mt-1">
                    <Shield className="w-3" /> Mode Enkripsi Aktif
                  </span>
                </div>
              </div>
              <button onClick={() => setChatOpen(false)} className="text-white hover:text-amber-400 transition-colors">
                <X className="w-5 h-5" />
              </button>
            </div>

            {/* Chat Messages */}
            <div className="flex-grow p-4 space-y-3 overflow-y-auto min-h-[220px] bg-slate-50 text-[11px]">
              {messages.map((msg, index) => (
                <div key={index} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'} animate-fadeIn`}>
                  <div className={`p-2.5 rounded-xl max-w-[85%] leading-relaxed ${
                    msg.role === 'user' 
                      ? 'bg-emerald-800 text-white rounded-br-none' 
                      : 'bg-white text-slate-800 border border-slate-200 rounded-bl-none shadow-sm'
                  }`}>
                    {msg.text}
                  </div>
                </div>
              ))}
              
              {isAiTyping && (
                <div className="flex justify-start items-center gap-1 bg-white border border-slate-200/50 py-2 px-3 rounded-lg rounded-bl-none w-fit">
                  <div className="w-1 h-1 bg-emerald-700 rounded-full animate-bounce"></div>
                  <div className="w-1 h-1 bg-emerald-700 rounded-full animate-bounce [animation-delay:0.2s]"></div>
                  <div className="w-1 h-1 bg-emerald-700 rounded-full animate-bounce [animation-delay:0.4s]"></div>
                </div>
              )}
              <div ref={chatEndRef} />
            </div>

            {/* Chat Input */}
            <form onSubmit={handleSendChat} className="p-3 border-t border-slate-100 flex gap-2 bg-white">
              <input 
                type="text" 
                placeholder="Tanya seputar pendaftaran atau kurikulum..."
                value={userInput}
                onChange={(e) => setUserInput(e.target.value)}
                className="flex-grow px-3 py-2 border border-slate-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-emerald-500 text-xs"
              />
              <button type="submit" className="bg-emerald-800 hover:bg-emerald-900 text-white p-2 rounded-lg transition-all">
                <Send className="w-4 h-4" />
              </button>
            </form>
          </div>
        )}
      </div>

      {/* 6. FOOTER */}
      <footer className="bg-slate-900 text-slate-400 text-xs border-t border-slate-800 mt-auto">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10 grid grid-cols-1 md:grid-cols-12 gap-8">
          <div className="md:col-span-5 space-y-4">
            <div className="flex items-center gap-2 text-white">
              <div className="w-8 h-8 bg-emerald-800 rounded-lg flex items-center justify-center font-bold text-sm border border-amber-400">
                MAS
              </div>
              <span className="font-extrabold text-sm tracking-wider">{siteContent.schoolName}</span>
            </div>
            <p className="text-[11px] text-slate-500 leading-relaxed max-w-sm">
              Berkomitmen menyelenggarakan pendidikan berkualitas, mengasah akhlakul karimah, dan membekali kemandirian IPTEK santri di Kalimantan Selatan.
            </p>
          </div>

          <div className="md:col-span-3 space-y-3">
            <h4 className="font-bold text-slate-200 uppercase tracking-wider text-[11px]">Sitemap</h4>
            <ul className="space-y-1.5 text-slate-500">
              <li><button onClick={() => { setActiveTab('beranda'); window.scrollTo(0,0); }} className="hover:text-emerald-400">Beranda</button></li>
              <li><button onClick={() => { setActiveTab('profil'); window.scrollTo(0,0); }} className="hover:text-emerald-400">Profil MAS</button></li>
              <li><button onClick={() => { setActiveTab('akademik'); window.scrollTo(0,0); }} className="hover:text-emerald-400">Program Akademik</button></li>
              <li><button onClick={() => { setActiveTab('verifikasi'); window.scrollTo(0,0); }} className="hover:text-emerald-400">Verifikasi NISN</button></li>
              <li><button onClick={() => { setActiveTab('kontak'); window.scrollTo(0,0); }} className="hover:text-emerald-400">Kontak</button></li>
            </ul>
          </div>

          <div className="md:col-span-4 space-y-3">
            <h4 className="font-bold text-slate-200 uppercase tracking-wider text-[11px]">Akses Pengelola</h4>
            <p className="text-[11px] text-slate-500">
              Khusus pengelola madrasah, Anda bisa login dan mengonfigurasi website secara langsung dengan mengklik ikon gembok di bagian atas halaman.
            </p>
            <div className="text-[10px] bg-slate-800 p-2.5 rounded border border-slate-700 text-slate-400">
              Simulasi Sandi Keamanan: <strong className="text-amber-400">admin123</strong>
            </div>
          </div>
        </div>

        <div className="border-t border-slate-800/80 bg-slate-950 py-6 px-4 text-center text-[11px] text-slate-600">
          <p>© 2026 {siteContent.fullName}. Semua Hak Cipta Dilindungi.</p>
          <p className="mt-1 flex items-center justify-center gap-1">
            Dibuat dengan rasa cinta <Heart className="w-3 h-3 text-rose-600 fill-rose-600" /> untuk madrasah aman & transparan.
          </p>
        </div>
      </footer>

    </div>
  );
}

```