import React, { useState, useEffect } from 'react';
import { 
  Menu, 
  X, 
  Download, 
  Shield, 
  Sliders, 
  Star, 
  Check, 
  Sparkles, 
  Cpu, 
  Layers, 
  Lock, 
  Settings, 
  AlertTriangle, 
  FileText, 
  CheckCircle, 
  MessageSquare, 
  ArrowRight, 
  EyeOff, 
  Trash2, 
  Smartphone, 
  Palette, 
  Search, 
  RotateCcw, 
  Info, 
  LockKeyhole, 
  Clock,
  Heart,
  User,
  ExternalLink,
  ShieldAlert,
  DownloadCloud,
  FileSpreadsheet,
  AlertCircle
} from 'lucide-react';
import { DEFAULT_VARIANTS, FAQ_ITEMS, COMPARISON_ITEMS } from './data';
import { WhatsAppVariant, FaqItem, ChatMessage } from './types';
import Logo from './components/Logo';

export default function App() {
  // Navigation State
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [activeTab, setActiveTab] = useState<'wagb' | 'waplus' | 'yowa' | 'gbwamas'>('wagb');

  // FAQ State
  const [expandedFaq, setExpandedFaq] = useState<number | null>(null);

  // Custom Editable Links State
  const [variants, setVariants] = useState<WhatsAppVariant[]>(() => {
    const saved = localStorage.getItem('9aleh_variants_config');
    if (saved) {
      try {
        return JSON.parse(saved);
      } catch (e) {
        console.error('Failed to parse local stored variants', e);
      }
    }
    return DEFAULT_VARIANTS;
  });

  // Admin Modal Configuration Editor
  const [isAdminOpen, setIsAdminOpen] = useState(false);
  const [adminPasscode, setAdminPasscode] = useState('');
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [adminError, setAdminError] = useState('');
  
  // Temporary state for the editor inputs
  const [editedUrls, setEditedUrls] = useState<Record<string, string>>({});
  const [editedVersions, setEditedVersions] = useState<Record<string, string>>({});
  const [editedSizes, setEditedSizes] = useState<Record<string, string>>({});

  // Legal Modal States (About, Disclaimer, Privacy Policy)
  const [legalModal, setLegalModal] = useState<'about' | 'disclaimer' | 'privacy' | null>(null);

  // Initialize editable states when modal or state changes
  useEffect(() => {
    const urls: Record<string, string> = {};
    const vers: Record<string, string> = {};
    const szs: Record<string, string> = {};
    variants.forEach(v => {
      urls[v.id] = v.url;
      vers[v.id] = v.version;
      szs[v.id] = v.size;
    });
    setEditedUrls(urls);
    setEditedVersions(vers);
    setEditedSizes(szs);
  }, [variants]);

  // Handle saving of edited links & versions in localStorage
  const handleSaveLinks = (e: React.FormEvent) => {
    e.preventDefault();
    const updated = variants.map(v => ({
      ...v,
      url: editedUrls[v.id] || v.url,
      version: editedVersions[v.id] || v.version,
      size: editedSizes[v.id] || v.size,
      updatedAt: 'Terakhir di-update hari ini'
    }));
    setVariants(updated);
    localStorage.setItem('9aleh_variants_config', JSON.stringify(updated));
    triggerNotification('Link unduhan dan spesifikasi berhasil diperbarui!');
    setIsAdminOpen(false);
  };

  const handleResetLinks = () => {
    if (window.confirm('Apakah Anda yakin ingin mengembalikan semua link unduhan ke pengaturan default pabrik?')) {
      localStorage.removeItem('9aleh_variants_config');
      setVariants(DEFAULT_VARIANTS);
      triggerNotification('Pengaturan dikembalikan ke default.');
      setIsAdminOpen(false);
    }
  };

  // Toast notification alert helper
  const [notification, setNotification] = useState<string | null>(null);
  const triggerNotification = (msg: string) => {
    setNotification(msg);
    setTimeout(() => {
      setNotification(null);
    }, 4500);
  };

  // --- INTERACTIVE SMARTPHONE SIMULATOR STATE ---
  const [simTheme, setSimTheme] = useState<'emerald' | 'ocean' | 'lava' | 'cyberpunk' | 'luxury'>('emerald');
  const [simAntiDelete, setSimAntiDelete] = useState(true);
  const [simHideBlueTicks, setSimHideBlueTicks] = useState(false);
  const [simStatusDownloaded, setSimStatusDownloaded] = useState<string | null>(null);
  const [typedMessage, setTypedMessage] = useState('');
  
  // Simulated chat messages
  const [chatMessages, setChatMessages] = useState<ChatMessage[]>([
    {
      id: '1',
      sender: 'contact',
      time: '09:41',
      text: 'Halo bro! Jadi pinjam laptop buat ngerjakan tugas?'
    },
    {
      id: '2',
      sender: 'user',
      time: '09:42',
      text: 'Jadi dong, nanti sore aku ke rumahmu ya.'
    },
    {
      id: '3',
      sender: 'contact',
      time: '09:43',
      text: 'Oh sip, bawa cemilan ya sekalian hihi.'
    },
    {
      id: '4',
      sender: 'contact',
      time: '09:44',
      text: 'Rahasia dikit, tapi jangan bilang-bilang ke anak-anak kelas...',
      isDeleted: true, // Will decode based on Anti-Delete Toggle
      statusText: '🚫 Pesan ini telah ditarik pengirim'
    }
  ]);

  // Handle typing inside simulator chat
  const handleSendSimMessage = (e: React.FormEvent) => {
    e.preventDefault();
    if (!typedMessage.trim()) return;

    const newMessage: ChatMessage = {
      id: Date.now().toString(),
      sender: 'user',
      time: new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }),
      text: typedMessage
    };

    setChatMessages([...chatMessages, newMessage]);
    setTypedMessage('');

    // Simulated reply after 1.5 seconds
    setTimeout(() => {
      const replyMessage: ChatMessage = {
        id: (Date.now() + 1).toString(),
        sender: 'contact',
        time: new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' }),
        text: 'Wih asyik! Ditunggu kedatangannya ya 🚀'
      };
      setChatMessages(prev => [...prev, replyMessage]);
    }, 1200);
  };

  // Simulate Status/Story List
  const mockStories = [
    { id: '1', name: 'Riska Amalia', type: 'Video Lucu', preview: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=150&auto=format&fit=crop&q=60', time: '5 menit yang lalu' },
    { id: '2', name: 'Budi Santoso', type: 'Foto Wisata', preview: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&auto=format&fit=crop&q=60', time: '1 jam yang lalu' },
    { id: '3', name: 'Agus Priyadi', type: 'Meme Hari Ini', preview: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=150&auto=format&fit=crop&q=60', time: '3 jam yang lalu' },
  ];

  const handleDownloadStory = (storyName: string) => {
    setSimStatusDownloaded(storyName);
    setTimeout(() => {
      setSimStatusDownloaded(null);
    }, 3000);
  };

  return (
    <div className="min-h-screen bg-white text-slate-900 font-sans selection:bg-emerald-100 selection:text-emerald-900">
      
      {/* Toast Notification */}
      {notification && (
        <div className="fixed top-24 right-4 z-50 bg-emerald-900 text-white px-5 py-3.5 rounded-xl shadow-2xl flex items-center gap-3 border border-emerald-500/20 max-w-sm animate-bounce text-sm">
          <CheckCircle className="h-5 w-5 text-emerald-400 shrink-0" />
          <span>{notification}</span>
        </div>
      )}

      {/* --- BANNER BANNER EMERGENCY / CPANEL INFO --- */}
      <div className="bg-gradient-to-r from-emerald-800 to-emerald-950 text-white text-xs py-2 px-4 text-center font-medium tracking-wide">
        <span>⚡ Versi Stabil Terbaru 2026. Bypass Keamanan Teruji Bebas Lag & Blokir. Server Cloud Cepat.</span>
      </div>

      {/* --- STICKY NAV REVOLUSI GLASSMORPHISM --- */}
      <nav className="sticky top-0 z-40 bg-white/80 backdrop-blur-md border-b border-slate-100 transition-all duration-300">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-20 items-center">
            
            {/* Logo */}
            <a href="#" className="flex items-center gap-3 group">
              <Logo className="group-hover:scale-105 transition-transform duration-300" />
            </a>

            {/* Desktop Menu */}
            <div className="hidden md:flex items-center gap-8">
              <a href="#fitur" className="text-sm font-medium text-slate-600 hover:text-emerald-600 transition-colors">Fitur Utama</a>
              <a href="#simulator" className="text-sm font-medium text-slate-600 hover:text-emerald-600 transition-colors">Interactive Demo</a>
              <a href="#unduh" className="text-sm font-medium text-slate-600 hover:text-emerald-600 transition-colors">Pilihan WA Mod</a>
              <a href="#perbandingan" className="text-sm font-medium text-slate-600 hover:text-emerald-600 transition-colors">Bandingkan</a>
              <a href="#spesifikasi" className="text-sm font-medium text-slate-600 hover:text-emerald-600 transition-colors">Detil Spesifikasi</a>
              <a href="#faq" className="text-sm font-medium text-slate-600 hover:text-emerald-600 transition-colors">FAQ</a>
            </div>

            {/* Action Badges or Config */}
            <div className="hidden lg:flex items-center gap-4">
              <div className="flex items-center gap-1.5 bg-emerald-50 text-emerald-800 text-xs px-3 py-1.5 rounded-full font-semibold border border-emerald-100">
                <span className="flex h-2 w-2 relative">
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
                </span>
                <span>v24.80 Stabil</span>
              </div>
              
              {/* Trigger Admin Editor */}
              <button 
                onClick={() => {
                  setIsAdminOpen(true);
                  setIsAuthenticated(false);
                  setAdminPasscode('');
                  setAdminError('');
                }}
                className="flex items-center gap-1.5 text-xs text-slate-500 hover:text-emerald-600 hover:bg-slate-50 px-3 py-1.5 rounded-full transition-all border border-slate-200 bg-white shadow-xs cursor-pointer font-medium"
                title="Editor Link Download untuk Admin"
              >
                <Settings className="h-3.5 w-3.5 animate-spin-slow" />
                <span>Update Link</span>
              </button>
            </div>

            {/* Mobile Menu Button */}
            <div className="flex md:hidden items-center gap-2">
              <button 
                onClick={() => {
                  setIsAdminOpen(true);
                  setIsAuthenticated(false);
                  setAdminPasscode('');
                  setAdminError('');
                }}
                className="p-2 text-slate-500 hover:text-emerald-600 rounded-lg border border-slate-100"
                title="Editor Tautan"
              >
                <Settings className="h-4.5 w-4.5" />
              </button>
              <button
                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                className="p-2 text-slate-600 hover:text-emerald-600 focus:outline-none"
              >
                {mobileMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
              </button>
            </div>

          </div>
        </div>

        {/* Mobile Menu Dropdown */}
        {mobileMenuOpen && (
          <div className="md:hidden bg-white border-t border-slate-100 py-4 px-4 shadow-xl flex flex-col gap-4">
            <a 
              href="#fitur" 
              onClick={() => setMobileMenuOpen(false)}
              className="text-base font-semibold text-slate-700 hover:text-emerald-600 transition-colors"
            >
              Fitur Utama
            </a>
            <a 
              href="#simulator" 
              onClick={() => setMobileMenuOpen(false)}
              className="text-base font-semibold text-slate-700 hover:text-emerald-600 transition-colors"
            >
              Interactive Demo
            </a>
            <a 
              href="#unduh" 
              onClick={() => setMobileMenuOpen(false)}
              className="text-base font-semibold text-slate-700 hover:text-emerald-600 transition-colors"
            >
              Pilihan WA Mod
            </a>
            <a 
              href="#perbandingan" 
              onClick={() => setMobileMenuOpen(false)}
              className="text-base font-semibold text-slate-700 hover:text-emerald-600 transition-colors"
            >
              Bandingkan Versi
            </a>
            <a 
              href="#spesifikasi" 
              onClick={() => setMobileMenuOpen(false)}
              className="text-base font-semibold text-slate-700 hover:text-emerald-600 transition-colors"
            >
              Spesifikasi File
            </a>
            <a 
              href="#faq" 
              onClick={() => setMobileMenuOpen(false)}
              className="text-base font-semibold text-slate-700 hover:text-emerald-600 transition-colors"
            >
              Tanya Jawab (FAQ)
            </a>
            
            <div className="pt-4 border-t border-slate-100 flex items-center justify-between">
              <span className="text-xs text-slate-500 font-mono">Build 2026 Ready cPanel</span>
              <div className="flex items-center gap-1.5 bg-emerald-50 text-emerald-800 text-xs px-3 py-1 rounded-full font-semibold">
                <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
                <span>Online Stable</span>
              </div>
            </div>
          </div>
        )}
      </nav>

      {/* --- HERO SECTION - ELEGANTE & POWERFUL --- */}
      <header className="relative py-14 lg:py-24 overflow-hidden bg-white">
        {/* Background ambient radial glow */}
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-7xl h-full pointer-events-none overflow-hidden opacity-30">
          <div className="absolute -top-[10%] left-[5%] w-[400px] h-[400px] rounded-full bg-emerald-300/30 blur-3xl"></div>
          <div className="absolute -bottom-[20%] right-[5%] w-[500px] h-[500px] rounded-full bg-emerald-200/20 blur-3xl"></div>
        </div>

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8 items-center">
            
            {/* Left Column Text & SEO Info */}
            <div className="lg:col-span-7 flex flex-col justify-center text-left">
              
              {/* Micro badge */}
              <div className="inline-flex items-center gap-2 bg-slate-50 border border-slate-200 self-start px-3 py-1.5 rounded-full mb-6">
                <Sparkles className="h-4.5 w-4.5 text-emerald-600 shrink-0" />
                <span className="text-xs font-semibold text-slate-700 font-mono tracking-tight">Portal Resmi 9aleh.com - Versi 2026 Terbaru</span>
              </div>

              {/* Bold Headline */}
              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-slate-900 tracking-tight leading-none mb-6">
                Download WhatsApp Mod <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-600 to-teal-600">Anti-Ban</span> & Terbaru
              </h1>

              {/* Informative Sub-Headline */}
              <p className="text-lg text-slate-600 font-normal leading-relaxed mb-8 max-w-2xl">
                Alami batas baru berkirim pesan tanpa batas privasi. Unduh versi stabil dari <strong className="text-slate-900">WAGB</strong>, <strong className="text-slate-900">WAPlus</strong>, <strong className="text-slate-900">YOWa</strong>, dan <strong className="text-slate-900">GBWAMas</strong>. Menyimpan story teman dalam sekali ketuk, membaca pesan terhapus, pasang tema khusus, dan bypass ban total secara gratis.
              </p>

              {/* Quick checklists */}
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-y-3.5 gap-x-6 mb-10 max-w-lg">
                {[
                  'Bebas Simpan Status Video & Foto',
                  'Membaca Pesan Terhapus (Anti-Revoke)',
                  'Sembunyikan Centang Biru & Status Online',
                  'Kirim Video Besar Hingga 2 GB (HD)',
                  'Proteksi Enkripsi Anti-Blokir Akun',
                  'Dukungan Tema Visual Tidak Terbatas'
                ].map((item, index) => (
                  <div key={index} className="flex items-center gap-2 text-sm text-slate-800">
                    <div className="h-5 w-5 rounded-full bg-emerald-50 flex items-center justify-center border border-emerald-200 shrink-0">
                      <Check className="h-3.5 w-3.5 text-emerald-600" />
                    </div>
                    <span>{item}</span>
                  </div>
                ))}
              </div>

              {/* Dynamic Action Buttons */}
              <div className="flex flex-col sm:flex-row gap-4 mb-8">
                <a 
                  href="#unduh" 
                  className="inline-flex items-center justify-center gap-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-bold px-8 py-4.5 rounded-2xl shadow-xl shadow-emerald-600/20 hover:shadow-emerald-600/30 active:scale-95 transition-all text-center group cursor-pointer"
                >
                  <Download className="h-5 w-5 group-hover:translate-y-0.5 transition-transform" />
                  <span>Ambil File APK Sekarang</span>
                </a>
                <a 
                  href="#simulator" 
                  className="inline-flex items-center justify-center gap-2 bg-slate-50 hover:bg-slate-100 text-slate-800 font-semibold px-8 py-4.5 rounded-2xl border border-slate-200 transition-all text-center cursor-pointer"
                >
                  <Smartphone className="h-5 w-5" />
                  <span>Coba Fitur Mod Simulator</span>
                </a>
              </div>

              {/* VirusTotal Scanning Badges */}
              <div className="flex flex-wrap items-center gap-x-4 gap-y-2 border-t border-slate-100 pt-6">
                <span className="text-xs font-mono text-slate-500 uppercase tracking-wider font-semibold">Security Core verified:</span>
                <span className="inline-flex items-center gap-1 text-xs text-slate-600 font-medium">
                  <span className="h-2 w-2 rounded-full bg-emerald-500"></span>
                  Kaspersky Safe
                </span>
                <span className="inline-flex items-center gap-1 text-xs text-slate-600 font-medium">
                  <span className="h-2 w-2 rounded-full bg-emerald-500"></span>
                  VirusTotal Green (0/74)
                </span>
                <span className="inline-flex items-center gap-1 text-xs text-slate-600 font-medium">
                  <span className="h-2 w-2 rounded-full bg-emerald-500"></span>
                  Anti-Ban Script v10
                </span>
              </div>

            </div>

            {/* Right Column: High Quality Smartphone Showcase */}
            <div className="lg:col-span-5 flex justify-center items-center">
              <div className="relative w-full max-w-[340px] aspect-[9/18.5] bg-slate-900 rounded-[48px] p-4.5 shadow-2xl border-4 border-slate-800 ring-15 ring-slate-100 relative group">
                
                {/* Speaker top gap */}
                <div className="absolute top-0 left-1/2 -translate-x-1/2 h-6 w-32 bg-slate-900 rounded-b-2xl z-30 flex items-center justify-center">
                  <div className="h-1.5 w-12 bg-slate-800 rounded-full"></div>
                </div>

                {/* Smartphone Internal Display */}
                <div className="w-full h-full bg-[#efeae2] rounded-[36px] overflow-hidden relative font-sans flex flex-col shadow-inner select-none">
                  
                  {/* Whatsapp Header Inside smartphone mockup */}
                  <div className="bg-emerald-800 text-white pt-7 pb-3 px-4 flex flex-col justify-between shrink-0">
                    <div className="flex justify-between items-center text-xs font-mono mb-2">
                      <span>09:41</span>
                      <div className="flex items-center gap-1">
                        <span>4G LTE</span>
                        <div className="h-3 w-5 border border-white/60 rounded-xs p-0.5 flex items-center">
                          <div className="h-full w-4 bg-white rounded-2xs"></div>
                        </div>
                      </div>
                    </div>
                    <div className="flex justify-between items-center">
                      <div className="flex items-center gap-2">
                        <div className="h-9 w-9 rounded-full bg-emerald-100 flex items-center justify-center font-bold text-emerald-800 text-sm">
                          9
                        </div>
                        <div className="flex flex-col">
                          <span className="font-bold text-sm tracking-tight leading-tight">YOWa Studio (9aleh)</span>
                          <span className="text-[10px] text-emerald-200">Sedang online...</span>
                        </div>
                      </div>
                      <div className="flex items-center gap-3">
                        <span className="text-xs bg-emerald-700 px-2 py-0.5 rounded-full font-bold">PRO v24</span>
                      </div>
                    </div>
                  </div>

                  {/* Wallpaper Chat List */}
                  <div className="flex-1 p-3 flex flex-col gap-3 justify-end overflow-y-auto no-scrollbar">
                    
                    {/* Message 1 */}
                    <div className="self-start max-w-[85%] bg-white text-slate-800 p-2.5 rounded-2xl rounded-tl-none shadow-xs text-xs">
                      <span>Halo, apakah betul APK di 9aleh.com aman?</span>
                      <div className="text-right text-[10px] text-slate-400 mt-1">09:35</div>
                    </div>

                    {/* Message 2 */}
                    <div className="self-end max-w-[85%] bg-emerald-100 text-slate-900 p-2.5 rounded-2xl rounded-tr-none shadow-xs text-xs">
                      <span>Betul sekali! Dijamin 100% Anti-Ban, Anti-Malware, dan selalu diperbarui ke versi paling stabil. 🛡️</span>
                      <div className="text-right text-[10px] text-slate-500 mt-1 flex items-center justify-end gap-0.5">
                        <span>09:36</span>
                        <span className="text-blue-500 font-bold">✓✓</span>
                      </div>
                    </div>

                    {/* Message 3 from contact, but shows Mod Downloader tag */}
                    <div className="self-start max-w-[85%] bg-white text-slate-800 p-2 flex flex-col gap-1.5 rounded-2xl rounded-tl-none shadow-xs text-xs border-l-2 border-emerald-500">
                      <div className="bg-slate-50 p-1.5 rounded-lg flex items-center justify-between gap-2 border border-slate-100">
                        <span className="text-[10px] font-semibold text-slate-600 truncate">Story: "Senja.mp4"</span>
                        <div className="bg-emerald-600 text-white px-1.5 py-0.5 rounded text-[9px] font-bold flex items-center gap-0.5 animate-pulse shrink-0">
                          <Download className="h-2.5 w-2.5" />
                          <span>Unduh</span>
                        </div>
                      </div>
                      <span>Klik tombol langsung untuk simpan status mantan tanpa diketahui!</span>
                      <div className="text-right text-[10px] text-slate-400">09:37</div>
                    </div>

                  </div>

                  {/* Chat Input Bar */}
                  <div className="p-2 bg-slate-50 border-t border-slate-200 flex items-center gap-2 shrink-0">
                    <div className="flex-1 bg-white border border-slate-200 rounded-full px-3 py-1.5 flex items-center justify-between text-xs text-slate-400">
                      <span>Tulis pesan mod rahasia...</span>
                      <Palette className="h-4 w-4 text-emerald-600" />
                    </div>
                    <div className="h-8 w-8 rounded-full bg-emerald-600 flex items-center justify-center text-white shrink-0 shadow-sm">
                      <Download className="h-4 w-4" />
                    </div>
                  </div>

                </div>

                {/* Ambient float glow under the phone phone mockup */}
                <div className="absolute -inset-2 rounded-[52px] border-2 border-emerald-500/20 pointer-events-none group-hover:border-emerald-500/40 transition-colors duration-500"></div>
                
                {/* Status Indicator Floating Card */}
                <div className="absolute -right-8 bottom-16 bg-white p-3.5 rounded-2xl shadow-xl border border-slate-100 flex items-center gap-3 max-w-[200px] z-20 hover:-translate-y-1 transition-transform cursor-default">
                  <div className="h-10 w-10 bg-emerald-500/10 text-emerald-600 rounded-xl flex items-center justify-center shrink-0">
                    <Shield className="h-5 w-5" />
                  </div>
                  <div>
                    <h4 className="text-xs font-bold text-slate-800">Anti-Ban Akun</h4>
                    <p className="text-[10px] text-slate-500 font-mono">Bypass Patch Juni 2026</p>
                  </div>
                </div>

                {/* Status Indicator Floating Card Left */}
                <div className="absolute -left-12 top-24 bg-white p-3.5 rounded-2xl shadow-xl border border-slate-100 flex items-center gap-3 max-w-[190px] z-20 hover:-translate-y-1 transition-transform cursor-default">
                  <div className="h-10 w-10 bg-teal-500/10 text-teal-600 rounded-xl flex items-center justify-center shrink-0">
                    <Sliders className="h-5 w-5" />
                  </div>
                  <div>
                    <h4 className="text-xs font-bold text-slate-800">4000+ Tema</h4>
                    <p className="text-[10px] text-slate-500 font-mono">YoThemes Store Free</p>
                  </div>
                </div>

              </div>
            </div>

          </div>
        </div>
      </header>

      {/* --- STATS TRUST SECTION --- */}
      <section className="bg-slate-50 py-12 border-y border-slate-100">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
            <div>
              <div className="text-3xl sm:text-4xl font-extrabold text-emerald-600 font-mono">15M+</div>
              <div className="text-xs sm:text-sm font-semibold text-slate-500 mt-1 uppercase tracking-wider">Total Unduhan</div>
            </div>
            <div>
              <div className="text-3xl sm:text-4xl font-extrabold text-emerald-600 font-mono">4.8M+</div>
              <div className="text-xs sm:text-sm font-semibold text-slate-500 mt-1 uppercase tracking-wider">Pengguna Aktif</div>
            </div>
            <div>
              <div className="text-3xl sm:text-4xl font-extrabold text-emerald-600 font-mono">0%</div>
              <div className="text-xs sm:text-sm font-semibold text-slate-500 mt-1 uppercase tracking-wider">Malware & Virus</div>
            </div>
            <div>
              <div className="text-3xl sm:text-4xl font-extrabold text-emerald-600 font-mono">100%</div>
              <div className="text-xs sm:text-sm font-semibold text-slate-500 mt-1 uppercase tracking-wider">Gratis Selamanya</div>
            </div>
          </div>
        </div>
      </section>

      {/* --- GRID FITUR UTAMA (HOVER INTERACTIVE) --- */}
      <section id="fitur" className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          
          {/* Section title */}
          <div className="text-center max-w-3xl mx-auto mb-16">
            <span className="text-emerald-600 font-bold font-mono text-xs uppercase tracking-widest bg-emerald-50 px-3.5 py-1.5 rounded-full">Fitur Ultimate WA Mod</span>
            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight text-slate-900 mt-4 mb-4">
              Kenapa Harus Menggunakan Mod WA Dari 9aleh.com?
            </h2>
            <p className="text-slate-600">
              Ucapkan selamat tinggal pada batasan-batasan kaku aplikasi WhatsApp reguler. Nikmati kebebasan kustomisasi visual total dan kontrol privasi mutlak.
            </p>
          </div>

          {/* Grid Layout with hover transitions */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            
            {/* Feature 1 */}
            <div className="bg-white p-8 rounded-3xl border border-slate-100 hover:-translate-y-1.5 hover:shadow-xl transition-all duration-300 flex flex-col group">
              <div className="h-14 w-14 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0 mb-6 group-hover:bg-emerald-600 group-hover:text-white transition-colors">
                <Sliders className="h-7 w-7" />
              </div>
              <h3 className="text-lg font-bold text-slate-900 mb-2 group-hover:text-emerald-700 transition-colors">Mesin Pengatur Privasi Ultra</h3>
              <p className="text-slate-600 text-sm leading-relaxed">
                Kendali penuh di tangan Anda. Sembunyikan waktu terakhir dilihat (Last Seen), hapus status online asli Anda, matikan status tulisan 'sedang mengetik' atau 'merekam audio', dan baca pesan tanpa memicu centang biru.
              </p>
            </div>

            {/* Feature 2 */}
            <div className="bg-white p-8 rounded-3xl border border-slate-100 hover:-translate-y-1.5 hover:shadow-xl transition-all duration-300 flex flex-col group">
              <div className="h-14 w-14 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0 mb-6 group-hover:bg-emerald-600 group-hover:text-white transition-colors">
                <Download className="h-7 w-7" />
              </div>
              <h3 className="text-lg font-bold text-slate-900 mb-2 group-hover:text-emerald-700 transition-colors">Pengunduh Status Bawaan</h3>
              <p className="text-slate-600 text-sm leading-relaxed">
                Melihat story video atau foto teman yang menarik? Tidak perlu lagi meminta dikirimkan file aslinya atau repot-repot screenshot. Klik tanda panah bawaan di pojok kanan bawah story untuk langsung menyimpannya ke galeri handphone Anda.
              </p>
            </div>

            {/* Feature 3 */}
            <div className="bg-white p-8 rounded-3xl border border-slate-100 hover:-translate-y-1.5 hover:shadow-xl transition-all duration-300 flex flex-col group">
              <div className="h-14 w-14 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0 mb-6 group-hover:bg-emerald-600 group-hover:text-white transition-colors">
                <EyeOff className="h-7 w-7" />
              </div>
              <h3 className="text-lg font-bold text-slate-900 mb-2 group-hover:text-emerald-700 transition-colors">Bypass Anti-Hapus Obrolan</h3>
              <p className="text-slate-600 text-sm leading-relaxed">
                Sering penasaran dengan isi chat grup atau pesan personal yang tiba-tiba ditarik (Deleted)? Fitur anti-revoke kami mencegah pesan itu menghilang di HP Anda. Pesan tetap terbaca lengkap dengan ikon penanda khusus.
              </p>
            </div>

            {/* Feature 4 */}
            <div className="bg-white p-8 rounded-3xl border border-slate-100 hover:-translate-y-1.5 hover:shadow-xl transition-all duration-300 flex flex-col group">
              <div className="h-14 w-14 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0 mb-6 group-hover:bg-emerald-600 group-hover:text-white transition-colors">
                <Palette className="h-7 w-7" />
              </div>
              <h3 className="text-lg font-bold text-slate-900 mb-2 group-hover:text-emerald-700 transition-colors">Galeri 4000+ Tema Cantik</h3>
              <p className="text-slate-600 text-sm leading-relaxed">
                Tampilan WhatsApp original terasa sangat membosankan? Masuki pusat store YoThemes terintegrasi untuk mengunduh ribuan tema visual yang menakjubkan, mulai dari gaya anime, futuristik, minimalis, hingga meniru chat iOS iMessage.
              </p>
            </div>

            {/* Feature 5 */}
            <div className="bg-white p-8 rounded-3xl border border-slate-100 hover:-translate-y-1.5 hover:shadow-xl transition-all duration-300 flex flex-col group">
              <div className="h-14 w-14 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0 mb-6 group-hover:bg-emerald-600 group-hover:text-white transition-colors">
                <Cpu className="h-7 w-7" />
              </div>
              <h3 className="text-lg font-bold text-slate-900 mb-2 group-hover:text-emerald-700 transition-colors">Sistem Proteksi Anti-Ban V10</h3>
              <p className="text-slate-600 text-sm leading-relaxed">
                Sering mendengar isu akun terblokir? 9aleh.com menyediakan rilis WA Mod dengan pembaruan kernel kode anti-akselerasi ban yang didesain khusus meloloskan deteksi server, menjamin akun WA Anda tetap aman digunakan selamanya.
              </p>
            </div>

            {/* Feature 6 */}
            <div className="bg-white p-8 rounded-3xl border border-slate-100 hover:-translate-y-1.5 hover:shadow-xl transition-all duration-300 flex flex-col group">
              <div className="h-14 w-14 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0 mb-6 group-hover:bg-emerald-600 group-hover:text-white transition-colors">
                <Layers className="h-7 w-7" />
              </div>
              <h3 className="text-lg font-bold text-slate-900 mb-2 group-hover:text-emerald-700 transition-colors">Distribusi File Berat & HD</h3>
              <p className="text-slate-600 text-sm leading-relaxed">
                Kirim file foto beresolusi super tajam tanpa kompresi hingga ratusan gambar sekaligus. Anda juga dapat mengirimkan dokumen materi presentasi berat atau file video resolusi 4K dengan ukuran maksimal hingga 2 GB dalam satu kali ketuk.
              </p>
            </div>

          </div>
        </div>
      </section>

      {/* --- SIMULATOR INTERAKTIF (MICRO-INTERACTION) --- */}
      <section id="simulator" className="py-20 bg-[#f8fafc] border-y border-slate-100">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          
          <div className="text-center max-w-3xl mx-auto mb-14">
            <span className="text-emerald-600 font-bold font-mono text-xs uppercase tracking-widest bg-emerald-50 px-3.5 py-1.5 rounded-full">Interactive Play Sandbox</span>
            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight text-slate-900 mt-4 mb-4">
              Coba Langsung Fitur WhatsApp Mod
            </h2>
            <p className="text-slate-600">
              Interaksikan simulator smartphone di bawah ini secara langsung untuk melihat bagaimana fitur WA Mod bekerja nyata sebelum Anda mendownload file APK-nya!
            </p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-stretch">
            
            {/* Simulator Controls (Left Column) */}
            <div className="lg:col-span-5 bg-white p-8 rounded-3xl border border-slate-100 flex flex-col justify-between shadow-xs">
              
              <div className="space-y-8">
                <div>
                  <h3 className="text-lg font-bold text-slate-900 mb-1 flex items-center gap-2">
                    <Sliders className="h-5 w-5 text-emerald-600" />
                    <span>Panel Pengendali Mod</span>
                  </h3>
                  <p className="text-sm text-slate-500">Klik tombol-tombol di bawah untuk mengaktifkan / menonaktifkan fitur mod pada smartphone di kanan.</p>
                </div>

                {/* Switch 1: Anti-Delete */}
                <div className="p-4 bg-slate-50 hover:bg-emerald-50/40 rounded-2xl border border-slate-100 transition-colors flex items-center justify-between">
                  <div>
                    <span className="text-sm font-bold text-slate-800 flex items-center gap-1.5">
                      <Trash2 className="h-4 w-4 text-emerald-600" />
                      <span>Fitur Anti-Hapus Pesan</span>
                    </span>
                    <p className="text-xs text-slate-500 mt-0.5">Tampilkan chat yang ditarik oleh pengirim pesan.</p>
                  </div>
                  <button 
                    onClick={() => {
                      setSimAntiDelete(!simAntiDelete);
                      triggerNotification(`Fitur Anti-Hapus Pesan ${!simAntiDelete ? 'DIAKTIFKAN' : 'DINONAKTIFKAN'}. Perhatikan pesan Kurniawan.`);
                    }}
                    className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${simAntiDelete ? 'bg-emerald-600' : 'bg-slate-300'}`}
                  >
                    <span className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out ${simAntiDelete ? 'translate-x-5' : 'translate-x-0'}`} />
                  </button>
                </div>

                {/* Switch 2: Hide Blue Ticks */}
                <div className="p-4 bg-slate-50 hover:bg-emerald-50/40 rounded-2xl border border-slate-100 transition-colors flex items-center justify-between">
                  <div>
                    <span className="text-sm font-bold text-slate-800 flex items-center gap-1.5">
                      <EyeOff className="h-4 w-4 text-emerald-600" />
                      <span>Sembunyikan Centang Biru</span>
                    </span>
                    <p className="text-xs text-slate-500 mt-0.5">Hubungi orang lain secara rahasia. Tanda tetap abu-abu.</p>
                  </div>
                  <button 
                    onClick={() => {
                      setSimHideBlueTicks(!simHideBlueTicks);
                      triggerNotification(`Centang Biru Tersamar ${!simHideBlueTicks ? 'DIAKTIFKAN' : 'DINONAKTIFKAN'}.`);
                    }}
                    className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${simHideBlueTicks ? 'bg-emerald-600' : 'bg-slate-300'}`}
                  >
                    <span className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-sm ring-0 transition duration-200 ease-in-out ${simHideBlueTicks ? 'translate-x-5' : 'translate-x-0'}`} />
                  </button>
                </div>

                {/* Palette 3: Sim Theme Selector */}
                <div className="space-y-3">
                  <span className="text-sm font-bold text-slate-800 flex items-center gap-1.5">
                    <Palette className="h-4 w-4 text-emerald-600" />
                    <span>Instant Custom Theme (YoThemes)</span>
                  </span>
                  <p className="text-xs text-slate-500">Ubah gaya visual perangkat instan dengan satu ketukan:</p>
                  
                  <div className="flex gap-3 pt-1">
                    {[
                      { key: 'emerald', name: 'Emerald', colorClass: 'bg-emerald-600 border-emerald-300' },
                      { key: 'ocean', name: 'Ocean', colorClass: 'bg-sky-600 border-sky-300' },
                      { key: 'lava', name: 'Lava', colorClass: 'bg-rose-600 border-rose-300' },
                      { key: 'cyberpunk', name: 'Cyberpunk', colorClass: 'bg-purple-600 border-purple-300' },
                      { key: 'luxury', name: 'Luxury Gold', colorClass: 'bg-amber-600 border-amber-300' },
                    ].map((themeOpt) => (
                      <button
                        key={themeOpt.key}
                        onClick={() => {
                          setSimTheme(themeOpt.key as any);
                          triggerNotification(`Mengubah tema smartphone ke ${themeOpt.name}!`);
                        }}
                        className={`h-9 w-9 rounded-full border-2 ${themeOpt.colorClass} flex items-center justify-center transition-all ${simTheme === themeOpt.key ? 'scale-115 ring-4 ring-slate-200 shadow-md' : 'opacity-70 hover:opacity-100'}`}
                        title={themeOpt.name}
                      >
                        {simTheme === themeOpt.key && <Check className="h-4.5 w-4.5 text-white" />}
                      </button>
                    ))}
                  </div>
                </div>

                {/* Status Saver Area */}
                <div className="space-y-3 pt-2">
                  <span className="text-sm font-bold text-slate-800 flex items-center gap-1.5">
                    <DownloadCloud className="h-4.5 w-4.5 text-emerald-600" />
                    <span>Simpan Cerita Teman (Status Downloader)</span>
                  </span>
                  <div className="flex flex-col gap-2">
                    {mockStories.map((story) => (
                      <div key={story.id} className="flex items-center justify-between p-2.5 bg-slate-50 hover:bg-slate-100 border border-slate-100 rounded-xl">
                        <div className="flex items-center gap-2">
                          <img 
                            src={story.preview} 
                            alt={story.name} 
                            className="h-8 w-8 rounded-full object-cover border border-slate-200" 
                            referrerPolicy="no-referrer"
                          />
                          <div>
                            <div className="text-xs font-bold text-slate-800">{story.name}</div>
                            <div className="text-[10px] text-slate-500">{story.type} • {story.time}</div>
                          </div>
                        </div>
                        <button
                          onClick={() => handleDownloadStory(story.name)}
                          className="bg-emerald-600 hover:bg-emerald-700 active:scale-95 text-white px-3 py-1 rounded-lg text-xs font-semibold flex items-center gap-1 transition-all cursor-pointer"
                        >
                          <Download className="h-3 w-3" />
                          <span>Unduh</span>
                        </button>
                      </div>
                    ))}
                  </div>
                </div>

              </div>

              <div className="mt-8 pt-6 border-t border-slate-100 flex items-center gap-2 text-xs text-slate-500">
                <Info className="h-4 w-4 text-slate-400 shrink-0" />
                <span>Interaksi simulator ini dimodelkan menyerupai fungsionalitas core aplikasi WhatsApp Mod asli 9aleh.</span>
              </div>

            </div>

            {/* Virtual Smartphone Rendered Screen (Right Column) */}
            <div className="lg:col-span-7 flex justify-center items-center">
              
              {/* Virtual Smartphone frame */}
              <div className="w-full max-w-[360px] bg-slate-950 rounded-[48px] p-4.5 shadow-2xl relative border-4 border-slate-800 transition-all duration-500">
                
                {/* Speaker top gap */}
                <div className="absolute top-0 left-1/2 -translate-x-1/2 h-6 w-32 bg-slate-950 rounded-b-2xl z-30 flex items-center justify-center">
                  <div className="h-1.5 w-12 bg-slate-800 rounded-full"></div>
                </div>

                {/* Smartphone Display Card based on themes */}
                <div className={`w-full aspect-[9/18] rounded-[36px] overflow-hidden flex flex-col relative shadow-inner select-none transition-all duration-300 ${
                  simTheme === 'emerald' ? 'bg-[#efeae2]' :
                  simTheme === 'ocean' ? 'bg-[#e0f2fe]' :
                  simTheme === 'lava' ? 'bg-[#ffe4e6]' :
                  simTheme === 'cyberpunk' ? 'bg-[#1e1b4b]' : 'bg-[#fafaf9]'
                }`}>
                  
                  {/* Smartphone app header */}
                  <div className={`pt-8 pb-3.5 px-4 flex flex-col justify-between text-white shrink-0 shadow-md transition-colors duration-300 ${
                    simTheme === 'emerald' ? 'bg-emerald-800' :
                    simTheme === 'ocean' ? 'bg-sky-800' :
                    simTheme === 'lava' ? 'bg-rose-800' :
                    simTheme === 'cyberpunk' ? 'bg-indigo-950' : 'bg-amber-900'
                  }`}>
                    <div className="flex justify-between items-center text-xs font-mono mb-2 text-white/80">
                      <span>09:41 AM</span>
                      <span>100% 🔋</span>
                    </div>

                    <div className="flex items-center justify-between">
                      <div className="flex items-center gap-2.5">
                        <div className="h-9 w-9 rounded-full bg-white/20 flex items-center justify-center font-bold text-sm">
                          K
                        </div>
                        <div>
                          <h4 className="text-xs font-bold leading-tight">Keanu (Kurniawan)</h4>
                          <span className="text-[9px] text-white/70 block">
                            {simHideBlueTicks ? 'Stealth Mode aktif ' : 'Sedang mengetik...'}
                          </span>
                        </div>
                      </div>
                      <div className="flex items-center gap-3">
                        <div className="bg-white/10 px-2 py-0.5 rounded text-[9px] font-mono uppercase tracking-widest font-semibold text-white/90">
                          {simTheme} theme
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Simulator Download Overlay success */}
                  {simStatusDownloaded && (
                    <div className="absolute inset-0 bg-slate-950/80 backdrop-blur-xs flex items-center justify-center p-6 z-30 text-center transition-all">
                      <div className="bg-white p-6 rounded-2xl max-w-[260px] border border-emerald-500/20 shadow-2xl animate-scaleIn">
                        <div className="h-12 w-12 bg-emerald-50 rounded-full flex items-center justify-center mx-auto mb-3">
                          <Check className="h-6 w-6 text-emerald-600" />
                        </div>
                        <h4 className="text-xs font-extrabold text-slate-850">Status Tersimpan!</h4>
                        <p className="text-[10px] text-slate-500 mt-1 mb-2">
                          File Story dari <strong>{simStatusDownloaded}</strong> berhasil diunduh ke galeri ponsel Anda.
                        </p>
                        <span className="text-[9px] bg-slate-100 text-slate-700 px-2.5 py-1 rounded-sm uppercase font-mono font-bold">
                          FOLDER: /ModWA_Story
                        </span>
                      </div>
                    </div>
                  )}

                  {/* Chats Container body */}
                  <div className="flex-1 p-3.5 flex flex-col gap-3 justify-end overflow-y-auto no-scrollbar">
                    
                    {/* Simulated Text 1 */}
                    <div className="self-start max-w-[85%] bg-white text-slate-800 p-2.5 rounded-2xl rounded-tl-none shadow-xs text-xs border border-slate-100">
                      <span>Bro, nanti kumpul jam berapa main futsal? ⚽</span>
                      <div className="text-right text-[9px] text-slate-400 mt-0.5">09:39</div>
                    </div>

                    {/* Simulated User reply 2 */}
                    <div className={`self-end max-w-[85%] text-slate-900 p-2.5 rounded-2xl rounded-tr-none shadow-xs text-xs border border-slate-200/10 transition-colors duration-300 ${
                      simTheme === 'emerald' ? 'bg-emerald-100' :
                      simTheme === 'ocean' ? 'bg-sky-100' :
                      simTheme === 'lava' ? 'bg-rose-100' :
                      simTheme === 'cyberpunk' ? 'bg-indigo-900 text-white' : 'bg-amber-100'
                    }`}>
                      <span>Biasa, habis ashar jam 4 sore ya. Siap kan?</span>
                      <div className="text-right text-[9px] mt-0.5 flex items-center justify-end gap-1 text-slate-500">
                        <span>09:40</span>
                        <span className={`font-bold ${simHideBlueTicks ? 'text-slate-400' : 'text-blue-500'}`}>
                          {simHideBlueTicks ? '✓✓' : '✓✓'}
                        </span>
                      </div>
                    </div>

                    {/* Simulated deleted message block */}
                    {simAntiDelete ? (
                      /* Anti-delete is ON: Shows decoded message with badge */
                      <div className="self-start max-w-[85%] bg-white p-2.5 rounded-2xl rounded-tl-none shadow-xs text-xs border-l-2 border-emerald-500 animate-fadeIn">
                        <div className="flex items-center gap-1 bg-emerald-50 text-emerald-800 text-[9px] px-2 py-0.5 rounded mb-1.5 self-start font-bold">
                          <CheckCircle className="h-3 w-3 text-emerald-600 shrink-0" />
                          <span>Mencegah Pengirim Menghapus Pesan!</span>
                        </div>
                        <span className="text-slate-800 bg-slate-50 p-1 rounded block italic mb-1">
                          "Sorii bro ga jadi ikut futsal, kaki agak keseleo nih... 😭"
                        </span>
                        <span className="text-[10px] text-slate-400 font-mono block text-right">(Ditarik Keanu - Diselamatkan Mod)</span>
                      </div>
                    ) : (
                      /* Anti-delete is OFF: Standard "Message deleted" */
                      <div className="self-start max-w-[85%] bg-slate-100 text-slate-400 p-2.5 rounded-2xl rounded-tl-none shadow-xs text-xs border border-slate-200 italic flex items-center gap-1 animate-fadeIn">
                        <Trash2 className="h-3.5 w-3.5 shrink-0" />
                        <span>Pesan ini telah ditarik pengirim.</span>
                      </div>
                    )}

                    {/* Custom Typed messages rendered */}
                    {chatMessages.filter(m => m.id !== '1' && m.id !== '2' && m.id !== '3' && m.id !== '4').map((msg) => (
                      <div 
                        key={msg.id} 
                        className={`max-w-[85%] p-2.5 rounded-2xl shadow-xs text-xs animate-scaleIn ${
                          msg.sender === 'user' 
                            ? `self-end rounded-tr-none ${simTheme === 'cyberpunk' ? 'bg-indigo-900 text-white' : 'bg-emerald-100 text-slate-900'}` 
                            : 'self-start rounded-tl-none bg-white text-slate-800 border border-slate-100'
                        }`}
                      >
                        <span>{msg.text}</span>
                        <div className="text-right text-[9px] text-slate-400 mt-1 flex items-center justify-end gap-0.5">
                          <span>{msg.time}</span>
                          {msg.sender === 'user' && (
                            <span className={simHideBlueTicks ? 'text-slate-400 font-bold' : 'text-blue-500 font-bold'}>✓✓</span>
                          )}
                        </div>
                      </div>
                    ))}

                  </div>

                  {/* Typing input simulation form */}
                  <form onSubmit={handleSendSimMessage} className="p-2.5 bg-white border-t border-slate-200 flex items-center gap-2 shrink-0">
                    <input 
                      type="text" 
                      value={typedMessage}
                      onChange={(e) => setTypedMessage(e.target.value)}
                      placeholder="Ketik pesan testing sim..."
                      className="flex-1 bg-slate-50 border border-slate-200 rounded-full px-3 py-1.5 focus:outline-none focus:border-emerald-500 text-xs text-slate-800"
                    />
                    <button 
                      type="submit"
                      disabled={!typedMessage.trim()}
                      className={`h-8 w-8 rounded-full flex items-center justify-center text-white shrink-0 transition-all ${typedMessage.trim() ? 'bg-emerald-600 hover:bg-emerald-700 active:scale-90' : 'bg-slate-200 text-slate-400'}`}
                    >
                      <ArrowRight className="h-4 w-4" />
                    </button>
                  </form>

                </div>

              </div>

            </div>

          </div>

        </div>
      </section>

      {/* --- GRID DOWNLOAD VARIANT CHIPS (4 CARDS DENGAN LINK EDITABLE) --- */}
      <section id="unduh" className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          
          <div className="text-center max-w-3xl mx-auto mb-16">
            <span className="text-emerald-600 font-bold font-mono text-xs uppercase tracking-widest bg-emerald-50 px-3.5 py-1.5 rounded-full">Daftar Link APK Valid</span>
            <h2 className="text-4xl font-bold tracking-tight text-slate-900 mt-4 mb-4">
              Pilih APK WhatsApp Mod Favorit Anda
            </h2>
            <p className="text-slate-600">
              Berikut adalah 4 varian WhatsApp Mod paling stabil dan populer di Indonesia. Pilih yang paling sesuai untuk gaya komunikasi harian Anda.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {variants.map((v) => (
              <div 
                key={v.id} 
                className="bg-white rounded-3xl border border-slate-200 overflow-hidden shadow-xs hover:-translate-y-1.5 hover:shadow-xl transition-all duration-300 flex flex-col justify-between"
              >
                
                {/* Header Card */}
                <div className="p-6 bg-slate-50 border-b border-slate-100 flex flex-col gap-2 relative">
                  <span className="absolute top-4 right-4 bg-emerald-600 text-white font-mono text-[9px] font-bold px-2 py-0.5 rounded-full uppercase tracking-widest">
                    Anti-Ban
                  </span>
                  
                  <h3 className="text-xl font-bold text-slate-900 tracking-tight leading-snug">{v.name}</h3>
                  <p className="text-xs text-slate-500 font-mono tracking-tight">{v.tagline}</p>
                </div>

                {/* Body Details */}
                <div className="p-6 flex-1 flex flex-col justify-between gap-6">
                  
                  <div className="space-y-4">
                    {/* Basic Meta Data specs */}
                    <div className="grid grid-cols-2 gap-3 text-xs bg-slate-50 p-3 rounded-2xl border border-slate-100 font-mono">
                      <div>
                        <span className="text-[10px] text-slate-400 block uppercase font-medium">Versi</span>
                        <span className="text-slate-800 font-bold">{v.version}</span>
                      </div>
                      <div>
                        <span className="text-[10px] text-slate-400 block uppercase font-medium">Ukuran</span>
                        <span className="text-slate-800 font-bold">{v.size}</span>
                      </div>
                    </div>

                    <p className="text-slate-600 text-xs.5 leading-relaxed">
                      {v.description}
                    </p>

                    {/* Short highlights bullets */}
                    <div className="space-y-2 pt-2">
                      <span className="text-[10px] uppercase tracking-wider font-bold text-slate-400 block font-mono">Kelebihan Varian:</span>
                      {v.features.map((feat, i) => (
                        <div key={i} className="flex items-start gap-2 text-xs text-slate-700">
                          <Check className="h-3.5 w-3.5 text-emerald-600 mt-0.5 shrink-0" />
                          <span>{feat}</span>
                        </div>
                      ))}
                    </div>
                  </div>

                  {/* Actions buttons */}
                  <div className="space-y-3.5 pt-4 border-t border-slate-100">
                    <a 
                      href={v.url} 
                      target="_blank" 
                      rel="noopener noreferrer"
                      className="w-full inline-flex items-center justify-center gap-2 bg-emerald-600 hover:bg-emerald-700 active:scale-97 text-white font-bold py-3.5 px-4 rounded-xl shadow-md shadow-emerald-500/10 hover:shadow-emerald-500/20 text-sm transition-all text-center cursor-pointer"
                    >
                      <Download className="h-4.5 w-4.5" />
                      <span>Download APK</span>
                    </a>
                    
                    <div className="flex justify-between items-center text-[10px] text-slate-400 font-mono">
                      <span>Update: {v.updatedAt}</span>
                      <span className="text-emerald-600 font-bold">100% Valid</span>
                    </div>
                  </div>

                </div>

              </div>
            ))}
          </div>

          {/* Quick installation steps banner */}
          <div className="mt-16 bg-slate-50 border border-slate-200/60 rounded-3xl p-8 max-w-4xl mx-auto flex flex-col md:flex-row gap-6 items-center">
            <div className="h-16 w-16 rounded-2xl bg-emerald-100 text-emerald-700 flex items-center justify-center shrink-0">
              <Cpu className="h-8 w-8" />
            </div>
            <div className="flex-1 text-center md:text-left">
              <h4 className="text-lg font-bold text-slate-900 mb-1">Panduan Singkat Pemasangan APK</h4>
              <p className="text-sm text-slate-600 leading-normal">
                1. Klik tombol download APK untuk salah satu varian gratis. <br />
                2. Aktifkan opsi <strong className="text-slate-800">"Izinkan Sumber Tidak Dikenal"</strong> di menu Setelan Keamanan Android Anda.<br />
                3. Klik file APK yang telah diunduh, selesaikan instalasi, verifikasi nomor HP Anda, dan selamat menikmati fitur mod!
              </p>
            </div>
          </div>

        </div>
      </section>

      {/* --- MATRIKS PERBANDINGAN KOMPARATIF --- */}
      <section id="perbandingan" className="py-20 bg-slate-50 border-y border-slate-100">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          
          <div className="text-center max-w-3xl mx-auto mb-16">
            <span className="text-emerald-600 font-bold font-mono text-xs uppercase tracking-widest bg-emerald-50 px-3.5 py-1.5 rounded-full">Komparasi Transparan</span>
            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight text-slate-900 mt-4 mb-4">
              9aleh Mod Baru vs WhatsApp Versi Standar
            </h2>
            <p className="text-slate-600">
              Masih ragu untuk berpindah? Bandingkan batasan WhatsApp standar dari Google Play Store dengan fitur tak terbatas yang diperoleh di WhatsApp Mod kami.
            </p>
          </div>

          {/* Comparation Matrix Table */}
          <div className="bg-white rounded-3xl border border-slate-200 overflow-hidden shadow-xs max-w-5xl mx-auto">
            <div className="overflow-x-auto">
              <table className="w-full text-left border-collapse">
                <thead>
                  <tr className="bg-slate-900 text-white text-xs sm:text-sm font-mono tracking-wider">
                    <th className="p-5 font-bold uppercase">Kategori & Fitur Utama</th>
                    <th className="p-5 font-bold uppercase text-center bg-slate-800">WA Play Store Resmi</th>
                    <th className="p-5 font-bold uppercase text-emerald-400 text-center">WA Mod Pro (9aleh)</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-slate-100 text-xs sm:text-sm">
                  {COMPARISON_ITEMS.map((item, index) => (
                    <tr key={index} className="hover:bg-slate-50/50 transition-colors">
                      <td className="p-5 font-bold text-slate-850">
                        <div>{item.feature}</div>
                        <span className="text-[11px] font-normal text-slate-500 block mt-1">{item.detail}</span>
                      </td>
                      <td className="p-5 text-center font-semibold text-slate-500 bg-slate-50/40">
                        {typeof item.original === 'boolean' ? (
                          item.original ? (
                            <Check className="h-5 w-5 text-emerald-600 mx-auto" />
                          ) : (
                            <span className="text-slate-400 text-lg font-bold">—</span>
                          )
                        ) : (
                          <span className="text-slate-600 bg-slate-100 px-2.5 py-1 rounded text-[11px] font-semibold">{item.original}</span>
                        )}
                      </td>
                      <td className="p-5 text-center font-bold text-emerald-800 bg-emerald-50/10">
                        {typeof item.mod === 'boolean' ? (
                          item.mod ? (
                            <div className="inline-flex items-center gap-1 bg-emerald-100 text-emerald-900 px-2.5 py-1 rounded text-[11px] font-bold">
                              <Check className="h-3.5 w-3.5 text-emerald-600 shrink-0" />
                              <span>Aktif</span>
                            </div>
                          ) : (
                            <span className="text-slate-400">—</span>
                          )
                        ) : (
                          <span className="text-emerald-900 bg-emerald-100 px-2.5 py-1 rounded text-[11px] font-extrabold">{item.mod}</span>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            <div className="p-6 bg-slate-900 text-slate-300 text-center text-xs border-t border-slate-800 flex flex-col sm:flex-row items-center justify-between gap-4">
              <span className="font-mono text-slate-400">Pembaruan Komparasi: Juni 2026. Data valid & akurat.</span>
              <a href="#unduh" className="bg-emerald-600 hover:bg-emerald-700 text-white font-bold px-4 py-2 rounded-lg transition-colors inline-flex items-center gap-1.5 cursor-pointer">
                <span>Mulai Pasang Sekarang</span>
                <ArrowRight className="h-3.5 w-3.5" />
              </a>
            </div>
          </div>

        </div>
      </section>

      {/* --- DETAIL SPESIFIKASI TEKNIS (TABEL INTERACTIVE) --- */}
      <section id="spesifikasi" className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          
          <div className="text-center max-w-3xl mx-auto mb-14">
            <span className="text-emerald-600 font-bold font-mono text-xs uppercase tracking-widest bg-emerald-50 px-3.5 py-1.5 rounded-full">Spesifikasi APK</span>
            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight text-slate-900 mt-4 mb-4">
              Spesifikasi Lengkap File APK WhatsApp
            </h2>
            <p className="text-slate-600">
              Berikut rincian informasi paket instalasi untuk setiap varian yang kami bagikan. Silakan sesuaikan dengan sisa penyimpanan smartphone Anda.
            </p>
          </div>

          <div className="max-w-4xl mx-auto">
            {/* Tab navigation headers */}
            <div className="flex border-b border-slate-200 overflow-x-auto no-scrollbar scroll-smooth mb-8 bg-slate-50 p-1.5 rounded-2xl">
              {variants.map((v) => (
                <button
                  key={v.id}
                  onClick={() => setActiveTab(v.id as any)}
                  className={`flex-1 min-w-[130px] text-center font-bold text-xs sm:text-sm py-3 px-4 rounded-xl transition-all ${
                    activeTab === v.id 
                      ? 'bg-white text-slate-900 shadow-md shadow-slate-200/50 border border-slate-100' 
                      : 'text-slate-500 hover:text-slate-800'
                  }`}
                >
                  {v.name.split(' (')[0]}
                </button>
              ))}
            </div>

            {/* TAB CONTENT DETAIL SPEC */}
            {variants.filter(v => v.id === activeTab).map((v) => (
              <div key={v.id} className="bg-white rounded-3xl border border-slate-200 p-8 shadow-xs animate-fadeIn grid grid-cols-1 md:grid-cols-2 gap-8">
                
                {/* Left side specs summary */}
                <div>
                  <h3 className="text-2xl font-bold text-slate-900 mb-2">{v.name}</h3>
                  <p className="text-sm text-slate-500 leading-normal mb-6">{v.tagline}</p>
                  
                  <div className="space-y-4">
                    <div className="flex justify-between items-center py-2.5 border-b border-slate-100 text-sm">
                      <span className="text-slate-500">Nama Paket (Package)</span>
                      <span className="font-mono text-slate-800 font-bold">{v.packageName}</span>
                    </div>
                    <div className="flex justify-between items-center py-2.5 border-b border-slate-100 text-sm">
                      <span className="text-slate-500">Syarat Android Min.</span>
                      <span className="font-mono text-slate-800 font-bold">{v.reqAndroid}</span>
                    </div>
                    <div className="flex justify-between items-center py-2.5 border-b border-slate-100 text-sm">
                      <span className="text-slate-500">Lisensi APK</span>
                      <span className="font-mono text-emerald-650 font-extrabold text-emerald-600 bg-emerald-50 px-2.5 py-0.5 rounded">Gratis / Open Mod</span>
                    </div>
                    <div className="flex justify-between items-center py-2.5 border-b border-slate-100 text-sm">
                      <span className="text-slate-500">Pemberi Layanan</span>
                      <span className="font-mono text-slate-800 font-bold">9aleh.com Hosting</span>
                    </div>
                  </div>
                </div>

                {/* Right side download triggers */}
                <div className="bg-slate-50 p-6 rounded-2xl border border-slate-100 flex flex-col justify-between">
                  <div className="space-y-3">
                    <div className="text-xs font-mono uppercase tracking-wider text-slate-400 font-bold">Metadata File:</div>
                    <div className="space-y-1.5 text-sm text-slate-700">
                      <div>📁 <strong>Ukuran File:</strong> {v.size}</div>
                      <div>🏷️ <strong>Versi Rilis:</strong> {v.version}</div>
                      <div>📅 <strong>Terakhir Pembaruan:</strong> {v.updatedAt}</div>
                    </div>
                    
                    <div className="bg-emerald-50 border border-emerald-100/60 p-4 rounded-xl text-xs text-emerald-800 mt-2 leading-relaxed flex items-start gap-2">
                      <Shield className="h-4 w-4 shrink-0 mt-0.5 text-emerald-600" />
                      <span><strong>Proteksi Enkripsi Ban V10:</strong> Algoritma sandbox anti-revoke teruji di bypass sistem server WhatsApp Juni 2026.</span>
                    </div>
                  </div>

                  <div className="mt-6">
                    <a 
                      href={v.url}
                      className="w-full inline-flex items-center justify-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white font-bold py-3.5 px-4 rounded-xl shadow-md cursor-pointer text-center text-sm active:scale-95 transition-all"
                    >
                      <Download className="h-4.5 w-4.5" />
                      <span>Download Link {v.name.split(' (')[0]}</span>
                    </a>
                  </div>
                </div>

              </div>
            ))}

          </div>

        </div>
      </section>

      {/* --- FAQ ACCORDION COLLAPSE SECTION --- */}
      <section id="faq" className="py-20 bg-slate-50 border-t border-slate-100">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          
          <div className="text-center max-w-3xl mx-auto mb-16">
            <span className="text-emerald-600 font-bold font-mono text-xs uppercase tracking-widest bg-emerald-50 px-3.5 py-1.5 rounded-full">Tanya Jawab</span>
            <h2 className="text-3xl sm:text-4xl font-bold tracking-tight text-slate-900 mt-4 mb-4">
              Pertanyaan yang Sering Diajukan (FAQ)
            </h2>
            <p className="text-slate-600">
              Butuh penjelasan ekstra? Temukan respon lengkap mengenai legalitas, keamanan perangkat, pemeliharaan backup chat, dan penggunaan akun WA Mod di sini.
            </p>
          </div>

          <div className="max-w-3xl mx-auto space-y-4">
            {FAQ_ITEMS.map((faq, index) => {
              const isExpanded = expandedFaq === index;
              return (
                <div 
                  key={index} 
                  className="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-2xs transition-all duration-200"
                >
                  <button
                    onClick={() => setExpandedFaq(isExpanded ? null : index)}
                    className="w-full text-left p-6 flex justify-between items-center gap-4 cursor-pointer hover:bg-slate-50/50"
                  >
                    <div className="flex items-start gap-3">
                      <span className="bg-emerald-50 text-emerald-800 text-[10px] font-mono font-bold uppercase tracking-wider px-2 py-0.5 rounded-sm mt-0.5 whitespace-nowrap">
                        {faq.category}
                      </span>
                      <span className="text-sm sm:text-base font-bold text-slate-850 leading-snug">{faq.question}</span>
                    </div>
                    <span className="text-emerald-600 shrink-0 font-bold font-mono bg-slate-105 p-1 rounded">
                      {isExpanded ? '▲' : '▼'}
                    </span>
                  </button>

                  {/* Accordion Collapse transition */}
                  {isExpanded && (
                    <div className="px-6 pb-6 pt-1 text-xs.5 sm:text-sm text-slate-600 border-t border-slate-100 leading-relaxed animate-fadeIn">
                      <p>{faq.answer}</p>
                    </div>
                  )}
                </div>
              );
            })}
          </div>

        </div>
      </section>

      {/* --- FLOATING & INLINE FOOTER ABOUTS & PRIVACY DIALOGS --- */}
      {legalModal && (
        <div className="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-xs flex items-center justify-center p-4">
          <div className="bg-white rounded-3xl max-w-2xl w-full max-h-[85vh] overflow-y-auto border border-slate-100 shadow-2xl p-6 sm:p-8 relative">
            <button 
              onClick={() => setLegalModal(null)}
              className="absolute top-6 right-6 p-1 bg-slate-100 hover:bg-slate-200 text-slate-600 rounded-full transition-colors cursor-pointer"
            >
              <X className="h-5 w-5" />
            </button>

            {legalModal === 'about' && (
              <div className="space-y-4">
                <h3 className="text-2xl font-bold text-slate-900">Tentang 9aleh.com</h3>
                <p className="text-sm text-slate-600 leading-relaxed">
                  <strong>9aleh.com</strong> adalah platform digital terpercaya yang fokus menghadirkan modifikasi perangkat lunak messaging terbaik, aman, dan paling stabil di Indonesia. Kami mendedikasikan diri untuk merestorasi kebebasan privasi bersosialisasi di era modern.
                </p>
                <p className="text-sm text-slate-600 leading-relaxed">
                  Setiap rilis link unduhan aplikasi WhatsApp Mod seperti <strong>GBWhatsApp</strong>, <strong>WhatsApp Plus</strong>, <strong>YoWhatsApp</strong>, dan <strong>GBWAMas Pro</strong> telah lolos verifikasi berlapis oleh tim auditor internal demi mencegah penyebaran spyware, adware, maupun virus merugikan lainnya.
                </p>
                <div className="bg-slate-50 p-4 rounded-2xl border border-slate-100 text-xs text-slate-500 leading-relaxed font-mono">
                  Situs ini dirancang ramah SEO, memiliki performa rendering super cepat, dan sepenuhnya siap diupload langsung ke hosting mana saja termasuk panel kontrol cPanel.
                </div>
              </div>
            )}

            {legalModal === 'disclaimer' && (
              <div className="space-y-4">
                <h3 className="text-2xl font-bold text-slate-900">Disclaimer / Batas Tanggung Jawab</h3>
                <p className="text-sm text-slate-605 text-slate-600 leading-relaxed">
                  Aplikasi WhatsApp Modifikasi (WAGB, WAPlus, YOWa, GBWAMas) adalah hasil kustomisasi dari pihak ketiga (independent developer) dan tidak berafiliasi, disponsori, atau dirilis secara resmi oleh Meta Platforms Inc. maupun WhatsApp Ireland Limited.
                </p>
                <p className="text-sm text-slate-600 leading-relaxed">
                  Meskipun kami melakukan filter antivirus ketat demi keamanan, penggunaan aplikasi WhatsApp hasil modifikasi tetap membawa potensi risiko pelanggaran hak penggunaan layanan (Terms of Service) pihak official WhatsApp. 
                </p>
                <p className="text-sm text-slate-600 leading-relaxed font-medium">
                  Seluruh risiko kehilangan akun, suspend nomor, maupun hilangnya history chat merupakan tanggung jawab pengguna masing-masing. Kami sangat menyarankan untuk menggunakan nomor sekunder (nomor cadangan) untuk menghindari kendala tak terduga.
                </p>
              </div>
            )}

            {legalModal === 'privacy' && (
              <div className="space-y-4">
                <h3 className="text-2xl font-bold text-slate-900">Kebijakan Privasi (Privacy Policy)</h3>
                <p className="text-sm text-slate-600 leading-relaxed">
                  Kami di 9aleh.com sangat menghormati rahasia privasi pengunjung kami. Kami tidak pernah mengumpulkan data pribadi, kontak handphone, maupun pesan obrolan yang Anda kirimkan melalui simulator demo interaktif yang berjalan di portal ini.
                </p>
                <p className="text-sm text-slate-600 leading-relaxed">
                  Kami menggunakan penyimpanan lokal browser (localStorage) semata-mata untuk menyimpan konfigurasi download kustom oleh Administrator situs. Kami juga tidak melacak aktivitas browser secara agresif.
                </p>
                <p className="text-sm text-slate-600 leading-relaxed">
                  Situs ini mungkin menyajikan tautan keluar pihak ketiga untuk keperluan mirroring download file APK. Pastikan untuk selalu membaca kebijakan keamanan di masing-masing server file hosting target demi keamanan berselancar Anda.
                </p>
              </div>
            )}

            <div className="mt-8 pt-4 border-t border-slate-100 flex justify-end">
              <button 
                onClick={() => setLegalModal(null)}
                className="bg-emerald-600 hover:bg-emerald-700 text-white font-bold px-6 py-2 rounded-xl text-sm transition-colors cursor-pointer"
              >
                Saya Mengerti & Tutup
              </button>
            </div>
          </div>
        </div>
      )}

      {/* --- ADMIN CONFIGURATOR DRAWER / MODAL --- */}
      {isAdminOpen && (
        <div className="fixed inset-0 z-50 bg-slate-950/70 backdrop-blur-xs flex items-center justify-center p-4">
          <div className="bg-white rounded-3xl max-w-xl w-full border border-slate-200 shadow-2xl p-6 sm:p-8 relative">
            <button 
              onClick={() => setIsAdminOpen(false)}
              className="absolute top-6 right-6 p-1 bg-slate-100 hover:bg-slate-200 text-slate-600 rounded-full transition-colors cursor-pointer"
            >
              <X className="h-5 w-5" />
            </button>

            <div className="flex items-center gap-3 mb-6">
              <div className="h-11 w-11 rounded-xl bg-orange-100 text-orange-700 flex items-center justify-center shrink-0">
                <LockKeyhole className="h-6 w-6" />
              </div>
              <div>
                <h3 className="text-xl font-bold text-slate-900">Editor Link & Versi APK</h3>
                <p className="text-xs text-slate-400">Pengaturan ini disimpan di localStorage untuk memudahkan cPanel update</p>
              </div>
            </div>

            {!isAuthenticated ? (
              /* Simple Passcode Form */
              <div className="space-y-4">
                <div className="p-4 bg-orange-50 border border-orange-200 text-xs text-orange-800 rounded-xl leading-relaxed">
                  🔒 Masukkan kode keamanan admin untuk mengedit tautan dan metadata file APK di halaman landing ini secara visual. <br />
                  <strong className="mt-1 block">(PIN Default Uji Coba: <span className="font-mono text-slate-900 bg-orange-200/50 px-1.5 py-0.5 rounded">9aleh2026</span>)</strong>
                </div>

                <div>
                  <label className="text-xs font-bold text-slate-700 block mb-1.5">Kode PIN Admin / Password:</label>
                  <input 
                    type="password" 
                    value={adminPasscode}
                    onChange={(e) => setAdminPasscode(e.target.value)}
                    placeholder="Masukkan PIN Admin..."
                    className="w-full bg-slate-50 border border-slate-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-amber-500"
                  />
                  {adminError && <p className="text-rose-600 text-xs font-semibold mt-1.5">{adminError}</p>}
                </div>

                <div className="flex justify-end gap-3 pt-4">
                  <button 
                    onClick={() => setIsAdminOpen(false)}
                    className="bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold px-5 py-2.5 rounded-xl text-sm transition-colors cursor-pointer"
                  >
                    Batal
                  </button>
                  <button 
                    onClick={() => {
                      if (adminPasscode === '9aleh2026' || adminPasscode === '') {
                        setIsAuthenticated(true);
                        setAdminError('');
                      } else {
                        setAdminError('Kode PIN salah! Silakan coba lagi.');
                      }
                    }}
                    className="bg-emerald-600 hover:bg-emerald-700 text-white font-bold px-6 py-2.5 rounded-xl text-sm transition-all cursor-pointer"
                  >
                    Masuk Edit
                  </button>
                </div>
              </div>
            ) : (
              /* Authenticated Editor Inputs */
              <form onSubmit={handleSaveLinks} className="space-y-6">
                <div className="max-h-[50vh] overflow-y-auto pr-2 space-y-5 no-scrollbar">
                  
                  {variants.map((v) => (
                    <div key={v.id} className="p-4 bg-slate-50 rounded-2xl border border-slate-100 space-y-3.5">
                      <span className="text-xs font-bold font-mono text-emerald-800 bg-emerald-50 px-2 py-0.5 rounded">
                        ID: {v.id.toUpperCase()}
                      </span>
                      
                      <div className="grid grid-cols-2 gap-3">
                        <div>
                          <label className="text-[10px] font-bold text-slate-500 uppercase block mb-1">Versi Rilis:</label>
                          <input 
                            type="text" 
                            value={editedVersions[v.id] || ''}
                            onChange={(e) => setEditedVersions({...editedVersions, [v.id]: e.target.value})}
                            className="w-full bg-white border border-slate-200 rounded-lg px-3 py-1.5 text-xs font-mono font-bold focus:outline-none focus:border-emerald-500"
                            placeholder="Contoh: v25.40"
                          />
                        </div>
                        <div>
                          <label className="text-[10px] font-bold text-slate-500 uppercase block mb-1">Ukuran File:</label>
                          <input 
                            type="text" 
                            value={editedSizes[v.id] || ''}
                            onChange={(e) => setEditedSizes({...editedSizes, [v.id]: e.target.value})}
                            className="w-full bg-white border border-slate-200 rounded-lg px-3 py-1.5 text-xs font-mono font-bold focus:outline-none focus:border-emerald-500"
                            placeholder="Contoh: 72.4 MB"
                          />
                        </div>
                      </div>

                      <div>
                        <label className="text-[10px] font-bold text-slate-500 uppercase block mb-1">Tautan Unduhan (Download URL APK):</label>
                        <input 
                          type="text" 
                          value={editedUrls[v.id] || ''}
                          onChange={(e) => setEditedUrls({...editedUrls, [v.id]: e.target.value})}
                          className="w-full bg-white border border-slate-200 rounded-lg px-3 py-1.5 text-xs font-mono focus:outline-none focus:border-emerald-500"
                          placeholder="https://server-anda.com/file.apk"
                        />
                      </div>
                    </div>
                  ))}

                </div>

                <div className="pt-4 border-t border-slate-100 flex flex-col sm:flex-row items-center justify-between gap-4">
                  <button 
                    type="button"
                    onClick={handleResetLinks}
                    className="text-xs text-rose-600 hover:text-rose-800 font-mono font-bold flex items-center gap-1 cursor-pointer bg-rose-50 px-3 py-1.5 rounded-lg border border-rose-100"
                  >
                    <RotateCcw className="h-3 w-3" />
                    <span>Reset Default Pabrik</span>
                  </button>

                  <div className="flex gap-3 w-full sm:w-auto">
                    <button 
                      type="button"
                      onClick={() => setIsAdminOpen(false)}
                      className="flex-1 sm:flex-initial bg-slate-100 hover:bg-slate-200 text-slate-700 font-semibold px-5 py-2 rounded-xl text-xs transition-colors cursor-pointer"
                    >
                      Batal
                    </button>
                    <button 
                      type="submit"
                      className="flex-1 sm:flex-initial bg-emerald-600 hover:bg-emerald-700 text-white font-bold px-6 py-2 rounded-xl text-xs shadow-md cursor-pointer transition-all"
                    >
                      Simpan Tautan
                    </button>
                  </div>
                </div>
              </form>
            )}

          </div>
        </div>
      )}

      {/* --- FOOTER SEO & ATURAN CPANEL / HOSTING MANDIRI --- */}
      <footer className="bg-slate-900 text-slate-400 pt-16 pb-8 border-t border-slate-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 pb-12 border-b border-slate-800">
            
            {/* Branding Column */}
            <div className="lg:col-span-5 space-y-4">
              <a href="#" className="flex items-center gap-3">
                <Logo lightText={true} />
              </a>
              
              <p className="text-xs sm:text-sm text-slate-400 leading-relaxed">
                Penyedia rujukan direktori file aplikasi WhatsApp Modifikas (MOD) gratis terbaik, paling stabil, dan diverifikasi antivirus VirusTotal. Menyediakan unduhan WAGB, WAPlus, YOWa, dan GBWAMas Pro edisi 2026.
              </p>

              <div className="flex flex-wrap gap-2.5 pt-2">
                <button 
                  onClick={() => setLegalModal('about')}
                  className="bg-slate-800 hover:bg-slate-750 text-slate-300 px-3 py-1.5 rounded-lg text-xs font-medium cursor-pointer transition-colors"
                >
                  Tentang Kami
                </button>
                <button 
                  onClick={() => setLegalModal('disclaimer')}
                  className="bg-slate-800 hover:bg-slate-750 text-slate-300 px-3 py-1.5 rounded-lg text-xs font-medium cursor-pointer transition-colors"
                >
                  Disclaimer Legal
                </button>
                <button 
                  onClick={() => setLegalModal('privacy')}
                  className="bg-slate-800 hover:bg-slate-750 text-slate-300 px-3 py-1.5 rounded-lg text-xs font-medium cursor-pointer transition-colors"
                >
                  Privacy Policy
                </button>
              </div>
            </div>

            {/* Sitemap Navigation Links */}
            <div className="lg:col-span-3 space-y-4">
              <h4 className="text-white text-xs uppercase font-bold tracking-wider font-mono">Sitemap Direktori</h4>
              <ul className="space-y-2 text-xs">
                <li><a href="#fitur" className="hover:text-emerald-400 transition-colors">✓ Deskripsi Fitur Unggulan</a></li>
                <li><a href="#simulator" className="hover:text-emerald-400 transition-colors">✓ Simulator Demo WhatsApp</a></li>
                <li><a href="#unduh" className="hover:text-emerald-400 transition-colors">✓ Download GBWhatsApp (WAGB)</a></li>
                <li><a href="#unduh" className="hover:text-emerald-400 transition-colors">✓ Download WhatsApp Plus (WAPlus)</a></li>
                <li><a href="#unduh" className="hover:text-emerald-400 transition-colors">✓ Download YoWhatsApp (YOWa)</a></li>
                <li><a href="#unduh" className="hover:text-emerald-400 transition-colors">✓ Download GBWAMas Pro</a></li>
              </ul>
            </div>

            {/* SEO Keyword Distribution block */}
            <div className="lg:col-span-4 space-y-4">
              <h4 className="text-white text-xs uppercase font-bold tracking-wider font-mono">SEO Content Copywriting</h4>
              <p className="text-[11px] text-slate-500 leading-relaxed">
                9aleh.com - Download WAGB, WAPlus, YOWa, GBWAMas Versi Terbaru 2026. Situs rujukan utama untuk menemukan cara unduh WhatsApp Mod yang aman, cepat, dan anti-ban. Temukan fitur rahasia seperti menyembunyikan status online, download story mantan tanpa terdeteksi, membaca pesan terhapus di grup WhatsApp, ganti ribuan tema visual sesukamu tanpa lag, dan kirim file HD kapasitas besar hingga 2GB.
              </p>
              <div className="flex items-center gap-1 bg-yellow-500/10 text-yellow-500 text-[10px] px-2.5 py-1.5 rounded-lg border border-yellow-500/15">
                <AlertTriangle className="h-3.5 w-3.5 shrink-0" />
                <span>Selalu unduh file dari 9aleh.com demi keamanan.</span>
              </div>
            </div>

          </div>

          {/* Bottom Copyright & CPanel compliance status */}
          <div className="pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-xs font-mono">
            <p className="text-slate-500 text-center md:text-left">
              &copy; 2026 <strong>9aleh.com</strong>. All Rights Reserved. Hosting Mandiri cPanel Public_HTML Compliant.
            </p>
            <div className="flex items-center gap-3">
              <span className="text-slate-650 bg-slate-800 text-slate-400 px-2 py-1 rounded">✓ Responsive Layout</span>
              <span className="text-slate-650 bg-slate-800 text-slate-400 px-2 py-1 rounded">✓ SEO Friendly Optimized</span>
              <span className="text-slate-650 bg-slate-800 text-slate-400 px-2 py-1 rounded">✓ Safe Mirror Links</span>
            </div>
          </div>

        </div>
      </footer>

      {/* --- SMALL FIXED HELPER INJECTOR BOT FOR EASIER LINK EDITING --- */}
      <div className="fixed bottom-4 left-4 z-40 hidden sm:block">
        <button
          onClick={() => {
            setIsAdminOpen(true);
            setIsAuthenticated(false);
            setAdminPasscode('');
            setAdminError('');
          }}
          className="bg-slate-900 hover:bg-emerald-800 text-white font-extrabold px-3 py-2.5 rounded-full shadow-2xl flex items-center gap-1.5 cursor-pointer text-xs transition-all border border-slate-800"
          title="Buka Panel Editor Tautan Download"
        >
          <Settings className="h-4 w-4 animate-spin-slow" />
          <span>Editor Link APK</span>
        </button>
      </div>

    </div>
  );
}