/* eslint-disable @next/next/no-img-element */
'use client';

import React, { useState, useEffect } from 'react';
import { 
  Settings, 
  Search, 
  Plus, 
  Trash2, 
  Edit3, 
  Eye, 
  FileText, 
  Globe, 
  Image as ImageIcon, 
  AlertTriangle, 
  Calendar, 
  TrendingUp, 
  Sparkles, 
  Megaphone, 
  User, 
  Check, 
  CheckCircle2, 
  X, 
  ChevronRight, 
  ArrowRight, 
  Volume2, 
  PieChart, 
  ShieldAlert, 
  HelpCircle,
  ThumbsUp,
  Share2,
  ExternalLink,
  Info
} from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';

// --- TYPE DEFINITIONS ---
interface Article {
  id: string;
  title: string;
  category: 'Nuestra Verdad' | 'Nacional' | 'Estatal' | 'Así Sucedió' | 'Memoria Digital';
  date: string;
  author: string;
  excerpt: string;
  content: string;
  imageUrl: string;
  readTime: string;
  views: number;
  likes: number;
  // Local SEO per article
  metatitle?: string;
  metadescription?: string;
  keywords?: string;
}

interface BannerAd {
  id: string;
  title: string;
  imageUrl: string;
  redirectUrl: string;
  location: 'leaderboard' | 'sidebar' | 'bottom';
  active: boolean;
  targetCategories: string[]; // Segmented injection
}

interface CitizenComplaint {
  id: string;
  name: string;
  email: string;
  location: string;
  subject: string;
  message: string;
  date: string;
  status: 'Recibido' | 'En Investigación' | 'Verificado';
}

// --- DEFAULT SEED DATA ---
const DEFAULT_ARTICLES: Article[] = [
  {
    id: 'art-1',
    title: 'Pacto Federal y Coordinación Fiscal: El álgido debate por la redistribución de recursos',
    category: 'Nuestra Verdad',
    date: '13 de Julio, 2026',
    author: 'Dra. Elena Villaseñor',
    readTime: '6 min de lectura',
    views: 1420,
    likes: 85,
    excerpt: 'Analistas advierten que la actual fórmula de coordinación fiscal genera asimetrías profundas entre las entidades de mayor aportación tributaria y los estados del sur.',
    content: `
      <h2>La encrucijada del Pacto Federal en 2026</h2>
      <p>La discusión sobre el <strong>Pacto Federal</strong> ha regresado al epicentro político nacional. Diversas fuerzas locales proponen una revisión de fondo al <em>Sistema de Coordinación Fiscal</em>, argumentando que las fórmulas vigentes desde hace más de tres décadas no corresponden al dinamismo y a la aportación tributaria de cada estado.</p>
      
      <p>Los estados industrializados sostienen que por cada peso recaudado en sus territorios, reciben apenas una fracción de vuelta en participaciones federales. "No se trata de romper la solidaridad con los estados con mayor rezago, sino de incentivar la competitividad local", señalan portavoces de la mesa de análisis.</p>
      
      <h3>¿Hacia un nuevo acuerdo fiscal descentralizado?</h3>
      <p>Por otro lado, economistas del sector público advierten que de debilitarse el fondo general de participaciones, estados del sur con menores capacidades recaudatorias propias enfrentarían un colapso en servicios básicos como salud y educación. El balance entre <strong>equidad distributiva</strong> y <strong>justicia contributiva</strong> sigue siendo el nudo gordiano del desarrollo nacional.</p>
      
      <blockquote>"La federación es fuerte si sus partes constituyentes lo son. Una fórmula ciega a las vocaciones regionales perpetúa la ineficiencia fiscal." — Dra. Elena Villaseñor</blockquote>

      <h3>Preguntas Frecuentes sobre el Pacto Federal</h3>
      <div class="my-4 border-l-4 border-amber-500 bg-amber-50/50 p-4 rounded-r-md">
        <p class="font-bold text-slate-900">¿Qué es la Coordinación Fiscal?</p>
        <p class="text-sm text-slate-700 mt-1">Es el acuerdo mediante el cual los estados delegan sus facultades de cobro de ciertos impuestos federales (como el IVA y el ISR) a la Federación a cambio de recibir participaciones y aportaciones.</p>
      </div>
      <div class="my-4 border-l-4 border-amber-500 bg-amber-50/50 p-4 rounded-r-md">
        <p class="font-bold text-slate-900">¿Cuál es el principal argumento para reformarlo?</p>
        <p class="text-sm text-slate-700 mt-1">Los estados de alta productividad demandan mayor autonomía de gasto público y que el retorno de recursos se ajuste de forma proporcional a su recaudación local.</p>
      </div>
    `,
    imageUrl: 'https://picsum.photos/seed/federal/800/500',
    metatitle: 'Pacto Federal y Reforma Fiscal 2026 - Análisis InfoVerdad',
    metadescription: 'Análisis profundo sobre el Pacto Federal de Coordinación Fiscal en México y el impacto de la distribución de presupuestos en los estados.',
    keywords: 'pacto federal, coordinacion fiscal, presupuesto de egresos, finanzas publicas, elena villaseñor'
  },
  {
    id: 'art-2',
    title: 'Reforma Electoral Avanza: Debate por urnas digitales y diputaciones plurinominales',
    category: 'Nacional',
    date: '12 de Julio, 2026',
    author: 'Lic. Andrés Cardona',
    readTime: '4 min de lectura',
    views: 890,
    likes: 42,
    excerpt: 'El congreso debate la integración de tecnologías en casillas y la reducción presupuestal a partidos políticos para el siguiente año fiscal.',
    content: `
      <h2>Modernización Democrática en Disputa</h2>
      <p>El congreso federal ha abierto la mesa de dictamen para la nueva <strong>Reforma Electoral 2026</strong>. La iniciativa busca establecer la obligatoriedad del <strong>voto electrónico parametrizado</strong> en zonas metropolitanas, con miras a una transición tecnológica total en la próxima década.</p>
      
      <p>La propuesta central incluye reducir el financiamiento directo a los comités directivos de los partidos políticos durante años no electorales, liberando recursos para infraestructura educativa comunitaria. No obstante, los partidos de oposición consideran que esto asfixia el contrapeso democrático.</p>
      
      <h3>La polémica de las representaciones proporcionales</h3>
      <p>El segundo gran eje es la eliminación de un porcentaje sustancial de las diputaciones plurinominales. Defensores afirman que adelgazará el aparato del Estado y ahorrará millones de pesos anuales, mientras que críticos alertan que se silenciaría la voz de minorías representadas democráticamente.</p>
    `,
    imageUrl: 'https://picsum.photos/seed/voto/800/500',
    metatitle: 'Reforma Electoral 2026: Voto Electrónico y Plurinominales',
    metadescription: 'Sigue el debate legislativo sobre las reformas al sistema electoral, reducción de legisladores de representación proporcional y voto digital.',
    keywords: 'reforma electoral, diputados plurinominales, voto electronico, financiamiento de partidos, debate congreso'
  },
  {
    id: 'art-3',
    title: 'Istmo de Tehuantepec: El corredor interoceánico ante su prueba logística definitiva',
    category: 'Así Sucedió',
    date: '11 de Julio, 2026',
    author: 'Mtr. Santiago Landa',
    readTime: '5 min de lectura',
    views: 1105,
    likes: 67,
    excerpt: 'El corredor interoceánico incrementa su flujo de carga en un 40% trimestral, posicionándose como la alternativa real al congestionamiento del Canal de Panamá.',
    content: `
      <h2>El Istmo despierta el comercio global</h2>
      <p>La conexión interoceánica en el <strong>Istmo de Tehuantepec</strong> reporta su mayor pico de operaciones desde el inicio de operaciones comerciales reguladas. La congestión hídrica en vías fluviales tradicionales ha acelerado que navieras de gran calado adopten la vía terrestre-ferroviaria del istmo.</p>
      <p>Expertos señalan que el ahorro logístico de tiempo compensa los transbordos intermodales en los puertos habilitados, abriendo una ventana de oportunidad única para el desarrollo industrial de la región meridional del país.</p>
    `,
    imageUrl: 'https://picsum.photos/seed/istmo/800/500',
    metatitle: 'Corredor del Istmo de Tehuantepec en 2026 - Avances Logísticos',
    metadescription: 'Evaluación del Corredor Interoceánico y su impacto en el transporte global de mercancías compitiendo con el Canal de Panamá.',
    keywords: 'istmo de tehuantepec, corredor interoceanico, transporte ferroviario, desarrollo logistico, puertos'
  },
  {
    id: 'art-4',
    title: 'La era del rescate documental: Memoria digital en archivos históricos',
    category: 'Memoria Digital',
    date: '10 de Julio, 2026',
    author: 'Dra. Sofía Alarcón',
    readTime: '7 min de lectura',
    views: 642,
    likes: 31,
    excerpt: 'Proyectos ciudadanos impulsan el escaneo de alta resolución y almacenamiento distribuido de expedientes gubernamentales históricos.',
    content: `
      <h2>Patrimonio frente al desgaste del tiempo</h2>
      <p>Cientos de documentos que datan de la consolidación nacional se encuentran bajo amenaza de deterioro físico irreversible. Ante esto, colectivos independientes y centros de investigación han desplegado la iniciativa <strong>Memoria Digital Descentralizada</strong>.</p>
      <p>Mediante plataformas en la nube blindadas, se digitalizan testimonios legislativos y actas municipales de gran valor institucional, garantizando acceso libre y seguro para cualquier ciudadano o historiador.</p>
    `,
    imageUrl: 'https://picsum.photos/seed/archive/800/500',
    metatitle: 'Memoria Digital y Rescate de Archivos Históricos',
    metadescription: 'Conoce los proyectos de digitalización y resguardo de la memoria documental histórica nacional y su relevancia democrática.',
    keywords: 'memoria digital, archivos historicos, digitalizacion nacional, patrimonio cultural, transparencia'
  }
];

const DEFAULT_OPINIONS = [
  {
    id: 'op-1',
    author: 'Dr. Guillermo Ruiz',
    avatar: 'https://picsum.photos/seed/guillermo/100/100',
    title: 'La ética de la austeridad y la gobernanza moderna',
    quote: 'La austeridad no debe ser la amputación de la operatividad del Estado, sino la redistribución quirúrgica de los excesos hacia las necesidades estructurales de la ciudadanía.'
  },
  {
    id: 'op-2',
    author: 'Mtra. Jimena Castro',
    avatar: 'https://picsum.photos/seed/jimena/100/100',
    title: 'Inteligencia Artificial y fiscalización de cuentas públicas',
    quote: 'El análisis algorítmico de los presupuestos estatales reduce en un 90% los espacios de opacidad tributaria. El futuro de la rendición de cuentas es digital.'
  },
  {
    id: 'op-3',
    author: 'Ing. Alejandro Merino',
    avatar: 'https://picsum.photos/seed/alejandro/100/100',
    title: 'Sostenibilidad hídrica como pacto social urgente',
    quote: 'El agua no es un tema de obras públicas, es la base de la viabilidad democrática. Sin distribución hídrica eficiente, no hay paz social viable.'
  }
];

const DEFAULT_BANNERS: BannerAd[] = [
  {
    id: 'ban-leaderboard',
    title: 'InfoVerdad Suscripción Premium Editorial',
    imageUrl: 'https://images.unsplash.com/photo-1546410531-bb4caa6b424d?auto=format&fit=crop&w=1200&q=80',
    redirectUrl: '#suscripcion',
    location: 'leaderboard',
    active: true,
    targetCategories: ['Todos', 'Nuestra Verdad', 'Nacional']
  },
  {
    id: 'ban-sidebar',
    title: 'Pauta Pyme de Consultoría Legislativa Integral',
    imageUrl: 'https://images.unsplash.com/photo-1551836022-d5d88e9218df?auto=format&fit=crop&w=400&q=80',
    redirectUrl: '#consultoria',
    location: 'sidebar',
    active: true,
    targetCategories: ['Todos', 'Nacional', 'Estatal', 'Así Sucedió']
  },
  {
    id: 'ban-bottom',
    title: 'Foro Nacional de Políticas Públicas y Democracia 2026',
    imageUrl: 'https://images.unsplash.com/photo-1540575467063-178a50c2df87?auto=format&fit=crop&w=1200&q=80',
    redirectUrl: '#foro2026',
    location: 'bottom',
    active: true,
    targetCategories: ['Todos', 'Memoria Digital', 'Así Sucedió']
  }
];

