import React, { useState, useEffect, useRef } from 'react';
import { 
  BookOpen, 
  PenTool, 
  Send, 
  LayoutDashboard, 
  User, 
  Settings, 
  Search, 
  Moon, 
  Sun, 
  Sparkles, 
  Bookmark, 
  Heart, 
  Share2, 
  MessageSquare, 
  Download, 
  FileText, 
  Award, 
  TrendingUp, 
  Users, 
  BookOpenCheck, 
  Eye, 
  ChevronRight, 
  ThumbsUp, 
  CheckCircle2, 
  AlertCircle, 
  Plus, 
  Tag,
  Hash,
  Database,
  Filter,
  ArrowRight,
  ChevronDown,
  Compass,
  FileSpreadsheet,
  Globe,
  Flame,
  MessageCircle,
  Clock,
  Printer,
  FileCheck,
  ShieldAlert,
  Info
} from 'lucide-react';

// ==========================================
// CONFIGURATION & INITIAL STATE (POPULAR / BLOG STYLE)
// ==========================================

const INITIAL_ARTICLES = [
  {
    id: "art-1",
    title: "Mengapa Kita Begitu Terobsesi dengan Algoritma Media Sosial?",
    abstract: "Menilik kecanduan digital dari sudut pandang psikologi populer dan filsafat eksistensial sehari-hari. Mengapa 'like' terasa sangat candu?",
    content: "Di era modern ini, kita tidak lagi mengonsumsi media; medialah yang mengonsumsi kita. Setiap gesekan layar (scroll) yang kita lakukan diatur oleh algoritma pintar yang dirancang khusus untuk memicu dopamin.\n\nFilsuf kontemporer sering menyebut fenomena ini sebagai komodifikasi perhatian. Ketika kita memposting sesuatu dan mendapatkan ratusan reaksi suka, otak kita secara biologis meresponsnya sama seperti mendapatkan penghargaan sosial nyata.\n\nNamun, di balik kegembiraan instan itu, ada rasa hampa eksistensial yang membayangi. Kita mulai mengukur nilai diri kita dari angka di layar, bukan dari kedalaman hubungan interpersonal kita di dunia nyata.",
    category: "Gaya Hidup & Teknologi",
    tags: ["Media Sosial", "Kecanduan Digital", "Psikologi Populer", "Filsafat Hidup"],
    author: {
      name: "Fahruddin Faiz",
      institution: "Pemerhati Budaya Populer",
      avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150"
    },
    publishedAt: "2026-07-15",
    readingTime: 4,
    views: 3450,
    likes: 892,
    bookmarks: 245,
    status: "Published",
    comments: [
      { id: "c1", user: "Zulian Al-Farabi", avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100", text: "Esai yang sangat relate! Rasanya setiap hari kita terjebak dalam pusaran dopamin tanpa henti.", date: "2026-07-15" }
    ]
  },
  {
    id: "art-2",
    title: "Seni Menikmati Kesunyian di Tengah Berisiknya Kota Jakarta",
    abstract: "Menemukan ketenangan batin lewat konsep filsafat Stoikisme populer untuk bertahan dari stres kehidupan perkotaan yang serba cepat.",
    content: "Jakarta tidak pernah tidur, dan begitu juga kecemasan warganya. Kemacetan, tuntutan pekerjaan, hingga kehidupan sosial yang padat membuat kita lupa caranya diam.\n\nStoikisme, sebuah filsafat kuno dari Yunani, menawarkan cara pandang menarik: dikotomi kendali. Hal-hal eksternal seperti macetnya jalanan atau sikap bos di kantor berada di luar kendali kita. Yang bisa kita kendalikan sepenuhnya adalah respons internal kita sendiri. Menemukan kesunyian di tengah kebisingan kota adalah seni melatih pikiran untuk tetap tenang.",
    category: "Filsafat Populer",
    tags: ["Stoikisme", "Kesehatan Mental", "Gaya Hidup", "Self Improvement"],
    author: {
      name: "Richard Perkasa",
      institution: "Esais Bebas",
      avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150"
    },
    publishedAt: "2026-07-14",
    readingTime: 5,
    views: 2150,
    likes: 642,
    bookmarks: 112,
    status: "Published",
    comments: []
  },
  {
    id: "art-3",
    title: "AI dan Masa Depan Kepenulisan Kreatif: Apakah Blogger Akan Punah?",
    abstract: "Penyebaran ChatGPT dan Gemini mengubah industri kreatif. Simak ulasan santai mengapa tulisan manusia yang jujur dan emosional tidak akan tergantikan.",
    content: "Dengan sekali ketik, AI sekarang bisa membuat artikel ribuan kata dalam hitungan detik. Pertanyaannya: apakah hobi menulis blog dan jurnalisme warga masih relevan?\n\nJawabannya ada pada keaslian emosi. AI sangat mahir menyusun data dan pola bahasa, tetapi ia tidak memiliki 'jiwa', luka batin, atau rasa humor yang spontan. Tulisan yang paling menyentuh pembaca selalu lahir dari pengalaman autentik manusia.",
    category: "Berita & Tren",
    tags: ["Kecerdasan Buatan", "Blogging", "Masa Depan", "Kreativitas"],
    author: {
      name: "Amrina Rosyada",
      institution: "Blogger & Content Creator",
      avatar: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=150"
    },
    publishedAt: "2026-07-12",
    readingTime: 5,
    views: 4120,
    likes: 1205,
    bookmarks: 489,
    status: "Published",
    comments: []
  }
];

const CATEGORIES = [
  "Filsafat Populer", "Opini", "Berita & Tren", "Gaya Hidup & Teknologi", 
  "Kesehatan Mental", "Sosial Budaya", "Esai Santai", "Resensi Buku", "Sains Populer"
];

export default function App() {
  // Global State
  const [theme, setTheme] = useState('dark');
  const [currentPage, setCurrentPage] = useState('landing');
  const [articles, setArticles] = useState(INITIAL_ARTICLES);
  const [selectedArticle, setSelectedArticle] = useState(null);
  const [isLoggedIn, setIsLoggedIn] = useState(true);
  
  // Custom Toast Notification System
  const [toasts, setToasts] = useState([]);
  const showToast = (message, type = 'success') => {
    const id = Date.now();
    setToasts(prev => [...prev, { id, message, type }]);
    setTimeout(() => {
      setToasts(prev => prev.filter(t => t.id !== id));
    }, 4000);
  };

  // State Search & Filter
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('All');
  
  // User Profile
  const [currentUser, setCurrentUser] = useState({
    name: "Ahmad Mujahid",
    institution: "Sadra Blogger Community",
    bio: "Pecinta kopi hangat, buku filsafat saku, dan esai bertema humaniora populer.",
    avatar: "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=150",
    points: 120,
    badge: "Top Contributor"
  });

  // State Bookmark & Likes
  const [bookmarkedIds, setBookmarkedIds] = useState(["art-1"]);
  const [likedIds, setLikedIds] = useState(["art-1", "art-3"]);

  // Submission & Auto Redirect States
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [showSuccessModal, setShowSuccessModal] = useState(false);
  const [countdown, setCountdown] = useState(3);
  const [pendingWaUrl, setPendingWaUrl] = useState("");

  // Set Theme Class to HTML
  useEffect(() => {
    const root = window.document.documentElement;
    if (theme === 'dark') {
      root.classList.add('dark');
    } else {
      root.classList.remove('dark');
    }
  }, [theme]);

  // Auto-redirect countdown effect
  useEffect(() => {
    let timer;
    if (showSuccessModal && countdown > 0) {
      timer = setTimeout(() => {
        setCountdown(prev => prev - 1);
      }, 1000);
    } else if (showSuccessModal && countdown === 0) {
      // Trigger auto-redirect to WA when countdown reaches 0
      window.open(pendingWaUrl, '_blank');
      setShowSuccessModal(false);
      setCountdown(3); // Reset
      setCurrentPage('dashboard');
    }
    return () => clearTimeout(timer);
  }, [showSuccessModal, countdown, pendingWaUrl]);

  // AI Assistant States (Gemini Key & Loading)
  const [geminiApiKey, setGeminiApiKey] = useState("");
  const [aiLoading, setAiLoading] = useState(false);

  // Editor Draft States
  const [editorTitle, setEditorTitle] = useState("");
  const [editorAbstract, setEditorAbstract] = useState("");
  const [editorContent, setEditorContent] = useState("");
  const [editorCategory, setEditorCategory] = useState("Filsafat Populer");
  const [editorTags, setEditorTags] = useState("");

  // Discussion state for individual articles
  const [newCommentText, setNewCommentText] = useState("");

  // Toggle Bookmark
  const toggleBookmark = (id) => {
    if (bookmarkedIds.includes(id)) {
      setBookmarkedIds(prev => prev.filter(item => item !== id));
      showToast("Dihapus dari daftar bacaan", "info");
    } else {
      setBookmarkedIds(prev => [...prev, id]);
      showToast("Disimpan ke daftar bacaan", "success");
    }
  };

  // Toggle Like
  const toggleLike = (id) => {
    if (likedIds.includes(id)) {
      setLikedIds(prev => prev.filter(item => item !== id));
      setArticles(prev => prev.map(art => art.id === id ? { ...art, likes: art.likes - 1 } : art));
    } else {
      setLikedIds(prev => [...prev, id]);
      setArticles(prev => prev.map(art => art.id === id ? { ...art, likes: art.likes + 1 } : art));
      showToast("Menyukai artikel ini", "success");
    }
  };

  // Redirect to WhatsApp helper with formatted text
  const handleWhatsAppRedirect = (title, category, tags, abstract, content) => {
    const waNumber = "6285863889768"; // WA: 085863889768
    const formattedMessage = `Halo Admin *SymposiumSadra*, saya ingin mengirimkan naskah tulisan baru untuk diterbitkan!%0A%0A` +
      `*Judul:* ${encodeURIComponent(title || "(Belum Diisi)")}%0A` +
      `*Kategori:* ${encodeURIComponent(category)}%0A` +
      `*Kata Kunci/Tag:* ${encodeURIComponent(tags || "-")}%0A` +
      `*Ringkasan:* ${encodeURIComponent(abstract || "-")}%0A%0A` +
      `*Isi Draf Artikel:*%0A${encodeURIComponent(content ? content.substring(0, 900) + (content.length > 900 ? "... [Selengkapnya terlampir]" : "") : "[Draf Masih Kosong]")}`;

    return `https://api.whatsapp.com/send?phone=${waNumber}&text=${formattedMessage}`;
  };

  // Submission Handler (Locally saves AND prompts WA Send with countdown success screen)
  const handlePublishSubmit = (e) => {
    e.preventDefault();
    if (!editorTitle || !editorContent || !editorAbstract) {
      showToast("Harap isi Judul, Ringkasan, dan Konten Artikel!", "error");
      return;
    }

    // Checking minimal word count guideline (Mojok style: 500 words target)
    const wordCount = editorContent.trim().split(/\s+/).filter(Boolean).length;
    if (wordCount < 100) {
      showToast("Gagal Submit: Draf tulisan Anda terlalu pendek. Minimal syarat adalah 100 kata untuk pengiriman demo ini.", "error");
      return;
    }

    setIsSubmitting(true);

    // Simulate premium database saving effect
    setTimeout(() => {
      const tagsArray = editorTags ? editorTags.split(",").map(t => t.trim()) : ["Esai"];

      const newArticle = {
        id: `art-${Date.now()}`,
        title: editorTitle,
        abstract: editorAbstract,
        content: editorContent,
        category: editorCategory,
        tags: tagsArray,
        author: {
          name: currentUser.name,
          institution: currentUser.institution,
          avatar: currentUser.avatar
        },
        publishedAt: new Date().toISOString().split('T')[0],
        readingTime: Math.max(1, Math.ceil(editorContent.split(/\s+/).length / 180)),
        views: 1,
        likes: 0,
        bookmarks: 0,
        status: "Pending Review",
        comments: []
      };

      setArticles(prev => [newArticle, ...prev]);
      
      // Generate WA URL and configure states for transition
      const waUrl = handleWhatsAppRedirect(editorTitle, editorCategory, editorTags, editorAbstract, editorContent);
      setPendingWaUrl(waUrl);
      
      setIsSubmitting(false);
      setShowSuccessModal(true);
      setCountdown(3);

      // Reset editor
      setEditorTitle("");
      setEditorAbstract("");
      setEditorContent("");
      setEditorTags("");
      
      showToast("Draf berhasil disimpan di website!", "success");
    }, 1500);
  };

  // AI Tools for Popular Polish
  const triggerAiSummary = async (textToSummarize) => {
    if (!textToSummarize) {
      showToast("Tulis draf konten terlebih dahulu agar AI dapat merangkum!", "error");
      return;
    }
    setAiLoading(true);
    try {
      const systemPrompt = "Anda adalah asisten AI editor blog kreatif. Buat rangkuman pembuka (teaser/hook) yang menarik, santai, dan persuasif sepanjang 2-3 kalimat untuk menarik perhatian pembaca umum.";
      const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${geminiApiKey}`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          contents: [{ parts: [{ text: `Buat teaser blog menarik dari tulisan ini:\n\n${textToSummarize}` }] }],
          systemInstruction: { parts: [{ text: systemPrompt }] }
        })
      });
      const data = await response.json();
      const text = data.candidates?.[0]?.content?.parts?.[0]?.text;
      if (text) {
        setEditorAbstract(text.trim());
        showToast("AI berhasil membuat teaser pembuka yang estetik!", "success");
      } else {
        throw new Error();
      }
    } catch (err) {
      setTimeout(() => {
        const sentences = textToSummarize.split('.');
        if (sentences.length > 2) {
          const mockSummary = "Ulasan mendalam namun dibawakan secara kasual tentang esensi kehidupan kita hari ini. Temukan sudut pandang unik yang akan membuka mata Anda dalam artikel ini!";
          setEditorAbstract(mockSummary);
          showToast("AI (Simulasi): Intro blog berhasil dibuat!", "success");
        } else {
          showToast("Tulis konten draf yang lebih panjang terlebih dahulu.", "error");
        }
      }, 1000);
    } finally {
      setAiLoading(false);
    }
  };

  const triggerAiTags = async (titleText, contentText) => {
    if (!titleText) {
      showToast("Harap isi judul artikel terlebih dahulu!", "error");
      return;
    }
    setAiLoading(true);
    try {
      const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${geminiApiKey}`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          contents: [{ parts: [{ text: `Berdasarkan judul blog: "${titleText}" dan konten: "${contentText.substring(0, 300)}", berikan 4 tag tren populer dipisahkan dengan koma.` }] }]
        })
      });
      const data = await response.json();
      const text = data.candidates?.[0]?.content?.parts?.[0]?.text;
      if (text) {
        setEditorTags(text.trim());
        showToast("Tag populer berhasil disematkan!", "success");
      } else {
        throw new Error();
      }
    } catch (err) {
      setTimeout(() => {
        setEditorTags("Kisah Menarik, Opini Populer, Mindset, Tren Masa Kini");
        showToast("Rekomendasi tag populer disematkan (Simulasi)!", "success");
      }, 1000);
    } finally {
      setAiLoading(false);
    }
  };

  // Add Comment Handler
  const handleAddComment = (e) => {
    e.preventDefault();
    if (!newCommentText.trim()) return;

    const newComment = {
      id: `comm-${Date.now()}`,
      user: currentUser.name,
      avatar: currentUser.avatar,
      text: newCommentText,
      date: new Date().toISOString().split('T')[0]
    };

    setArticles(prev => prev.map(art => {
      if (art.id === selectedArticle.id) {
        const updatedComments = [...art.comments, newComment];
        setSelectedArticle(prevSel => ({ ...prevSel, comments: updatedComments }));
        return { ...art, comments: updatedComments };
      }
      return art;
    }));

    setNewCommentText("");
    showToast("Komentar berhasil dikirim!", "success");
  };

  // Filtered Articles Logic
  const filteredArticles = articles.filter(art => {
    const matchesSearch = art.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
                          art.abstract.toLowerCase().includes(searchQuery.toLowerCase()) ||
                          art.author.name.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesCategory = selectedCategory === 'All' || art.category === selectedCategory;
    return matchesSearch && matchesCategory;
  });

  return (
    <div className={`min-h-screen transition-colors duration-300 font-sans ${theme === 'dark' ? 'bg-[#020617] text-[#F8FAFC]' : 'bg-[#F8FAFC] text-[#0F172A]'}`}>
      
      {/* ==========================================
          AUTO REDIRECT / SUCCESS MODAL OVERLAY
         ========================================== */}
      {showSuccessModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-md">
          <div className="bg-slate-900 border border-slate-800 p-8 rounded-3xl max-w-md w-full text-center shadow-2xl relative overflow-hidden animate-in fade-in zoom-in duration-300">
            <div className="absolute -top-10 -left-10 w-40 h-40 bg-teal-500/10 rounded-full blur-3xl"></div>
            <div className="absolute -bottom-10 -right-10 w-40 h-40 bg-blue-500/10 rounded-full blur-3xl"></div>
            
            <div className="w-16 h-16 bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 rounded-full flex items-center justify-center mx-auto mb-6">
              <CheckCircle2 className="w-8 h-8 animate-bounce" />
            </div>
            
            <h3 className="text-xl font-bold text-white mb-2 font-serif">Artikel Tersimpan di Web!</h3>
            <p className="text-sm text-slate-400 mb-6 leading-relaxed">
              Draf naskah Anda telah terdaftar dalam database website kami. Sistem sekarang akan mengalihkan Anda secara otomatis ke WhatsApp Redaksi untuk verifikasi akhir.
            </p>

            <div className="bg-slate-950 p-4 rounded-2xl border border-slate-800 mb-6">
              <span className="text-xs text-slate-500 uppercase tracking-widest block mb-1">Membuka WhatsApp otomatis dalam</span>
              <span className="text-4xl font-extrabold text-teal-400 font-mono">{countdown}s</span>
            </div>

            <div className="flex flex-col gap-2">
              <a 
                href={pendingWaUrl}
                target="_blank"
                rel="noreferrer"
                className="w-full py-3 bg-gradient-to-r from-emerald-500 to-green-600 hover:from-emerald-600 hover:to-green-700 text-white font-semibold rounded-xl text-xs flex items-center justify-center gap-2"
              >
                Submit Artikel Sekarang (Lanjutkan ke WA) <Send className="w-3.5 h-3.5" />
              </a>
              <button 
                onClick={() => {
                  setShowSuccessModal(false);
                  setCurrentPage('dashboard');
                }}
                className="w-full py-3 bg-slate-800 hover:bg-slate-700 text-slate-300 font-semibold rounded-xl text-xs"
              >
                Batal & Tetap di Dashboard Web
              </button>
            </div>
          </div>
        </div>
      )}

      {/* Toast Notification Container */}
      <div className="fixed bottom-5 right-5 z-50 flex flex-col gap-2 max-w-sm">
        {toasts.map(t => (
          <div key={t.id} className={`flex items-center gap-3 p-4 rounded-xl shadow-2xl backdrop-blur-md border animate-bounce ${
            t.type === 'success' ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-400' :
            t.type === 'error' ? 'bg-rose-500/10 border-rose-500/20 text-rose-400' :
            'bg-sky-500/10 border-sky-500/20 text-sky-400'
          }`}>
            {t.type === 'success' ? <CheckCircle2 className="w-5 h-5 flex-shrink-0" /> : <AlertCircle className="w-5 h-5 flex-shrink-0" />}
            <span className="text-sm font-medium">{t.message}</span>
          </div>
        ))}
      </div>

      {/* ==========================================
          PREMIUM GLASSMORPHIC NAVIGATION BAR
         ========================================== */}
      <nav className="sticky top-0 z-40 w-full border-b border-white/5 bg-[#020617]/70 backdrop-blur-lg transition-all">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <div className="flex items-center gap-8">
              {/* Logo / Brand */}
              <div 
                onClick={() => setCurrentPage('landing')} 
                className="flex items-center gap-2 cursor-pointer group"
              >
                <div className="w-10 h-10 rounded-xl bg-gradient-to-tr from-[#2563EB] to-[#14B8A6] p-0.5 shadow-lg shadow-indigo-500/20 group-hover:scale-105 transition-transform">
                  <div className="w-full h-full bg-[#020617] rounded-[10px] flex items-center justify-center">
                    <span className="text-xl font-bold bg-gradient-to-r from-blue-400 to-teal-300 bg-clip-text text-transparent">Ψ</span>
                  </div>
                </div>
                <div>
                  <span className="font-serif text-lg font-bold tracking-tight">Symposium<span className="text-[#14B8A6]">Sadra</span></span>
                  <span className="block text-[9px] uppercase tracking-widest text-slate-400">Media Populer & Esai Bebas</span>
                </div>
              </div>

              {/* Navigation Links */}
              <div className="hidden md:flex items-center gap-6 text-sm font-medium">
                <button 
                  onClick={() => setCurrentPage('home')} 
                  className={`hover:text-[#14B8A6] transition-colors ${currentPage === 'home' ? 'text-[#14B8A6] font-semibold' : 'text-slate-300'}`}
                >
                  Eksplor Artikel
                </button>
                <button 
                  onClick={() => setCurrentPage('about')} 
                  className={`hover:text-[#14B8A6] transition-colors ${currentPage === 'about' ? 'text-[#14B8A6] font-semibold' : 'text-slate-300'}`}
                >
                  Tim Redaksi
                </button>
                <button 
                  onClick={() => setCurrentPage('dashboard')} 
                  className={`hover:text-[#14B8A6] transition-colors ${currentPage === 'dashboard' ? 'text-[#14B8A6] font-semibold' : 'text-slate-300'}`}
                >
                  Dashboard Saya
                </button>
                <button 
                  onClick={() => setCurrentPage('submit')} 
                  className="flex items-center gap-1.5 text-xs font-semibold bg-gradient-to-r from-teal-500 to-blue-500 hover:from-teal-600 hover:to-blue-600 text-white py-1.5 px-3 rounded-lg shadow-lg shadow-teal-500/10 transition-transform hover:scale-105"
                >
                  <PenTool className="w-3.5 h-3.5" /> Submit Artikel Baru
                </button>
              </div>
            </div>

            {/* Right Tools (Theme, User Profile) */}
            <div className="flex items-center gap-4">
              
              {/* Theme Toggle */}
              <button 
                onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
                className="p-2 rounded-xl border border-slate-800 hover:bg-slate-900/50 text-slate-300 hover:text-white transition-colors"
                title="Ganti Tema"
              >
                {theme === 'dark' ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
              </button>

              {/* Profile Icon Menu */}
              <div 
                onClick={() => setCurrentPage('dashboard')}
                className="flex items-center gap-2 cursor-pointer p-1.5 rounded-xl border border-slate-800 hover:bg-slate-950/60 transition-all bg-slate-900/20"
              >
                <img 
                  src={currentUser.avatar} 
                  alt={currentUser.name} 
                  className="w-8 h-8 rounded-lg object-cover ring-2 ring-indigo-500/20"
                />
                <div className="hidden sm:block text-left pr-1">
                  <span className="block text-xs font-semibold leading-3 text-slate-200">{currentUser.name}</span>
                  <span className="text-[9px] text-[#14B8A6] font-mono flex items-center gap-1">
                    <Award className="w-2.5 h-2.5" /> {currentUser.badge}
                  </span>
                </div>
              </div>

            </div>
          </div>
        </div>
      </nav>

      {/* ==========================================
          LANDING PAGE SECTION
         ========================================== */}
      {currentPage === 'landing' && (
        <div className="relative overflow-hidden">
          
          {/* Animated Ambient Background Grid & Radial Glow */}
          <div className="absolute inset-0 z-0 pointer-events-none">
            <div className="absolute top-1/4 left-1/3 w-[600px] h-[600px] bg-blue-600/10 rounded-full blur-[120px] animate-pulse"></div>
            <div className="absolute top-1/2 right-1/4 w-[500px] h-[500px] bg-teal-500/10 rounded-full blur-[150px] animate-pulse delay-700"></div>
            <div className="absolute inset-0 bg-[linear-gradient(to_right,#0f172a_1px,transparent_1px),linear-gradient(to_bottom,#0f172a_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)] opacity-35"></div>
          </div>

          <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-24 text-center">
            
            {/* Tagline Badge */}
            <div className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-500/10 to-teal-500/10 border border-indigo-500/30 rounded-full px-4 py-1.5 mb-8 hover:scale-105 transition-transform duration-300">
              <Sparkles className="w-4 h-4 text-teal-400 animate-spin" />
              <span className="text-xs font-semibold tracking-wider bg-gradient-to-r from-blue-300 to-teal-300 bg-clip-text text-transparent">
                Portal Opini, Berita, Esai & Kumpulan Tulisan Populer
              </span>
            </div>

            {/* Main Hero Headings */}
            <h1 className="font-serif text-5xl md:text-7xl lg:text-8xl font-black tracking-tight leading-none mb-6">
              Symposium<span className="bg-gradient-to-r from-blue-400 via-indigo-400 to-teal-400 bg-clip-text text-transparent">Sadra</span>
            </h1>
            <p className="max-w-3xl mx-auto text-lg md:text-xl text-slate-300 leading-relaxed font-light mb-12">
              Ruang Menulis Santai, Berbagi Berita Menarik, dan Mempublikasikan Gagasan Segar. Tulis draf naskah Anda secara digital dan serahkan langsung ke redaksi kami!
            </p>

            {/* CTA Buttons */}
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16">
              <button 
                onClick={() => setCurrentPage('home')}
                className="w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-blue-600 via-indigo-600 to-teal-500 hover:from-blue-700 hover:to-teal-600 text-white font-semibold rounded-2xl shadow-xl shadow-indigo-600/20 flex items-center justify-center gap-2 group transform hover:-translate-y-0.5 transition-all"
              >
                Mulai Membaca <ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
              </button>
              <button 
                onClick={() => setCurrentPage('submit')}
                className="w-full sm:w-auto px-8 py-4 bg-slate-900 hover:bg-slate-850 text-slate-200 border border-slate-800 hover:border-slate-700 font-semibold rounded-2xl flex items-center justify-center gap-2 transition-all"
              >
                Submit Artikel Baru <PenTool className="w-4 h-4 text-teal-400" />
              </button>
            </div>

            {/* Statistika Counter Grid */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-5xl mx-auto p-8 rounded-3xl bg-slate-950/40 border border-slate-900/60 backdrop-blur-md">
              <div className="text-center p-4 border-r border-slate-900 last:border-0">
                <span className="block font-mono text-3xl md:text-4xl font-extrabold text-white">4,200+</span>
                <span className="text-xs text-slate-400 uppercase tracking-widest mt-1 block">Esai & Opini</span>
              </div>
              <div className="text-center p-4 border-r border-slate-900 last:border-0">
                <span className="block font-mono text-3xl md:text-4xl font-extrabold text-white">1,500+</span>
                <span className="text-xs text-slate-400 uppercase tracking-widest mt-1 block">Kontributor</span>
              </div>
              <div className="text-center p-4 border-r border-slate-900 last:border-0">
                <span className="block font-mono text-3xl md:text-4xl font-extrabold text-white">250K+</span>
                <span className="text-xs text-slate-400 uppercase tracking-widest mt-1 block">Pembaca Bulanan</span>
              </div>
              <div className="text-center p-4">
                <span className="block font-mono text-3xl md:text-4xl font-extrabold text-white">100%</span>
                <span className="text-xs text-slate-400 uppercase tracking-widest mt-1 block">Mudah & Terbuka</span>
              </div>
            </div>

          </div>

          {/* Featured / Highlight Section on Landing */}
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 border-t border-slate-900">
            <div className="flex flex-col md:flex-row items-start justify-between mb-10 gap-4">
              <div>
                <h2 className="text-2xl md:text-3xl font-bold font-serif">Rekomendasi Esai Hari Ini</h2>
                <p className="text-slate-400 text-sm mt-1">Gagasan dan tren terpopuler yang wajib Anda ikuti</p>
              </div>
              <button 
                onClick={() => setCurrentPage('home')}
                className="text-teal-400 font-semibold text-sm hover:underline flex items-center gap-1"
              >
                Lihat Semua Postingan <ChevronRight className="w-4 h-4" />
              </button>
            </div>

            {/* Grid Articles Card */}
            <div className="grid md:grid-cols-3 gap-8">
              {articles.slice(0, 3).map((art) => (
                <div 
                  key={art.id}
                  className="group relative bg-slate-900/30 border border-slate-900 rounded-3xl p-6 hover:bg-slate-900/50 hover:border-slate-800 transition-all duration-300 hover:shadow-2xl flex flex-col justify-between"
                >
                  <div>
                    <div className="flex items-center justify-between mb-4">
                      <span className="text-xs font-semibold px-3 py-1 rounded-full bg-blue-500/10 text-blue-400 border border-blue-500/10">{art.category}</span>
                      <span className="text-xs text-slate-400 font-mono">{art.readingTime} Menit Baca</span>
                    </div>
                    <h3 
                      onClick={() => {
                        setSelectedArticle(art);
                        setCurrentPage('article-detail');
                      }}
                      className="font-serif text-xl font-bold mb-3 hover:text-teal-400 cursor-pointer transition-colors leading-snug"
                    >
                      {art.title}
                    </h3>
                    <p className="text-slate-400 text-xs line-clamp-3 mb-6 leading-relaxed">{art.abstract}</p>
                  </div>

                  <div className="flex items-center justify-between pt-4 border-t border-slate-900/80">
                    <div className="flex items-center gap-2">
                      <img src={art.author.avatar} alt={art.author.name} className="w-8 h-8 rounded-lg object-cover" />
                      <div>
                        <span className="block text-xs font-semibold text-slate-200">{art.author.name}</span>
                        <span className="text-[10px] text-slate-500">{art.author.institution}</span>
                      </div>
                    </div>
                    <div className="flex items-center gap-2 text-slate-400">
                      <button onClick={() => toggleLike(art.id)} className={`hover:text-rose-400 p-1.5 rounded-lg ${likedIds.includes(art.id) ? 'text-rose-500' : ''}`}>
                        <Heart className="w-4 h-4" />
                      </button>
                      <button onClick={() => toggleBookmark(art.id)} className={`hover:text-[#14B8A6] p-1.5 rounded-lg ${bookmarkedIds.includes(art.id) ? 'text-[#14B8A6]' : ''}`}>
                        <Bookmark className="w-4 h-4" />
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Footer */}
          <footer className="bg-slate-950 border-t border-slate-900 py-12 text-slate-400 text-sm">
            <div className="max-w-7xl mx-auto px-4 grid grid-cols-1 md:grid-cols-4 gap-8">
              <div>
                <span className="font-serif text-lg font-bold text-white tracking-tight">Symposium<span className="text-teal-400">Sadra</span></span>
                <p className="mt-2 text-xs text-slate-500">Mendorong kebebasan berekspresi lewat tulisan, esai, opini, dan blogging yang berkualitas dan merdeka.</p>
              </div>
              <div>
                <h4 className="font-semibold text-white mb-3 text-xs uppercase tracking-wider">Topik Populer</h4>
                <ul className="space-y-1 text-xs">
                  <li><a href="#" className="hover:text-white">Filsafat Populer</a></li>
                  <li><a href="#" className="hover:text-white">Tren Gaya Hidup</a></li>
                  <li><a href="#" className="hover:text-white">Opini & Berita</a></li>
                  <li><a href="#" className="hover:text-white">Kesehatan Mental</a></li>
                </ul>
              </div>
              <div>
                <h4 className="font-semibold text-white mb-3 text-xs uppercase tracking-wider">Submit Esai</h4>
                <p className="text-xs text-slate-500 mb-2">Punya opini segar? Tulis draf Anda dan kirim langsung ke editor kami melalui WhatsApp!</p>
                <button 
                  onClick={() => setCurrentPage('submit')}
                  className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-teal-500 hover:bg-teal-600 text-white rounded text-xs font-semibold"
                >
                  Mulai Submit Artikel
                </button>
              </div>
              <div>
                <h4 className="font-semibold text-white mb-3 text-xs uppercase tracking-wider">Kontak & Admin</h4>
                <p className="text-xs text-slate-500 mb-2">WhatsApp: +62 858-6388-9768</p>
                <p className="text-xs text-slate-500">Email: redaksi@symposiumsadra.com</p>
              </div>
            </div>
            <div className="max-w-7xl mx-auto px-4 text-center mt-12 pt-6 border-t border-slate-900 text-xs text-slate-600">
              © 2026 SymposiumSadra. Portal Blogging, Berita, & Esai Bebas Terbuka.
            </div>
          </footer>

        </div>
      )}

      {/* ==========================================
          HOME / DISCOVERY (EXPLORE POSTS)
         ========================================== */}
      {currentPage === 'home' && (
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
          
          <div className="mb-10 text-center">
            <h1 className="text-3xl font-bold font-serif mb-3">Eksplorasi Opini & Tren Menarik</h1>
            <p className="text-slate-400 text-sm max-w-xl mx-auto mb-6">Kumpulan artikel, esai bebas, kesehatan mental, hingga tips cerdas dari kontributor berpengalaman.</p>
            
            <div className="relative max-w-2xl mx-auto">
              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-slate-400 w-5 h-5" />
              <input 
                type="text"
                placeholder="Cari judul, topik, penulis, atau kata kunci tulisan..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full bg-slate-900/60 border border-slate-800 rounded-2xl pl-12 pr-4 py-4 text-slate-100 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all"
              />
            </div>
          </div>

          <div className="flex flex-col lg:flex-row gap-8">
            
            {/* Sidebar Kategori */}
            <div className="w-full lg:w-1/4 flex-shrink-0">
              <div className="sticky top-24 bg-slate-950/60 border border-slate-900 rounded-3xl p-6 backdrop-blur-md">
                <div className="flex items-center gap-2 mb-4 font-semibold text-slate-200">
                  <Filter className="w-4 h-4 text-teal-400" />
                  <span>Kategori Artikel</span>
                </div>
                
                <div className="flex flex-wrap lg:flex-col gap-1">
                  <button 
                    onClick={() => setSelectedCategory('All')}
                    className={`w-full text-left px-3 py-2 rounded-xl text-xs transition-colors ${selectedCategory === 'All' ? 'bg-[#14B8A6] text-white font-semibold' : 'text-slate-400 hover:text-white hover:bg-slate-900'}`}
                  >
                    Semua Kategori
                  </button>
                  {CATEGORIES.map((cat) => (
                    <button 
                      key={cat}
                      onClick={() => setSelectedCategory(cat)}
                      className={`w-full text-left px-3 py-2 rounded-xl text-xs transition-colors ${selectedCategory === cat ? 'bg-[#14B8A6]/20 text-teal-300 border border-teal-500/30 font-semibold' : 'text-slate-400 hover:text-white hover:bg-slate-900'}`}
                    >
                      {cat}
                    </button>
                  ))}
                </div>
              </div>
            </div>

            {/* Main Articles List */}
            <div className="w-full lg:w-3/4">
              <div className="flex items-center justify-between mb-6">
                <span className="text-xs text-slate-400">Menampilkan {filteredArticles.length} esai populer</span>
              </div>

              {filteredArticles.length === 0 ? (
                <div className="text-center py-20 bg-slate-900/20 border border-slate-900 rounded-3xl">
                  <FileText className="w-12 h-12 text-slate-600 mx-auto mb-4" />
                  <p className="text-slate-400 font-medium">Tulisan tidak ditemukan</p>
                  <p className="text-slate-600 text-xs">Coba cari kata kunci lain</p>
                </div>
              ) : (
                <div className="space-y-6">
                  {filteredArticles.map((art) => (
                    <div 
                      key={art.id}
                      className="group bg-slate-900/20 hover:bg-slate-900/40 border border-slate-900/80 hover:border-slate-800 rounded-3xl p-6 transition-all duration-300 shadow-lg flex flex-col md:flex-row gap-6 justify-between items-start"
                    >
                      <div className="flex-1">
                        <div className="flex flex-wrap items-center gap-2 mb-3">
                          <span className="text-xs font-semibold px-2.5 py-0.5 rounded-full bg-teal-500/10 text-teal-300 border border-teal-500/20">{art.category}</span>
                          <span className="text-xs text-slate-500">• {art.readingTime} Menit Baca</span>
                        </div>
                        <h2 
                          onClick={() => {
                            setSelectedArticle(art);
                            setCurrentPage('article-detail');
                          }}
                          className="font-serif text-2xl font-bold mb-3 hover:text-teal-400 cursor-pointer transition-colors leading-snug text-white"
                        >
                          {art.title}
                        </h2>
                        <p className="text-slate-400 text-sm line-clamp-2 mb-4 leading-relaxed">{art.abstract}</p>

                        <div className="flex items-center gap-4 text-xs text-slate-400">
                          <span className="flex items-center gap-1"><Eye className="w-4 h-4 text-slate-500" /> {art.views} views</span>
                          <span className="flex items-center gap-1"><Heart className="w-4 h-4 text-rose-500" /> {art.likes} likes</span>
                          <span className="flex items-center gap-1"><MessageCircle className="w-4 h-4 text-blue-400" /> {art.comments.length} Diskusi</span>
                        </div>
                      </div>

                      <div className="w-full md:w-48 flex-shrink-0 bg-slate-950/60 rounded-2xl p-4 border border-slate-900 text-center flex flex-col items-center">
                        <img src={art.author.avatar} alt={art.author.name} className="w-12 h-12 rounded-xl object-cover mb-2" />
                        <span className="block text-xs font-semibold text-slate-200 line-clamp-1">{art.author.name}</span>
                        <span className="text-[10px] text-slate-500">{art.author.institution}</span>
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>

          </div>
        </div>
      )}

      {/* ==========================================
          ARTICLE DETAIL VIEW (READING MODE)
         ========================================== */}
      {currentPage === 'article-detail' && selectedArticle && (
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
          
          <button 
            onClick={() => setCurrentPage('home')}
            className="flex items-center gap-1 text-xs text-slate-400 hover:text-white mb-6 bg-slate-900/30 px-3 py-1.5 rounded-lg border border-slate-900"
          >
            ← Kembali ke Daftar Postingan
          </button>

          <div className="mb-8">
            <span className="text-xs font-semibold uppercase tracking-wider bg-[#14B8A6]/10 text-[#14B8A6] px-3 py-1 rounded-full border border-teal-500/10">{selectedArticle.category}</span>
            <h1 className="font-serif text-3xl md:text-5xl font-black tracking-tight leading-tight mt-4 mb-4 text-white">
              {selectedArticle.title}
            </h1>
            
            <div className="flex flex-wrap items-center justify-between gap-4 p-4 rounded-2xl bg-slate-950/60 border border-slate-900">
              <div className="flex items-center gap-3">
                <img src={selectedArticle.author.avatar} alt={selectedArticle.author.name} className="w-10 h-10 rounded-xl object-cover" />
                <div>
                  <span className="block text-sm font-semibold text-white">{selectedArticle.author.name}</span>
                  <span className="block text-xs text-slate-400">{selectedArticle.author.institution}</span>
                </div>
              </div>
              <div className="flex flex-wrap items-center gap-3 text-xs text-slate-400">
                <span>Diposting: <strong>{selectedArticle.publishedAt}</strong></span>
                <span>•</span>
                <span>Durasi Baca: <strong>{selectedArticle.readingTime} Menit</strong></span>
              </div>
            </div>
          </div>

          <div className="bg-slate-950 border-l-4 border-[#14B8A6] p-6 rounded-r-3xl mb-8">
            <h3 className="text-xs font-extrabold uppercase tracking-widest text-teal-400 mb-2 font-mono flex items-center gap-1.5">
              <FileText className="w-4 h-4" /> Intisari & Ringkasan Artikel
            </h3>
            <p className="text-slate-300 text-sm leading-relaxed italic">{selectedArticle.abstract}</p>
          </div>

          <div className="prose prose-invert max-w-none text-slate-200 text-lg leading-relaxed space-y-6 mb-12">
            {selectedArticle.content.split('\n\n').map((paragraph, index) => (
              <p key={index}>{paragraph}</p>
            ))}
          </div>

          {/* Social Share Box */}
          <div className="p-6 rounded-3xl bg-slate-950 border border-slate-900 mb-12 text-center">
            <h3 className="text-sm font-bold text-white mb-2">Bagikan Tulisan Ini</h3>
            <p className="text-xs text-slate-400 mb-4">Inspirasikan orang lain dengan membagikan esai populer ini ke lingkar pertemanan Anda.</p>
            <div className="flex justify-center gap-4">
              <button 
                onClick={() => {
                  navigator.clipboard.writeText(window.location.href);
                  showToast("Tautan tersalin ke clipboard!", "success");
                }}
                className="px-4 py-2 bg-slate-900 hover:bg-slate-800 text-slate-200 rounded-xl text-xs font-semibold flex items-center gap-1.5 border border-slate-800"
              >
                <Share2 className="w-3.5 h-3.5" /> Salin Tautan
              </button>
              <a 
                href={`https://api.whatsapp.com/send?text=Saya%20merekomendasikan%20tulisan%20menarik%20ini:%20${encodeURIComponent(selectedArticle.title)}`}
                target="_blank"
                rel="noreferrer"
                className="px-4 py-2 bg-[#22C55E] hover:bg-emerald-600 text-white rounded-xl text-xs font-semibold flex items-center gap-1.5"
              >
                <MessageSquare className="w-3.5 h-3.5" /> Bagikan ke WhatsApp
              </a>
            </div>
          </div>

          {/* Comments */}
          <div className="border-t border-slate-900 pt-8">
            <div className="flex items-center gap-2 mb-6">
              <MessageSquare className="w-5 h-5 text-[#14B8A6]" />
              <h2 className="text-xl font-bold font-serif text-white">Kolom Diskusi ({selectedArticle.comments.length})</h2>
            </div>

            <form onSubmit={handleAddComment} className="mb-8">
              <textarea
                placeholder="Bagikan tanggapan santai atau pendapat Anda mengenai tulisan ini..."
                rows="3"
                value={newCommentText}
                onChange={(e) => setNewCommentText(e.target.value)}
                className="w-full bg-slate-900 border border-slate-800 rounded-xl p-4 text-sm text-slate-100 focus:outline-none focus:ring-1 focus:ring-teal-500 mb-2"
              ></textarea>
              <button 
                type="submit"
                className="px-5 py-2 bg-gradient-to-r from-blue-600 to-teal-500 hover:from-blue-700 hover:to-teal-600 text-white rounded-xl text-xs font-semibold flex items-center gap-2 transition-transform active:scale-95"
              >
                Kirim Komentar <Send className="w-3.5 h-3.5" />
              </button>
            </form>

            {selectedArticle.comments.length === 0 ? (
              <p className="text-xs text-slate-500 italic">Belum ada komentar untuk tulisan ini. Jadilah yang pertama berkomentar!</p>
            ) : (
              <div className="space-y-4">
                {selectedArticle.comments.map((comm) => (
                  <div key={comm.id} className="bg-slate-900/40 border border-slate-900 p-4 rounded-2xl flex items-start gap-3">
                    <img src={comm.avatar} alt={comm.user} className="w-8 h-8 rounded-lg object-cover flex-shrink-0" />
                    <div>
                      <div className="flex items-center gap-2 mb-1">
                        <span className="text-xs font-bold text-slate-200">{comm.user}</span>
                        <span className="text-[10px] text-slate-500">{comm.date}</span>
                      </div>
                      <p className="text-xs text-slate-300 leading-relaxed">{comm.text}</p>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>

        </div>
      )}

      {/* ==========================================
          SUBMIT NASKAH / WRITE ARTICLE (EDITOR)
         ========================================== */}
      {currentPage === 'submit' && (
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
          
          <div className="mb-8">
            <h1 className="text-3xl font-bold font-serif text-white">Tulis & Submit Artikel Populer</h1>
            <p className="text-slate-400 text-sm mt-1">
              Ketik tulisan terbaik Anda di bawah, lakukan validasi syarat penulisan, lalu klik tombol submit untuk menyimpan naskah di web dan mengirimkan draf ke WhatsApp redaksi.
            </p>
          </div>

          {/* Guidelines and Terms Section (Sourced from Geotimes & Terminal Mojok) */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
            
            <div className="lg:col-span-2 bg-gradient-to-r from-blue-950/40 to-slate-950 border border-slate-800 p-6 rounded-3xl">
              <div className="flex items-center gap-2 mb-4 text-[#14B8A6]">
                <FileCheck className="w-5 h-5" />
                <h3 className="font-bold text-sm text-white font-serif">Panduan & Syarat Ketentuan Penulisan</h3>
              </div>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs text-slate-300">
                <div className="space-y-2">
                  <p className="flex items-start gap-2">
                    <span className="w-1.5 h-1.5 rounded-full bg-teal-400 mt-1.5 flex-shrink-0"></span>
                    <span><strong>Panjang Tulisan:</strong> Esai populer berkisar antara 500 – 1000 kata untuk menjamin kedalaman sudut pandang yang renyah dan mudah dibaca.</span>
                  </p>
                  <p className="flex items-start gap-2">
                    <span className="w-1.5 h-1.5 rounded-full bg-teal-400 mt-1.5 flex-shrink-0"></span>
                    <span><strong>Gaya & Karakter:</strong> Bersifat populer, komunikatif, segar, argumentatif, dan memicu dialektika berpikir yang santun serta terbebas dari muatan SARA.</span>
                  </p>
                  <p className="flex items-start gap-2">
                    <span className="w-1.5 h-1.5 rounded-full bg-teal-400 mt-1.5 flex-shrink-0"></span>
                    <span><strong>Orisinalitas:</strong> Naskah harus asli karya pribadi, belum pernah diterbitkan di media digital manapun, dan bukan hasil plagiasi (Toleransi plagiasi maks. 10%).</span>
                  </p>
                </div>
                
                <div className="space-y-2">
                  <p className="flex items-start gap-2">
                    <span className="w-1.5 h-1.5 rounded-full bg-teal-400 mt-1.5 flex-shrink-0"></span>
                    <span><strong>Biodata Penulis:</strong> Wajib menyertakan atribusi atau biografi singkat (1-2 kalimat) di baris terbawah draf tulisan Anda.</span>
                  </p>
                  <p className="flex items-start gap-2">
                    <span className="w-1.5 h-1.5 rounded-full bg-teal-400 mt-1.5 flex-shrink-0"></span>
                    <span><strong>Hak Penyuntingan:</strong> Redaksi SymposiumSadra berhak menyunting judul, tata bahasa, dan ilustrasi tanpa mengubah esensi dan maksud utama tulisan.</span>
                  </p>
                  <p className="flex items-start gap-2">
                    <span className="w-1.5 h-1.5 rounded-full bg-[#14B8A6] mt-1.5 flex-shrink-0"></span>
                    <span className="text-teal-300"><strong>Alur Pengiriman:</strong> Setelah Anda menekan tombol submit, sistem web akan mendaftarkan naskah ke database lokal, kemudian mengarahkan Anda ke WhatsApp redaksi.</span>
                  </p>
                </div>
              </div>
            </div>

            <div className="bg-slate-950 border border-slate-900 p-6 rounded-3xl flex flex-col justify-between">
              <div>
                <div className="flex items-center gap-1.5 text-amber-400 mb-2">
                  <ShieldAlert className="w-4 h-4" />
                  <span className="text-xs font-bold uppercase tracking-wider font-mono">Pemberitahuan</span>
                </div>
                <p className="text-xs text-slate-400 leading-relaxed">
                  Kami mengapresiasi setiap esai warga yang masuk. Draf naskah yang lolos kurasi redaksi akan dipublikasikan secara resmi di website dan mendapat atribusi penulis secara luas.
                </p>
              </div>
              <div className="pt-4 border-t border-slate-900">
                <span className="block text-[10px] text-slate-500 uppercase">Kontak Redaksi Resmi</span>
                <span className="text-xs font-mono text-emerald-400">+62 858-6388-9768</span>
              </div>
            </div>

          </div>

          {/* Quick Submit Banner */}
          <div className="bg-slate-950 border border-slate-900 p-6 rounded-3xl mb-8 flex flex-col md:flex-row items-center justify-between gap-6">
            <div className="flex items-start gap-4">
              <div className="w-12 h-12 bg-teal-500/10 rounded-2xl flex items-center justify-center border border-teal-500/20 text-[#14B8A6] flex-shrink-0">
                <Info className="w-6 h-6" />
              </div>
              <div>
                <h3 className="text-sm font-bold text-white">Sudah Punya File Draf Siap Pakai?</h3>
                <p className="text-xs text-slate-400 leading-relaxed max-w-xl mt-1">
                  Jika draf Anda sudah tersusun di dalam dokumen eksternal, Anda dapat langsung melakukan submit naskah instan melalui tautan admin WhatsApp di bawah ini.
                </p>
              </div>
            </div>
            <a 
              href="https://api.whatsapp.com/send?phone=6285863889768&text=Halo%20Admin%20SymposiumSadra%20saya%20ingin%20mengirimkan%20file%20draf%20tulisan%20saya."
              target="_blank"
              rel="noreferrer"
              className="px-6 py-3 bg-[#14B8A6] hover:bg-teal-600 text-white rounded-2xl text-xs font-bold flex items-center justify-center gap-2 whitespace-nowrap"
            >
              Submit Naskah Instan <Send className="w-3.5 h-3.5" />
            </a>
          </div>

          {/* Form Editor */}
          <form onSubmit={handlePublishSubmit} className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            
            <div className="lg:col-span-2 space-y-6">
              
              {/* Title Input */}
              <div>
                <label className="block text-xs font-bold text-slate-400 uppercase tracking-widest mb-2">Judul Artikel / Opini</label>
                <input 
                  type="text"
                  placeholder="Bikin judul yang menarik perhatian, santai, dan komunikatif..."
                  value={editorTitle}
                  onChange={(e) => setEditorTitle(e.target.value)}
                  className="w-full bg-slate-900 border border-slate-800 rounded-2xl p-4 text-lg text-slate-100 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent transition-all"
                  required
                />
              </div>

              {/* Editor Workspace Content */}
              <div>
                <div className="flex items-center justify-between mb-2">
                  <label className="block text-xs font-bold text-slate-400 uppercase tracking-widest">Draf Tulisan Anda</label>
                  <span className="text-xs text-slate-500 font-mono">{editorContent.split(/\s+/).filter(Boolean).length} kata</span>
                </div>
                <textarea
                  rows="12"
                  placeholder="Ketik draf artikel atau opini Anda di sini. Jangan lupa sertakan bio singkat Anda di akhir paragraf..."
                  value={editorContent}
                  onChange={(e) => setEditorContent(e.target.value)}
                  className="w-full bg-slate-900 border border-slate-800 rounded-2xl p-4 text-slate-100 font-sans focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-transparent leading-relaxed text-sm"
                  required
                ></textarea>
              </div>

            </div>

            {/* Right Column: Metadata & AI Assistant */}
            <div className="space-y-6">
              
              {/* AI Tool Assist Widget */}
              <div className="bg-gradient-to-br from-indigo-950/40 to-slate-950 border border-indigo-900/50 rounded-3xl p-6">
                <h3 className="text-xs font-extrabold uppercase tracking-widest text-indigo-400 mb-3 flex items-center gap-1.5 font-mono">
                  <Sparkles className="w-4 h-4" /> AI Blog Assistant (Gemini)
                </h3>
                <p className="text-xs text-slate-400 mb-4 leading-relaxed">
                  Gunakan asisten kecerdasan buatan untuk merapikan intro pembuka tulisan Anda agar lebih memikat audiens umum.
                </p>
                
                <div className="space-y-2">
                  <button
                    type="button"
                    onClick={() => triggerAiSummary(editorContent)}
                    disabled={aiLoading}
                    className="w-full py-2.5 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-50 text-white rounded-xl text-xs font-semibold flex items-center justify-center gap-2 transition-all"
                  >
                    {aiLoading ? "Sedang Mengolah..." : "Buat Intro Unik Otomatis"}
                  </button>
                  <button
                    type="button"
                    onClick={() => triggerAiTags(editorTitle, editorContent)}
                    disabled={aiLoading}
                    className="w-full py-2.5 bg-slate-900 hover:bg-slate-850 disabled:opacity-50 text-slate-300 border border-slate-800 rounded-xl text-xs font-semibold flex items-center justify-center gap-2 transition-all"
                  >
                    Cari Tag Populer
                  </button>
                </div>
              </div>

              {/* Abstract Preview / Teaser */}
              <div>
                <label className="block text-xs font-bold text-slate-400 uppercase tracking-widest mb-2">Ringkasan Pendek (Teaser)</label>
                <textarea
                  rows="4"
                  placeholder="Tulis 2 kalimat penjelas yang memicu rasa penasaran pembaca..."
                  value={editorAbstract}
                  onChange={(e) => setEditorAbstract(e.target.value)}
                  className="w-full bg-slate-900 border border-slate-800 rounded-2xl p-3 text-xs text-slate-200 focus:outline-none focus:ring-1 focus:ring-teal-500 leading-relaxed"
                  required
                ></textarea>
              </div>

              {/* Categories Selector */}
              <div>
                <label className="block text-xs font-bold text-slate-400 uppercase tracking-widest mb-2">Pilih Kategori</label>
                <select
                  value={editorCategory}
                  onChange={(e) => setEditorCategory(e.target.value)}
                  className="w-full bg-slate-900 border border-slate-800 rounded-xl p-2.5 text-xs text-slate-200 focus:outline-none focus:ring-1 focus:ring-teal-500"
                >
                  {CATEGORIES.map((cat) => (
                    <option key={cat} value={cat}>{cat}</option>
                  ))}
                </select>
              </div>

              {/* Tags Input */}
              <div>
                <label className="block text-xs font-bold text-slate-400 uppercase tracking-widest mb-2">Tag Populer (Pisahkan dengan koma)</label>
                <input 
                  type="text"
                  placeholder="Contoh: Stoikisme, Kopi, Motivasi"
                  value={editorTags}
                  onChange={(e) => setEditorTags(e.target.value)}
                  className="w-full bg-slate-900 border border-slate-800 rounded-xl p-2.5 text-xs text-slate-200 focus:outline-none focus:ring-1 focus:ring-teal-500"
                />
              </div>

              {/* Submit Button to Web */}
              <button
                type="submit"
                disabled={isSubmitting}
                className="w-full py-4 bg-gradient-to-r from-emerald-500 to-green-600 hover:from-emerald-600 hover:to-green-700 disabled:opacity-50 text-white font-bold rounded-2xl shadow-xl shadow-emerald-500/10 flex items-center justify-center gap-2"
              >
                {isSubmitting ? (
                  <span className="flex items-center gap-2">
                    <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></span>
                    Menyimpan ke Web...
                  </span>
                ) : (
                  <>Submit Artikel <Send className="w-4 h-4" /></>
                )}
              </button>

            </div>

          </form>

        </div>
      )}

      {/* ==========================================
          DASHBOARD PANEL
         ========================================== */}
      {currentPage === 'dashboard' && (
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
          
          <div className="mb-8 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
            <div>
              <h1 className="text-3xl font-bold font-serif text-white">Dashboard Kontributor</h1>
              <p className="text-slate-400 text-sm mt-1">Kelola portofolio tulisan populer Anda dan periksa performa engagement esai Anda.</p>
            </div>
            <button 
              onClick={() => setCurrentPage('submit')}
              className="px-5 py-2.5 bg-gradient-to-r from-[#14B8A6] to-blue-500 hover:opacity-90 text-white rounded-xl text-xs font-bold"
            >
              + Submit Artikel Baru
            </button>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
            
            {/* User Statistics Left Sidebar */}
            <div className="lg:col-span-1 space-y-6">
              
              <div className="bg-slate-950 border border-slate-900 rounded-3xl p-6 text-center">
                <img src={currentUser.avatar} alt={currentUser.name} className="w-20 h-20 rounded-2xl object-cover mx-auto mb-4 ring-4 ring-indigo-500/20" />
                <h3 className="font-bold text-lg text-white">{currentUser.name}</h3>
                <span className="text-xs text-slate-400 block mb-3">{currentUser.institution}</span>
                
                <span className="inline-flex items-center gap-1.5 bg-indigo-500/10 border border-indigo-500/20 text-indigo-400 text-xs px-3 py-1 rounded-full font-mono">
                  <Award className="w-3.5 h-3.5" /> {currentUser.badge}
                </span>

                <div className="grid grid-cols-2 gap-2 mt-6 pt-6 border-t border-slate-900">
                  <div className="text-center p-2 bg-slate-900 rounded-xl">
                    <span className="block text-lg font-bold text-white font-mono">{currentUser.points}</span>
                    <span className="text-[9px] text-slate-500 uppercase tracking-widest">Poin Aktivitas</span>
                  </div>
                  <div className="text-center p-2 bg-slate-900 rounded-xl">
                    <span className="block text-lg font-bold text-white font-mono">
                      {articles.filter(a => a.author.name === currentUser.name).length}
                    </span>
                    <span className="text-[9px] text-slate-500 uppercase tracking-widest">Karya</span>
                  </div>
                </div>
              </div>

              {/* Bio & Details */}
              <div className="bg-slate-950 border border-slate-900 rounded-3xl p-6">
                <h4 className="text-xs font-bold uppercase tracking-widest text-slate-400 mb-3">Pesan Dari Redaksi</h4>
                <p className="text-xs text-slate-400 leading-relaxed mb-4">
                  Setiap tulisan populer yang Anda ajukan melalui submit web akan divalidasi oleh admin dalam waktu maksimal 1x24 jam untuk diterbitkan secara publik di platform ini.
                </p>
                <div className="pt-4 border-t border-slate-900 text-[11px] text-slate-400">
                  <div className="flex justify-between font-mono">
                    <span>Admin WA:</span>
                    <a href="https://wa.me/6285863889768" className="text-emerald-400 hover:underline">+62 858-6388-9768</a>
                  </div>
                </div>
              </div>

            </div>

            {/* Middle/Right Area */}
            <div className="lg:col-span-3 space-y-8">
              
              {/* Analytics Summary */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div className="bg-gradient-to-br from-slate-900 to-slate-950 p-6 rounded-3xl border border-slate-900">
                  <span className="text-xs text-slate-400 block mb-1">Total Pembaca Esai Anda</span>
                  <span className="text-3xl font-bold font-mono text-white">12,410</span>
                  <span className="text-xs text-emerald-400 block mt-1">↑ 18% minggu ini</span>
                </div>
                <div className="bg-gradient-to-br from-slate-900 to-slate-950 p-6 rounded-3xl border border-slate-900">
                  <span className="text-xs text-slate-400 block mb-1">Jumlah Likes Terkumpul</span>
                  <span className="text-3xl font-bold font-mono text-rose-400">2,109</span>
                  <span className="text-xs text-slate-500 block mt-1">Dari semua kontributor</span>
                </div>
                <div className="bg-gradient-to-br from-slate-900 to-slate-950 p-6 rounded-3xl border border-slate-900">
                  <span className="text-xs text-slate-400 block mb-1">Status Keaktifan</span>
                  <span className="text-3xl font-bold font-mono text-[#14B8A6]">Aktif</span>
                  <span className="text-xs text-slate-500 block mt-1">Kontributor Minggu Ini</span>
                </div>
              </div>

              {/* Section: My Submissions */}
              <div>
                <h3 className="text-lg font-bold font-serif text-white mb-4">Postingan Saya & Status Pengiriman</h3>
                
                <div className="space-y-4">
                  {articles.filter(a => a.author.name === currentUser.name).length === 0 ? (
                    <div className="text-center py-10 bg-slate-900/20 border border-slate-900 rounded-3xl">
                      <p className="text-slate-400 text-sm mb-3">Anda belum menulis esai populer di sini.</p>
                      <button onClick={() => setCurrentPage('submit')} className="px-4 py-2 bg-teal-600 hover:bg-teal-700 text-white rounded-xl text-xs font-semibold">Mulai Menulis</button>
                    </div>
                  ) : (
                    articles.filter(a => a.author.name === currentUser.name).map((art) => (
                      <div key={art.id} className="bg-slate-950/60 border border-slate-900 rounded-2xl p-5 flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
                        <div>
                          <div className="flex items-center gap-2 mb-2">
                            <span className="text-xs font-semibold px-2.5 py-0.5 rounded-full bg-blue-500/10 text-blue-300 border border-blue-500/20">{art.category}</span>
                            <span className="text-[10px] text-slate-500 font-mono">Draf ID: {art.id}</span>
                          </div>
                          <h4 className="font-bold text-white text-base">{art.title}</h4>
                          <span className="text-xs text-slate-500 block mt-1">Dibuat: {art.publishedAt}</span>
                        </div>

                        <div className="flex items-center gap-4">
                          <span className={`text-xs px-3 py-1 rounded-full font-semibold border ${
                            art.status === 'Published' ? 'bg-[#22C55E]/10 border-emerald-500/20 text-[#22C55E]' : 'bg-amber-500/10 border-amber-500/20 text-amber-400'
                          }`}>
                            {art.status}
                          </span>
                          <button 
                            onClick={() => {
                              setSelectedArticle(art);
                              setCurrentPage('article-detail');
                            }}
                            className="px-3 py-1.5 bg-slate-900 border border-slate-800 hover:border-slate-700 text-xs text-slate-300 hover:text-white rounded-xl"
                          >
                            Buka Postingan
                          </button>
                        </div>
                      </div>
                    ))
                  )}
                </div>
              </div>

            </div>

          </div>

        </div>
      )}

      {/* ==========================================
          EDITORIAL BOARD & ABOUT VIEW
         ========================================== */}
      {currentPage === 'about' && (
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <div className="text-center mb-16">
            <h1 className="text-4xl font-bold font-serif mb-4">Tim Redaksi & Admin</h1>
            <p className="text-slate-400 text-sm max-w-xl mx-auto">Kami berfokus untuk menyajikan opini santai, berita hangat, tulisan penuh makna, dan esai terbaik dari komunitas sadra.</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-3xl mx-auto">
            <div className="bg-slate-950 border border-slate-900 p-6 rounded-3xl text-center">
              <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=150" alt="Editor" className="w-24 h-24 rounded-full object-cover mx-auto mb-4 ring-4 ring-indigo-500/20" />
              <h3 className="font-bold text-lg text-white">Amrina Rosyada</h3>
              <span className="text-xs text-teal-400 font-mono block mb-2">Pimpinan Redaksi</span>
              <p className="text-xs text-slate-400 leading-relaxed">Penyaring draf tulisan warga dan penyusun tren berita harian.</p>
            </div>
            <div className="bg-slate-950 border border-slate-900 p-6 rounded-3xl text-center">
              <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150" alt="Editor" className="w-24 h-24 rounded-full object-cover mx-auto mb-4 ring-4 ring-teal-500/20" />
              <h3 className="font-bold text-lg text-white">Fahruddin Faiz</h3>
              <span className="text-xs text-teal-400 font-mono block mb-2">Penanggung Jawab & Admin Konten</span>
              <p className="text-xs text-slate-400 leading-relaxed">Menerima draf langsung dari WhatsApp dan mengatur rilis mingguan portal berita.</p>
            </div>
          </div>
        </div>
      )}

    </div>
  );
}