import { useState, useEffect, useRef } from "react";

const LANGUAGES = [
  { code: "en", label: "English", flag: "🇬🇧" },
  { code: "es", label: "Spanish", flag: "🇪🇸" },
  { code: "fr", label: "French", flag: "🇫🇷" },
  { code: "de", label: "German", flag: "🇩🇪" },
  { code: "ar", label: "Arabic", flag: "🇸🇦" },
  { code: "zh", label: "Chinese", flag: "🇨🇳" },
  { code: "ja", label: "Japanese", flag: "🇯🇵" },
  { code: "pt", label: "Portuguese", flag: "🇧🇷" },
  { code: "ur", label: "Urdu", flag: "🇵🇰" },
  { code: "hi", label: "Hindi", flag: "🇮🇳" },
];

const SEASONS = ["Spring", "Summer", "Autumn", "Winter", "New Year", "Eid", "Christmas", "Diwali", "Hanukkah", "Ramadan"];

const GREETING_TEMPLATES = {
  en: {
    Spring: "Wishing you a blooming Spring filled with fresh opportunities and success!",
    Summer: "May this Summer bring you warmth, joy, and incredible achievements!",
    Autumn: "As the leaves turn, may your career flourish with golden opportunities this Autumn!",
    Winter: "Warm wishes this Winter season — may your endeavors shine bright!",
    "New Year": "Happy New Year! Wishing you a year of breakthroughs and remarkable success!",
    Eid: "Eid Mubarak! May this blessed occasion bring peace and prosperity to you and your team!",
    Christmas: "Season's Greetings! Wishing you and yours a joyful and prosperous holiday!",
    Diwali: "Happy Diwali! May the Festival of Lights illuminate your path to success!",
    Hanukkah: "Happy Hanukkah! May the festival's glow light your way to wonderful opportunities!",
    Ramadan: "Ramadan Mubarak! May this holy month bring blessings, peace, and clarity to your journey!",
  },
  es: {
    Spring: "¡Que esta primavera florezca con nuevas oportunidades y éxito para usted!",
    Summer: "¡Que este verano le traiga alegría, calidez y logros increíbles!",
    Autumn: "¡Que este otoño dore su camino con grandes oportunidades profesionales!",
    Winter: "¡Cálidos deseos en esta temporada invernal — que sus proyectos brillen!",
    "New Year": "¡Feliz Año Nuevo! ¡Que sea un año de grandes logros y éxitos!",
    Eid: "¡Eid Mubarak! ¡Que esta bendita ocasión traiga paz y prosperidad!",
    Christmas: "¡Feliz Navidad! ¡Les deseamos unas fiestas llenas de alegría y prosperidad!",
    Diwali: "¡Feliz Diwali! ¡Que el Festival de las Luces ilumine su camino al éxito!",
    Hanukkah: "¡Feliz Janucá! ¡Que la luz de la festividad alumbre su camino!",
    Ramadan: "¡Ramadán Mubarak! ¡Que este mes sagrado traiga bendiciones y paz!",
  },
  fr: {
    Spring: "Que ce printemps vous apporte de nouvelles opportunités et un succès éclatant!",
    Summer: "Que cet été vous comble de chaleur, de joie et de succès remarquables!",
    Autumn: "Que cet automne dore votre parcours de merveilleuses opportunités!",
    Winter: "Chaleureuses salutations en cette saison hivernale — que vos projets brillent!",
    "New Year": "Bonne Année! Que cette année soit synonyme de réussites et d'accomplissements!",
    Eid: "Eid Mubarak! Que cette occasion bénie vous apporte paix et prospérité!",
    Christmas: "Joyeux Noël! Que les fêtes vous apportent joie et bonheur!",
    Diwali: "Joyeux Diwali! Que la Fête des Lumières éclaire votre chemin vers le succès!",
    Hanukkah: "Joyeux Hanoukka! Que la lumière de la fête guide vos pas!",
    Ramadan: "Ramadan Mubarak! Que ce mois béni vous apporte paix et sérénité!",
  },
  de: { Spring: "Möge dieser Frühling neue Chancen und Erfolg für Sie bringen!", Summer: "Möge dieser Sommer Ihnen Wärme, Freude und tolle Erfolge bringen!", Autumn: "Möge dieser Herbst Ihren Weg mit goldenen Chancen erhellen!", Winter: "Herzliche Grüße in dieser Winterzeit — mögen Ihre Vorhaben glänzen!", "New Year": "Frohes Neues Jahr! Möge es ein Jahr voller Durchbrüche und Erfolge werden!", Eid: "Eid Mubarak! Möge dieser gesegnete Anlass Frieden und Wohlstand bringen!", Christmas: "Frohe Weihnachten! Mögen die Festtage Ihnen Freude und Glück bringen!", Diwali: "Frohes Diwali! Möge das Lichterfest Ihren Weg zum Erfolg erhellen!", Hanukkah: "Frohes Chanukka! Möge das Licht des Festes Ihren Weg weisen!", Ramadan: "Ramadan Mubarak! Möge dieser heilige Monat Segen und Frieden bringen!" },
  ar: { Spring: "نتمنى لك ربيعاً مزهراً مليئاً بالفرص والنجاح!", Summer: "أتمنى أن يجلب هذا الصيف لك الدفء والفرح والإنجازات!", Autumn: "مع تحول أوراق الشجر، أتمنى أن تزهر مسيرتك بفرص ذهبية!", Winter: "أطيب التمنيات في هذا الشتاء — لتضيء مساعيك كالنجوم!", "New Year": "سنة جديدة سعيدة! أتمنى لك عاماً مليئاً بالنجاحات والإنجازات!", Eid: "عيد مبارك! أتمنى أن تجلب هذه المناسبة المباركة السلام والرخاء!", Christmas: "أطيب التحيات! أتمنى لكم أعياداً مليئة بالبهجة والازدهار!", Diwali: "عيد ديوالي سعيد! لتنير الأضواء دربك نحو النجاح!", Hanukkah: "عيد حانوكا سعيد! لتنير أضواء العيد طريقك!", Ramadan: "رمضان مبارك! أتمنى أن يجلب هذا الشهر الكريم البركة والسلام!" },
  zh: { Spring: "祝您春意盎然，新机遇不断，事业更上一层楼！", Summer: "愿这个夏天给您带来温暖、欢乐和辉煌成就！", Autumn: "金秋时节，愿您的事业如丰收般充实！", Winter: "寒冬暖意，祝您的事业闪耀光辉！", "New Year": "新年快乐！愿新的一年充满突破与成功！", Eid: "开斋节快乐！愿这个吉祥时刻带来和平与繁荣！", Christmas: "圣诞快乐！愿节日充满欢乐与幸福！", Diwali: "排灯节快乐！愿光明节点亮您通往成功之路！", Hanukkah: "光明节快乐！愿节日的光芒指引您的道路！", Ramadan: "斋月吉祥！愿这个神圣的月份带来祝福与平安！" },
  ja: { Spring: "新春を迎え、新たな機会と成功に満ちた素晴らしい春をお祈り申し上げます！", Summer: "この夏が温かみ、喜び、そして素晴らしい成果をもたらしますように！", Autumn: "実りの秋、あなたのキャリアが黄金の機会で輝きますように！", Winter: "この冬の季節に温かいご挨拶を申し上げます。", "New Year": "明けましておめでとうございます！今年が突破口と成功に満ちた年になりますように！", Eid: "イード・ムバーラク！この祝福された機会が平和と繁栄をもたらしますように！", Christmas: "メリークリスマス！素晴らしい休日をお過ごしください！", Diwali: "ディワリおめでとうございます！光の祭りが成功への道を照らしますように！", Hanukkah: "ハヌカーおめでとうございます！祭りの光があなたの道を照らしますように！", Ramadan: "ラマダン・ムバーラク！この神聖な月が祝福と平和をもたらしますように！" },
  pt: { Spring: "Que esta primavera floresça com novas oportunidades e sucesso para você!", Summer: "Que este verão lhe traga calor, alegria e conquistas incríveis!", Autumn: "Que este outono dore seu caminho com ótimas oportunidades profissionais!", Winter: "Afetuosas saudações neste inverno — que seus projetos brilhem!", "New Year": "Feliz Ano Novo! Que seja um ano de grandes realizações e sucesso!", Eid: "Eid Mubarak! Que esta ocasião abençoada traga paz e prosperidade!", Christmas: "Feliz Natal! Desejamos a todos ótimas festas cheias de alegria!", Diwali: "Feliz Diwali! Que o Festival das Luzes ilumine seu caminho para o sucesso!", Hanukkah: "Feliz Hanukkah! Que a luz da festa guie seus passos!", Ramadan: "Ramadan Mubarak! Que este mês sagrado traga bênçãos e paz!" },
  ur: { Spring: "امید ہے یہ بہار آپ کے لیے نئے مواقع اور کامیابی لے کر آئے!", Summer: "یہ گرمیاں آپ کے لیے خوشی، گرمجوشی اور کامیابیاں لائیں!", Autumn: "خزاں کے موسم میں آپ کا کیریئر سنہری مواقع سے بھرا ہو!", Winter: "اس سرما میں گرم خواہشات — آپ کی کوششیں روشن رہیں!", "New Year": "نیا سال مبارک! یہ سال کامیابیوں اور ترقی سے بھرا ہو!", Eid: "عید مبارک! یہ مبارک موقع آپ کے لیے امن اور خوشحالی لائے!", Christmas: "موسم کی مبارکباد! آپ کو خوشیوں سے بھری چھٹیاں مبارک ہوں!", Diwali: "دیوالی مبارک! روشنیوں کا یہ تہوار آپ کی کامیابی کی راہ روشن کرے!", Hanukkah: "حنوکہ مبارک! تہوار کی روشنی آپ کی رہنمائی کرے!", Ramadan: "رمضان مبارک! یہ مقدس مہینہ برکت اور سکون لائے!" },
  hi: { Spring: "यह बसंत आपके जीवन में नए अवसर और सफलता लाए!", Summer: "यह गर्मी आपको खुशी, उत्साह और शानदार उपलब्धियां दे!", Autumn: "इस शरद ऋतु में आपका करियर सुनहरे अवसरों से भरा हो!", Winter: "इस सर्दी में हार्दिक शुभकामनाएं — आपके प्रयास चमकते रहें!", "New Year": "नव वर्ष की हार्दिक शुभकामनाएं! यह वर्ष सफलताओं से भरा हो!", Eid: "ईद मुबारक! यह पवित्र अवसर आपके लिए शांति और समृद्धि लाए!", Christmas: "मेरी क्रिसमस! आपको खुशियों भरी छुट्टियां मुबारक!", Diwali: "हैप्पी दीवाली! रोशनी का यह त्योहार आपकी सफलता की राह जगमगाए!", Hanukkah: "हैप्पी हनुक्का! त्योहार की रोशनी आपका मार्ग प्रशस्त करे!", Ramadan: "रमज़ान मुबारक! यह पवित्र महीना आशीर्वाद और शांति लाए!" },
};