// High quality templates for AI/SEO auto-generation simulations
const AI_ARTICLE_TEMPLATES = [
  {
    title: 'Crisis del Agua en Zonas Urbanas: Estrategias de Sostenibilidad y Gasto Público urgente',
    category: 'Estatal' as const,
    excerpt: 'La escasez hídrica se consolida como el principal desafío de gobernanza en las zonas metropolitanas. Administraciones estatales evalúan planes de infraestructura y cofinanciamiento.',
    imageUrl: 'https://picsum.photos/seed/water/800/500',
    content: `
      <h2>La encrucijada del suministro hídrico: Un problema estructural de presupuestos</h2>
      <p>En el panorama de la gobernanza estatal, la <strong>crisis de desabasto de agua</strong> ha escalado como prioridad nacional de seguridad. Estadísticas fidedignas indican que cerca del <strong>63% de los mantos acuíferos urbanos</strong> reportan condiciones severas de abatimiento físico, precipitando un replanteamiento urgente del gasto de infraestructura municipal.</p>
      
      <p>La discusión actual gira en torno a la eficiencia en la red de abastecimiento. Estimaciones técnicas de auditoría determinan que las fugas físicas en líneas de distribución deterioradas desperdician cerca de un <strong>42% del agua potable</strong> conducida, un gasto oculto inaceptable.</p>

      <h3>¿Inversión privada coordinada o soberanía hídrica directa?</h3>
      <p>Mientras legisladores federales promueven marcos legales que agilicen las asociaciones público-privadas (APP) para edificar desalinizadoras modernas y sistemas de saneamiento integral, otras corrientes argumentan que el control de un recurso vital debe resguardarse por entero bajo el manejo del sector público del Estado.</p>

      <blockquote>"No hay sostenibilidad fiscal sin sostenibilidad hídrica previa. Los planes estatales del próximo bienio deben enfocar el presupuesto en reparación de redes." — Foro de Planificación Urbana</blockquote>

      <h3>Preguntas Clave para el Entorno de Búsqueda y Resúmenes de IA</h3>
      <div class="my-4 border-l-4 border-amber-500 bg-amber-50/50 p-4 rounded-r-md">
        <p class="font-bold text-slate-900">¿Cuál es la causa principal de la escasez de agua en grandes urbes?</p>
        <p class="text-sm text-slate-700 mt-1">La crisis es consecuencia multifactorial de la falta de mantenimiento estructural de tuberías viejas, sobreexplotación descontrolada de mantos, cambio climático recurrente y planes deficientes de captación pluvial urbana.</p>
      </div>
      <div class="my-4 border-l-4 border-amber-500 bg-amber-50/50 p-4 rounded-r-md">
        <p class="font-bold text-slate-900">¿Qué soluciones presupuestales se proponen para el ejercicio 2026?</p>
        <p class="text-sm text-slate-700 mt-1">Se proyecta la inyección de fondos de emergencia equivalentes a un incremento del <strong>28%</strong> en el presupuesto sectorial para rehabilitar plantas de bombeo de agua gris y habilitar sistemas de captación en escuelas públicas.</p>
      </div>
    `,
    metatitle: 'Crisis del Agua Urbana 2026: Gobernanza, Fugas y Presupuestos Estatales',
    metadescription: 'Análisis profundo y soluciones del gasto público frente a la escasez de agua en urbes y el dilema de participación privada.',
    keywords: 'crisis del agua, agua potable, presupuesto estatal, infraestructura hidrica, saneamiento de agua, trend-bot'
  },
  {
    title: 'Soberanía Energética y Transición Verde: El financiamiento de plantas solares estatales',
    category: 'Nacional' as const,
    excerpt: 'El plan de fomento a energías limpias de 2026 proyecta la inauguración del parque solar más grande de América Latina, con una inversión transparente y comunitaria.',
    imageUrl: 'https://picsum.photos/seed/solar/800/500',
    content: `
      <h2>La carrera por la generación renovable y la soberanía del sistema eléctrico</h2>
      <p>La <strong>transición de la matriz energética</strong> se ha consolidado como el eje de la competitividad industrial moderna. Con un financiamiento coordinado, se proyecta la inyección de capital público para elevar en un <strong>15% la capacidad de generación fotovoltaica</strong> antes de culminar el presente ciclo de planeación gubernamental.</p>

      <p>Defensores de la transición energética recalcan que el costo nivelado de la energía solar es actualmente un <strong>60% más económico</strong> que el combustóleo tradicional, lo que incidirá favorablemente en las tarifas eléctricas residenciales de clase media y baja.</p>

      <h3>Infraestructura de Transmisión: El verdadero reto técnico</h3>
      <p>El debate actual de los ingenieros no reside en la generación, sino en la capacidad de las redes de transmisión para absorber el carácter intermitente de las fuentes limpias. Se requieren inversiones urgentes en baterías a gran escala de ion de litio.</p>

      <h3>Preguntas Clave para el Entorno de Búsqueda de IA</h3>
      <div class="my-4 border-l-4 border-amber-500 bg-amber-50/50 p-4 rounded-r-md">
        <p class="font-bold text-slate-900">¿Cómo beneficia la soberanía energética a las familias?</p>
        <p class="text-sm text-slate-700 mt-1">Garantiza tarifas de luz estables, reduce la dependencia de importación de gas natural y disminuye enfermedades respiratorias gracias al desplazamiento de plantas termoeléctricas de combustóleo.</p>
      </div>
    `,
    metatitle: 'Transición Verde 2026: Financiamiento de Energía Solar y Red Eléctrica',
    metadescription: 'Estudio de los proyectos solares estatales, tarifas eléctricas y el despliegue de redes inteligentes de transmisión energética.',
    keywords: 'energia solar, transicion energetica, soberania electrica, tarifas de luz, paneles solares, infraestructuras'
  },
  {
    title: 'Ciberseguridad del Estado: Fortalecimiento del blindaje digital frente a ataques foráneos',
    category: 'Así Sucedió' as const,
    excerpt: 'Crean el Consejo Nacional de Resiliencia Informática para proteger bases de datos ciudadanas clave tras alertas de intentos de vulneración internacional.',
    imageUrl: 'https://picsum.photos/seed/cyber/800/500',
    content: `
      <h2>Protección de la soberanía de la información en el entorno digital</h2>
      <p>En el marco de la seguridad interior, los activos digitales gubernamentales representan actualmente la frontera de mayor vulnerabilidad de una nación. Ante esto, el parlamento ha ratificado la creación de una entidad coordinadora de <strong>Ciberdefensa y Protección de Datos Personales</strong>.</p>

      <p>El nuevo organismo operará bajo un presupuesto dedicado del <strong>1.5% de la recaudación tributaria</strong>, y contará con la colaboración de expertos del sector privado y académico para auditar de forma continua los sistemas del registro civil, tributario y salud.</p>

      <h3>Preguntas Clave sobre Ciberseguridad Nacional</h3>
      <div class="my-4 border-l-4 border-amber-500 bg-amber-50/50 p-4 rounded-r-md">
        <p class="font-bold text-slate-900">¿Qué bases de datos estatales corren mayor peligro?</p>
        <p class="text-sm text-slate-700 mt-1">Las bases tributarias, los registros de identidad electoral y las historias de salud clínica concentran el mayor interés para grupos de hacking organizado internacional.</p>
      </div>
    `,
    metatitle: 'Ciberseguridad Estatal 2026: Protección de Datos y Ciberdefensa',
    metadescription: 'Análisis detallado de la estrategia de ciberdefensa nacional y la creación de la Comisión de Ciberresiliencia del Estado.',
    keywords: 'ciberseguridad estatal, proteccion de datos, ciberdefensa, seguridad nacional, hackeo, privacidad'
  }
];