const SAMPLE_CONTACTS = [
  { id: 1, name: "Senator Jane Mitchell", role: "U.S. Senator", email: "j.mitchell@senate.gov", phone: "+12025550101", country: "USA", category: "Government" },
  { id: 2, name: "Dr. Carlos Rivera", role: "CEO, TechNova Inc.", email: "crivera@technova.com", phone: "+34911234567", country: "Spain", category: "Corporate" },
  { id: 3, name: "Priya Sharma", role: "Director, UN Development", email: "p.sharma@un.org", phone: "+919876543210", country: "India", category: "NGO" },
  { id: 4, name: "Mark Thompson", role: "CFO, GlobalBank", email: "m.thompson@globalbank.com", phone: "+442071234567", country: "UK", category: "Finance" },
  { id: 5, name: "Aisha Al-Rashid", role: "Minister of Innovation", email: "a.alrashid@gov.ae", phone: "+97142345678", country: "UAE", category: "Government" },
  { id: 6, name: "Pierre Dubois", role: "Ambassador to France", email: "p.dubois@embassy.fr", phone: "+33123456789", country: "France", category: "Diplomatic" },
];

const MOCK_SCRAPED = [
  { name: "Rep. Sarah Chen", role: "House Representative", email: "s.chen@house.gov", phone: "+12025550202", country: "USA", category: "Government" },
  { name: "CEO Michael Park", role: "Founder, AI Horizons", email: "mpark@aihorizons.io", phone: "+18005550303", country: "USA", category: "Corporate" },
  { name: "Ambassador Liu Wei", role: "UN Special Envoy", email: "l.wei@un.org", phone: "+8610012345678", country: "China", category: "Diplomatic" },
];

const SCHEDULE_OPTIONS = ["Every Hour", "Every 6 Hours", "Daily at 9 AM", "Weekly on Monday", "Monthly 1st", "On Special Occasions"];

export default function App() {
  const [dark, setDark] = useState(true);
  const [activeTab, setActiveTab] = useState("contacts");
  const [contacts, setContacts] = useState(SAMPLE_CONTACTS);
  const [selectedContacts, setSelectedContacts] = useState([]);
  const [scrapeUrl, setScrapeUrl] = useState("");
  const [scraping, setScraping] = useState(false);
  const [scrapeResults, setScrapeResults] = useState([]);
  const [scrapeProgress, setScrapeProgress] = useState(0);
  const [selectedLang, setSelectedLang] = useState("en");
  const [selectedSeason, setSelectedSeason] = useState("New Year");
  const [customMessage, setCustomMessage] = useState("");
  const [useCustom, setUseCustom] = useState(false);
  const [sending, setSending] = useState(false);
  const [sendProgress, setSendProgress] = useState(0);
  const [sentLog, setSentLog] = useState([]);
  const [schedule, setSchedule] = useState("Daily at 9 AM");
  const [scheduledJobs, setScheduledJobs] = useState([]);
  const [showAddContact, setShowAddContact] = useState(false);
  const [newContact, setNewContact] = useState({ name: "", role: "", email: "", phone: "", country: "", category: "Corporate" });
  const [filterCat, setFilterCat] = useState("All");
  const [notification, setNotification] = useState(null);
  const [msgChannel, setMsgChannel] = useState("email");
  const [animateCards, setAnimateCards] = useState(false);
  const intervalRef = useRef(null);

  useEffect(() => { setTimeout(() => setAnimateCards(true), 100); }, [activeTab]);

  const showNotif = (msg, type = "success") => {
    setNotification({ msg, type });
    setTimeout(() => setNotification(null), 3500);
  };

  const handleScrape = () => {
    if (!scrapeUrl.trim()) return showNotif("Please enter a URL to scrape", "error");
    setScraping(true); setScrapeProgress(0); setScrapeResults([]);
    let prog = 0;
    const iv = setInterval(() => {
      prog += Math.random() * 18 + 5;
      setScrapeProgress(Math.min(prog, 95));
      if (prog >= 95) {
        clearInterval(iv);
        setTimeout(() => {
          setScrapeProgress(100);
          setScrapeResults(MOCK_SCRAPED);
          setScraping(false);
          showNotif(`✅ Scraped ${MOCK_SCRAPED.length} contacts from ${scrapeUrl}`);
        }, 400);
      }
    }, 200);
  };

  const importScraped = () => {
    const newOnes = scrapeResults.map((c, i) => ({ ...c, id: Date.now() + i }));
    setContacts(prev => [...prev, ...newOnes]);
    setScrapeResults([]);
    setScrapeUrl("");
    showNotif(`Imported ${newOnes.length} contacts!`);
  };

  const toggleSelect = (id) => setSelectedContacts(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);
  const selectAll = () => setSelectedContacts(contacts.map(c => c.id));
  const clearSelect = () => setSelectedContacts([]);

  const getMessage = () => useCustom && customMessage ? customMessage : (GREETING_TEMPLATES[selectedLang]?.[selectedSeason] || "Warmest greetings and best wishes!");

  const handleSend = async () => {
    if (!selectedContacts.length) return showNotif("Select at least one contact", "error");
    setSending(true); setSendProgress(0);
    const toSend = contacts.filter(c => selectedContacts.includes(c.id));
    const log = [];
    for (let i = 0; i < toSend.length; i++) {
      await new Promise(r => setTimeout(r, 350));
      const contact = toSend[i];
      const success = Math.random() > 0.1;
      log.push({ contact: contact.name, channel: msgChannel, status: success ? "Sent" : "Failed", time: new Date().toLocaleTimeString(), message: getMessage().substring(0, 60) + "..." });
      setSendProgress(Math.round(((i + 1) / toSend.length) * 100));
    }
    setSentLog(prev => [...log, ...prev]);
    setSending(false);
    showNotif(`📨 Messages sent to ${toSend.length} contacts!`);
  };

  const addScheduledJob = () => {
    setScheduledJobs(prev => [...prev, { id: Date.now(), schedule, lang: selectedLang, season: selectedSeason, channel: msgChannel, contacts: selectedContacts.length, active: true, created: new Date().toLocaleDateString() }]);
    showNotif(`⏰ Scheduled: ${schedule}`);
  };

  const deleteContact = (id) => { setContacts(prev => prev.filter(c => c.id !== id)); setSelectedContacts(prev => prev.filter(x => x !== id)); };

  const addNewContact = () => {
    if (!newContact.name || !newContact.email) return showNotif("Name and email required", "error");
    setContacts(prev => [...prev, { ...newContact, id: Date.now() }]);
    setNewContact({ name: "", role: "", email: "", phone: "", country: "", category: "Corporate" });
    setShowAddContact(false);
    showNotif("Contact added!");
  };

  const filteredContacts = filterCat === "All" ? contacts : contacts.filter(c => c.category === filterCat);
  const categories = ["All", ...new Set(contacts.map(c => c.category))];

  const t = dark ? {
    bg: "#0a0a0f", card: "#111118", border: "#1e1e2e", text: "#e8e8ff", sub: "#8888aa", accent: "#7c3aed", accent2: "#06b6d4", glow: "rgba(124,58,237,0.3)", inputBg: "#0d0d16", navBg: "#0d0d1a"
  } : {
    bg: "#f0f0ff", card: "#ffffff", border: "#ddddf0", text: "#1a1a2e", sub: "#666688", accent: "#7c3aed", accent2: "#0891b2", glow: "rgba(124,58,237,0.15)", inputBg: "#f8f8ff", navBg: "#ffffff"
  };

  const styles = {
    root: { minHeight: "100vh", background: t.bg, color: t.text, fontFamily: "'Syne', 'Space Grotesk', sans-serif", transition: "all 0.4s ease", position: "relative", overflow: "hidden" },
    noise: { position: "fixed", inset: 0, backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E")`, pointerEvents: "none", zIndex: 0, opacity: dark ? 1 : 0.5 },
    orb1: { position: "fixed", width: 400, height: 400, borderRadius: "50%", background: `radial-gradient(circle, ${t.accent}22, transparent 70%)`, top: -100, right: -100, pointerEvents: "none", zIndex: 0, animation: "float1 8s ease-in-out infinite" },
    orb2: { position: "fixed", width: 300, height: 300, borderRadius: "50%", background: `radial-gradient(circle, ${t.accent2}22, transparent 70%)`, bottom: 100, left: -80, pointerEvents: "none", zIndex: 0, animation: "float2 10s ease-in-out infinite" },
    header: { position: "sticky", top: 0, zIndex: 100, background: t.navBg + "ee", borderBottom: `1px solid ${t.border}`, backdropFilter: "blur(20px)", padding: "12px 24px", display: "flex", alignItems: "center", justifyContent: "space-between" },
    logo: { fontSize: 22, fontWeight: 900, letterSpacing: "-0.5px", background: `linear-gradient(135deg, ${t.accent}, ${t.accent2})`, WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" },
    themeBtn: { width: 52, height: 28, borderRadius: 14, background: dark ? `linear-gradient(135deg, ${t.accent}, ${t.accent2})` : "#ddd", border: "none", cursor: "pointer", position: "relative", transition: "all 0.3s ease" },
    thumbToggle: { position: "absolute", top: 3, left: dark ? 27 : 3, width: 22, height: 22, borderRadius: "50%", background: "#fff", transition: "all 0.3s cubic-bezier(0.34,1.56,0.64,1)", boxShadow: "0 2px 8px rgba(0,0,0,0.3)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 12 },
    nav: { display: "flex", gap: 4, padding: "0 24px", borderBottom: `1px solid ${t.border}`, background: t.navBg + "cc", backdropFilter: "blur(12px)", zIndex: 90, flexWrap: "wrap" },
    navBtn: (active) => ({ padding: "12px 18px", border: "none", background: "transparent", cursor: "pointer", fontSize: 13, fontWeight: active ? 700 : 500, color: active ? t.accent : t.sub, borderBottom: active ? `2px solid ${t.accent}` : "2px solid transparent", transition: "all 0.2s ease", letterSpacing: "0.3px" }),
    main: { maxWidth: 1100, margin: "0 auto", padding: "28px 20px", position: "relative", zIndex: 1 },
    card: { background: t.card, border: `1px solid ${t.border}`, borderRadius: 16, padding: 24, marginBottom: 20, boxShadow: `0 4px 24px rgba(0,0,0,${dark ? 0.3 : 0.08})`, transition: "all 0.3s ease" },
    input: { width: "100%", background: t.inputBg, border: `1px solid ${t.border}`, borderRadius: 10, padding: "10px 14px", color: t.text, fontSize: 14, outline: "none", transition: "border 0.2s", fontFamily: "inherit", boxSizing: "border-box" },
    btn: (variant = "primary") => ({ padding: "10px 22px", borderRadius: 10, border: "none", cursor: "pointer", fontWeight: 700, fontSize: 13, letterSpacing: "0.3px", transition: "all 0.2s ease", fontFamily: "inherit", ...(variant === "primary" ? { background: `linear-gradient(135deg, ${t.accent}, ${t.accent2})`, color: "#fff", boxShadow: `0 4px 16px ${t.glow}` } : variant === "danger" ? { background: "#ef444420", color: "#ef4444", border: "1px solid #ef444440" } : { background: t.inputBg, color: t.text, border: `1px solid ${t.border}` }) }),
    badge: (cat) => { const colors = { Government: "#7c3aed", Corporate: "#06b6d4", NGO: "#10b981", Finance: "#f59e0b", Diplomatic: "#ec4899" }; return { display: "inline-block", padding: "2px 10px", borderRadius: 20, fontSize: 11, fontWeight: 700, background: (colors[cat] || "#888") + "22", color: colors[cat] || "#888", border: `1px solid ${(colors[cat] || "#888")}44` }; },
    contactRow: { display: "flex", alignItems: "center", gap: 12, padding: "12px 16px", borderRadius: 12, border: `1px solid ${t.border}`, background: t.inputBg, marginBottom: 8, transition: "all 0.2s", cursor: "pointer" },
    stat: { textAlign: "center", flex: 1 },
    progressBar: (pct, color = t.accent) => ({ height: 6, borderRadius: 3, background: t.border, overflow: "hidden", margin: "8px 0", position: "relative" }),
    progressFill: (pct, color = t.accent) => ({ height: "100%", width: `${pct}%`, background: `linear-gradient(90deg, ${color}, ${t.accent2})`, borderRadius: 3, transition: "width 0.3s ease" }),
    grid2: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 },
    grid3: { display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 12 },
    label: { display: "block", fontSize: 12, fontWeight: 700, color: t.sub, marginBottom: 6, letterSpacing: "0.8px", textTransform: "uppercase" },
    msgPreview: { background: t.inputBg, border: `1px solid ${t.accent}44`, borderRadius: 12, padding: 18, marginTop: 12, fontSize: 14, lineHeight: 1.7, color: t.text, fontStyle: "italic", position: "relative" },
    chip: (active) => ({ padding: "6px 14px", borderRadius: 20, border: `1px solid ${active ? t.accent : t.border}`, background: active ? t.accent + "22" : "transparent", color: active ? t.accent : t.sub, cursor: "pointer", fontSize: 12, fontWeight: 600, transition: "all 0.2s" }),
    tag: { display: "inline-block", padding: "2px 8px", borderRadius: 6, background: t.accent + "15", color: t.accent, fontSize: 11, fontWeight: 700 },
  };

  const tabs = [
    { id: "contacts", label: "📋 Contacts", },
    { id: "scraper", label: "🔍 Web Scraper" },
    { id: "composer", label: "✍️ Message Composer" },
    { id: "sender", label: "📨 Send Campaigns" },
    { id: "scheduler", label: "⏰ Scheduler" },
    { id: "logs", label: "📊 Logs & Analytics" },
  ];

  return (
    <>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800;900&family=Space+Grotesk:wght@300;400;500;700&display=swap');
        * { box-sizing: border-box; margin: 0; padding: 0; }
        @keyframes float1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-30px,40px) scale(1.05)} }
        @keyframes float2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,-30px)} }
        @keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
        @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
        @keyframes slideIn { from{transform:translateX(-20px);opacity:0} to{transform:translateX(0);opacity:1} }
        .anim-card { animation: fadeUp 0.4s ease forwards; }
        .anim-card:nth-child(1){animation-delay:0.05s}
        .anim-card:nth-child(2){animation-delay:0.1s}
        .anim-card:nth-child(3){animation-delay:0.15s}
        .anim-card:nth-child(4){animation-delay:0.2s}
        .hover-row:hover { transform: translateX(4px); box-shadow: 0 4px 20px rgba(124,58,237,0.15) !important; }
        .btn-hover:hover { transform: translateY(-2px); opacity: 0.9; }
        .chip-hover:hover { opacity: 0.8; }
        input:focus, textarea:focus, select:focus { border-color: #7c3aed !important; box-shadow: 0 0 0 3px rgba(124,58,237,0.15) !important; }
        ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #7c3aed44; border-radius: 3px; }
      `}</style>
      <div style={styles.root}>
        <div style={styles.noise} />
        <div style={styles.orb1} />
        <div style={styles.orb2} />

        {/* Notification */}
        {notification && (
          <div style={{ position: "fixed", top: 80, right: 20, zIndex: 999, background: notification.type === "error" ? "#ef4444" : `linear-gradient(135deg, ${t.accent}, ${t.accent2})`, color: "#fff", padding: "12px 22px", borderRadius: 12, fontWeight: 700, fontSize: 14, boxShadow: "0 8px 32px rgba(0,0,0,0.3)", animation: "slideIn 0.3s ease" }}>
            {notification.msg}
          </div>
        )}

        {/* Header */}
        <header style={styles.header}>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: `linear-gradient(135deg, ${t.accent}, ${t.accent2})`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 18 }}>🤝</div>
            <div>
              <div style={styles.logo}>MatchReach Agent</div>
              <div style={{ fontSize: 11, color: t.sub, fontWeight: 500 }}>AI-Powered Outreach Platform</div>
            </div>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            <div style={{ fontSize: 12, color: t.sub }}>
              <span style={{ color: "#10b981", fontWeight: 700 }}>● </span>{contacts.length} contacts · {selectedContacts.length} selected
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ fontSize: 12, color: t.sub }}>{dark ? "🌙" : "☀️"}</span>
              <button style={styles.themeBtn} onClick={() => setDark(!dark)}>
                <div style={styles.thumbToggle}>{dark ? "🌙" : "☀️"}</div>
              </button>
            </div>
          </div>
        </header>

        {/* Nav */}
        <nav style={styles.nav}>
          {tabs.map(tab => (
            <button key={tab.id} style={styles.navBtn(activeTab === tab.id)} onClick={() => { setActiveTab(tab.id); setAnimateCards(false); setTimeout(() => setAnimateCards(true), 50); }}>
              {tab.label}
            </button>
          ))}
        </nav>

        <main style={styles.main}>

          {/* ===== CONTACTS TAB ===== */}
          {activeTab === "contacts" && (
            <div>
              {/* Stats */}
              <div style={{ ...styles.grid3, marginBottom: 20 }}>
                {[
                  { label: "Total Contacts", value: contacts.length, icon: "👥", color: t.accent },
                  { label: "Selected", value: selectedContacts.length, icon: "✅", color: "#10b981" },
                  { label: "Categories", value: categories.length - 1, icon: "🏷️", color: t.accent2 },
                ].map((s, i) => (
                  <div key={i} className="anim-card" style={{ ...styles.card, textAlign: "center", opacity: 0 }}>
                    <div style={{ fontSize: 28, marginBottom: 6 }}>{s.icon}</div>
                    <div style={{ fontSize: 28, fontWeight: 900, color: s.color }}>{s.value}</div>
                    <div style={{ fontSize: 12, color: t.sub, fontWeight: 600 }}>{s.label}</div>
                  </div>
                ))}
              </div>

              {/* Actions */}
              <div className="anim-card" style={{ ...styles.card, opacity: 0 }}>
                <div style={{ display: "flex", gap: 10, alignItems: "center", flexWrap: "wrap", marginBottom: 16 }}>
                  <button className="btn-hover" style={styles.btn()} onClick={() => setShowAddContact(!showAddContact)}>+ Add Contact</button>
                  <button className="btn-hover" style={styles.btn("secondary")} onClick={selectAll}>Select All</button>
                  <button className="btn-hover" style={styles.btn("secondary")} onClick={clearSelect}>Clear</button>
                  <div style={{ marginLeft: "auto", display: "flex", gap: 8, flexWrap: "wrap" }}>
                    {categories.map(cat => (
                      <span key={cat} className="chip-hover" style={styles.chip(filterCat === cat)} onClick={() => setFilterCat(cat)}>{cat}</span>
                    ))}
                  </div>
                </div>

                {/* Add Contact Form */}
                {showAddContact && (
                  <div style={{ background: t.inputBg, borderRadius: 12, padding: 18, marginBottom: 16, border: `1px solid ${t.accent}44`, animation: "fadeUp 0.3s ease" }}>
                    <div style={{ ...styles.grid2, gap: 12, marginBottom: 12 }}>
                      {[["name", "Full Name"], ["role", "Role / Title"], ["email", "Email"], ["phone", "Phone / WhatsApp"], ["country", "Country"]].map(([field, label]) => (
                        <div key={field}>
                          <label style={styles.label}>{label}</label>
                          <input style={styles.input} value={newContact[field]} onChange={e => setNewContact(p => ({ ...p, [field]: e.target.value }))} placeholder={label} />
                        </div>
                      ))}
                      <div>
                        <label style={styles.label}>Category</label>
                        <select style={styles.input} value={newContact.category} onChange={e => setNewContact(p => ({ ...p, category: e.target.value }))}>
                          {["Government", "Corporate", "NGO", "Finance", "Diplomatic"].map(c => <option key={c}>{c}</option>)}
                        </select>
                      </div>
                    </div>
                    <div style={{ display: "flex", gap: 10 }}>
                      <button className="btn-hover" style={styles.btn()} onClick={addNewContact}>Save Contact</button>
                      <button className="btn-hover" style={styles.btn("secondary")} onClick={() => setShowAddContact(false)}>Cancel</button>
                    </div>
                  </div>
                )}

                {/* Contact List */}
                <div>
                  {filteredContacts.map((c, i) => (
                    <div key={c.id} className="hover-row" style={{ ...styles.contactRow, background: selectedContacts.includes(c.id) ? t.accent + "15" : t.inputBg, borderColor: selectedContacts.includes(c.id) ? t.accent + "44" : t.border, animation: `fadeUp 0.3s ease ${i * 0.05}s forwards`, opacity: 0 }} onClick={() => toggleSelect(c.id)}>
                      <div style={{ width: 20, height: 20, borderRadius: 6, border: `2px solid ${selectedContacts.includes(c.id) ? t.accent : t.border}`, background: selectedContacts.includes(c.id) ? t.accent : "transparent", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, transition: "all 0.2s" }}>
                        {selectedContacts.includes(c.id) && <span style={{ color: "#fff", fontSize: 12, fontWeight: 900 }}>✓</span>}
                      </div>
                      <div style={{ width: 40, height: 40, borderRadius: 12, background: `linear-gradient(135deg, ${t.accent}44, ${t.accent2}44)`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 18, flexShrink: 0 }}>
                        {c.category === "Government" ? "🏛️" : c.category === "Corporate" ? "💼" : c.category === "NGO" ? "🌍" : c.category === "Finance" ? "💰" : "🌐"}
                      </div>
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontWeight: 700, fontSize: 14 }}>{c.name}</div>
                        <div style={{ fontSize: 12, color: t.sub }}>{c.role} · {c.country}</div>
                      </div>
                      <div style={{ fontSize: 12, color: t.sub, display: "flex", flexDirection: "column", gap: 2, textAlign: "right" }}>
                        <div>📧 {c.email}</div>
                        <div>📱 {c.phone}</div>
                      </div>
                      <span style={styles.badge(c.category)}>{c.category}</span>
                      <button className="btn-hover" style={{ ...styles.btn("danger"), padding: "4px 10px", fontSize: 12 }} onClick={(e) => { e.stopPropagation(); deleteContact(c.id); }}>✕</button>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}

          {/* ===== SCRAPER TAB ===== */}
          {activeTab === "scraper" && (
            <div>
              <div className="anim-card" style={{ ...styles.card, opacity: 0 }}>
                <h2 style={{ fontSize: 20, fontWeight: 800, marginBottom: 6 }}>🔍 Web Contact Scraper</h2>
                <p style={{ color: t.sub, fontSize: 13, marginBottom: 20 }}>Enter any website, directory, or LinkedIn page URL to automatically extract contact details.</p>
                <div style={{ display: "flex", gap: 12, marginBottom: 16 }}>
                  <input style={{ ...styles.input, flex: 1 }} value={scrapeUrl} onChange={e => setScrapeUrl(e.target.value)} placeholder="https://www.senate.gov/senators/ or any directory URL..." onKeyDown={e => e.key === "Enter" && handleScrape()} />
                  <button className="btn-hover" style={styles.btn()} onClick={handleScrape} disabled={scraping}>{scraping ? "Scraping..." : "🚀 Scrape"}</button>
                </div>

                {scraping && (
                  <div style={{ marginBottom: 20 }}>
                    <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6 }}>
                      <span style={{ fontSize: 13, color: t.sub, animation: "pulse 1s infinite" }}>⚙️ Extracting contacts...</span>
                      <span style={{ fontSize: 13, fontWeight: 700, color: t.accent }}>{Math.round(scrapeProgress)}%</span>
                    </div>
                    <div style={styles.progressBar(scrapeProgress)}><div style={styles.progressFill(scrapeProgress)} /></div>
                    <div style={{ fontSize: 11, color: t.sub, marginTop: 4 }}>Parsing HTML → Extracting emails & phones → Validating formats...</div>
                  </div>
                )}

                {scrapeResults.length > 0 && (
                  <div>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
                      <h3 style={{ fontSize: 16, fontWeight: 700, color: "#10b981" }}>✅ {scrapeResults.length} Contacts Found</h3>
                      <button className="btn-hover" style={styles.btn()} onClick={importScraped}>Import All →</button>
                    </div>
                    {scrapeResults.map((c, i) => (
                      <div key={i} style={{ ...styles.contactRow, animation: `fadeUp 0.3s ease ${i * 0.1}s forwards`, opacity: 0 }}>
                        <div style={{ width: 36, height: 36, borderRadius: 10, background: "#10b98122", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16 }}>🆕</div>
                        <div style={{ flex: 1 }}>
                          <div style={{ fontWeight: 700 }}>{c.name}</div>
                          <div style={{ fontSize: 12, color: t.sub }}>{c.role}</div>
                        </div>
                        <div style={{ fontSize: 12, color: t.sub, textAlign: "right" }}>
                          <div>{c.email}</div><div>{c.phone}</div>
                        </div>
                        <span style={styles.badge(c.category)}>{c.category}</span>
                      </div>
                    ))}
                  </div>
                )}
              </div>

              <div className="anim-card" style={{ ...styles.card, opacity: 0 }}>
                <h3 style={{ fontWeight: 700, marginBottom: 12 }}>📌 Example Sources to Scrape</h3>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                  {[
                    ["🏛️ US Senate", "senate.gov/senators/"],
                    ["🏢 Fortune 500 CEOs", "fortune.com/fortune500/"],
                    ["🌐 UN Officials", "un.org/en/sections/about-un/"],
                    ["📋 LinkedIn Directory", "linkedin.com/directory/"],
                  ].map(([label, url]) => (
                    <div key={label} style={{ ...styles.contactRow, cursor: "pointer" }} onClick={() => setScrapeUrl("https://" + url)}>
                      <div style={{ fontWeight: 600, fontSize: 13 }}>{label}</div>
                      <div style={{ marginLeft: "auto", fontSize: 11, color: t.sub }}>{url}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}

          {/* ===== COMPOSER TAB ===== */}
          {activeTab === "composer" && (
            <div>
              <div className="anim-card" style={{ ...styles.card, opacity: 0 }}>
                <h2 style={{ fontSize: 20, fontWeight: 800, marginBottom: 16 }}>✍️ Greeting Message Composer</h2>
                <div style={styles.grid2}>
                  <div>
                    <label style={styles.label}>🌐 Language</label>
                    <select style={styles.input} value={selectedLang} onChange={e => setSelectedLang(e.target.value)}>
                      {LANGUAGES.map(l => <option key={l.code} value={l.code}>{l.flag} {l.label}</option>)}
                    </select>
                  </div>
                  <div>
                    <label style={styles.label}>🍂 Season / Occasion</label>
                    <select style={styles.input} value={selectedSeason} onChange={e => setSelectedSeason(e.target.value)}>
                      {SEASONS.map(s => <option key={s}>{s}</option>)}
                    </select>
                  </div>
                </div>

                <div style={{ marginTop: 16 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
                    <label style={styles.label}>Generated Message Preview</label>
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <span style={{ fontSize: 12, color: t.sub }}>Custom</span>
                      <div style={{ width: 36, height: 20, borderRadius: 10, background: useCustom ? `linear-gradient(135deg, ${t.accent}, ${t.accent2})` : t.border, cursor: "pointer", position: "relative", transition: "all 0.3s" }} onClick={() => setUseCustom(!useCustom)}>
                        <div style={{ position: "absolute", top: 2, left: useCustom ? 18 : 2, width: 16, height: 16, borderRadius: "50%", background: "#fff", transition: "all 0.3s" }} />
                      </div>
                    </div>
                  </div>
                  <div style={styles.msgPreview}>
                    <div style={{ position: "absolute", top: 8, right: 12, fontSize: 20 }}>{LANGUAGES.find(l => l.code === selectedLang)?.flag}</div>
                    "{getMessage()}"
                  </div>
                </div>

                {useCustom && (
                  <div style={{ marginTop: 16 }}>
                    <label style={styles.label}>Custom Message</label>
                    <textarea style={{ ...styles.input, minHeight: 100, resize: "vertical" }} value={customMessage} onChange={e => setCustomMessage(e.target.value)} placeholder="Type your custom greeting message here..." />
                  </div>
                )}
              </div>

              <div className="anim-card" style={{ ...styles.card, opacity: 0 }}>
                <h3 style={{ fontWeight: 700, marginBottom: 16 }}>🌍 All Language Previews</h3>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                  {LANGUAGES.map(lang => (
                    <div key={lang.code} style={{ background: t.inputBg, borderRadius: 10, padding: 14, border: `1px solid ${lang.code === selectedLang ? t.accent : t.border}44`, cursor: "pointer", transition: "all 0.2s" }} onClick={() => setSelectedLang(lang.code)}>
                      <div style={{ display: "flex", gap: 8, alignItems: "center", marginBottom: 6 }}>
                        <span style={{ fontSize: 20 }}>{lang.flag}</span>
                        <span style={{ fontWeight: 700, fontSize: 13 }}>{lang.label}</span>
                        {lang.code === selectedLang && <span style={styles.tag}>Active</span>}
                      </div>
                      <div style={{ fontSize: 12, color: t.sub, lineHeight: 1.5 }}>
                        {(GREETING_TEMPLATES[lang.code]?.[selectedSeason] || "—").substring(0, 80)}...
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}

          {/* ===== SENDER TAB ===== */}
          {activeTab === "sender" && (
            <div>
              <div className="anim-card" style={{ ...styles.card, opacity: 0 }}>
                <h2 style={{ fontSize: 20, fontWeight: 800, marginBottom: 16 }}>📨 Send Campaign</h2>
                <div style={styles.grid2}>
                  <div>
                    <label style={styles.label}>📡 Send Via</label>
                    <div style={{ display: "flex", gap: 8 }}>
                      {[["email", "📧 Email"], ["sms", "💬 SMS"], ["whatsapp", "📱 WhatsApp"]].map(([val, label]) => (
                        <span key={val} className="chip-hover" style={{ ...styles.chip(msgChannel === val), flex: 1, textAlign: "center" }} onClick={() => setMsgChannel(val)}>{label}</span>
                      ))}
                    </div>
                  </div>
                  <div>
                    <label style={styles.label}>🌐 Language & Occasion</label>
                    <div style={{ display: "flex", gap: 8 }}>
                      <select style={{ ...styles.input, flex: 1 }} value={selectedLang} onChange={e => setSelectedLang(e.target.value)}>
                        {LANGUAGES.map(l => <option key={l.code} value={l.code}>{l.flag} {l.label}</option>)}
                      </select>
                      <select style={{ ...styles.input, flex: 1 }} value={selectedSeason} onChange={e => setSelectedSeason(e.target.value)}>
                        {SEASONS.map(s => <option key={s}>{s}</option>)}
                      </select>
                    </div>
                  </div>
                </div>

                <div style={styles.msgPreview}>
                  <div style={{ fontSize: 11, color: t.sub, marginBottom: 6, fontStyle: "normal", fontWeight: 700 }}>MESSAGE PREVIEW · {LANGUAGES.find(l => l.code === selectedLang)?.label?.toUpperCase()} · {selectedSeason?.toUpperCase()}</div>
                  "{getMessage()}"
                </div>

                <div style={{ marginTop: 20 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 10 }}>
                    <div style={{ fontSize: 14, fontWeight: 700 }}>
                      Selected: <span style={{ color: t.accent }}>{selectedContacts.length}</span> of {contacts.length} contacts
                    </div>
                    <div style={{ display: "flex", gap: 8 }}>
                      <button style={{ ...styles.btn("secondary"), padding: "6px 12px", fontSize: 12 }} onClick={selectAll}>All</button>
                      <button style={{ ...styles.btn("secondary"), padding: "6px 12px", fontSize: 12 }} onClick={clearSelect}>None</button>
                    </div>
                  </div>

                  {contacts.slice(0, 4).map((c, i) => (
                    <div key={c.id} style={{ ...styles.contactRow, background: selectedContacts.includes(c.id) ? t.accent + "15" : t.inputBg }} onClick={() => toggleSelect(c.id)}>
                      <div style={{ width: 18, height: 18, borderRadius: 4, border: `2px solid ${selectedContacts.includes(c.id) ? t.accent : t.border}`, background: selectedContacts.includes(c.id) ? t.accent : "transparent", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                        {selectedContacts.includes(c.id) && <span style={{ color: "#fff", fontSize: 10 }}>✓</span>}
                      </div>
                      <div style={{ flex: 1 }}><div style={{ fontWeight: 600, fontSize: 13 }}>{c.name}</div><div style={{ fontSize: 11, color: t.sub }}>{c.role}</div></div>
                      <span style={{ fontSize: 11, color: t.sub }}>{msgChannel === "email" ? c.email : c.phone}</span>
                    </div>
                  ))}
                  {contacts.length > 4 && <div style={{ textAlign: "center", fontSize: 12, color: t.sub, padding: 8 }}>+{contacts.length - 4} more in Contacts tab</div>}
                </div>

                {sending && (
                  <div style={{ marginTop: 16 }}>
                    <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 4 }}>
                      <span style={{ fontSize: 13, color: t.sub, animation: "pulse 1s infinite" }}>📤 Sending messages...</span>
                      <span style={{ fontWeight: 700, color: t.accent }}>{sendProgress}%</span>
                    </div>
                    <div style={styles.progressBar(sendProgress)}><div style={styles.progressFill(sendProgress)} /></div>
                  </div>
                )}

                <div style={{ display: "flex", gap: 12, marginTop: 20 }}>
                  <button className="btn-hover" style={{ ...styles.btn(), flex: 1, padding: 14, fontSize: 15 }} onClick={handleSend} disabled={sending}>
                    {sending ? "⏳ Sending..." : `🚀 Send to ${selectedContacts.length} Contact${selectedContacts.length !== 1 ? "s" : ""}`}
                  </button>
                </div>
              </div>
            </div>
          )}

          {/* ===== SCHEDULER TAB ===== */}
          {activeTab === "scheduler" && (
            <div>
              <div className="anim-card" style={{ ...styles.card, opacity: 0 }}>
                <h2 style={{ fontSize: 20, fontWeight: 800, marginBottom: 16 }}>⏰ Automated Scheduler</h2>
                <div style={{ ...styles.grid2, marginBottom: 16 }}>
                  <div>
                    <label style={styles.label}>🕒 Frequency</label>
                    <select style={styles.input} value={schedule} onChange={e => setSchedule(e.target.value)}>
                      {SCHEDULE_OPTIONS.map(s => <option key={s}>{s}</option>)}
                    </select>
                  </div>
                  <div>
                    <label style={styles.label}>🌐 Language</label>
                    <select style={styles.input} value={selectedLang} onChange={e => setSelectedLang(e.target.value)}>
                      {LANGUAGES.map(l => <option key={l.code} value={l.code}>{l.flag} {l.label}</option>)}
                    </select>
                  </div>
                  <div>
                    <label style={styles.label}>🍂 Occasion</label>
                    <select style={styles.input} value={selectedSeason} onChange={e => setSelectedSeason(e.target.value)}>
                      {SEASONS.map(s => <option key={s}>{s}</option>)}
                    </select>
                  </div>
                  <div>
                    <label style={styles.label}>📡 Channel</label>
                    <select style={styles.input} value={msgChannel} onChange={e => setMsgChannel(e.target.value)}>
                      <option value="email">📧 Email</option>
                      <option value="sms">💬 SMS</option>
                      <option value="whatsapp">📱 WhatsApp</option>
                    </select>
                  </div>
                </div>
                <button className="btn-hover" style={{ ...styles.btn(), width: "100%", padding: 13 }} onClick={addScheduledJob}>
                  ➕ Create Scheduled Job ({selectedContacts.length} contacts selected)
                </button>
              </div>

              <div className="anim-card" style={{ ...styles.card, opacity: 0 }}>
                <h3 style={{ fontWeight: 700, marginBottom: 14 }}>📋 Scheduled Jobs ({scheduledJobs.length})</h3>
                {scheduledJobs.length === 0 && <div style={{ textAlign: "center", color: t.sub, padding: "30px 0" }}>No jobs scheduled yet. Create one above.</div>}
                {scheduledJobs.map((job, i) => (
                  <div key={job.id} style={{ ...styles.contactRow, marginBottom: 10 }}>
                    <div style={{ width: 40, height: 40, borderRadius: 12, background: job.active ? "#10b98122" : t.border, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 18 }}>⏰</div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontWeight: 700 }}>{job.schedule} · {LANGUAGES.find(l => l.code === job.lang)?.flag} {job.season}</div>
                      <div style={{ fontSize: 12, color: t.sub }}>{job.contacts} contacts · {job.channel} · Created {job.created}</div>
                    </div>
                    <span style={{ ...styles.badge(job.active ? "NGO" : "Government"), fontSize: 11 }}>{job.active ? "Active" : "Paused"}</span>
                    <button style={{ ...styles.btn("danger"), padding: "4px 10px", fontSize: 11 }} onClick={() => setScheduledJobs(prev => prev.filter(j => j.id !== job.id))}>Remove</button>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* ===== LOGS TAB ===== */}
          {activeTab === "logs" && (
            <div>
              <div style={styles.grid3}>
                {[
                  { label: "Total Sent", value: sentLog.filter(l => l.status === "Sent").length, icon: "✅", color: "#10b981" },
                  { label: "Failed", value: sentLog.filter(l => l.status === "Failed").length, icon: "❌", color: "#ef4444" },
                  { label: "Success Rate", value: sentLog.length ? Math.round(sentLog.filter(l => l.status === "Sent").length / sentLog.length * 100) + "%" : "—", icon: "📊", color: t.accent },
                ].map((s, i) => (
                  <div key={i} className="anim-card" style={{ ...styles.card, textAlign: "center", opacity: 0 }}>
                    <div style={{ fontSize: 28 }}>{s.icon}</div>
                    <div style={{ fontSize: 30, fontWeight: 900, color: s.color }}>{s.value}</div>
                    <div style={{ fontSize: 12, color: t.sub, fontWeight: 600 }}>{s.label}</div>
                  </div>
                ))}
              </div>

              <div className="anim-card" style={{ ...styles.card, opacity: 0 }}>
                <h3 style={{ fontWeight: 700, marginBottom: 14 }}>📜 Send Log</h3>
                {sentLog.length === 0 && <div style={{ textAlign: "center", color: t.sub, padding: "30px 0" }}>No messages sent yet. Go to Send Campaigns tab.</div>}
                {sentLog.map((log, i) => (
                  <div key={i} style={{ ...styles.contactRow, marginBottom: 6 }}>
                    <div style={{ fontSize: 18 }}>{log.status === "Sent" ? "✅" : "❌"}</div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontWeight: 600, fontSize: 13 }}>{log.contact}</div>
                      <div style={{ fontSize: 11, color: t.sub }}>{log.message}</div>
                    </div>
                    <div style={{ textAlign: "right", fontSize: 12 }}>
                      <div style={styles.badge(log.status === "Sent" ? "NGO" : "Government")}>{log.channel}</div>
                      <div style={{ color: t.sub, marginTop: 2 }}>{log.time}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

        </main>
      </div>
    </>
  );
}