export default function Home() {
  // --- APPLICATION STATE ---
  const [articles, setArticles] = useState<Article[]>([]);
  const [opinions, setOpinions] = useState<typeof DEFAULT_OPINIONS>(DEFAULT_OPINIONS);
  const [banners, setBanners] = useState<BannerAd[]>([]);
  const [selectedCategory, setSelectedCategory] = useState<string>('Todos');
  const [searchQuery, setSearchQuery] = useState<string>('');
  
  // Active Article reader modal
  const [activeArticle, setActiveArticle] = useState<Article | null>(null);
  
  // Citizen Complaint state
  const [complaintModalOpen, setComplaintModalOpen] = useState(false);
  const [citizenComplaints, setCitizenComplaints] = useState<CitizenComplaint[]>([]);
  const [complaintForm, setComplaintForm] = useState({
    name: '',
    email: '',
    location: '',
    subject: '',
    message: ''
  });
  const [complaintSubmitted, setComplaintSubmitted] = useState(false);

  // Hidden CMS states
  const [cmsOpen, setCmsOpen] = useState(false);
  const [cmsTab, setCmsTab] = useState<'articles' | 'banners' | 'seo'>('articles');
  
  // CMS Section 1: Article Creator
  const [articleForm, setArticleForm] = useState({
    id: '',
    title: '',
    category: 'Nuestra Verdad' as Article['category'],
    excerpt: '',
    content: '',
    imageUrl: '',
    author: 'Redacción InfoVerdad',
    readTime: '5 min de lectura',
    metatitle: '',
    metadescription: '',
    keywords: ''
  });
  const [editingArticleId, setEditingArticleId] = useState<string | null>(null);
  const [aiGenerating, setAiGenerating] = useState(false);
  const [aiGenerationStep, setAiGenerationStep] = useState('');

  // CMS Section 2: Banner Creator
  const [bannerForm, setBannerForm] = useState({
    id: 'ban-leaderboard',
    title: '',
    imageUrl: '',
    redirectUrl: '#',
    location: 'leaderboard' as BannerAd['location'],
    active: true,
    targetCategories: ['Todos']
  });

  // CMS Section 3: Global SEO
  const [globalSeo, setGlobalSeo] = useState({
    title: 'InfoVerdad | Periodismo Político Independiente y Análisis de Coyuntura',
    description: 'Investigación periodística libre de presiones corporativas, análisis estatal, nacional y rescate de la memoria digital.',
    keywords: 'noticias politicas, infoverdad, periodismo de investigacion, debate nacional, análisis estatal, mexico'
  });

  // Interactive Poll state
  const [pollVotes, setPollVotes] = useState({ optionA: 142, optionB: 231, optionC: 78 });
  const [hasVoted, setHasVoted] = useState(false);

  // --- LOCALSTORAGE PERSISTENCE AND SEEDING ---
  useEffect(() => {
    const timer = setTimeout(() => {
      // 1. Load or Seed Articles
      const savedArticles = localStorage.getItem('infoverdad_articles');
      if (savedArticles) {
        setArticles(JSON.parse(savedArticles));
      } else {
        setArticles(DEFAULT_ARTICLES);
        localStorage.setItem('infoverdad_articles', JSON.stringify(DEFAULT_ARTICLES));
      }

      // 2. Load or Seed Banners
      const savedBanners = localStorage.getItem('infoverdad_banners');
      if (savedBanners) {
        setBanners(JSON.parse(savedBanners));
      } else {
        setBanners(DEFAULT_BANNERS);
        localStorage.setItem('infoverdad_banners', JSON.stringify(DEFAULT_BANNERS));
      }

      // 3. Load or Seed Global SEO
      const savedSeo = localStorage.getItem('infoverdad_global_seo');
      if (savedSeo) {
        setGlobalSeo(JSON.parse(savedSeo));
      }

      // 4. Load or Seed Citizen Complaints
      const savedComplaints = localStorage.getItem('infoverdad_complaints');
      if (savedComplaints) {
        setCitizenComplaints(JSON.parse(savedComplaints));
      } else {
        const seedComplaints: CitizenComplaint[] = [
          {
            id: 'comp-1',
            name: 'Vecinos Organizados',
            email: 'vecinos@mail.com',
            location: 'Sector Centro',
            subject: 'Contaminación de afluente por descargas industriales',
            message: 'Solicitamos apoyo periodístico para denunciar las descargas de lodo químico sin filtrar en el arroyo local durante las madrugadas.',
            date: '12 de Julio, 2026',
            status: 'En Investigación'
          }
        ];
        setCitizenComplaints(seedComplaints);
        localStorage.setItem('infoverdad_complaints', JSON.stringify(seedComplaints));
      }
    }, 0);

    return () => clearTimeout(timer);
  }, []);

  // --- ACTIONS ---
  const saveArticlesToStorage = (updatedList: Article[]) => {
    setArticles(updatedList);
    localStorage.setItem('infoverdad_articles', JSON.stringify(updatedList));
  };

  const saveBannersToStorage = (updatedBanners: BannerAd[]) => {
    setBanners(updatedBanners);
    localStorage.setItem('infoverdad_banners', JSON.stringify(updatedBanners));
  };

  // Article creation/update handler
  const handleSaveArticle = (e: React.FormEvent) => {
    e.preventDefault();
    if (!articleForm.title || !articleForm.content) {
      alert('Por favor completa los campos de Título y Contenido.');
      return;
    }

    let updatedArticles = [...articles];
    if (editingArticleId) {
      // Edit existing
      updatedArticles = updatedArticles.map(art => 
        art.id === editingArticleId 
          ? { 
              ...art, 
              title: articleForm.title,
              category: articleForm.category,
              excerpt: articleForm.excerpt || articleForm.content.replace(/<[^>]*>/g, '').substring(0, 150) + '...',
              content: articleForm.content,
              imageUrl: articleForm.imageUrl || `https://picsum.photos/seed/${encodeURIComponent(articleForm.title)}/800/500`,
              author: articleForm.author,
              metatitle: articleForm.metatitle,
              metadescription: articleForm.metadescription,
              keywords: articleForm.keywords
            }
          : art
      );
      setEditingArticleId(null);
    } else {
      // Create new
      const newArt: Article = {
        id: `art-${Date.now()}`,
        title: articleForm.title,
        category: articleForm.category,
        date: new Date().toLocaleDateString('es-MX', { day: 'numeric', month: 'long', year: 'numeric' }),
        author: articleForm.author || 'Mesa de Redacción',
        readTime: articleForm.readTime || '5 min de lectura',
        views: 12,
        likes: 1,
        excerpt: articleForm.excerpt || articleForm.content.replace(/<[^>]*>/g, '').substring(0, 150) + '...',
        content: articleForm.content,
        imageUrl: articleForm.imageUrl || `https://picsum.photos/seed/${Date.now()}/800/500`,
        metatitle: articleForm.metatitle || articleForm.title,
        metadescription: articleForm.metadescription || articleForm.excerpt,
        keywords: articleForm.keywords || articleForm.category.toLowerCase()
      };
      updatedArticles = [newArt, ...updatedArticles];
    }

    saveArticlesToStorage(updatedArticles);
    setArticleForm({
      id: '',
      title: '',
      category: 'Nuestra Verdad',
      excerpt: '',
      content: '',
      imageUrl: '',
      author: 'Redacción InfoVerdad',
      readTime: '5 min de lectura',
      metatitle: '',
      metadescription: '',
      keywords: ''
    });
    alert('Artículo guardado con éxito e inyectado en el portal.');
  };

  const handleEditArticleClick = (art: Article) => {
    setEditingArticleId(art.id);
    setArticleForm({
      id: art.id,
      title: art.title,
      category: art.category,
      excerpt: art.excerpt,
      content: art.content,
      imageUrl: art.imageUrl,
      author: art.author,
      readTime: art.readTime,
      metatitle: art.metatitle || '',
      metadescription: art.metadescription || '',
      keywords: art.keywords || ''
    });
  };

  const handleDeleteArticle = (id: string) => {
    if (confirm('¿Estás seguro de que deseas eliminar permanentemente este artículo editorial?')) {
      const updated = articles.filter(art => art.id !== id);
      saveArticlesToStorage(updated);
    }
  };

  // Trend-Bot AI Generation simulation
  const handleGenerateWithAi = () => {
    setAiGenerating(true);
    setAiGenerationStep('1/4 Trend-Bot: Rastreando temas con alta tracción política y keywords SEO de volumen crítico...');
    
    setTimeout(() => {
      setAiGenerationStep('2/4 Algoritmo SEO: Generando estructura semántica H2/H3 y optimizando densidades...');
      
      setTimeout(() => {
        setAiGenerationStep('3/4 IA Writer: Formateando gancho inicial, datos clave en negritas y tabla de FAQs para resúmenes de IA...');
        
        setTimeout(() => {
          // Select a random template
          const randomIndex = Math.floor(Math.random() * AI_ARTICLE_TEMPLATES.length);
          const template = AI_ARTICLE_TEMPLATES[randomIndex];
          
          setArticleForm({
            id: '',
            title: template.title,
            category: template.category,
            excerpt: template.excerpt,
            content: template.content,
            imageUrl: template.imageUrl,
            author: 'Trend-Bot IA (SEO Predictivo)',
            readTime: '5 min de lectura',
            metatitle: template.metatitle,
            metadescription: template.metadescription,
            keywords: template.keywords
          });
          
          setAiGenerating(false);
          setAiGenerationStep('');
        }, 1200);
      }, 1200);
    }, 1200);
  };

  // Banner Update action
  const handleSaveBanner = (e: React.FormEvent) => {
    e.preventDefault();
    const updated = banners.map(ban => {
      if (ban.id === bannerForm.id) {
        return {
          ...ban,
          title: bannerForm.title || ban.title,
          imageUrl: bannerForm.imageUrl || ban.imageUrl,
          redirectUrl: bannerForm.redirectUrl || ban.redirectUrl,
          location: bannerForm.location,
          active: bannerForm.active,
          targetCategories: bannerForm.targetCategories
        };
      }
      return ban;
    });
    saveBannersToStorage(updated);
    alert('Configuración de Banner Publicitario actualizada e inyectada con éxito.');
  };

  const handleSelectBannerToEdit = (id: string) => {
    const selected = banners.find(b => b.id === id);
    if (selected) {
      setBannerForm({
        id: selected.id,
        title: selected.title,
        imageUrl: selected.imageUrl,
        redirectUrl: selected.redirectUrl,
        location: selected.location,
        active: selected.active,
        targetCategories: selected.targetCategories.length ? selected.targetCategories : ['Todos']
      });
    }
  };

  const handleToggleBannerStatus = (id: string) => {
    const updated = banners.map(b => b.id === id ? { ...b, active: !b.active } : b);
    saveBannersToStorage(updated);
  };

  // Citizen Complaint submission
  const handleSubmitComplaint = (e: React.FormEvent) => {
    e.preventDefault();
    if (!complaintForm.name || !complaintForm.message || !complaintForm.subject) {
      alert('Por favor rellena los campos requeridos para procesar la denuncia ciudadana.');
      return;
    }

    const newComplaint: CitizenComplaint = {
      id: `comp-${Date.now()}`,
      name: complaintForm.name,
      email: complaintForm.email || 'Anónimo',
      location: complaintForm.location || 'No especificado',
      subject: complaintForm.subject,
      message: complaintForm.message,
      date: new Date().toLocaleDateString('es-MX', { day: 'numeric', month: 'long', year: 'numeric' }),
      status: 'Recibido'
    };

    const updated = [newComplaint, ...citizenComplaints];
    setCitizenComplaints(updated);
    localStorage.setItem('infoverdad_complaints', JSON.stringify(updated));

    setComplaintSubmitted(true);
    setComplaintForm({ name: '', email: '', location: '', subject: '', message: '' });
    
    setTimeout(() => {
      setComplaintSubmitted(false);
      setComplaintModalOpen(false);
    }, 2500);
  };

  // Handle Poll Vote
  const handleVote = (option: 'optionA' | 'optionB' | 'optionC') => {
    if (hasVoted) return;
    setPollVotes(prev => ({
      ...prev,
      [option]: prev[option] + 1
    }));
    setHasVoted(true);
  };

  // Save Global SEO overrides
  const handleSaveGlobalSeo = (e: React.FormEvent) => {
    e.preventDefault();
    localStorage.setItem('infoverdad_global_seo', JSON.stringify(globalSeo));
    alert('Metatags de indexación global actualizados en el encabezado del portal (Simulación de Indexado Forzado de Coyuntura).');
  };

  // --- FILTER ARTICLES ---
  const filteredArticles = articles.filter(art => {
    const matchesCategory = selectedCategory === 'Todos' || art.category === selectedCategory;
    const matchesSearch = art.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
                          art.excerpt.toLowerCase().includes(searchQuery.toLowerCase()) ||
                          art.content.toLowerCase().includes(searchQuery.toLowerCase()) ||
                          art.author.toLowerCase().includes(searchQuery.toLowerCase());
    return matchesCategory && matchesSearch;
  });

  // Split into Hero elements vs Grid elements
  const mainArticle = filteredArticles[0] || null;
  const secondaryArticles = filteredArticles.slice(1, 4);
  const gridArticles = filteredArticles.slice(4);

  // Helper to retrieve active banner for a specific placeholder and category context
  const getActiveBanner = (location: 'leaderboard' | 'sidebar' | 'bottom') => {
    const banner = banners.find(b => b.location === location);
    if (!banner || !banner.active) return null;
    
    // Check segmentation
    const target = banner.targetCategories;
    if (target.includes('Todos') || target.includes(selectedCategory)) {
      return banner;
    }
    return null;
  };

  // SEO Audit Score Calculator
  const getSeoScore = () => {
    let score = 100;
    if (globalSeo.title.length < 40 || globalSeo.title.length > 60) score -= 15;
    if (globalSeo.description.length < 100 || globalSeo.description.length > 160) score -= 15;
    if (!globalSeo.keywords.includes('política')) score -= 10;
    if (!globalSeo.keywords.includes('coyuntura')) score -= 10;
    return Math.max(score, 50);
  };

  return (
    <div className="min-h-screen flex flex-col bg-gray-50/80 text-slate-800 selection:bg-amber-100 selection:text-slate-950 font-sans">
      
      {/* --- TOP HEADER (Institutional Vibe with Professional Polish) --- */}
      <header id="header-portal" className="border-b border-slate-200 bg-white">
        {/* Top band: Social, Date, Action */}
        <div className="bg-slate-950 text-white py-2.5 text-xs">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 flex justify-between items-center">
            <div className="flex items-center gap-4">
              <span className="flex items-center gap-1.5 font-mono text-[11px] text-slate-300 font-medium">
                <Calendar className="w-3.5 h-3.5 text-amber-500" />
                Lunes, 13 de Julio de 2026
              </span>
              <span className="hidden md:inline text-slate-700">|</span>
              <span className="hidden md:inline text-amber-500 font-black tracking-widest text-[9px] uppercase">PRENSA LIBRE INDEPENDIENTE DE MÉXICO</span>
            </div>
            
            <div className="flex items-center gap-4">
              <div className="hidden sm:flex gap-3 text-slate-400 text-[10px] font-bold font-mono">
                <span className="hover:text-amber-500 cursor-pointer transition-colors">FB</span>
                <span className="hover:text-amber-500 cursor-pointer transition-colors">X</span>
                <span className="hover:text-amber-500 cursor-pointer transition-colors">YT</span>
                <span className="hover:text-amber-500 cursor-pointer transition-colors">TG</span>
              </div>
              <span className="text-slate-800">|</span>
              <button 
                id="btn-denuncia"
                onClick={() => setComplaintModalOpen(true)}
                className="flex items-center gap-1.5 px-3 py-1 bg-amber-500 hover:bg-amber-600 active:scale-95 text-slate-950 font-extrabold rounded text-[10px] uppercase tracking-wider transition-all cursor-pointer shadow-xs"
              >
                <Megaphone className="w-3 h-3 text-slate-950 animate-pulse" />
                Denuncia Ciudadana
              </button>
            </div>
          </div>
        </div>

        {/* Core branding branding with modern editorial asymmetry */}
        <div className="max-w-7xl mx-auto px-4 sm:px-6 py-7 text-center">
          <div className="flex flex-col items-center justify-center">
            <span className="text-[9px] tracking-widest text-slate-400 font-extrabold uppercase mb-1">
              DIARIO DE INVESTIGACIÓN POLÍTICA Y FISCALIZACIÓN CIUDADANA
            </span>
            <h1 
              id="brand-logo" 
              onClick={() => { setSelectedCategory('Todos'); setSearchQuery(''); }}
              className="text-4xl sm:text-5xl font-serif font-black tracking-tighter cursor-pointer text-slate-950 select-none hover:opacity-90 transition-opacity flex items-center justify-center"
            >
              INFO<span className="text-sky-800">VERDAD</span><span className="text-amber-500 font-sans">.</span>
            </h1>
            <p className="text-xs sm:text-sm italic text-slate-500 max-w-lg mt-2 font-serif border-t border-slate-100 pt-2 leading-relaxed">
              &quot;La verdad sobre las políticas de Estado, sin mordazas ni sesgos.&quot;
            </p>
          </div>
        </div>
      </header>

      {/* --- MENU & NAVBAR (White modern design with pills) --- */}
      <nav id="main-navigation" className="sticky top-0 z-40 bg-white/95 backdrop-blur-md border-b border-slate-200/80 shadow-xs">
        <div className="max-w-7xl mx-auto px-4 sm:px-6">
          <div className="flex justify-between items-center h-14">
            
            {/* Nav Links - Rounded pill buttons */}
            <div className="flex overflow-x-auto scrollbar-none gap-2 py-2">
              {['Todos', 'Nuestra Verdad', 'Nacional', 'Estatal', 'Así Sucedió', 'Memoria Digital'].map((cat) => (
                <button
                  key={cat}
                  onClick={() => setSelectedCategory(cat)}
                  className={`px-3.5 py-1.5 text-xs font-bold uppercase tracking-wider whitespace-nowrap transition-all rounded-md cursor-pointer ${
                    selectedCategory === cat 
                      ? 'bg-slate-950 text-white shadow-sm' 
                      : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/70'
                  }`}
                >
                  {cat}
                </button>
              ))}
            </div>

            {/* Premium Search bar */}
            <div className="relative ml-2 w-36 sm:w-64">
              <span className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-slate-400">
                <Search className="w-3.5 h-3.5" />
              </span>
              <input
                type="text"
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                placeholder="Buscar coyuntura..."
                className="w-full pl-8.5 pr-3 py-1.5 text-xs sm:text-sm bg-slate-50 text-slate-800 placeholder-slate-400 rounded-md border border-slate-200 focus:outline-hidden focus:ring-1 focus:ring-amber-500 focus:border-amber-500 focus:bg-white transition-all"
              />
              {searchQuery && (
                <button 
                  onClick={() => setSearchQuery('')}
                  className="absolute inset-y-0 right-0 flex items-center pr-2.5 text-slate-400 hover:text-slate-700"
                >
                  <X className="w-3.5 h-3.5" />
                </button>
              )}
            </div>

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

      {/* --- LEADERBOARD BANNER SPACE --- */}
      {getActiveBanner('leaderboard') && (
        <div id="ad-leaderboard-space" className="w-full bg-slate-100 py-3 border-b border-slate-200">
          <div className="max-w-7xl mx-auto px-4 sm:px-6">
            <div className="relative bg-white border border-slate-300 rounded-md overflow-hidden max-h-32 shadow-2xs group">
              <a 
                href={getActiveBanner('leaderboard')?.redirectUrl} 
                target="_blank" 
                rel="noreferrer" 
                className="block flex items-center justify-between"
              >
                <div className="p-4 sm:p-6 max-w-xl z-10 bg-white/95">
                  <span className="text-[9px] font-bold tracking-widest text-amber-600 uppercase">PATROCINADO</span>
                  <h4 className="font-serif font-bold text-sm sm:text-lg text-slate-950 line-clamp-1 group-hover:text-sky-600 transition-colors">
                    {getActiveBanner('leaderboard')?.title}
                  </h4>
                  <p className="text-xs text-slate-500 hidden sm:block mt-0.5">Accede y apoya las iniciativas independientes asociadas a nuestro portal informativo.</p>
                </div>
                <div className="relative w-1/3 sm:w-1/2 h-24 sm:h-28 overflow-hidden">
                  <img 
                    src={getActiveBanner('leaderboard')?.imageUrl} 
                    alt="Publicidad Leaderboard"
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                  <div className="absolute inset-0 bg-linear-to-r from-white via-transparent to-transparent"></div>
                </div>
              </a>
            </div>
          </div>
        </div>
      )}

      {/* --- PORTAL MAIN GRID --- */}
      <main className="flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 py-6 sm:py-8">
        
        {/* News feed filters indicators (Professional Polish style) */}
        <div className="flex justify-between items-center mb-6 border-b border-slate-200 pb-3">
          <div className="flex items-center gap-2.5">
            <div className="w-1 h-6 bg-slate-950"></div>
            <h2 className="text-sm sm:text-base font-serif font-black text-slate-950 uppercase tracking-wider">
              {selectedCategory === 'Todos' ? 'MESA DE REDACCIÓN — ÚLTIMAS NOTICIAS' : `SECCIÓN — ${selectedCategory.toUpperCase()}`}
            </h2>
          </div>
          {searchQuery && (
            <span className="text-xs text-slate-500 italic">
              Resultados para: <strong className="text-slate-900">&quot;{searchQuery}&quot;</strong> ({filteredArticles.length})
            </span>
          )}
        </div>

        {filteredArticles.length === 0 ? (
          <div className="text-center py-16 bg-white border border-slate-200 rounded-lg p-8 shadow-2xs max-w-2xl mx-auto">
            <AlertTriangle className="w-12 h-12 text-amber-500 mx-auto mb-4" />
            <h3 className="text-lg font-serif font-bold text-slate-900">No se encontraron artículos</h3>
            <p className="text-sm text-slate-500 mt-2">
              No disponemos de reportes vigentes para la categoría o búsqueda seleccionada en este momento.
            </p>
            <button
              onClick={() => { setSelectedCategory('Todos'); setSearchQuery(''); }}
              className="mt-4 px-4 py-2 bg-slate-900 hover:bg-slate-800 text-white rounded text-xs font-semibold"
            >
              Restablecer Filtros
            </button>
          </div>
        ) : (
          <div className="space-y-12">
            
            {/* --- HERO ASYMMETRIC NEWS SECTION --- */}
            {selectedCategory === 'Todos' && !searchQuery && (
              <section id="hero-asymmetric-section" className="grid grid-cols-1 lg:grid-cols-12 gap-8">
                
                {/* Hero Left: Main Big Article */}
                {mainArticle && (
                  <article 
                    id={`hero-main-${mainArticle.id}`}
                    onClick={() => setActiveArticle(mainArticle)}
                    className="lg:col-span-7 bg-white border border-slate-200 rounded-lg overflow-hidden shadow-xs hover:shadow-md transition-all duration-300 cursor-pointer flex flex-col group hover:-translate-y-0.5"
                  >
                    <div className="relative h-64 sm:h-96 overflow-hidden bg-slate-100">
                      <img 
                        src={mainArticle.imageUrl} 
                        alt={mainArticle.title}
                        className="w-full h-full object-cover group-hover:scale-102 transition-transform duration-500"
                        onError={(e) => {
                          (e.target as HTMLImageElement).src = 'https://picsum.photos/seed/editorial/800/500';
                        }}
                      />
                      <div className="absolute top-4 left-4 bg-slate-950 text-amber-400 px-2.5 py-1 text-[10px] font-black tracking-widest uppercase shadow-md rounded-sm">
                        {mainArticle.category}
                      </div>
                    </div>
                    
                    <div className="p-6 flex-grow flex flex-col justify-between">
                      <div>
                        <div className="flex items-center gap-3 text-[10px] text-slate-400 font-mono mb-3">
                          <span className="flex items-center gap-1 font-semibold text-slate-600 uppercase">
                            <User className="w-3.5 h-3.5 text-slate-400" />
                            {mainArticle.author}
                          </span>
                          <span>•</span>
                          <span>{mainArticle.date.toUpperCase()}</span>
                          <span>•</span>
                          <span className="bg-slate-100 text-slate-600 px-1.5 py-0.5 rounded-sm uppercase text-[9px] font-bold">{mainArticle.readTime}</span>
                        </div>
                        <h3 className="text-xl sm:text-2xl lg:text-3xl font-serif font-black text-slate-950 leading-tight group-hover:text-amber-600 transition-colors">
                          {mainArticle.title}
                        </h3>
                        <p className="text-sm text-slate-600 mt-3 line-clamp-3 font-serif leading-relaxed">
                          {mainArticle.excerpt}
                        </p>
                      </div>
                      
                      <div className="mt-6 pt-4 border-t border-slate-100 flex items-center justify-between">
                        <span className="text-xs font-bold text-slate-900 flex items-center gap-1 group-hover:text-amber-600 transition-colors">
                          Leer Reportaje Completo <ArrowRight className="w-3.5 h-3.5 group-hover:translate-x-1 transition-transform" />
                        </span>
                        <span className="text-[10px] font-mono text-slate-400 uppercase tracking-wider">{mainArticle.views} lecturas</span>
                      </div>
                    </div>
                  </article>
                )}

                {/* Hero Right: 3 Stacked Secondary Articles */}
                <div className="lg:col-span-5 flex flex-col gap-5">
                  {secondaryArticles.map((art) => (
                    <article
                      key={art.id}
                      onClick={() => setActiveArticle(art)}
                      className="bg-white border border-slate-100 rounded-md p-3.5 flex gap-4 hover:shadow-xs hover:border-slate-200 transition-all cursor-pointer group hover:-translate-y-0.5"
                    >
                      <div className="relative w-20 h-20 sm:w-24 sm:h-24 rounded-md overflow-hidden shrink-0 bg-slate-100">
                        <img 
                          src={art.imageUrl} 
                          alt={art.title}
                          className="w-full h-full object-cover group-hover:scale-102 transition-transform duration-300"
                        />
                      </div>
                      <div className="flex flex-col justify-between flex-grow min-w-0">
                        <div>
                          <div className="flex items-center justify-between gap-1 mb-1 font-mono">
                            <span className="text-[9px] font-black uppercase text-amber-600 tracking-wider">
                              {art.category}
                            </span>
                            <span className="text-[9px] text-slate-400">{art.date}</span>
                          </div>
                          <h4 className="text-xs sm:text-sm font-serif font-bold text-slate-950 leading-snug line-clamp-2 group-hover:text-amber-600 transition-colors">
                            {art.title}
                          </h4>
                          <p className="text-xs text-slate-500 mt-1 line-clamp-1 hidden sm:block font-serif">
                            {art.excerpt}
                          </p>
                        </div>
                        <div className="flex justify-between items-center text-[9px] text-slate-400 mt-2 font-mono">
                          <span className="font-bold text-slate-500 uppercase">{art.author}</span>
                          <span>{art.readTime}</span>
                        </div>
                      </div>
                    </article>
                  ))}

                  {/* Quick stats panel inside Hero right if few articles */}
                  {secondaryArticles.length === 0 && (
                    <div className="bg-slate-50 border border-dashed border-slate-300 rounded-lg p-6 text-center text-slate-400">
                      Publica más artículos desde el CMS para llenar las columnas secundarias.
                    </div>
                  )}
                </div>

              </section>
            )}

            {/* --- MAIN STREAM NEWS GRID (For category filters or general flow) --- */}
            <section className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
              
              {/* Left Column: News grid (8 cols) */}
              <div className="lg:col-span-8 space-y-6">
                
                {/* Heading indicator for general news */}
                {(selectedCategory !== 'Todos' || searchQuery) && (
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                    {filteredArticles.map((art) => (
                      <article
                        key={art.id}
                        onClick={() => setActiveArticle(art)}
                        className="bg-white border border-slate-200 rounded-md overflow-hidden shadow-2xs hover:shadow-xs cursor-pointer flex flex-col group transition-all duration-300 hover:-translate-y-0.5"
                      >
                        <div className="relative h-44 overflow-hidden bg-slate-100">
                          <img src={art.imageUrl} alt={art.title} className="w-full h-full object-cover group-hover:scale-102 transition-transform duration-300" />
                          <span className="absolute top-3 left-3 bg-slate-950 text-amber-400 font-bold px-2 py-0.5 text-[9px] font-mono rounded-sm uppercase tracking-wider">
                            {art.category}
                          </span>
                        </div>
                        <div className="p-4 flex-grow flex flex-col justify-between">
                          <div>
                            <div className="text-[9px] font-mono text-slate-400 mb-1.5 uppercase">{art.date} • {art.readTime}</div>
                            <h4 className="text-sm sm:text-base font-serif font-bold text-slate-950 leading-tight line-clamp-2 group-hover:text-amber-600 transition-colors">
                              {art.title}
                            </h4>
                            <p className="text-xs text-slate-500 mt-2 line-clamp-2 font-serif leading-relaxed">{art.excerpt}</p>
                          </div>
                          <div className="mt-4 pt-3 border-t border-slate-100 flex justify-between items-center text-[9px] text-slate-400 font-mono">
                            <span className="font-bold text-slate-500 uppercase">{art.author}</span>
                            <span className="uppercase">{art.views} lecturas</span>
                          </div>
                        </div>
                      </article>
                    ))}
                  </div>
                )}

                {selectedCategory === 'Todos' && !searchQuery && gridArticles.length > 0 && (
                  <div>
                    <h3 className="text-xs font-serif font-black text-slate-950 uppercase border-b border-slate-200 pb-2 mb-4 tracking-widest">
                      ARCHIVO EDITORIAL COMPLEMENTARIO
                    </h3>
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                      {gridArticles.map((art) => (
                        <article
                          key={art.id}
                          onClick={() => setActiveArticle(art)}
                          className="bg-white border border-slate-200 rounded-md overflow-hidden shadow-2xs hover:shadow-xs cursor-pointer flex flex-col group transition-all duration-300 hover:-translate-y-0.5"
                        >
                          <div className="relative h-40 overflow-hidden bg-slate-100">
                            <img src={art.imageUrl} alt={art.title} className="w-full h-full object-cover group-hover:scale-102 transition-transform duration-300" />
                            <span className="absolute top-3 left-3 bg-slate-950 text-amber-400 font-bold px-2 py-0.5 text-[9px] font-mono rounded-sm uppercase tracking-wider">
                              {art.category}
                            </span>
                          </div>
                          <div className="p-4 flex-grow flex flex-col justify-between">
                            <div>
                              <div className="text-[9px] font-mono text-slate-400 mb-1.5 uppercase">{art.date} • {art.readTime}</div>
                              <h4 className="text-sm sm:text-base font-serif font-bold text-slate-950 leading-tight line-clamp-2 group-hover:text-amber-600 transition-colors">
                                {art.title}
                              </h4>
                              <p className="text-xs text-slate-500 mt-2 line-clamp-2 font-serif leading-relaxed">{art.excerpt}</p>
                            </div>
                            <div className="mt-4 pt-3 border-t border-slate-100 flex justify-between items-center text-[9px] text-slate-400 font-mono">
                              <span className="font-bold text-slate-500 uppercase">{art.author}</span>
                              <span className="uppercase">{art.views} lecturas</span>
                            </div>
                          </div>
                        </article>
                      ))}
                    </div>
                  </div>
                )}

                {/* --- OPINION & COLUMNS (La Voz de los Expertos - Polished Editorial) --- */}
                <section className="bg-slate-950 text-slate-100 rounded-lg p-6 border border-slate-800 shadow-lg">
                  <div className="flex items-center gap-2 mb-6 border-b border-slate-800 pb-3">
                    <span className="p-1.5 bg-amber-500 text-slate-950 rounded">
                      <FileText className="w-4 h-4" />
                    </span>
                    <h3 className="text-sm sm:text-base font-serif font-black tracking-widest text-white uppercase">
                      OPINIÓN Y ANÁLISIS DE COYUNTURA
                    </h3>
                  </div>

                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                    {opinions.map((op) => (
                      <div key={op.id} className="flex flex-col justify-between bg-slate-900/60 p-4 rounded-md border border-slate-800/80 hover:border-slate-700 hover:bg-slate-900 transition-all group">
                        <div>
                          <p className="text-xs italic text-slate-300 font-serif leading-relaxed">
                            &quot;{op.quote}&quot;
                          </p>
                        </div>
                        <div className="flex items-center gap-2.5 mt-4 pt-3 border-t border-slate-800">
                          <img 
                            src={op.avatar} 
                            alt={op.author}
                            className="w-8 h-8 rounded-full object-cover shrink-0 bg-slate-700 ring-1 ring-slate-800"
                          />
                          <div className="min-w-0">
                            <h5 className="text-xs font-bold text-white truncate">{op.author}</h5>
                            <p className="text-[10px] text-amber-500 truncate font-serif">{op.title}</p>
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </section>

              </div>

              {/* Right Column: Sidebar (Widgets, Ads, Live Poll) (4 cols) */}
              <div className="lg:col-span-4 space-y-6">
                
                {/* Interactive live poll with Professional Polish styling */}
                <div className="bg-white border border-slate-200 rounded-lg p-5 shadow-xs">
                  <div className="flex items-center gap-2 mb-4 pb-2 border-b border-slate-100">
                    <PieChart className="w-4 h-4 text-sky-800" />
                    <h4 className="font-serif font-black text-xs sm:text-sm text-slate-950 uppercase tracking-tight">
                      Consulta Ciudadana Directa
                    </h4>
                  </div>
                  
                  <p className="text-xs font-serif font-semibold text-slate-800 mb-4 leading-relaxed">
                    ¿Cuál de las siguientes reformas gubernamentales prioritarias del 2026 considera con mayor impacto directo?
                  </p>

                  <div className="space-y-3.5">
                    {/* Option A */}
                    <div>
                      <button
                        disabled={hasVoted}
                        onClick={() => handleVote('optionA')}
                        className={`w-full text-left p-2.5 rounded-md text-xs transition-all flex justify-between items-center border ${
                          hasVoted 
                            ? 'bg-slate-50 border-slate-100 cursor-default' 
                            : 'bg-slate-50 hover:bg-slate-100 border-slate-200/60 active:scale-99 cursor-pointer'
                        }`}
                      >
                        <span className="font-bold text-slate-700">Reforma al Pacto de Coordinación Fiscal</span>
                        <span className="font-mono text-slate-500 font-black">{pollVotes.optionA}</span>
                      </button>
                      {hasVoted && (
                        <div className="w-full bg-slate-100 h-1.5 rounded-full mt-1.5 overflow-hidden">
                          <div 
                            className="bg-sky-700 h-full rounded-full transition-all duration-1000" 
                            style={{ width: `${(pollVotes.optionA / (pollVotes.optionA + pollVotes.optionB + pollVotes.optionC)) * 100}%` }}
                          ></div>
                        </div>
                      )}
                    </div>

                    {/* Option B */}
                    <div>
                      <button
                        disabled={hasVoted}
                        onClick={() => handleVote('optionB')}
                        className={`w-full text-left p-2.5 rounded-md text-xs transition-all flex justify-between items-center border ${
                          hasVoted 
                            ? 'bg-slate-50 border-slate-100 cursor-default' 
                            : 'bg-slate-50 hover:bg-slate-100 border-slate-200/60 active:scale-99 cursor-pointer'
                        }`}
                      >
                        <span className="font-bold text-slate-700">Voto Electrónico y Ajuste Electoral</span>
                        <span className="font-mono text-slate-500 font-black">{pollVotes.optionB}</span>
                      </button>
                      {hasVoted && (
                        <div className="w-full bg-slate-100 h-1.5 rounded-full mt-1.5 overflow-hidden">
                          <div 
                            className="bg-amber-500 h-full rounded-full transition-all duration-1000" 
                            style={{ width: `${(pollVotes.optionB / (pollVotes.optionA + pollVotes.optionB + pollVotes.optionC)) * 100}%` }}
                          ></div>
                        </div>
                      )}
                    </div>

                    {/* Option C */}
                    <div>
                      <button
                        disabled={hasVoted}
                        onClick={() => handleVote('optionC')}
                        className={`w-full text-left p-2.5 rounded-md text-xs transition-all flex justify-between items-center border ${
                          hasVoted 
                            ? 'bg-slate-50 border-slate-100 cursor-default' 
                            : 'bg-slate-50 hover:bg-slate-100 border-slate-200/60 active:scale-99 cursor-pointer'
                        }`}
                      >
                        <span className="font-bold text-slate-700">Inversión Logística del Istmo</span>
                        <span className="font-mono text-slate-500 font-black">{pollVotes.optionC}</span>
                      </button>
                      {hasVoted && (
                        <div className="w-full bg-slate-100 h-1.5 rounded-full mt-1.5 overflow-hidden">
                          <div 
                            className="bg-emerald-600 h-full rounded-full transition-all duration-1000" 
                            style={{ width: `${(pollVotes.optionC / (pollVotes.optionA + pollVotes.optionB + pollVotes.optionC)) * 100}%` }}
                          ></div>
                        </div>
                      )}
                    </div>
                  </div>

                  {hasVoted ? (
                    <p className="text-[10px] text-emerald-700 font-semibold mt-4.5 text-center flex items-center justify-center gap-1 bg-emerald-50 py-1.5 rounded-md border border-emerald-100">
                      <CheckCircle2 className="w-3.5 h-3.5" /> ¡Voto registrado y sumado en tiempo real!
                    </p>
                  ) : (
                    <p className="text-[10px] text-slate-400 mt-4 text-center italic">
                      Haz clic en una opción para emitir tu opinión de forma anónima.
                    </p>
                  )}
                </div>

                {/* --- SIDEBAR PUBLICIDAD BANNER SPACE (Polished) --- */}
                {getActiveBanner('sidebar') ? (
                  <div id="ad-sidebar-space" className="bg-white border border-slate-200 rounded-lg p-3 shadow-xs">
                    <span className="text-[9px] font-extrabold tracking-widest text-slate-400 block mb-1.5 uppercase">PUBLICIDAD SEGMENTADA</span>
                    <a 
                      href={getActiveBanner('sidebar')?.redirectUrl}
                      target="_blank"
                      rel="noreferrer"
                      className="block overflow-hidden rounded-md relative group"
                    >
                      <img 
                        src={getActiveBanner('sidebar')?.imageUrl} 
                        alt="Anuncio Lateral"
                        className="w-full h-auto max-h-64 object-cover group-hover:scale-103 transition-transform duration-500"
                      />
                      <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-slate-950 via-slate-900/60 to-transparent p-3 text-white">
                        <h5 className="font-bold text-xs line-clamp-2 leading-tight">
                          {getActiveBanner('sidebar')?.title}
                        </h5>
                        <span className="text-[10px] text-amber-400 flex items-center gap-1 mt-1 font-semibold">
                          Saber más <ExternalLink className="w-2.5 h-2.5" />
                        </span>
                      </div>
                    </a>
                  </div>
                ) : (
                  <div className="bg-slate-50 border border-dashed border-slate-200 rounded-lg p-5 text-center text-xs text-slate-400">
                    <Megaphone className="w-5 h-5 text-slate-300 mx-auto mb-1.5" />
                    Pauta publicitaria lateral disponible. Configura desde la Mesa de Redacción.
                  </div>
                )}

                {/* Citizen complaints widget ticker (Professional Polish styling) */}
                <div className="bg-white border border-slate-200 rounded-lg p-5 shadow-xs">
                  <div className="flex items-center justify-between pb-2.5 mb-3.5 border-b border-slate-100">
                    <div className="flex items-center gap-1.5">
                      <ShieldAlert className="w-4 h-4 text-amber-500 animate-pulse" />
                      <h4 className="font-serif font-black text-xs sm:text-sm text-slate-950 uppercase tracking-tight">
                        Denuncias de la Comunidad
                      </h4>
                    </div>
                    <span className="bg-amber-100 text-amber-800 text-[10px] font-bold px-1.5 py-0.5 rounded-full">
                      {citizenComplaints.length}
                    </span>
                  </div>

                  <div className="space-y-3 max-h-72 overflow-y-auto pr-1">
                    {citizenComplaints.map((comp) => (
                      <div key={comp.id} className="p-3 bg-slate-50/70 rounded-md border border-slate-100 text-xs hover:bg-slate-50 transition-colors">
                        <div className="flex justify-between text-[10px] text-slate-400 mb-1">
                          <span className="font-bold truncate max-w-28 text-slate-600">{comp.name}</span>
                          <span>{comp.date}</span>
                        </div>
                        <h5 className="font-bold text-slate-950 leading-snug">{comp.subject}</h5>
                        <p className="text-slate-600 mt-1 line-clamp-2 font-serif leading-relaxed">{comp.message}</p>
                        <div className="mt-2 flex items-center justify-between pt-1.5 border-t border-slate-100/50">
                          <span className="text-[10px] text-slate-400">Lugar: <strong className="text-slate-600">{comp.location}</strong></span>
                          <span className="text-[9px] font-bold px-1.5 py-0.5 rounded bg-amber-500/10 text-amber-700 uppercase">
                            {comp.status}
                          </span>
                        </div>
                      </div>
                    ))}
                  </div>

                  <button
                    onClick={() => setComplaintModalOpen(true)}
                    className="w-full text-center mt-4.5 text-xs bg-slate-950 hover:bg-slate-800 text-white font-extrabold py-2.5 rounded-md uppercase tracking-wider transition-all cursor-pointer shadow-xs active:scale-98"
                  >
                    + Levantar Nueva Denuncia
                  </button>
                </div>

              </div>

            </section>

          </div>
        )}

      </main>

      {/* --- BOTTOM PUBLICIDAD BANNER SPACE --- */}
      {getActiveBanner('bottom') && (
        <div id="ad-bottom-space" className="w-full bg-slate-100 py-4 border-t border-b border-slate-200 mt-8">
          <div className="max-w-7xl mx-auto px-4 sm:px-6">
            <div className="relative bg-white border border-slate-300 rounded-md overflow-hidden max-h-24 shadow-2xs group">
              <a 
                href={getActiveBanner('bottom')?.redirectUrl} 
                target="_blank" 
                rel="noreferrer" 
                className="block flex items-center justify-between"
              >
                <div className="p-4 sm:p-5 max-w-xl z-10 bg-white/95">
                  <span className="text-[9px] font-bold tracking-widest text-emerald-600 uppercase">ANUNCIO OFICIAL</span>
                  <h4 className="font-serif font-bold text-xs sm:text-base text-slate-950 line-clamp-1 group-hover:text-sky-600 transition-colors">
                    {getActiveBanner('bottom')?.title}
                  </h4>
                  <p className="text-xs text-slate-500 hidden sm:block">Apoyo a la concientización y al desarrollo ciudadano.</p>
                </div>
                <div className="relative w-1/3 sm:w-1/2 h-20 sm:h-24 overflow-hidden">
                  <img 
                    src={getActiveBanner('bottom')?.imageUrl} 
                    alt="Publicidad Bottom"
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                  <div className="absolute inset-0 bg-linear-to-r from-white via-transparent to-transparent"></div>
                </div>
              </a>
            </div>
          </div>
        </div>
      )}

      {/* --- FOOTER --- */}
      <footer id="footer-portal" className="bg-slate-950 text-slate-300 border-t border-slate-800 py-12 mt-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8 pb-8 border-b border-slate-800">
            
            <div className="space-y-4">
              <h4 className="text-xl font-serif font-black tracking-tight text-white uppercase">
                INFO<span className="text-amber-500">VERDAD</span><span className="text-amber-500 font-sans">.</span>
              </h4>
              <p className="text-xs text-slate-400 font-serif leading-relaxed">
                Periodismo democrático e investigación política de vanguardia. Fiscalizando el poder y preservando la memoria pública en la era digital.
              </p>
              <p className="text-xs text-slate-500 font-mono">
                © {new Date().getFullYear()} InfoVerdad. Todos los derechos reservados.
              </p>
            </div>

            <div>
              <h5 className="text-xs font-bold uppercase text-amber-500 tracking-wider mb-3.5">Secciones del Portal</h5>
              <ul className="text-xs text-slate-400 space-y-2.5">
                {['Nuestra Verdad', 'Nacional', 'Estatal', 'Así Sucedió', 'Memoria Digital'].map(cat => (
                  <li key={cat}>
                    <button 
                      onClick={() => { setSelectedCategory(cat); window.scrollTo({ top: 0, behavior: 'smooth' }); }}
                      className="hover:text-white transition-colors cursor-pointer"
                    >
                      {cat}
                    </button>
                  </li>
                ))}
              </ul>
            </div>

            <div>
              <h5 className="text-xs font-bold uppercase text-amber-500 tracking-wider mb-3.5">Participación y Transparencia</h5>
              <ul className="text-xs text-slate-400 space-y-2.5">
                <li><button onClick={() => setComplaintModalOpen(true)} className="hover:text-white transition-colors cursor-pointer">Buzón de Denuncia Ciudadana</button></li>
                <li><span className="text-slate-500 cursor-not-allowed">Código de Ética de InfoVerdad</span></li>
                <li><span className="text-slate-500 cursor-not-allowed">Protocolo de Cifrado de Fuentes</span></li>
                <li><span className="text-slate-500 cursor-not-allowed">Políticas de Privacidad</span></li>
              </ul>
            </div>

            <div>
              <h5 className="text-xs font-bold uppercase text-amber-500 tracking-wider mb-3.5">Indexado y Metas SEO</h5>
              <div className="space-y-2.5 text-xs text-slate-400 font-mono bg-slate-900/60 p-3.5 rounded-md border border-slate-900/80">
                <p className="text-[10px] leading-tight text-slate-400 truncate">
                  <strong>MetaTitle:</strong> {globalSeo.title}
                </p>
                <p className="text-[10px] leading-tight text-slate-400 line-clamp-2">
                  <strong>MetaDesc:</strong> {globalSeo.description}
                </p>
              </div>
            </div>

          </div>

          <div className="flex flex-col sm:flex-row justify-between items-center text-xs text-slate-500">
            <p>Hecho para la rendición de cuentas pública en el periodismo mexicano.</p>
            
            {/* --- EXTREMELY SUBTLE CAMOUFLAGED CMS BUTTON --- */}
            <button
              id="hidden-admin-btn"
              onClick={() => { setCmsOpen(true); }}
              className="mt-4 sm:mt-0 text-[10px] text-slate-900 hover:text-slate-700 transition-colors duration-200 cursor-pointer flex items-center gap-1 select-none border border-slate-950 py-1 px-1.5 rounded-sm"
              title="Acceso Restringido a Mesa de Redacción"
            >
              <Settings className="w-3 h-3 text-slate-900" />
              <span>Admin Panel (Mesa de Redacción)</span>
            </button>
          </div>
        </div>
      </footer>

      {/* --- ARTICLE READER MODAL --- */}
      <AnimatePresence>
        {activeArticle && (
          <motion.div 
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-50 bg-black/75 backdrop-blur-xs flex items-center justify-center p-4 overflow-y-auto"
          >
            <motion.div 
              initial={{ scale: 0.95, y: 20 }}
              animate={{ scale: 1, y: 0 }}
              exit={{ scale: 0.95, y: 20 }}
              className="bg-white rounded-lg max-w-3xl w-full max-h-[90vh] overflow-y-auto shadow-2xl relative"
            >
              {/* Image banner */}
              <div className="relative h-48 sm:h-72 bg-slate-900">
                <img 
                  src={activeArticle.imageUrl} 
                  alt={activeArticle.title} 
                  className="w-full h-full object-cover opacity-90"
                />
                <button
                  onClick={() => setActiveArticle(null)}
                  className="absolute top-4 right-4 bg-slate-900/80 hover:bg-slate-900 text-white rounded-full p-1.5 transition-colors"
                >
                  <X className="w-5 h-5" />
                </button>
                <div className="absolute bottom-4 left-4">
                  <span className="bg-amber-500 text-slate-950 font-bold px-2 py-0.5 text-xs rounded uppercase">
                    {activeArticle.category}
                  </span>
                </div>
              </div>

              <div className="p-6 sm:p-8">
                {/* Meta details */}
                <div className="flex flex-wrap items-center gap-3 text-xs text-slate-500 mb-4">
                  <span className="flex items-center gap-1 font-bold text-slate-700">
                    <User className="w-3.5 h-3.5 text-slate-400" />
                    {activeArticle.author}
                  </span>
                  <span>•</span>
                  <span>Publicado: {activeArticle.date}</span>
                  <span>•</span>
                  <span className="bg-slate-100 text-slate-700 font-medium px-2 py-0.5 rounded">{activeArticle.readTime}</span>
                </div>

                <h2 className="text-2xl sm:text-3xl font-serif font-black text-slate-950 leading-tight mb-4">
                  {activeArticle.title}
                </h2>

                <p className="text-sm sm:text-base font-serif italic text-slate-600 bg-slate-50 p-4 border-l-4 border-sky-600 rounded-r-md leading-relaxed mb-6">
                  {activeArticle.excerpt}
                </p>

                {/* Article Content Body (Parsed HTML simulated) */}
                <div 
                  className="prose max-w-none text-slate-800 text-sm sm:text-base font-serif leading-relaxed space-y-4
                    [&>h2]:text-lg sm:[&>h2]:text-xl [&>h2]:font-bold [&>h2]:text-slate-950 [&>h2]:mt-6 [&>h2]:mb-2 [&>h2]:font-serif
                    [&>h3]:text-base sm:[&>h3]:text-lg [&>h3]:font-bold [&>h3]:text-slate-950 [&>h3]:mt-4 [&>h3]:mb-1 [&>h3]:font-serif
                    [&>p]:text-slate-700 [&>p]:leading-relaxed
                    [&>blockquote]:border-l-4 [&>blockquote]:border-amber-500 [&>blockquote]:pl-4 [&>blockquote]:italic [&>blockquote]:my-4 [&>blockquote]:text-slate-600"
                  dangerouslySetInnerHTML={{ __html: activeArticle.content }}
                />

                {/* Article SEO tags review for admin evaluation */}
                <div className="mt-8 pt-6 border-t border-slate-200">
                  <div className="bg-slate-50 rounded-lg p-4 text-xs font-mono">
                    <h5 className="font-bold text-slate-900 mb-2 flex items-center gap-1">
                      <Globe className="w-3.5 h-3.5 text-slate-500" /> Metatags de Indexación Local (SEO)
                    </h5>
                    <p className="text-[11px] text-slate-600 mb-1">
                      <strong>Metatítulo:</strong> {activeArticle.metatitle || activeArticle.title}
                    </p>
                    <p className="text-[11px] text-slate-600 mb-1">
                      <strong>Metadescripción:</strong> {activeArticle.metadescription || activeArticle.excerpt}
                    </p>
                    <p className="text-[11px] text-slate-600">
                      <strong>Keywords:</strong> {activeArticle.keywords || activeArticle.category.toLowerCase()}
                    </p>
                  </div>
                </div>

                <div className="mt-8 flex justify-between items-center">
                  <button
                    onClick={() => {
                      const updated = articles.map(art => art.id === activeArticle.id ? { ...art, likes: art.likes + 1 } : art);
                      saveArticlesToStorage(updated);
                      setActiveArticle(prev => prev ? { ...prev, likes: prev.likes + 1 } : null);
                    }}
                    className="flex items-center gap-1.5 px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-800 rounded-md font-bold text-xs transition-colors"
                  >
                    <ThumbsUp className="w-4 h-4 text-sky-600" />
                    Valorar Artículo ({activeArticle.likes})
                  </button>

                  <button
                    onClick={() => {
                      alert(`Enlace de InfoVerdad copiado al portapapeles (simulado): https://infoverdad.org/articulo/${activeArticle.id}`);
                    }}
                    className="flex items-center gap-1.5 px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-800 rounded-md font-bold text-xs transition-colors"
                  >
                    <Share2 className="w-4 h-4 text-slate-500" />
                    Compartir
                  </button>
                </div>

              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* --- CITIZEN COMPLAINT MODAL --- */}
      <AnimatePresence>
        {complaintModalOpen && (
          <motion.div 
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 z-50 bg-black/70 backdrop-blur-xs flex items-center justify-center p-4"
          >
            <motion.div 
              initial={{ scale: 0.95 }}
              animate={{ scale: 1 }}
              exit={{ scale: 0.95 }}
              className="bg-white rounded-lg max-w-lg w-full overflow-hidden shadow-2xl relative border-t-4 border-amber-500"
            >
              <div className="p-5 bg-slate-900 text-white flex justify-between items-center">
                <div className="flex items-center gap-2">
                  <Megaphone className="w-5 h-5 text-amber-500" />
                  <h3 className="font-serif font-black text-sm sm:text-base uppercase">
                    Buzón de Denuncia Ciudadana
                  </h3>
                </div>
                <button 
                  onClick={() => setComplaintModalOpen(false)}
                  className="text-slate-400 hover:text-white transition-colors"
                >
                  <X className="w-5 h-5" />
                </button>
              </div>

              <div className="p-6">
                {complaintSubmitted ? (
                  <div className="text-center py-8 space-y-3">
                    <CheckCircle2 className="w-14 h-14 text-emerald-500 mx-auto animate-bounce" />
                    <h4 className="text-lg font-serif font-bold text-slate-900">¡Denuncia Procesada Exitosamente!</h4>
                    <p className="text-sm text-slate-500 max-w-sm mx-auto">
                      Tu reporte ha sido asignado al buzón editorial de InfoVerdad. Iniciaremos el proceso de validación y contraste periodístico de forma confidencial.
                    </p>
                  </div>
                ) : (
                  <form onSubmit={handleSubmitComplaint} className="space-y-4">
                    <p className="text-xs text-slate-500 italic font-serif bg-amber-50 p-3 border-l-2 border-amber-500 rounded-r-md">
                      &quot;Garantizamos el anonimato absoluto de nuestras fuentes. Protegemos tu identidad bajo secreto profesional de prensa libre.&quot;
                    </p>

                    <div>
                      <label className="block text-xs font-bold uppercase text-slate-700 mb-1">Nombre o Colectivo (Opcional)</label>
                      <input 
                        type="text" 
                        value={complaintForm.name}
                        onChange={(e) => setComplaintForm({ ...complaintForm, name: e.target.value })}
                        placeholder="Escribe 'Anónimo' o tu nombre"
                        className="w-full border border-slate-300 rounded p-2 text-sm focus:outline-hidden focus:ring-1 focus:ring-amber-500 focus:border-amber-500"
                      />
                    </div>

                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                      <div>
                        <label className="block text-xs font-bold uppercase text-slate-700 mb-1">Correo Electrónico (Confidencial)</label>
                        <input 
                          type="email" 
                          value={complaintForm.email}
                          onChange={(e) => setComplaintForm({ ...complaintForm, email: e.target.value })}
                          placeholder="correo@ejemplo.com"
                          className="w-full border border-slate-300 rounded p-2 text-sm focus:outline-hidden focus:ring-1 focus:ring-amber-500 focus:border-amber-500"
                        />
                      </div>
                      <div>
                        <label className="block text-xs font-bold uppercase text-slate-700 mb-1">Municipio o Localidad de Origen</label>
                        <input 
                          type="text" 
                          value={complaintForm.location}
                          onChange={(e) => setComplaintForm({ ...complaintForm, location: e.target.value })}
                          placeholder="Ej. Sector Poniente"
                          className="w-full border border-slate-300 rounded p-2 text-sm focus:outline-hidden focus:ring-1 focus:ring-amber-500 focus:border-amber-500"
                        />
                      </div>
                    </div>

                    <div>
                      <label className="block text-xs font-bold uppercase text-slate-700 mb-1">Asunto de la Denuncia *</label>
                      <input 
                        type="text" 
                        required
                        value={complaintForm.subject}
                        onChange={(e) => setComplaintForm({ ...complaintForm, subject: e.target.value })}
                        placeholder="Ej. Desvío de insumos hospitalarios municipales"
                        className="w-full border border-slate-300 rounded p-2 text-sm focus:outline-hidden focus:ring-1 focus:ring-amber-500"
                      />
                    </div>

                    <div>
                      <label className="block text-xs font-bold uppercase text-slate-700 mb-1">Relato Detallado de los Hechos *</label>
                      <textarea 
                        required
                        rows={4}
                        value={complaintForm.message}
                        onChange={(e) => setComplaintForm({ ...complaintForm, message: e.target.value })}
                        placeholder="Especifica fechas, nombres de funcionarios involucrados y pruebas disponibles si cuentas con ellas..."
                        className="w-full border border-slate-300 rounded p-2 text-sm focus:outline-hidden focus:ring-1 focus:ring-amber-500"
                      ></textarea>
                    </div>

                    <div className="pt-2 flex justify-end gap-3 border-t border-slate-100">
                      <button
                        type="button"
                        onClick={() => setComplaintModalOpen(false)}
                        className="px-4 py-2 border border-slate-300 hover:bg-slate-100 rounded text-xs font-bold transition-colors"
                      >
                        Cancelar
                      </button>
                      <button
                        type="submit"
                        className="px-4 py-2 bg-amber-500 hover:bg-amber-600 text-slate-950 rounded text-xs font-bold transition-all shadow-xs flex items-center gap-1"
                      >
                        Enviar Reporte Seguro
                      </button>
                    </div>

                  </form>
                )}
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* --- CMS EDITORIAL INTERN DASHBOARD (Fullscreen modal) --- */}
      <AnimatePresence>
        {cmsOpen && (
          <motion.div 
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: 30 }}
            className="fixed inset-0 z-50 bg-slate-950 flex flex-col text-slate-200"
          >
            {/* Header of CMS */}
            <div className="bg-slate-900 border-b border-slate-800 px-6 py-4 flex justify-between items-center">
              <div className="flex items-center gap-3">
                <span className="p-2 bg-sky-600 text-white rounded-md">
                  <Settings className="w-5 h-5 animate-spin-slow" />
                </span>
                <div>
                  <h2 className="text-lg font-serif font-black tracking-tight text-white uppercase">
                    INFOVERDAD - Centro de Control Editorial Interno
                  </h2>
                  <p className="text-[11px] text-slate-400 font-mono">Control de indexado inmediato y curaduría publicitaria</p>
                </div>
              </div>

              <div className="flex items-center gap-3">
                <span className="hidden md:inline-flex items-center gap-1.5 px-3 py-1 rounded bg-emerald-500/10 text-emerald-400 font-mono text-[10px] border border-emerald-500/20">
                  <span className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
                  Trend-Bot En Línea (SEO Predictivo)
                </span>
                <button
                  onClick={() => setCmsOpen(false)}
                  className="flex items-center gap-1 px-3 py-1.5 bg-slate-800 hover:bg-slate-700 text-white text-xs font-bold rounded transition-colors"
                >
                  <X className="w-4 h-4" /> Cerrar Mesa Redacción
                </button>
              </div>
            </div>

            {/* Sub-nav: Tabs for CMS */}
            <div className="bg-slate-900/40 border-b border-slate-800/80 px-6 flex overflow-x-auto scrollbar-none shrink-0">
              <button
                onClick={() => setCmsTab('articles')}
                className={`py-3.5 px-4 text-xs font-bold border-b-2 uppercase tracking-wider whitespace-nowrap transition-all flex items-center gap-2 ${
                  cmsTab === 'articles' 
                    ? 'border-amber-500 text-amber-400 bg-slate-900/80' 
                    : 'border-transparent text-slate-400 hover:text-white'
                }`}
              >
                <FileText className="w-4 h-4" /> 1. Redacción y Blog (IA/SEO)
              </button>
              <button
                onClick={() => { setCmsTab('banners'); handleSelectBannerToEdit('ban-leaderboard'); }}
                className={`py-3.5 px-4 text-xs font-bold border-b-2 uppercase tracking-wider whitespace-nowrap transition-all flex items-center gap-2 ${
                  cmsTab === 'banners' 
                    ? 'border-amber-500 text-amber-400 bg-slate-900/80' 
                    : 'border-transparent text-slate-400 hover:text-white'
                }`}
              >
                <Megaphone className="w-4 h-4" /> 2. Banners y Pauta Segmentada
              </button>
              <button
                onClick={() => setCmsTab('seo')}
                className={`py-3.5 px-4 text-xs font-bold border-b-2 uppercase tracking-wider whitespace-nowrap transition-all flex items-center gap-2 ${
                  cmsTab === 'seo' 
                    ? 'border-amber-500 text-amber-400 bg-slate-900/80' 
                    : 'border-transparent text-slate-400 hover:text-white'
                }`}
              >
                <Globe className="w-4 h-4" /> 3. SEO Global y Auditorías
              </button>
            </div>

            {/* Main scrollable body of CMS */}
            <div className="flex-grow overflow-y-auto p-6 md:p-8 bg-slate-950 text-slate-300">
              
              {/* --- SECTION 1: WRITE & MANAGE BLOG (WITH IA AUTO-GENERATION) --- */}
              {cmsTab === 'articles' && (
                <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
                  
                  {/* Left block of S1: Form */}
                  <div className="lg:col-span-7 bg-slate-900 p-6 rounded-lg border border-slate-800">
                    <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center pb-4 mb-6 border-b border-slate-800 gap-3">
                      <div className="flex items-center gap-2">
                        <Sparkles className="w-5 h-5 text-amber-400" />
                        <h3 className="font-serif font-black text-sm sm:text-base text-white uppercase">
                          {editingArticleId ? 'Editar Reportaje Editorial' : 'Mesa de Redacción - Nueva Pieza'}
                        </h3>
                      </div>
                      
                      <button
                        type="button"
                        disabled={aiGenerating}
                        onClick={handleGenerateWithAi}
                        className="w-full sm:w-auto px-3.5 py-1.5 bg-sky-600 hover:bg-sky-500 disabled:bg-slate-800 disabled:text-slate-500 text-slate-950 font-black rounded text-xs transition-colors shadow-xs flex items-center justify-center gap-1.5"
                      >
                        <Sparkles className="w-3.5 h-3.5 text-slate-950 animate-bounce" />
                        {aiGenerating ? 'Generando con IA...' : 'Generar Artículo con IA (SEO Predictivo)'}
                      </button>
                    </div>

                    {aiGenerating && (
                      <div className="mb-6 bg-sky-950/40 border border-sky-800/40 rounded p-4 text-xs font-mono text-sky-300 animate-pulse">
                        <p className="flex items-center gap-2">
                          <span className="w-3 h-3 border-2 border-sky-400 border-t-transparent rounded-full animate-spin"></span>
                          {aiGenerationStep}
                        </p>
                      </div>
                    )}

                    <form onSubmit={handleSaveArticle} className="space-y-4">
                      
                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                          <label className="block text-xs font-bold uppercase text-slate-400 mb-1">Título del Artículo *</label>
                          <input 
                            type="text" 
                            required
                            placeholder="Ej. Análisis de la Deuda Pública del Municipio"
                            value={articleForm.title}
                            onChange={(e) => setArticleForm({ ...articleForm, title: e.target.value })}
                            className="w-full bg-slate-950 border border-slate-800 rounded p-2 text-sm text-slate-100 focus:outline-hidden focus:border-amber-500"
                          />
                        </div>
                        <div>
                          <label className="block text-xs font-bold uppercase text-slate-400 mb-1">Sección de Destino</label>
                          <select
                            value={articleForm.category}
                            onChange={(e) => setArticleForm({ ...articleForm, category: e.target.value as Article['category'] })}
                            className="w-full bg-slate-950 border border-slate-800 rounded p-2 text-sm text-slate-100 focus:outline-hidden focus:border-amber-500"
                          >
                            <option value="Nuestra Verdad">Nuestra Verdad</option>
                            <option value="Nacional">Nacional</option>
                            <option value="Estatal">Estatal</option>
                            <option value="Así Sucedió">Así Sucedió</option>
                            <option value="Memoria Digital">Memoria Digital</option>
                          </select>
                        </div>
                      </div>

                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                          <label className="block text-xs font-bold uppercase text-slate-400 mb-1">Periodista Firma / Autor</label>
                          <input 
                            type="text" 
                            value={articleForm.author}
                            onChange={(e) => setArticleForm({ ...articleForm, author: e.target.value })}
                            className="w-full bg-slate-950 border border-slate-800 rounded p-2 text-sm text-slate-100 focus:outline-hidden"
                          />
                        </div>
                        <div>
                          <label className="block text-xs font-bold uppercase text-slate-400 mb-1">Estimación de Lectura</label>
                          <input 
                            type="text" 
                            value={articleForm.readTime}
                            onChange={(e) => setArticleForm({ ...articleForm, readTime: e.target.value })}
                            className="w-full bg-slate-950 border border-slate-800 rounded p-2 text-sm text-slate-100 focus:outline-hidden"
                          />
                        </div>
                      </div>

                      <div>
                        <label className="block text-xs font-bold uppercase text-slate-400 mb-1">Imagen del Reportaje (URL o Placeholder)</label>
                        <div className="flex gap-2">
                          <input 
                            type="text" 
                            placeholder="https://picsum.photos/..."
                            value={articleForm.imageUrl}
                            onChange={(e) => setArticleForm({ ...articleForm, imageUrl: e.target.value })}
                            className="w-full bg-slate-950 border border-slate-800 rounded p-2 text-sm text-slate-100 focus:outline-hidden"
                          />
                          <button
                            type="button"
                            onClick={() => {
                              const seed = Date.now();
                              setArticleForm(prev => ({ ...prev, imageUrl: `https://picsum.photos/seed/${seed}/800/500` }));
                            }}
                            className="px-3 bg-slate-800 hover:bg-slate-700 text-white rounded text-xs shrink-0 font-bold transition-colors"
                          >
                            Aleatorio
                          </button>
                        </div>
                        {articleForm.imageUrl && (
                          <div className="mt-2 h-24 w-full relative rounded overflow-hidden border border-slate-800 bg-slate-950">
                            <img src={articleForm.imageUrl} alt="Preview" className="w-full h-full object-cover" />
                            <span className="absolute bottom-1 right-1 bg-slate-900 text-amber-400 px-1.5 py-0.5 text-[9px] font-mono rounded">PREVISUALIZACIÓN DE IMAGEN</span>
                          </div>
                        )}
                      </div>

                      <div>
                        <label className="block text-xs font-bold uppercase text-slate-400 mb-1">Entrada / Copete Resumen (Para el SEO Snippet)</label>
                        <textarea 
                          rows={2}
                          placeholder="Un resumen ganchero de 2 líneas para indexación y redes..."
                          value={articleForm.excerpt}
                          onChange={(e) => setArticleForm({ ...articleForm, excerpt: e.target.value })}
                          className="w-full bg-slate-950 border border-slate-800 rounded p-2 text-sm text-slate-100 focus:outline-hidden focus:border-amber-500"
                        ></textarea>
                      </div>

                      <div>
                        <label className="block text-xs font-bold uppercase text-slate-400 mb-1">Contenido de la Noticia (Soporta HTML Semántico)*</label>
                        <p className="text-[10px] text-slate-500 mb-1.5 font-mono">
                          Tip: Puedes usar las etiquetas HTML semánticas como &lt;h2&gt;, &lt;h3&gt;, &lt;strong&gt;, &lt;blockquote&gt; para organizar tu artículo y optimizar para la IA de búsqueda.
                        </p>
                        <textarea 
                          required
                          rows={6}
                          placeholder="Escribe el cuerpo de tu nota..."
                          value={articleForm.content}
                          onChange={(e) => setArticleForm({ ...articleForm, content: e.target.value })}
                          className="w-full bg-slate-950 border border-slate-800 rounded p-2.5 text-sm text-slate-100 focus:outline-hidden font-serif"
                        ></textarea>
                      </div>

                      {/* Local SEO panel per article */}
                      <div className="p-4 bg-slate-950 border border-slate-800/80 rounded-md">
                        <h4 className="text-xs font-bold text-white uppercase tracking-wider mb-2 flex items-center gap-1">
                          <Globe className="w-3.5 h-3.5 text-sky-400" /> Optimización SEO Local del Artículo
                        </h4>
                        
                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                          <div>
                            <label className="block text-[10px] uppercase text-slate-500 mb-1">Metatítulo del Artículo</label>
                            <input 
                              type="text" 
                              placeholder="Ej. Pacto Federal en 2026 | Análisis"
                              value={articleForm.metatitle}
                              onChange={(e) => setArticleForm({ ...articleForm, metatitle: e.target.value })}
                              className="w-full bg-slate-900 border border-slate-800 rounded p-1.5 text-xs text-slate-200 focus:outline-hidden"
                            />
                          </div>
                          <div>
                            <label className="block text-[10px] uppercase text-slate-500 mb-1">Keywords Focalizadas</label>
                            <input 
                              type="text" 
                              placeholder="coyuntura, pacto federal, finanzas publicas"
                              value={articleForm.keywords}
                              onChange={(e) => setArticleForm({ ...articleForm, keywords: e.target.value })}
                              className="w-full bg-slate-900 border border-slate-800 rounded p-1.5 text-xs text-slate-200 focus:outline-hidden"
                            />
                          </div>
                        </div>
                        <div className="mt-2.5">
                          <label className="block text-[10px] uppercase text-slate-500 mb-1">Metadescripción del Artículo</label>
                          <input 
                            type="text" 
                            placeholder="Resumen SEO óptimo..."
                            value={articleForm.metadescription}
                            onChange={(e) => setArticleForm({ ...articleForm, metadescription: e.target.value })}
                            className="w-full bg-slate-900 border border-slate-800 rounded p-1.5 text-xs text-slate-200 focus:outline-hidden"
                          />
                        </div>
                      </div>

                      <div className="pt-2 flex justify-between gap-3 border-t border-slate-800">
                        {editingArticleId && (
                          <button
                            type="button"
                            onClick={() => {
                              setEditingArticleId(null);
                              setArticleForm({
                                id: '',
                                title: '',
                                category: 'Nuestra Verdad',
                                excerpt: '',
                                content: '',
                                imageUrl: '',
                                author: 'Redacción InfoVerdad',
                                readTime: '5 min de lectura',
                                metatitle: '',
                                metadescription: '',
                                keywords: ''
                              });
                            }}
                            className="px-4 py-2 border border-slate-800 hover:bg-slate-800 rounded text-xs font-bold transition-colors text-slate-400"
                          >
                            Cancelar Edición
                          </button>
                        )}
                        <div className="ml-auto flex gap-2">
                          <button
                            type="submit"
                            className="px-5 py-2.5 bg-amber-500 hover:bg-amber-600 text-slate-950 rounded text-xs font-black transition-all shadow-md"
                          >
                            {editingArticleId ? 'Guardar Cambios' : 'Publicar en Portada'}
                          </button>
                        </div>
                      </div>

                    </form>
                  </div>

                  {/* Right block of S1: List of published */}
                  <div className="lg:col-span-5 bg-slate-900 p-6 rounded-lg border border-slate-800 space-y-4">
                    <h3 className="font-serif font-black text-sm text-white uppercase border-b border-slate-800 pb-2 flex items-center gap-2">
                      <FileText className="w-4 h-4 text-sky-400" /> Artículos en Portada ({articles.length})
                    </h3>

                    <div className="space-y-3 max-h-[600px] overflow-y-auto pr-1">
                      {articles.map((art) => (
                        <div 
                          key={art.id} 
                          className="p-3 bg-slate-950 rounded border border-slate-800 flex gap-3 group items-center justify-between"
                        >
                          <div className="flex gap-2 items-center min-w-0">
                            <img 
                              src={art.imageUrl} 
                              alt="Thumbnail" 
                              className="w-12 h-12 rounded object-cover shrink-0 bg-slate-800"
                              onError={(e) => {
                                (e.target as HTMLImageElement).src = 'https://picsum.photos/seed/thumb/100/100';
                              }}
                            />
                            <div className="min-w-0">
                              <span className="text-[9px] font-black uppercase text-amber-500">{art.category}</span>
                              <h5 className="font-bold text-xs text-white truncate">{art.title}</h5>
                              <p className="text-[10px] text-slate-500 font-mono">Por: {art.author}</p>
                            </div>
                          </div>

                          <div className="flex items-center gap-1.5 shrink-0">
                            <button
                              onClick={() => handleEditArticleClick(art)}
                              className="p-1 text-slate-400 hover:text-sky-400 transition-colors bg-slate-900 hover:bg-slate-800 rounded"
                              title="Editar reportaje"
                            >
                              <Edit3 className="w-3.5 h-3.5" />
                            </button>
                            <button
                              onClick={() => handleDeleteArticle(art.id)}
                              className="p-1 text-slate-400 hover:text-red-400 transition-colors bg-slate-900 hover:bg-slate-800 rounded"
                              title="Eliminar reportaje"
                            >
                              <Trash2 className="w-3.5 h-3.5" />
                            </button>
                          </div>
                        </div>
                      ))}
                    </div>

                    <div className="p-3 bg-slate-950 border border-slate-800/80 rounded-md text-[11px] text-slate-400 leading-normal space-y-1">
                      <p className="font-bold text-white flex items-center gap-1">
                        <Info className="w-3.5 h-3.5 text-amber-500" /> Notas de Curaduría Editorial:
                      </p>
                      <p>• Los artículos generados con la herramienta **Trend-Bot IA** se inyectan en tiempo real en la base local del portal público.</p>
                      <p>• La simulación genera automáticamente bloques de Preguntas y Respuestas para posicionar en la preselección de búsquedas inteligentes.</p>
                    </div>

                  </div>

                </div>
              )}

              {/* --- SECTION 2: LOAD BANNERS & SEGMENTED INJECTION --- */}
              {cmsTab === 'banners' && (
                <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
                  
                  {/* Left block S2: Banner Form */}
                  <div className="lg:col-span-6 bg-slate-900 p-6 rounded-lg border border-slate-800">
                    <h3 className="font-serif font-black text-sm text-white uppercase border-b border-slate-800 pb-2 mb-6 flex items-center gap-2">
                      <Megaphone className="w-4 h-4 text-amber-500" /> Configuración de Pauta Publicitaria
                    </h3>

                    <form onSubmit={handleSaveBanner} className="space-y-4">
                      
                      <div>
                        <label className="block text-xs font-bold uppercase text-slate-400 mb-1">Puesto Publicitario / Ubicación del Slot</label>
                        <select
                          value={bannerForm.id}
                          onChange={(e) => {
                            const val = e.target.value;
                            handleSelectBannerToEdit(val);
                          }}
                          className="w-full bg-slate-950 border border-slate-800 rounded p-2 text-sm text-slate-100 focus:outline-hidden"
                        >
                          <option value="ban-leaderboard">Leaderboard Superior (Horizontal bajo Navbar)</option>
                          <option value="ban-sidebar">Widget Lateral (En barra de opiniones y datos)</option>
                          <option value="ban-bottom">Banner de Cierre (Horizontal bajo artículos)</option>
                        </select>
                      </div>

                      <div>
                        <label className="block text-xs font-bold uppercase text-slate-400 mb-1">Nombre o Título del Patrocinio</label>
                        <input 
                          type="text" 
                          placeholder="Ej. Suscríbete a InfoVerdad Premium"
                          value={bannerForm.title}
                          onChange={(e) => setBannerForm({ ...bannerForm, title: e.target.value })}
                          className="w-full bg-slate-950 border border-slate-800 rounded p-2 text-sm text-slate-100 focus:outline-hidden"
                        />
                      </div>

                      <div>
                        <label className="block text-xs font-bold uppercase text-slate-400 mb-1">Enlace de Imagen Publicitaria (AdSense o Pauta Interna)</label>
                        <input 
                          type="text" 
                          placeholder="https://..."
                          value={bannerForm.imageUrl}
                          onChange={(e) => setBannerForm({ ...bannerForm, imageUrl: e.target.value })}
                          className="w-full bg-slate-950 border border-slate-800 rounded p-2 text-sm text-slate-100 focus:outline-hidden"
                        />
                      </div>

                      <div>
                        <label className="block text-xs font-bold uppercase text-slate-400 mb-1">Enlace de Destino (Redirect URL)</label>
                        <input 
                          type="text" 
                          placeholder="#"
                          value={bannerForm.redirectUrl}
                          onChange={(e) => setBannerForm({ ...bannerForm, redirectUrl: e.target.value })}
                          className="w-full bg-slate-950 border border-slate-800 rounded p-2 text-sm text-slate-100 focus:outline-hidden"
                        />
                      </div>

                      {/* Segmented Injection selector */}
                      <div>
                        <label className="block text-xs font-bold uppercase text-slate-400 mb-1">Inyección Segmentada (Seleccionar Sección de Visibilidad)</label>
                        <p className="text-[10px] text-slate-500 mb-2 font-mono">
                          El banner solo se renderizará cuando el usuario explore o visualice las categorías marcadas abajo.
                        </p>
                        
                        <div className="grid grid-cols-2 gap-2 bg-slate-950 p-3 rounded border border-slate-800">
                          {['Todos', 'Nuestra Verdad', 'Nacional', 'Estatal', 'Así Sucedió', 'Memoria Digital'].map((cat) => (
                            <label key={cat} className="flex items-center gap-2 text-xs font-bold text-slate-300 cursor-pointer select-none">
                              <input 
                                type="checkbox"
                                checked={bannerForm.targetCategories.includes(cat)}
                                onChange={(e) => {
                                  const checked = e.target.checked;
                                  let updatedCats = [...bannerForm.targetCategories];
                                  if (checked) {
                                    updatedCats.push(cat);
                                  } else {
                                    updatedCats = updatedCats.filter(c => c !== cat);
                                  }
                                  setBannerForm({ ...bannerForm, targetCategories: updatedCats });
                                }}
                                className="rounded text-amber-500 bg-slate-900 border-slate-800"
                              />
                              {cat}
                            </label>
                          ))}
                        </div>
                      </div>

                      {/* Toggle Active state */}
                      <div className="flex items-center justify-between p-3 bg-slate-950 border border-slate-800 rounded-md">
                        <div>
                          <span className="block text-xs font-bold text-white uppercase">Estado del Interruptor (Toggle Switch)</span>
                          <span className="text-[10px] text-slate-500">Activa o desactiva la inyección del anuncio inmediatamente en portada pública.</span>
                        </div>
                        <button
                          type="button"
                          onClick={() => setBannerForm({ ...bannerForm, active: !bannerForm.active })}
                          className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 focus:outline-hidden ${
                            bannerForm.active ? 'bg-amber-500' : 'bg-slate-800'
                          }`}
                        >
                          <span
                            className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-slate-950 shadow-sm ring-0 transition duration-200 ${
                              bannerForm.active ? 'translate-x-5' : 'translate-x-0'
                            }`}
                          />
                        </button>
                      </div>

                      <div className="pt-2 flex justify-end">
                        <button
                          type="submit"
                          className="px-5 py-2 bg-sky-600 hover:bg-sky-500 text-slate-950 font-black rounded text-xs transition-colors"
                        >
                          Aplicar Pauta Publicitaria
                        </button>
                      </div>

                    </form>
                  </div>

                  {/* Right block S2: Banner List and Live Previews */}
                  <div className="lg:col-span-6 space-y-6">
                    <div className="bg-slate-900 p-6 rounded-lg border border-slate-800 space-y-4">
                      <h3 className="font-serif font-black text-sm text-white uppercase border-b border-slate-800 pb-2 flex items-center gap-2">
                        <Eye className="w-4 h-4 text-sky-400" /> Inventario de Anuncios y Estados Activos
                      </h3>

                      <div className="space-y-4">
                        {banners.map((ban) => (
                          <div 
                            key={ban.id} 
                            className="p-4 bg-slate-950 border border-slate-800 rounded-lg space-y-2"
                          >
                            <div className="flex justify-between items-start">
                              <div>
                                <span className="bg-slate-800 text-amber-500 px-1.5 py-0.5 rounded text-[9px] uppercase font-mono font-bold tracking-wider">
                                  {ban.location}
                                </span>
                                <h4 className="text-xs font-bold text-white mt-1">{ban.title}</h4>
                                <p className="text-[10px] text-slate-500 truncate max-w-sm">Redirect: {ban.redirectUrl}</p>
                              </div>
                              
                              <button
                                onClick={() => handleToggleBannerStatus(ban.id)}
                                className={`px-2 py-0.5 rounded text-[10px] font-black tracking-wide ${
                                  ban.active 
                                    ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' 
                                    : 'bg-red-500/10 text-red-400 border border-red-500/20'
                                }`}
                              >
                                {ban.active ? '● ACTIVO' : '○ INACTIVO'}
                              </button>
                            </div>

                            <div className="h-16 w-full rounded overflow-hidden bg-slate-900 relative">
                              <img src={ban.imageUrl} alt="Pauta ad" className="w-full h-full object-cover opacity-60" />
                              <div className="absolute inset-0 bg-gradient-to-r from-slate-950 to-transparent flex items-center pl-3">
                                <span className="text-[9px] font-mono text-slate-400">Preview del Banner</span>
                              </div>
                            </div>

                            <div className="flex justify-between items-center text-[10px] text-slate-400 pt-1">
                              <span>Segmentación: <strong>{ban.targetCategories.join(', ')}</strong></span>
                              <button
                                onClick={() => handleSelectBannerToEdit(ban.id)}
                                className="text-sky-400 hover:underline font-bold"
                              >
                                Cargar en Editor
                              </button>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>

                </div>
              )}

              {/* --- SECTION 3: MODIFY GLOBAL & LOCAL SEO --- */}
              {cmsTab === 'seo' && (
                <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
                  
                  {/* Left Block: SEO Settings */}
                  <div className="lg:col-span-7 bg-slate-900 p-6 rounded-lg border border-slate-800">
                    <h3 className="font-serif font-black text-sm text-white uppercase border-b border-slate-800 pb-2 mb-6 flex items-center gap-2">
                      <Globe className="w-4 h-4 text-sky-400" /> Optimización SEO Global del Portal
                    </h3>

                    <form onSubmit={handleSaveGlobalSeo} className="space-y-4">
                      <div>
                        <label className="block text-xs font-bold uppercase text-slate-400 mb-1">Metatítulo Principal (HTML Title Tag)</label>
                        <p className="text-[10px] text-slate-500 mb-1.5 font-mono">Ideal: Entre 50 y 60 caracteres. Es lo que muestra Google en su lista de resultados.</p>
                        <input 
                          type="text" 
                          required
                          value={globalSeo.title}
                          onChange={(e) => setGlobalSeo({ ...globalSeo, title: e.target.value })}
                          className="w-full bg-slate-950 border border-slate-800 rounded p-2 text-sm text-slate-100 focus:outline-hidden"
                        />
                        <div className="flex justify-between text-[10px] text-slate-500 mt-1">
                          <span>Caracteres actuales: <strong>{globalSeo.title.length}</strong></span>
                          <span className={globalSeo.title.length >= 40 && globalSeo.title.length <= 60 ? 'text-emerald-500' : 'text-amber-500'}>
                            {globalSeo.title.length >= 40 && globalSeo.title.length <= 60 ? 'Longitud Óptima' : 'Recomendado: 40-60'}
                          </span>
                        </div>
                      </div>

                      <div>
                        <label className="block text-xs font-bold uppercase text-slate-400 mb-1">Metadescripción Principal (Meta Description Tag)</label>
                        <p className="text-[10px] text-slate-500 mb-1.5 font-mono">Ideal: Entre 120 y 160 caracteres. Resumen del sitio web en los motores de búsqueda.</p>
                        <textarea 
                          rows={3}
                          required
                          value={globalSeo.description}
                          onChange={(e) => setGlobalSeo({ ...globalSeo, description: e.target.value })}
                          className="w-full bg-slate-950 border border-slate-800 rounded p-2 text-sm text-slate-100 focus:outline-hidden"
                        ></textarea>
                        <div className="flex justify-between text-[10px] text-slate-500 mt-1">
                          <span>Caracteres actuales: <strong>{globalSeo.description.length}</strong></span>
                          <span className={globalSeo.description.length >= 100 && globalSeo.description.length <= 160 ? 'text-emerald-500' : 'text-amber-500'}>
                            {globalSeo.description.length >= 100 && globalSeo.description.length <= 160 ? 'Longitud Óptima' : 'Recomendado: 100-160'}
                          </span>
                        </div>
                      </div>

                      <div>
                        <label className="block text-xs font-bold uppercase text-slate-400 mb-1">Palabras Clave de Indexación (Global Keywords)</label>
                        <input 
                          type="text" 
                          placeholder="infoverdad, noticias, politicas, mexico"
                          value={globalSeo.keywords}
                          onChange={(e) => setGlobalSeo({ ...globalSeo, keywords: e.target.value })}
                          className="w-full bg-slate-950 border border-slate-800 rounded p-2 text-sm text-slate-100 focus:outline-hidden"
                        />
                      </div>

                      <div className="p-3 bg-slate-950 border border-slate-800 rounded text-xs text-slate-400 italic">
                        &quot;Al guardar, los metatags se inyectan dinámicamente y se fuerza la simulación de ping para indexación en tiempo real en los servidores de búsqueda frente a coyunturas de prensa.&quot;
                      </div>

                      <div className="pt-2 flex justify-end">
                        <button
                          type="submit"
                          className="px-5 py-2 bg-amber-500 hover:bg-amber-600 text-slate-950 font-black rounded text-xs transition-colors"
                        >
                          Forzar Indexado de Coyuntura (Guardar SEO)
                        </button>
                      </div>
                    </form>
                  </div>

                  {/* Right Block: SEO Audit Simulator */}
                  <div className="lg:col-span-5 bg-slate-900 p-6 rounded-lg border border-slate-800 space-y-4">
                    <h3 className="font-serif font-black text-sm text-white uppercase border-b border-slate-800 pb-2 flex items-center gap-2">
                      <TrendingUp className="w-4 h-4 text-amber-500" /> Diagnóstico y Auditoría SEO Digital
                    </h3>

                    <div className="p-4 bg-slate-950 border border-slate-800 rounded-lg text-center space-y-2">
                      <span className="text-[10px] uppercase text-slate-400 tracking-wider">Puntuación de Rendimiento SEO</span>
                      <div className="text-4xl font-serif font-black text-amber-500">
                        {getSeoScore()} <span className="text-lg text-slate-500">/ 100</span>
                      </div>
                      <p className="text-[11px] text-slate-400">La optimización general del portal de noticias se evalúa como óptima.</p>
                    </div>

                    <div className="space-y-3 text-xs">
                      <h4 className="font-bold text-white uppercase tracking-wider text-[11px]">Recomendaciones de Optimización:</h4>
                      
                      <div className="flex items-start gap-2 bg-slate-950/60 p-2.5 rounded border border-slate-800">
                        <span className="p-0.5 bg-emerald-500/10 text-emerald-400 rounded shrink-0">✓</span>
                        <p className="text-slate-300">Semantic headers H2/H3 activos en todos los artículos publicados en portada.</p>
                      </div>

                      <div className="flex items-start gap-2 bg-slate-950/60 p-2.5 rounded border border-slate-800">
                        <span className={globalSeo.title.length >= 40 && globalSeo.title.length <= 60 ? 'p-0.5 bg-emerald-500/10 text-emerald-400 rounded shrink-0' : 'p-0.5 bg-amber-500/10 text-amber-400 rounded shrink-0'}>
                          {globalSeo.title.length >= 40 && globalSeo.title.length <= 60 ? '✓' : '⚠'}
                        </span>
                        <p className="text-slate-300">La longitud del Metatítulo se sitúa en {globalSeo.title.length} caracteres.</p>
                      </div>

                      <div className="flex items-start gap-2 bg-slate-950/60 p-2.5 rounded border border-slate-800">
                        <span className={globalSeo.description.length >= 100 && globalSeo.description.length <= 160 ? 'p-0.5 bg-emerald-500/10 text-emerald-400 rounded shrink-0' : 'p-0.5 bg-amber-500/10 text-amber-400 rounded shrink-0'}>
                          {globalSeo.description.length >= 100 && globalSeo.description.length <= 160 ? '✓' : '⚠'}
                        </span>
                        <p className="text-slate-300">La descripción del portal contiene {globalSeo.description.length} caracteres.</p>
                      </div>

                      <div className="flex items-start gap-2 bg-slate-950/60 p-2.5 rounded border border-slate-800">
                        <span className="p-0.5 bg-emerald-500/10 text-emerald-400 rounded shrink-0">✓</span>
                        <p className="text-slate-300">El portal cuenta con un buzón de denuncia seguro que eleva la permanencia en página.</p>
                      </div>
                    </div>

                  </div>

                </div>
              )}

            </div>
          </motion.div>
        )}
      </AnimatePresence>

    </div>
  );
}