// PEN Landing — content sections.

const { useState: useStateS, useEffect: useEffectS } = React;

// ────────────────────────────────────────────────────────────────────
// Section · Cómo funciona — 3 pasos, layout horizontal con connector
// ────────────────────────────────────────────────────────────────────
function SectionComo({ copy }) {
  return (
    <section className="sec sec-como" id="como">
      <div className="container">
        <div className="sec-head">
          <div className="mono-eyebrow">{copy.eyebrow}</div>
          <h2 className="sec-title">{copy.title}</h2>
          <p className="sec-sub">{copy.sub}</p>
        </div>

        <div className="como-grid">
          {copy.steps.map((s, i) =>
          <div className="como-step" key={i}>
              <div className="como-step-top">
                <div className="como-num">{s.num}</div>
                <div className="mono-eyebrow como-tag">{s.tag}</div>
              </div>

              <h3 className="como-h">{s.title}</h3>
              <p className="como-body">{s.body}</p>

              <div className="como-divider" />

              <div className="como-meta">
                <div className="como-cmd mono">{s.cmd}</div>
                <div className="como-time mono">{s.time}</div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ────────────────────────────────────────────────────────────────────
// Section · Clientes / Logos — marquee + compliance
// ────────────────────────────────────────────────────────────────────
function SectionClientes({ copy }) {
  const caseStudy = copy.caseStudy;
  return (
    <section className="sec sec-clientes" id="clientes">
      <div className="container clientes-grid">
        <div className="clientes-head">
          <div className="mono-eyebrow">{copy.eyebrow}</div>
          <h2 className="sec-title clientes-title">{copy.title}</h2>
          <p className="sec-sub clientes-sub">{copy.sub}</p>
        </div>

        {caseStudy && (
          <div className="clientes-case-card">
            <div className="case-card-glow" />
            <div className="case-card-header">
              <div className="case-card-badge mono-eyebrow">
                <span className="case-pulse-dot" /> {caseStudy.badge}
              </div>
              <div className="case-card-date mono">{caseStudy.date}</div>
            </div>
            
            <h3 className="case-card-title">{caseStudy.company}</h3>
            <p className="case-card-desc">{caseStudy.desc}</p>
            
            <div className="case-card-stats">
              {caseStudy.stats.map((st, i) =>
                <div className="case-stat" key={i}>
                  <span className="case-stat-label mono-dim">{st.label}</span>
                  <span className="case-stat-val mono">{st.value}</span>
                </div>
              )}
            </div>
          </div>
        )}
      </div>
    </section>);

}

// ────────────────────────────────────────────────────────────────────
// Section · FAQ — accordion
// ────────────────────────────────────────────────────────────────────
function SectionFAQ({ copy }) {
  const [open, setOpen] = useStateS(0);
  return (
    <section className="sec sec-faq" id="faq">
      <div className="container faq-grid">
        <div className="faq-aside">
          <div className="mono-eyebrow">{copy.eyebrow}</div>
          <h2 className="sec-title">{copy.title}</h2>
          <div className="faq-mark">
            <img src="assets/pen-mark-transparent.png" alt="" className="faq-mark-img" />
          </div>
        </div>

        <div className="faq-list">
          {copy.items.map((it, i) => {
            const isOpen = i === open;
            return (
              <div className={"faq-item" + (isOpen ? " is-open" : "")} key={i}>
                <button
                  className="faq-q"
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  aria-expanded={isOpen}>
                  
                  <span className="faq-q-num mono">0{i + 1}</span>
                  <span className="faq-q-text">{it.q}</span>
                  <span className={"faq-q-toggle" + (isOpen ? " is-open" : "")}>
                    <span className="faq-q-toggle-bar faq-q-toggle-h" />
                    <span className="faq-q-toggle-bar faq-q-toggle-v" />
                  </span>
                </button>
                <div className="faq-a-wrap" style={{ maxHeight: isOpen ? 240 : 0 }}>
                  <div className="faq-a">{it.a}</div>
                </div>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

// ────────────────────────────────────────────────────────────────────
// Section · Final CTA — big glowing P + headline
// ────────────────────────────────────────────────────────────────────
function SectionFinalCta({ copy, onCta }) {
  return (
    <section className="sec sec-final" id="cta">
      <div className="final-glow" />
      <div className="container final-inner">
        <img src="assets/pen-mark-transparent.png" alt="" className="final-mark" />

        <div className="mono-eyebrow final-eyebrow">{copy.eyebrow}</div>
        <h2 className="final-title">
          {copy.title.split("\n").map((l, i) => <span key={i} className="final-title-line">{l}</span>)}
        </h2>
        <p className="final-sub">{copy.sub}</p>

        <div className="final-cta-row">
          <button className="btn btn-primary btn-lg" onClick={onCta}>
            {copy.cta}
            <span className="btn-glyph">›</span>
          </button>
          <button className="btn btn-ghost btn-lg">
            {copy.ctaAlt}
          </button>
        </div>
        <div className="mono-dim final-foot">{copy.foot}</div>
      </div>
    </section>);

}

// ────────────────────────────────────────────────────────────────────
// Footer
// ────────────────────────────────────────────────────────────────────
function FooterPen({ copy, onNav }) {
  const handleLinkClick = (e, colTitle, linkLabel) => {
    e.preventDefault();
    if (colTitle === "EMPRESA" || colTitle === "COMPANY") {
      if (linkLabel.toLowerCase().includes("sobre") || linkLabel.toLowerCase().includes("about")) {
        onNav("about");
        return;
      }
      if (linkLabel.toLowerCase().includes("blog") || linkLabel.toLowerCase().includes("tech")) {
        onNav("blog");
        return;
      }
      if (linkLabel.toLowerCase().includes("contacto") || linkLabel.toLowerCase().includes("contact")) {
        onNav("contact");
        return;
      }
    }
    if (colTitle === "PLATAFORMA" || colTitle === "PLATFORM") {
      onNav("platforms", linkLabel);
      return;
    }
    onNav("landing");
  };

  return (
    <footer className="sec sec-footer">
      <div className="container footer-grid">
        <div className="footer-brand">
          <div className="footer-lockup">
            <img src="assets/pen-mark-transparent.png" alt="PEN" className="footer-mark" />
            <div>
              <div className="footer-wordmark">PEN</div>
              <div className="mono-eyebrow footer-tag">{copy.tagline}</div>
            </div>
          </div>
          <div className="mono-dim footer-addr">▸ {copy.addr}</div>
          {copy.phone && (
            <div className="mono-dim footer-phone">
              ▸ Tel: <a href={`tel:${copy.phone.replace(/\s+/g, '')}`}>{copy.phone}</a>
            </div>
          )}
          
          <div className="footer-map-container">
            <iframe
              title="PEN Footer Map"
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3900.8654271810574!2d-77.0177727!3d-12.12132!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9105c7fc169c9b5f%3A0xc3cf336bb2018804!2sAv.%20Tom%C3%A1s%20Marsano%201921%2C%20Surquillo%2015047!5e0!3m2!1ses!2spe!4v1700000000000!5m2!1ses!2spe"
              width="100%"
              height="110"
              style={{ border: 0 }}
              allowFullScreen=""
              loading="lazy"
            />
          </div>
        </div>

        <div className="footer-cols">
          {copy.cols.map((c, i) =>
            <div className="footer-col" key={i}>
              <div className="mono-eyebrow footer-col-title">{c.title}</div>
              <ul className="footer-col-list">
                {c.links.map((l, j) => (
                  <li key={j}>
                    <a href="#" onClick={(e) => handleLinkClick(e, c.title, l)}>{l}</a>
                  </li>
                ))}
              </ul>
            </div>
          )}
        </div>
      </div>

      <div className="footer-rule" />
      <div className="container footer-bottom">
        <div className="mono-dim">{copy.copy}</div>
        <div className="footer-status" style={{ cursor: "pointer" }} onClick={() => onNav("crm")}>
          <span className="lc-pulse" />
          <span className="mono">{copy.status || "DEFENSA · ACTIVA"}</span>
        </div>
      </div>
    </footer>
  );
}

// ────────────────────────────────────────────────────────────────────
// Section · Sobre Nosotros (About Us Subpage)
// ────────────────────────────────────────────────────────────────────
function SectionAbout({ onBack }) {
  return (
    <section className="sec sec-subpage" id="about">
      <div className="container subpage-inner">
        <button className="btn-back mono" onClick={onBack}>
          ‹ Volver al inicio
        </button>
        
        <div className="sec-head subpage-head">
          <div className="mono-eyebrow">Sobre PEN</div>
          <h2 className="sec-title">Ciberseguridad y continuidad para la empresa peruana</h2>
          <p className="sec-sub">
            Somos el socio estratégico que protege la infraestructura digital de las organizaciones en el Perú. 
            No vendemos soluciones genéricas; diseñamos e integramos defensas a la medida de tu negocio.
          </p>
        </div>

        <div className="about-grid">
          <div className="about-card">
            <h3 className="about-card-title">Quiénes Somos</h3>
            <p className="about-card-desc">
              PEN nace con el firme propósito de salvaguardar las operaciones de las empresas peruanas ante ataques dirigidos, errores humanos o fallas técnicas. Nuestro equipo técnico en Lima monitorea y responde ante amenazas en tiempo real para evitar que tu negocio tenga que parar.
            </p>
          </div>
          
          <div className="about-card">
            <h3 className="about-card-title">Nuestra Misión</h3>
            <p className="about-card-desc">
              Garantizar la estabilidad operativa y la confidencialidad de la información de nuestros clientes mediante defensas proactivas, robustas y de rápida respuesta, actuando antes de que sea demasiado tarde.
            </p>
          </div>
          
          <div className="about-card about-card-wide">
            <h3 className="about-card-title">Nuestros Pilares Operativos</h3>
            <div className="about-pillars-grid">
              <div className="about-pillar">
                <span className="pillar-num mono">01</span>
                <h4 className="pillar-h">Transparencia</h4>
                <p className="pillar-p">Diagnósticos honestos y presupuestos detallados según tu infraestructura real.</p>
              </div>
              <div className="about-pillar">
                <span className="pillar-num mono">02</span>
                <h4 className="pillar-h">Defensa en Tiempo Real</h4>
                <p className="pillar-p">Monitoreo continuo de hosts y servidores para neutralizar incidentes en segundos.</p>
              </div>
              <div className="about-pillar">
                <span className="pillar-num mono">03</span>
                <h4 className="pillar-h">Soporte Local Experto</h4>
                <p className="pillar-p">Atención directa por analistas peruanos basados en Lima, sin robots ni demoras.</p>
              </div>
            </div>
          </div>
        </div>

        {/* --- SECCIÓN DE EQUIPO EDITORIAL STAGGERED --- */}
        <div className="about-editorial-team">
          <div className="mono-eyebrow" style={{ color: "var(--pen-neon)", marginBottom: "8px", marginTop: "64px", textAlign: "center" }}>
            Especialistas
          </div>
          <h3 className="sec-title" style={{ textAlign: "center", marginBottom: "48px", fontSize: "28px" }}>
            El Equipo Detrás de la Defensa
          </h3>
          
          <div className="team-staggered-list">
            {/* Miembro 1: Mario Quispe Rojas */}
            <div className="team-staggered-row">
              <div className="team-staggered-img-col">
                <img src="assets/mario_quispe.jpg" alt="Mario Quispe Rojas" className="team-staggered-img" />
              </div>
              <div className="team-staggered-text-col">
                <div className="team-staggered-badge mono">DIRECTOR</div>
                <h4 className="team-staggered-name">Mario Quispe Rojas</h4>
                <p className="team-staggered-role mono">Director of Cybersecurity &amp; Continuity</p>
                <p className="team-staggered-bio">
                  "Liderando la estrategia y operaciones de defensa digital para garantizar que las empresas peruanas mantengan su continuidad operativa sin interrupciones."
                </p>
              </div>
            </div>
            
            {/* Miembro 2: Rodrigo Quispe */}
            <div className="team-staggered-row team-row-reverse">
              <div className="team-staggered-img-col">
                <img src="assets/rodrigo_quispe.jpg" alt="Rodrigo Quispe" className="team-staggered-img" />
              </div>
              <div className="team-staggered-text-col">
                <div className="team-staggered-badge mono">OPERATIONS</div>
                <h4 className="team-staggered-name">Rodrigo Quispe</h4>
                <p className="team-staggered-role mono">Head of Operations</p>
                <p className="team-staggered-bio">
                  "Supervisando y optimizando el flujo de trabajo operativo y la infraestructura de soporte para asegurar la entrega de servicios de seguridad con la máxima calidad y eficiencia."
                </p>
              </div>
            </div>

            {/* Miembro 3: Giovanni Risco */}
            <div className="team-staggered-row">
              <div className="team-staggered-img-col">
                <img src="assets/giovanni_risco.jpg" alt="Giovanni Risco" className="team-staggered-img" />
              </div>
              <div className="team-staggered-text-col">
                <div className="team-staggered-badge mono">SPECIALIST</div>
                <h4 className="team-staggered-name">Giovanni Risco</h4>
                <p className="team-staggered-role mono">Cybersecurity Specialist</p>
                <p className="team-staggered-bio">
                  "Implementando auditorías de defensa activa y análisis de vulnerabilidades para anticipar y neutralizar intrusiones críticas en tiempo récord."
                </p>
              </div>
            </div>

            {/* Miembro 4: Alex Rojas */}
            <div className="team-staggered-row team-row-reverse">
              <div className="team-staggered-img-col">
                <img src="assets/alex_rojas.jpg" alt="Alex Rojas" className="team-staggered-img" />
              </div>
              <div className="team-staggered-text-col">
                <div className="team-staggered-badge mono">STRATEGY</div>
                <h4 className="team-staggered-name">Alex Rojas</h4>
                <p className="team-staggered-role mono">Cybersecurity Business Strategy Specialist</p>
                <p className="team-staggered-bio">
                  "Desarrollando estrategias comerciales y de negocio en ciberseguridad para alinear la protección tecnológica de alto nivel con las necesidades y metas de crecimiento de cada organización."
                </p>
              </div>
            </div>

            {/* Miembro 5: Dario Quispe */}
            <div className="team-staggered-row">
              <div className="team-staggered-img-col">
                <img src="assets/dario_quispe.jpg" alt="Dario Quispe" className="team-staggered-img" />
              </div>
              <div className="team-staggered-text-col">
                <div className="team-staggered-badge mono">ANALYTICS</div>
                <h4 className="team-staggered-name">Dario Quispe</h4>
                <p className="team-staggered-role mono">Marketing &amp; Data Analytics Specialist</p>
                <p className="team-staggered-bio">
                  "Impulsando el crecimiento y el análisis mediante la combinación de marketing de rendimiento y analítica de datos para comunicar seguridad y valor a las empresas."
                </p>
              </div>
            </div>

            {/* Miembro 6: Nayeli Sotelo */}
            <div className="team-staggered-row team-row-reverse">
              <div className="team-staggered-img-col">
                <img src="assets/nayeli.jpg" alt="Nayeli Sotelo" className="team-staggered-img" />
              </div>
              <div className="team-staggered-text-col">
                <div className="team-staggered-badge mono">ADMINISTRATION</div>
                <h4 className="team-staggered-name">Nayeli Sotelo</h4>
                <p className="team-staggered-role mono">Administration &amp; Finance Specialist</p>
                <p className="team-staggered-bio">
                  "Gestionando los recursos financieros y la eficiencia administrativa para asegurar la solidez y el soporte operativo que permite proteger a nuestros clientes de manera continua."
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────
// Section · Blog Técnico (Blog Subpage)
// ────────────────────────────────────────────────────────────────────
function SectionBlog({ onBack }) {
  const [activePost, setActivePost] = useStateS(null);
  const [selectedCategory, setSelectedCategory] = useStateS("TODOS");

  const posts = [
    {
      id: "ransomware-peru",
      category: "CIBERSEGURIDAD",
      date: "Mayo 2026",
      title: "Ransomware en el Perú: Cómo proteger la operación comercial",
      desc: "El secuestro de información sigue siendo la mayor amenaza cibernética en nuestro mercado. Analizamos el comportamiento de la propagación lateral y cómo los agentes remotos aíslan automáticamente hosts infectados para mitigar el impacto operativo.",
      time: "5 min de lectura",
      content: (
        <div>
          <p>El ransomware se ha consolidado como la amenaza cibernética más crítica para las empresas en el Perú. Durante el último año, se registró un incremento del 42% en ataques dirigidos, afectando principalmente a los sectores de retail, finanzas y manufactura local. Los atacantes ya no solo cifran los archivos, sino que aplican la <strong>doble extorsión</strong>: roban información confidencial y amenazan con publicarla en la Dark Web si no se realiza el pago del rescate en criptomonedas.</p>
          
          <h3>El Mecanismo de Infección</h3>
          <p>La mayoría de intrusiones exitosas comienzan con correos electrónicos de phishing dirigidos que suplantan a entidades tributarias o proveedores clave, o explotando puertos de conexión remota (como RDP) expuestos a internet sin contraseñas seguras o autenticación multifactor (MFA).</p>
          
          <h3>¿Cómo proteger la operación comercial?</h3>
          <p>Una estrategia de mitigación de nivel empresarial se basa en tres pilares esenciales:</p>
          <ul>
            <li><strong>Detección y Respuesta Activa (EDR):</strong> Instalar agentes avanzados que identifiquen y aíslen de forma autónoma el host comprometido en menos de 4 segundos, deteniendo el movimiento lateral del malware.</li>
            <li><strong>Políticas de Acceso con Privilegios Mínimos:</strong> Restringir los permisos de escritura en carpetas compartidas y servidores para que un usuario infectado no comprometa toda la red corporativa.</li>
            <li><strong>Respaldo Inmutable:</strong> Mantener copias de seguridad desconectadas de la red corporativa para evitar que el virus las cifre en conjunto con los datos de producción.</li>
          </ul>
        </div>
      )
    },
    {
      id: "phishing-dmarc",
      category: "CIBERSEGURIDAD",
      date: "Abril 2026",
      title: "Configuración de SPF, DKIM y DMARC: Blindando tu Dominio contra Phishing",
      desc: "Los ataques de suplantación de identidad mediante correos casi idénticos de proveedores causan pérdidas financieras masivas. Te mostramos cómo configurar de forma correcta tus registros SPF, DKIM y DMARC para blindar tu dominio corporativo.",
      time: "7 min de lectura",
      content: (
        <div>
          <p>El phishing sigue siendo la puerta de entrada para el 80% de los incidentes de ciberseguridad. Uno de los ataques más costosos es la <strong>suplantación de identidad del dominio</strong> (Domain Spoofing), donde un ciberdelincuente envía correos desde un servidor no autorizado utilizando el dominio exacto de tu empresa (ej. <code>gerente@miempresa.com</code>) para engañar a clientes o contadores.</p>
          
          <h3>Los Tres Guardianes del Correo Electrónico</h3>
          <p>Para evitar que cualquiera use el nombre de tu empresa, debes implementar y aplicar tres registros DNS críticos:</p>
          <ol>
            <li><strong>SPF (Sender Policy Framework):</strong> Un registro de texto (TXT) en tu DNS que lista de forma explícita qué servidores o IPs están autorizados para enviar correos en tu nombre.</li>
            <li><strong>DKIM (DomainKeys Identified Mail):</strong> Añade una firma criptográfica invisible a la cabecera de cada correo saliente, validando que el mensaje no ha sido alterado en el camino.</li>
            <li><strong>DMARC (Domain-based Message Authentication, Reporting, and Conformance):</strong> La política final que le dice a servidores externos (como Gmail o Outlook) qué hacer si un correo con tu nombre falla SPF o DKIM (por ejemplo, rechazarlo por completo).</li>
          </ol>
          
          <h3>Ejemplo de Configuración DNS Segura</h3>
          <p>Un registro DMARC seguro y configurado para bloquear correos falsos se ve así en tu DNS:</p>
          <pre><code>Tipo: TXT
Nombre: _dmarc.tuempresa.com
Valor: v=DMARC1; p=reject; pct=100; rua=mailto:reportes-dmarc@tuempresa.com</code></pre>
          <p>La política <code>p=reject</code> instruye al receptor a eliminar o rechazar inmediatamente cualquier correo impostor, protegiendo la reputación corporativa de tu negocio.</p>
        </div>
      )
    },
    {
      id: "segmentacion-red",
      category: "INFRAESTRUCTURA",
      date: "Marzo 2026",
      title: "La importancia crítica de la segmentación de red en PYMEs",
      desc: "Compartir la misma red entre cámaras de seguridad, laptops de contabilidad y la wifi de visitas es un riesgo grave. Explicamos cómo las políticas de cortafuegos aíslan y protegen la información sensible de tu negocio.",
      time: "4 min de lectura",
      content: (
        <div>
          <p>Muchas pequeñas y medianas empresas organizan su red local de forma plana: todas las computadoras, impresoras, servidores de archivos corporativos, cámaras de vigilancia IP y la red Wi-Fi de visitas están conectados a la misma subred. Esto significa que si el celular de un cliente en la sala de espera es infectado, o si un atacante compromete una cámara de seguridad económica, tiene vía libre para acceder a las laptops de contabilidad o al servidor de nóminas.</p>
          
          <h3>El Principio de Segmentación mediante VLANs</h3>
          <p>La segmentación consiste en dividir la red física en múltiples subredes lógicas aisladas (VLANs), controladas de forma estricta por un cortafuegos (Firewall) perimetral. En PEN implementamos una segmentación en 4 zonas de seguridad independientes:</p>
          <ul>
            <li><strong>Zona Corporativa:</strong> Computadoras internas y servidores de producción con acceso seguro y autenticado.</li>
            <li><strong>Zona de Dispositivos (IoT):</strong> Cámaras de seguridad e impresoras de red. Tienen prohibido comunicarse con la zona corporativa.</li>
            <li><strong>Zona de Invitados (Guest Wi-Fi):</strong> Solo acceso a internet para visitas, completamente aislados de los datos de la empresa.</li>
            <li><strong>Zona de Servidores (DMZ):</strong> Para servicios que deben dar cara a internet, resguardando la base de datos central en la red interna.</li>
          </ul>
          
          <h3>Políticas de Tránsito</h3>
          <p>Con un cortafuegos FortiGate configurado correctamente, el tráfico entre subredes es bloqueado por defecto. Solo los usuarios y puertos explícitamente validados pueden cruzar las fronteras de red, eliminando las posibilidades de un ataque de propagación lateral.</p>
        </div>
      )
    },
    {
      id: "ia-phishing",
      category: "INTELIGENCIA ARTIFICIAL",
      date: "Febrero 2026",
      title: "Hacking Generativo: Cómo la Inteligencia Artificial redefine los ataques de Phishing",
      desc: "Los atacantes usan modelos de lenguaje para redactar correos de phishing contextuales e hiperrealistas en perfecto español de negocios. Conoce cómo defenderte ante la ingeniería social automatizada por IA.",
      time: "6 min de lectura",
      content: (
        <div>
          <p>La popularización de modelos de lenguaje avanzados (LLMs) ha revolucionado la ingeniería social. Anteriormente, los correos de phishing eran fáciles de detectar por la ortografía deficiente, traducciones extrañas y formatos inconsistentes. Hoy, los atacantes usan Inteligencia Artificial para redactar correos de phishing contextuales, hiperrealistas y redactados en perfecto español de negocios.</p>
          
          <h3>Phishing Generativo Adaptativo</h3>
          <p>Los atacantes pueden automatizar la recolección de datos públicos de directivos en LinkedIn para que la IA genere correos personalizados imitando el tono de voz de un superior directivo. Además, se están detectando incidentes de clonación de voz por IA (vishing) en llamadas a contadores, simulando la voz del dueño de la empresa solicitando transferencias urgentes.</p>
          
          <h3>Defensa Impulsada por IA</h3>
          <p>La respuesta frente al hacking generativo no es el ojo humano, sino la IA defensiva instalada en el flujo de correo. Los motores avanzados de PEN analizan el contexto del mensaje, la reputación histórica del emisor y los patrones de escritura en milisegundos. Si el sistema detecta anomalías contextuales (como un correo externo pidiendo un cambio de cuenta bancaria que simula provenir del gerente), es catalogado y retenido automáticamente.</p>
        </div>
      )
    },
    {
      id: "zero-trust-vpn",
      category: "INFRAESTRUCTURA",
      date: "Enero 2026",
      title: "Arquitectura Zero Trust: Por qué las VPNs tradicionales ya no son suficientes",
      desc: "En un entorno híbrido con aplicaciones cloud y teletrabajo, la confianza implícita es un peligro. Explicamos cómo migrar hacia el modelo de acceso seguro de confianza cero.",
      time: "5 min de lectura",
      content: (
        <div>
          <p>Durante años, el modelo de seguridad perimetral se basaba en la metáfora del \"castillo y el foso\": una vez que un usuario cruzaba el foso (conectándose a la VPN corporativa), se le otorgaba plena confianza y acceso libre a los recursos internos. Sin embargo, en un entorno híbrido con aplicaciones en la nube y teletrabajo, esta confianza implícita representa un peligro de seguridad crítico.</p>
          
          <h3>Los Pilares del Zero Trust</h3>
          <p>El modelo Zero Trust (Confianza Cero) reemplaza la confianza implícita por la verificación explícita y continua de tres factores:</p>
          <ol>
            <li><strong>Verificación de Identidad:</strong> Autenticación multifactor (MFA) robusta y validación continua del usuario.</li>
            <li><strong>Estado del Dispositivo:</strong> Evaluar si la laptop del colaborador cuenta con parches de seguridad al día y EDR activo antes de autorizar la conexión.</li>
            <li><strong>Acceso de Privilegio Mínimo (ZTNA):</strong> Conectar al usuario únicamente a la aplicación específica que necesita para trabajar, en lugar de darle acceso a toda la red del servidor corporativo.</li>
          </ol>
          <p>Al migrar de VPNs tradicionales a soluciones Zero Trust Network Access (ZTNA), las empresas reducen drásticamente la superficie de ataque y protegen sus activos sin importar la ubicación del empleado.</p>
        </div>
      )
    },
    {
      id: "backup-321",
      category: "RESPALDO Y CONTINUIDAD",
      date: "Diciembre 2025",
      title: "Estrategia de Backup 3-2-1: La última línea de defensa contra desastres",
      desc: "El backup es el último recurso de continuidad. Conoce la estrategia estándar de copias múltiples y almacenamiento inmutable en la nube para neutralizar el ransomware.",
      time: "6 min de lectura",
      content: (
        <div>
          <p>El backup es el último recurso de continuidad de negocio de una empresa. Ante fallos de hardware catastróficos, desastres naturales o incidentes severos de ransomware, disponer de una copia de seguridad válida y testeada determina si la organización continúa operando o se enfrenta al cierre definitivo.</p>
          
          <h3>La Estrategia 3-2-1 Enforzada</h3>
          <p>En PEN implementamos rigurosamente la regla estándar de oro de respaldos:</p>
          <ul>
            <li><strong>3 Copias de Datos:</strong> Los datos de producción activos y dos respaldos adicionales independientes.</li>
            <li><strong>2 Medios Distintos:</strong> Almacenar los respaldos en dispositivos diferentes (por ejemplo, un disco local NAS de alta velocidad y un almacenamiento remoto).</li>
            <li><strong>1 Copia Offsite (Fuera de la Oficina):</strong> Al menos una de las copias debe vivir en un repositorio en la nube completamente seguro.</li>
          </ul>
          
          <h3>Inmutabilidad contra Ransomware</h3>
          <p>El ransomware moderno ataca y borra las copias de seguridad en primer lugar. Para neutralizar esto, nuestra infraestructura de respaldo en la nube utiliza <strong>almacenamiento inmutable</strong> (WORM: Write Once, Read Many). Una vez escrita la copia diaria, los datos quedan físicamente bloqueados y nadie (ni un atacante con credenciales de administrador) puede editarlos o eliminarlos por un periodo definido de 90 días.</p>
        </div>
      )
    },
    {
      id: "threat-hunting-ia",
      category: "INTELIGENCIA ARTIFICIAL",
      date: "Noviembre 2025",
      title: "Threat Hunting Inteligente: El rol de los agentes de IA en el monitoreo preventivo",
      desc: "La búsqueda proactiva de amenazas identifica intrusiones sigilosas que evaden los antivirus pasivos. Analizamos la correlación de eventos cruzados mediante algoritmos inteligentes.",
      time: "5 min de lectura",
      content: (
        <div>
          <p>El monitoreo tradicional de ciberseguridad es reactivo: espera a que se active una alerta de antivirus o firewall para comenzar a investigar. Sin embargo, las amenazas persistentes avanzadas (APTs) y los atacantes sofisticados suelen operar de manera sigilosa por semanas, explotando credenciales válidas y comandos de sistema legítimos para evadir las alertas automatizadas.</p>
          
          <h3>¿Qué es el Threat Hunting Activo?</h3>
          <p>El Threat Hunting es la búsqueda proactiva de amenazas que han logrado evadir las herramientas de detección pasiva. En lugar de esperar alertas, nuestros analistas formulan hipótesis basadas en tácticas del framework MITRE ATT&CK:</p>
          <ul>
            <li>Analizan anomalías menores de tráfico en servidores DNS.</li>
            <li>Rastrean ejecuciones inusuales de comandos administrativos en horarios no laborables.</li>
            <li>Correlacionan eventos aislados entre la nube, el correo y los endpoints mediante algoritmos inteligentes.</li>
          </ul>
          <p>Esta disciplina proactiva permite identificar intrusiones tempranas antes de que el atacante logre exfiltrar información o desplegar un cifrado dañino en los sistemas empresariales.</p>
        </div>
      )
    },
    {
      id: "factor-humano-phishing",
      category: "CIBERSEGURIDAD",
      date: "Octubre 2025",
      title: "El factor humano: Simulacros de Phishing como herramienta de concientización",
      desc: "Cerca del 85% de las brechas de seguridad se deben a descuidos humanos. Descubre cómo los entrenamientos interactivos reducen la tasa de éxito de los engaños digitales.",
      time: "6 min de lectura",
      content: (
        <div>
          <p>Los sistemas de seguridad pueden ser robustos, pero el eslabón final siempre es el usuario. Cerca del 85% de las brechas de seguridad en empresas se deben a descuidos humanos: abrir un archivo adjunto simulado, reutilizar contraseñas personales en sistemas de trabajo o entregar códigos de autenticación por llamadas.</p>
          
          <h3>Simulacros de Phishing Educativos</h3>
          <p>Para fortalecer la cultura preventiva, en PEN diseñamos e implementamos campañas automatizadas de simulacros de phishing sin interrumpir la operatividad diaria:</p>
          <ul>
            <li><strong>Diseño Realista:</strong> Enviamos correos falsos simulando situaciones cotidianas (alertas de entrega de encomiendas, alertas de seguridad de Office, etc.).</li>
            <li><strong>Respuesta Educativa Inmediata:</strong> Si un usuario hace clic en el enlace simulado, en lugar de recibir una sanción, es dirigido a una micro-capacitación interactiva de 2 minutos que le enseña a identificar las señales de sospecha.</li>
            <li><strong>Métricas de Mejora Continuas:</strong> Registramos la tasa de clics general de la organización, logrando reducirla típicamente del 28% al 1.5% en los primeros 6 meses de entrenamiento.</li>
          </ul>
        </div>
      )
    },
    {
      id: "auditoria-seguridad",
      category: "CIBERSEGURIDAD",
      date: "Septiembre 2025",
      title: "Auditorías de Seguridad Activa: Por qué un escaneo automático no basta",
      desc: "Los analizadores de vulnerabilidades automáticos son útiles, pero tienen puntos ciegos críticos. Explicamos el valor de las pruebas de penetración manuales y la simulación de adversarios.",
      time: "5 min de lectura",
      content: (
        <div>
          <p>Muchas organizaciones consideran que ejecutar un escaneo automático mensual de vulnerabilidades es suficiente para certificar que su infraestructura está protegida. Sin embargo, depender únicamente de software automático crea una falsa sensación de seguridad. Las herramientas automatizadas buscan firmas conocidas y fallas obvias, pero no pueden razonar como un atacante humano.</p>
          
          <h3>Las Limitaciones del Escaneo Automático</h3>
          <p>Un escaneo de vulnerabilidades estándar reporta parches desactualizados o configuraciones incorrectas evidentes, pero falla en identificar:</p>
          <ul>
            <li><strong>Vulnerabilidades de Lógica de Negocio:</strong> Por ejemplo, la posibilidad de saltar de la cuenta de un usuario a otra alterando un parámetro en la barra de direcciones (IDOR).</li>
            <li><strong>Encadenamiento de Fallas:</strong> Combinar múltiples vulnerabilidades catalogadas como de \"bajo riesgo\" para lograr una escalada de privilegios total en el servidor corporativo.</li>
            <li><strong>Falsos Positivos:</strong> Alertas irrelevantes que quitan tiempo valioso al equipo de TI, distrayéndolos de las brechas reales de seguridad informática.</li>
          </ul>
          
          <h3>El Valor del Hacking Ético Manual</h3>
          <p>Una auditoría activa o prueba de penetración (pentest) simula de forma controlada el comportamiento de un cibercriminal. Un auditor experto busca fallas en la lógica, analiza cómo interactúan los sistemas entre sí e intenta penetrar de forma real las defensas usando técnicas avanzadas que las firmas automáticas no logran detectar.</p>
        </div>
      )
    },
    {
      id: "seguridad-cloud",
      category: "INFRAESTRUCTURA",
      date: "Agosto 2025",
      title: "Seguridad Cloud en AWS y Azure: Evitando configuraciones expuestas",
      desc: "La nube ofrece agilidad, pero también introduce brechas por configuraciones incorrectas. Analizamos cómo proteger S3 buckets, bases de datos expuestas y políticas IAM.",
      time: "6 min de lectura",
      content: (
        <div>
          <p>El almacenamiento y procesamiento en la nube (AWS, Azure, Google Cloud) se ha masificado entre las empresas peruanas. No obstante, a diferencia del centro de datos físico local, en la nube los recursos están a un clic de ser expuestos públicamente a internet debido a errores de configuración por parte de los administradores.</p>
          
          <h3>El Riesgo de los Buckets Públicos</h3>
          <p>Una de las causas más comunes de fuga de datos es la mala configuración de repositorios como Amazon S3 o Azure Blobs. Un empleado configura el acceso público temporalmente para compartir un archivo y olvida cerrarlo, permitiendo que bots automáticos indexen y descarguen información confidencial (como facturas, DNI o contratos).</p>
          
          <h3>Medidas de Blindaje Cloud</h3>
          <p>Para garantizar una infraestructura cloud robusta, recomendamos:</p>
          <ul>
            <li><strong>Políticas IAM estrictas:</strong> Aplicar el principio de privilegios mínimos para que los desarrolladores y servicios solo accedan a los recursos requeridos.</li>
            <li><strong>Bloqueo de Acceso Público por Defecto:</strong> Activar políticas a nivel de cuenta para prohibir la creación de almacenamiento de archivos expuestos al público.</li>
            <li><strong>Auditoría de Configuración Continua (CSPM):</strong> Implementar herramientas de seguridad cloud que analicen la postura y envíen alertas automáticas si se abre un puerto o recurso no autorizado.</li>
          </ul>
        </div>
      )
    },
    {
      id: "ley-datos-personales",
      category: "CIBERSEGURIDAD",
      date: "Julio 2025",
      title: "Cumplimiento de la Ley de Protección de Datos Personales en el Perú (LPDP)",
      desc: "Las empresas que manejan datos de clientes o empleados deben adecuarse a la Ley N° 29733 para evitar multas de hasta 100 UITs. Conoce las medidas de seguridad exigidas.",
      time: "5 min de lectura",
      content: (
        <div>
          <p>En el Perú, la Autoridad Nacional de Protección de Datos Personales (APDP) fiscaliza activamente que las empresas que recopilen, traten y almacenen datos personales (de clientes, proveedores o empleados) cumplan rigurosamente con la <strong>Ley N° 29733</strong>. Las sanciones por incumplimiento o fugas de datos no protegidos adecuadamente pueden llegar hasta las 100 UITs.</p>
          
          <h3>Medidas Organizativas y Técnicas Requeridas</h3>
          <p>La legislación exige que las empresas implementen políticas y medidas de seguridad proporcionales al riesgo del tratamiento de los datos:</p>
          <ol>
            <li><strong>Registro de Bancos de Datos:</strong> Es obligatorio inscribir los bancos de datos ante el Registro Nacional de Protección de Datos Personales.</li>
            <li><strong>Cifrado de Datos en Tránsito y Reposo:</strong> La información personal sensible (como salarios, historias médicas o credenciales) debe cifrarse para evitar robos legibles ante ataques de red.</li>
            <li><strong>Control de Accesos Auditado:</strong> Implementar logs de acceso detallados para saber con exactitud qué usuario ingresó, modificó o eliminó datos personales de la base de datos corporativa.</li>
          </ol>
          <p>PEN te ayuda a adecuar tu infraestructura tecnológica y controles de red para satisfacer las directivas técnicas de seguridad exigidas por la APDP, protegiendo a tu negocio tanto de multas administrativas como de daños de reputación.</p>
        </div>
      )
    },
    {
      id: "deepfakes-suplantacion",
      category: "INTELIGENCIA ARTIFICIAL",
      date: "Junio 2025",
      title: "IA y Deepfakes: La nueva amenaza de suplantación ejecutiva",
      desc: "Los ciberdelincuentes están utilizando clones de voz generados por IA y deepfakes de video para simular órdenes de directores corporativos. Descubre cómo proteger la tesorería de tu empresa.",
      time: "6 min de lectura",
      content: (
        <div>
          <p>La ciberseguridad en la era de la inteligencia artificial ha superado las barreras tradicionales del correo electrónico. Hoy, los atacantes utilizan herramientas de inteligencia artificial generativa de voz y video para desplegar fraudes hiperrealistas dirigidos directamente contra departamentos de finanzas y tesorería.</p>
          
          <h3>¿Cómo funciona la estafa de clonación por voz?</h3>
          <p>Tomando fragmentos de audio de discursos públicos o videos de redes sociales de un alto ejecutivo (ej. el Gerente General), la IA genera un modelo de voz idéntico en pocos minutos. Los delincuentes llaman al personal de administración imitando la voz del gerente y ordenando con tono autoritario realizar un pago urgente a una cuenta no registrada.</p>
          
          <h3>Medidas Preventivas Organizacionales</h3>
          <p>La tecnología es crucial, pero la defensa contra los deepfakes requiere reforzar los protocolos y procedimientos internos:</p>
          <ul>
            <li><strong>Canales de Verificación Doble:</strong> Establecer una regla de oro de tesorería: ningún pago fuera del presupuesto se aprueba mediante una sola llamada de voz o mensaje de texto. Siempre debe validarse mediante un canal alterno acordado previamente.</li>
            <li><strong>Palabras Clave de Seguridad:</strong> Utilizar frases o palabras clave secretas de validación de identidad interna conocidas únicamente por el equipo directivo y finanzas.</li>
            <li><strong>Cultura Preventiva:</strong> Educar a los colaboradores sobre la existencia de estas técnicas de suplantación artificial para que duden de órdenes urgentes e irregulares de transferencia.</li>
          </ul>
        </div>
      )
    }
  ];

  // Filter posts
  const filteredPosts = selectedCategory === "TODOS"
    ? posts
    : posts.filter(p => p.category === selectedCategory);

  // Get unique categories
  const categories = ["TODOS", ...new Set(posts.map(p => p.category))];

  if (activePost) {
    return (
      <section className="sec sec-subpage" id="blog">
        <div className="container subpage-inner">
          <button 
            className="btn-back mono" 
            onClick={() => { setActivePost(null); window.scrollTo({ top: 0, behavior: "smooth" }); }}
          >
            ‹ Volver al listado
          </button>
          
          <div className="blog-article-container">
            <div className="blog-article-meta">
              <span className="blog-post-cat mono-eyebrow" style={{ color: "var(--pen-neon)" }}>
                {activePost.category}
              </span>
              <span className="blog-post-date mono-dim">{activePost.date}</span>
              <span className="blog-post-time mono-dim">· {activePost.time}</span>
            </div>
            
            <h2 className="blog-article-title">{activePost.title}</h2>
            
            <div className="blog-article-content">
              {activePost.content}
            </div>
            
            <div className="blog-article-cta">
              <h4>¿Quieres evaluar la ciberseguridad de tu empresa?</h4>
              <p>En PEN realizamos auditorías y diagnósticos gratuitos para identificar brechas críticas en tu infraestructura.</p>
              <button 
                className="btn btn-primary" 
                onClick={() => {
                  const evt = new CustomEvent("open-diagnostic-modal");
                  window.dispatchEvent(evt);
                }}
              >
                Solicitar Diagnóstico Gratis ›
              </button>
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="sec sec-subpage" id="blog">
      <div className="container subpage-inner">
        <button className="btn-back mono" onClick={onBack}>
          ‹ Volver al inicio
        </button>

        <div className="sec-head subpage-head">
          <div className="mono-eyebrow">Blog Técnico</div>
          <h2 className="sec-title">Artículos de Ciberseguridad y Amenazas</h2>
          <p className="sec-sub">
            Compartimos análisis técnicos, guías operativas y mejores prácticas de seguridad digital adaptadas a la realidad empresarial.
          </p>
          
          <div className="blog-filter-tags">
            {categories.map((cat, i) => (
              <button 
                key={i} 
                className={`blog-filter-tag ${selectedCategory === cat ? "active" : ""}`}
                onClick={() => setSelectedCategory(cat)}
              >
                {cat}
              </button>
            ))}
          </div>
        </div>

        <div className="blog-posts-grid">
          {filteredPosts.map((post, i) => (
            <article 
              className="blog-post-card" 
              key={post.id}
              onClick={() => { setActivePost(post); window.scrollTo({ top: 0, behavior: "smooth" }); }}
              style={{ cursor: "pointer" }}
            >
              <div>
                <div className="blog-post-header">
                  <span className="blog-post-cat mono-eyebrow">{post.category}</span>
                  <span className="blog-post-date mono-dim">{post.date}</span>
                </div>
                <h3 className="blog-post-title">{post.title}</h3>
                <p className="blog-post-desc">{post.desc}</p>
              </div>
              <div className="blog-post-footer">
                <span className="blog-post-time mono-dim">{post.time}</span>
                <span className="blog-post-link">Leer artículo ›</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────
// EmailJS Configuration & Helper (Branded HTML Emails)
// ────────────────────────────────────────────────────────────────────
// To enable professional branded HTML emails (with the PEN logo & neon style):
// 1. Sign up at https://www.emailjs.com/
// 2. Set the variables below (e.g. EMAILJS_PUBLIC_KEY = "user_xxxx"):
const EMAILJS_PUBLIC_KEY = "9oMINH8gTQeku9oX5";      // Your EmailJS Public Key
const EMAILJS_SERVICE_ID = "service_0ytrp4h";      // Your EmailJS Service ID
const EMAILJS_TEMPLATE_MARIO = "template_6mm5l66";  // Template 1 ID: Notification to Mario
const EMAILJS_TEMPLATE_CLIENT = "template_l9lmthl"; // Template 2 ID: Auto-reply to Client

// ────────────────────────────────────────────────────────────────────
// Supabase Configuration (Database Storage for Leads)
// ────────────────────────────────────────────────────────────────────
const SUPABASE_URL = "";       // Your Supabase Project URL (e.g. "https://xxxx.supabase.co")
const SUPABASE_ANON_KEY = "";  // Your Supabase Public Anon Key

function saveLeadToSupabase(formData, isDiagnostic) {
  if (!SUPABASE_URL || !SUPABASE_ANON_KEY) {
    // If keys are not set, skip database storage silently
    return Promise.resolve();
  }

  try {
    if (typeof supabase === "undefined") {
      console.warn("Supabase SDK no está cargado.");
      return Promise.resolve();
    }

    const supabaseClient = supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
    return supabaseClient
      .from("leads")
      .insert([
        {
          nombre: formData.name,
          empresa: formData.company,
          correo: formData.email,
          telefono: formData.phone,
          mensaje: formData.message,
          tipo_solicitud: isDiagnostic ? "diagnostico" : "contacto"
        }
      ])
      .then(({ error }) => {
        if (error) {
          console.error("Error guardando en Supabase:", error);
        } else {
          console.log("¡Lead guardado exitosamente en base de datos de Supabase!");
        }
      });
  } catch (err) {
    console.error("Fallo de conexión inesperado con Supabase:", err);
    return Promise.resolve();
  }
}

function saveLeadToLocal(formData, isDiagnostic) {
  try {
    const rawLeads = localStorage.getItem("pen_leads");
    const leads = rawLeads ? JSON.parse(rawLeads) : [];
    
    const newLead = {
      id: Date.now().toString(),
      name: formData.name,
      company: formData.company,
      email: formData.email,
      phone: formData.phone,
      message: formData.message || "",
      type: isDiagnostic ? "diagnostico" : "contacto",
      date: new Date().toISOString(),
      status: "NUEVO"
    };
    
    leads.unshift(newLead);
    localStorage.setItem("pen_leads", JSON.stringify(leads));
    console.log("Lead guardado localmente en el CRM:", newLead);
  } catch (err) {
    console.error("Fallo al guardar lead localmente:", err);
  }
}

function sendFormEmails(formData, subject, isDiagnostic = false) {
  const runFormsubmitFallback = () => {
    console.warn("Iniciando envío de respaldo via Formsubmit.co...");
    return fetch("https://formsubmit.co/ajax/marioquispe147@gmail.com", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Accept": "application/json"
      },
      body: JSON.stringify({
        Nombre: formData.name,
        Empresa: formData.company,
        email: formData.email,
        Telefono: formData.phone,
        Mensaje: formData.message,
        _subject: subject + " (Respaldo)",
        _template: "box",
        _autoresponse: isDiagnostic
          ? "Hola! Tu solicitud para el diagnóstico gratis de PEN Security ha sido enviada correctamente. En breve nos pondremos en contacto contigo para agendar la videollamada."
          : "Hola! Hemos recibido tu mensaje de contacto en PEN Security. Nos pondremos en contacto contigo en breve."
      })
    }).then(res => {
      if (!res.ok) throw new Error("Error en el envío de respaldo");
      return res.json();
    });
  };

  if (!EMAILJS_PUBLIC_KEY || !EMAILJS_SERVICE_ID || !EMAILJS_TEMPLATE_MARIO) {
    return runFormsubmitFallback();
  }

  // Send notification email to Mario
  const paramsMario = {
    to_name: "Mario Quispe",
    to_email: "marioquispe147@gmail.com", // Direct routing to Mario
    client_name: formData.name,
    client_company: formData.company,
    client_empresa: formData.company,   // Spanish compatibility
    client_email: formData.email,
    client_correo: formData.email,     // Spanish compatibility
    client_phone: formData.phone,
    client_telefono: formData.phone,   // Spanish compatibility
    client_message: formData.message,
    client_mensaje: formData.message,   // Spanish compatibility
    subject: subject
  };

  // Initialize EmailJS explicitly before sending
  if (typeof emailjs !== "undefined" && emailjs.init) {
    emailjs.init(EMAILJS_PUBLIC_KEY);
  }

  const promise1 = emailjs.send(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_MARIO, paramsMario, EMAILJS_PUBLIC_KEY)
    .catch(err => {
      console.error("Error en Plantilla de Notificación (Mario):", err);
      throw new Error(`Notificación a Mario falló (${err.text || err.message || "Template ID no encontrado"})`);
    });

  // Send auto-reply confirmation email to client
  let promise2 = Promise.resolve();
  if (EMAILJS_TEMPLATE_CLIENT) {
    const paramsClient = {
      to_name: formData.name,
      client_name: formData.name,
      to_email: formData.email,
      client_email: formData.email,
      client_company: formData.company,
      client_empresa: formData.company,
      subject: isDiagnostic
        ? "Confirmación de Solicitud de Diagnóstico Gratis - PEN Security"
        : "Hemos recibido tu mensaje - PEN Security",
      message: isDiagnostic
        ? "Se envió tu solicitud para el diagnóstico gratis y en breve PEN se pondrá en contacto contigo."
        : "Hemos recibido tu consulta técnica. Uno de nuestros ingenieros se pondrá en contacto contigo en breve."
    };
    promise2 = emailjs.send(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_CLIENT, paramsClient, EMAILJS_PUBLIC_KEY)
      .catch(err => {
        console.error("Error en Plantilla del Cliente (Auto-respuesta) - No bloqueante:", err);
        // We do NOT throw here, so a failure in the auto-reply template does not prevent the submission success UI.
      });
  }

  // Guardar en base de datos Supabase en segundo plano (no bloqueante)
  saveLeadToSupabase(formData, isDiagnostic);
  saveLeadToLocal(formData, isDiagnostic);

  return Promise.all([promise1, promise2])
    .catch(err => {
      console.warn("EmailJS falló en su ejecución. Ejecutando fallback de Formsubmit...", err);
      return runFormsubmitFallback();
    });
}

const COUNTRIES = [
  { code: "PE", name: "Perú", prefix: "+51", flag: "🇵🇪" },
  { code: "CL", name: "Chile", prefix: "+56", flag: "🇨🇱" },
  { code: "CO", name: "Colombia", prefix: "+57", flag: "🇨🇴" },
  { code: "MX", name: "México", prefix: "+52", flag: "🇲🇽" },
  { code: "AR", name: "Argentina", prefix: "+54", flag: "🇦🇷" },
  { code: "EC", name: "Ecuador", prefix: "+593", flag: "🇪🇨" },
  { code: "BO", name: "Bolivia", prefix: "+591", flag: "🇧🇴" },
  { code: "US", name: "EE.UU.", prefix: "+1", flag: "🇺🇸" }
];

function CountryPhoneInput({ value, onChange, disabled, id }) {
  const [isOpen, setIsOpen] = useStateS(false);
  const [selectedCountry, setSelectedCountry] = useStateS(COUNTRIES[0]);
  const [phoneNum, setPhoneNum] = useStateS("");
  const dropdownRef = React.useRef(null);

  React.useEffect(() => {
    if (!value) {
      setPhoneNum("");
    } else {
      const found = COUNTRIES.find(c => value.startsWith(c.prefix));
      if (found) {
        setSelectedCountry(found);
        setPhoneNum(value.replace(found.prefix, "").trim());
      } else {
        setPhoneNum(value);
      }
    }
  }, [value]);

  const triggerChange = (country, phone) => {
    const cleanedPhone = phone.replace(/\D/g, ""); // Keep only numbers
    setPhoneNum(cleanedPhone);
    onChange(`${country.prefix} ${cleanedPhone}`);
  };

  const handleSelectCountry = (country) => {
    setSelectedCountry(country);
    setIsOpen(false);
    triggerChange(country, phoneNum);
  };

  React.useEffect(() => {
    function handleClickOutside(event) {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  return (
    <div className="phone-input-wrapper" ref={dropdownRef}>
      <button
        type="button"
        disabled={disabled}
        className="phone-prefix-btn"
        onClick={() => setIsOpen(!isOpen)}
      >
        <span className="phone-prefix-flag">{selectedCountry.flag}</span>
        <span className="phone-prefix-val">{selectedCountry.prefix}</span>
        <span className="phone-prefix-arrow">▾</span>
      </button>
      
      {isOpen && (
        <div className="phone-prefix-dropdown">
          {COUNTRIES.map((c) => (
            <div
              key={c.code}
              className={`phone-prefix-option ${c.code === selectedCountry.code ? "active" : ""}`}
              onClick={() => handleSelectCountry(c)}
            >
              <span className="option-flag">{c.flag}</span>
              <span className="option-name">{c.name}</span>
              <span className="option-prefix">{c.prefix}</span>
            </div>
          ))}
        </div>
      )}
      
      <input
        type="tel"
        id={id}
        required
        disabled={disabled}
        className="form-input phone-main-input"
        placeholder="912 194 459"
        value={phoneNum}
        onChange={(e) => triggerChange(selectedCountry, e.target.value)}
      />
    </div>
  );
}

// ────────────────────────────────────────────────────────────────────
// Section · Contacto (Contact Subpage with Form & Map)
// ────────────────────────────────────────────────────────────────────
function SectionContact({ onBack }) {
  const [formData, setFormData] = useStateS({
    name: "",
    company: "",
    email: "",
    phone: "",
    message: ""
  });
  const [loading, setLoading] = useStateS(false);
  const [sent, setSent] = useStateS(false);
  const [error, setError] = useStateS(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    sendFormEmails(formData, "Nuevo Mensaje de Contacto - PEN Security", false)
      .then(() => {
        setLoading(false);
        setSent(true);
        setFormData({ name: "", company: "", email: "", phone: "", message: "" });
      })
      .catch((err) => {
        console.error("sendFormEmails failure in SectionContact:", err);
        setLoading(false);
        const errMsg = err?.text || err?.message || JSON.stringify(err) || "Ocurrió un error al enviar tu consulta.";
        setError(`Error: ${errMsg}. Por favor, verifícalo.`);
      });
  };

  return (
    <section className="sec sec-subpage" id="contact">
      <div className="container subpage-inner">
        <button className="btn-back mono" onClick={onBack}>
          ‹ Volver al inicio
        </button>

        <div className="sec-head subpage-head">
          <div className="mono-eyebrow">Contacto</div>
          <h2 className="sec-title">Hablemos de tu ciberseguridad</h2>
          <p className="sec-sub">
            Solicita tu diagnóstico gratuito de red o ponte en contacto directo con nuestro equipo especializado.
          </p>
        </div>

        <div className="contact-grid">
          <div className="contact-info-panel">
            <h3 className="contact-info-title">Datos de Contacto</h3>
            
            <div className="contact-info-list">
              <div className="contact-info-item">
                <span className="contact-info-label mono-dim">TELÉFONO</span>
                <a href="tel:+51912194459" className="contact-info-value mono">+51 912 194 459</a>
              </div>
              <div className="contact-info-item">
                <span className="contact-info-label mono-dim">CORREO</span>
                <a href="mailto:contacto@pen.pe" className="contact-info-value mono">contacto@pen.pe</a>
              </div>
              <div className="contact-info-item">
                <span className="contact-info-label mono-dim">DIRECCIÓN LIMA</span>
                <span className="contact-info-value">Av. Tomás Marsano 1921, dpto 905, Surquillo · Lima, Perú</span>
              </div>
            </div>

            <div className="contact-map-container">
              <iframe
                title="PEN Location map"
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3900.8654271810574!2d-77.0177727!3d-12.12132!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9105c7fc169c9b5f%3A0xc3cf336bb2018804!2sAv.%20Tom%C3%A1s%20Marsano%201921%2C%20Surquillo%2015047!5e0!3m2!1ses!2spe!4v1700000000000!5m2!1ses!2spe"
                width="100%"
                height="100%"
                style={{ border: 0 }}
                allowFullScreen=""
                loading="lazy"
              />
            </div>
          </div>

          <div className="contact-form-panel">
            <h3 className="contact-info-title">Solicitar Contacto</h3>
            
            {sent ? (
              <div className="contact-form-success">
                <div className="success-dot" />
                <h4 className="success-h">SOLICITUD ENVIADA</h4>
                <p className="success-p">Tu consulta ha sido registrada. Un analista te responderá en menos de 2 horas hábiles.</p>
              </div>
            ) : (
              <form className="contact-form" onSubmit={handleSubmit}>
                {error && <div className="form-error-msg">{error}</div>}
                
                <div className="form-group">
                  <label htmlFor="name" className="form-label mono-dim">Nombre Completo</label>
                  <input
                    type="text"
                    id="name"
                    required
                    disabled={loading}
                    className="form-input"
                    value={formData.name}
                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  />
                </div>
                <div className="form-group">
                  <label htmlFor="company" className="form-label mono-dim">Nombre de la Empresa</label>
                  <input
                    type="text"
                    id="company"
                    required
                    disabled={loading}
                    className="form-input"
                    value={formData.company}
                    onChange={(e) => setFormData({ ...formData, company: e.target.value })}
                  />
                </div>
                <div className="form-group-row">
                  <div className="form-group">
                    <label htmlFor="email" className="form-label mono-dim">Correo de Contacto</label>
                    <input
                      type="email"
                      id="email"
                      required
                      disabled={loading}
                      className="form-input"
                      value={formData.email}
                      onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                    />
                  </div>
                  <div className="form-group">
                    <label htmlFor="phone" className="form-label mono-dim">Teléfono Móvil</label>
                    <CountryPhoneInput
                      id="phone"
                      disabled={loading}
                      value={formData.phone}
                      onChange={(val) => setFormData({ ...formData, phone: val })}
                    />
                  </div>
                </div>
                <div className="form-group">
                  <label htmlFor="message" className="form-label mono-dim">Mensaje / Consulta Técnica</label>
                  <textarea
                    id="message"
                    required
                    disabled={loading}
                    rows="4"
                    className="form-input form-textarea"
                    value={formData.message}
                    onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                  />
                </div>
                
                <button type="submit" className="btn btn-primary btn-submit" disabled={loading}>
                  {loading ? "Enviando..." : "Enviar Mensaje"}
                  {!loading && <span className="btn-glyph">›</span>}
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────
// Section · Plataformas (Platforms Info Subpage)
// ────────────────────────────────────────────────────────────────────
function SectionPlatforms({ onBack, copy }) {
  if (!copy) return null;
  return (
    <section className="sec sec-subpage" id="platforms">
      <div className="container subpage-inner">
        <button className="btn-back mono" onClick={onBack}>
          ‹ Volver al inicio
        </button>

        <div className="sec-head subpage-head">
          <div className="mono-eyebrow">{copy.eyebrow}</div>
          <h2 className="sec-title">{copy.title}</h2>
          <p className="sec-sub">{copy.sub}</p>
        </div>

        <div className="platforms-detail-list">
          {copy.items.map((it, i) => (
            <div className="platform-detail-card" key={i} id={it.slug}>
              <div className="platform-card-glow" />
              <div className="platform-detail-grid">
                <div className="platform-detail-left">
                  <div className="platform-detail-badge mono-eyebrow">PLATAFORMA 0{i + 1}</div>
                  <h3 className="platform-detail-name">{it.name}</h3>
                  <div className="platform-detail-tagline mono">{it.tagline}</div>
                  <p className="platform-detail-desc">{it.desc}</p>
                </div>
                <div className="platform-detail-right">
                  <div className="platform-box platform-problem-box">
                    <h4 className="platform-box-h platform-problem-h">
                      <span className="box-icon">⚠️</span> EL PROBLEMA
                    </h4>
                    <p className="platform-box-p">{it.problem}</p>
                  </div>
                  <div className="platform-box platform-solution-box">
                    <h4 className="platform-box-h platform-solution-h">
                      <span className="box-icon">🛡️</span> LA SOLUCIÓN
                    </h4>
                    <p className="platform-box-p">{it.solution}</p>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ────────────────────────────────────────────────────────────────────
// Component · DiagnosticModal (CTA Free Assessment popup)
// ────────────────────────────────────────────────────────────────────
function DiagnosticModal({ isOpen, onClose }) {
  if (!isOpen) return null;

  const [formData, setFormData] = useStateS({
    name: "",
    company: "",
    email: "",
    phone: "",
    message: ""
  });
  const [loading, setLoading] = useStateS(false);
  const [sent, setSent] = useStateS(false);
  const [error, setError] = useStateS(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    setLoading(true);
    setError(null);

    sendFormEmails(formData, "Solicitud de Diagnóstico Gratuito - PEN Security", true)
      .then(() => {
        setLoading(false);
        setSent(true);
        setFormData({ name: "", company: "", email: "", phone: "", message: "" });
      })
      .catch((err) => {
        console.error("sendFormEmails failure in DiagnosticModal:", err);
        setLoading(false);
        const errMsg = err?.text || err?.message || JSON.stringify(err) || "Ocurrió un error al procesar tu solicitud.";
        setError(`Error: ${errMsg}. Por favor, verifícalo.`);
      });
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-container" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Cerrar modal">
          &times;
        </button>

        {sent ? (
          <div className="modal-success-content">
            <div className="success-dot" />
            <h3 className="success-h">DIAGNÓSTICO SOLICITADO</h3>
            <p className="success-p">
              Hemos registrado tus datos correctamente. Nos pondremos en contacto contigo en menos de 2 horas hábiles para coordinar tu auditoría gratuita.
            </p>
            <button className="btn btn-primary" onClick={onClose} style={{ marginTop: "20px" }}>
              Entendido
            </button>
          </div>
        ) : (
          <div className="modal-form-content">
            <div className="mono-eyebrow" style={{ color: "var(--pen-neon)", marginBottom: "4px" }}>AUDITORÍA DE RED</div>
            <h3 className="modal-title">Diagnóstico Gratuito</h3>
            <p className="modal-subtitle">
              Analizamos tus vulnerabilidades de red y diseñamos tu plan de defensa sin costo.
            </p>

            {error && <div className="form-error-msg">{error}</div>}

            <form onSubmit={handleSubmit} className="contact-form modal-form">
              <div className="form-group">
                <label className="form-label mono-dim">Nombre Completo</label>
                <input
                  type="text"
                  required
                  disabled={loading}
                  className="form-input"
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                />
              </div>

              <div className="form-group">
                <label className="form-label mono-dim">Nombre de la Empresa</label>
                <input
                  type="text"
                  required
                  disabled={loading}
                  className="form-input"
                  value={formData.company}
                  onChange={(e) => setFormData({ ...formData, company: e.target.value })}
                />
              </div>

              <div className="form-group-row">
                <div className="form-group">
                  <label className="form-label mono-dim">Correo de Contacto</label>
                  <input
                    type="email"
                    required
                    disabled={loading}
                    className="form-input"
                    value={formData.email}
                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                  />
                </div>
                <div className="form-group">
                  <label className="form-label mono-dim">Celular / Teléfono</label>
                  <CountryPhoneInput
                    disabled={loading}
                    value={formData.phone}
                    onChange={(val) => setFormData({ ...formData, phone: val })}
                  />
                </div>
              </div>

              <div className="form-group">
                <label className="form-label mono-dim">Mensaje / Consulta (Opcional)</label>
                <textarea
                  rows="2"
                  disabled={loading}
                  className="form-input form-textarea"
                  value={formData.message}
                  onChange={(e) => setFormData({ ...formData, message: e.target.value })}
                />
              </div>

              <button type="submit" className="btn btn-primary btn-submit" disabled={loading} style={{ width: "100%", justifyContent: "center" }}>
                {loading ? "Procesando..." : "Enviar Solicitud"}
                {!loading && <span className="btn-glyph">›</span>}
              </button>
            </form>
          </div>
        )}
      </div>
    </div>
  );
}

function SectionCRM({ onBack }) {
  const [passcode, setPasscode] = useStateS("");
  const [isAuthenticated, setIsAuthenticated] = useStateS(false);
  const [error, setError] = useStateS("");
  const [leads, setLeads] = useStateS([]);

  // Load and seed leads
  useEffectS(() => {
    try {
      const rawLeads = localStorage.getItem("pen_leads");
      if (!rawLeads) {
        // Seed mock leads for demo
        const mockLeads = [
          {
            id: "mock-1",
            name: "Alejandro Castro",
            company: "Inversiones Castro S.A.C.",
            email: "acastro@incastro.pe",
            phone: "+51 987 654 321",
            message: "Solicito diagnóstico gratuito para nuestra red de 35 computadoras. Hemos visto comportamientos raros en el correo del administrador.",
            type: "diagnostico",
            date: new Date(Date.now() - 3600000 * 2).toISOString(), // 2 hours ago
            status: "NUEVO"
          },
          {
            id: "mock-2",
            name: "Sofía Mendoza",
            company: "Mendoza Retail E.I.R.L.",
            email: "contacto@sofiamendoza.com",
            phone: "+51 912 345 678",
            message: "Consulta técnica sobre el firewall perimetral y segmentación de red. Queremos aislar la red de cámaras.",
            type: "contacto",
            date: new Date(Date.now() - 3600000 * 24).toISOString(), // 1 day ago
            status: "CONTACTADO"
          }
        ];
        localStorage.setItem("pen_leads", JSON.stringify(mockLeads));
        setLeads(mockLeads);
      } else {
        setLeads(JSON.parse(rawLeads));
      }
    } catch (e) {
      console.error("Fallo al cargar leads:", e);
    }
  }, []);

  const handleLogin = (e) => {
    e.preventDefault();
    if (passcode === "1805mana") {
      setIsAuthenticated(true);
      setError("");
    } else {
      setError("ACCESO DENEGADO: CLAVE INCORRECTA");
    }
  };

  const handleStatusChange = (leadId, newStatus) => {
    const updated = leads.map(l => l.id === leadId ? { ...l, status: newStatus } : l);
    setLeads(updated);
    localStorage.setItem("pen_leads", JSON.stringify(updated));
  };

  const handleDelete = (leadId) => {
    if (confirm("¿Está seguro de eliminar este lead del CRM de forma permanente?")) {
      const updated = leads.filter(l => l.id !== leadId);
      setLeads(updated);
      localStorage.setItem("pen_leads", JSON.stringify(updated));
    }
  };

  const handleCopy = (lead) => {
    const text = `Nombre: ${lead.name}\nEmpresa: ${lead.company}\nCelular: ${lead.phone}\nCorreo: ${lead.email}\nMensaje: ${lead.message}`;
    navigator.clipboard.writeText(text);
    alert("Datos de contacto copiados al portapapeles.");
  };

  const handleExportCSV = () => {
    if (leads.length === 0) return alert("No hay leads para exportar.");
    
    // CSV headers
    let csvContent = "data:text/csv;charset=utf-8,\uFEFF";
    csvContent += "Fecha,Nombre,Empresa,Email,Telefono,Tipo,Estado,Mensaje\n";
    
    leads.forEach(l => {
      const dateStr = new Date(l.date).toLocaleString("es-PE");
      const cleanMsg = l.message.replace(/"/g, '""');
      csvContent += `"${dateStr}","${l.name}","${l.company}","${l.email}","${l.phone}","${l.type}","${l.status}","${cleanMsg}"\n`;
    });
    
    const encodedUri = encodeURI(csvContent);
    const link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", `PEN_Leads_${new Date().toISOString().split('T')[0]}.csv`);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  // KPI Calculations
  const totalLeads = leads.length;
  const newLeads = leads.filter(l => l.status === "NUEVO").length;
  const activeLeads = leads.filter(l => l.status === "CONTACTADO" || l.status === "AGENDADO").length;
  const completedLeads = leads.filter(l => l.status === "COMPLETADO").length;

  if (!isAuthenticated) {
    return (
      <section className="sec sec-subpage">
        <div className="container subpage-inner">
          <button className="btn-back mono" onClick={onBack}>
            ‹ Volver al inicio
          </button>
          
          <div className="crm-gate">
            <div className="crm-gate-title">ADMIN GATEWAY · PEN</div>
            {error && <div className="crm-gate-error">⚡ {error}</div>}
            <form onSubmit={handleLogin}>
              <input
                type="password"
                required
                className="crm-gate-input"
                placeholder="CLAVE DE ACCESO"
                value={passcode}
                onChange={(e) => setPasscode(e.target.value)}
                autoFocus
              />
              <button type="submit" className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }}>
                INICIAR SESIÓN ›
              </button>
            </form>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="sec sec-subpage">
      <div className="container subpage-inner">
        <button className="btn-back mono" onClick={onBack}>
          ‹ Volver al inicio
        </button>
        
        <div className="sec-head subpage-head">
          <div className="mono-eyebrow" style={{ color: "var(--pen-neon)" }}>SISTEMA DE GESTIÓN</div>
          <h2 className="sec-title">PEN Lead CRM Dashboard</h2>
          <p className="sec-sub">
            Gestión y seguimiento en tiempo real de solicitudes de contacto y diagnóstico gratuito recibidas en el portal.
          </p>
        </div>

        <div className="crm-dashboard">
          {/* KPIs */}
          <div className="crm-kpis">
            <div className="crm-kpi-card">
              <div className="crm-kpi-val">{totalLeads}</div>
              <div className="crm-kpi-label">Leads Totales</div>
            </div>
            <div className="crm-kpi-card">
              <div className="crm-kpi-val" style={{ color: "#00FF7A" }}>{newLeads}</div>
              <div className="crm-kpi-label">Nuevas Alertas</div>
            </div>
            <div className="crm-kpi-card">
              <div className="crm-kpi-val" style={{ color: "#FFB800" }}>{activeLeads}</div>
              <div className="crm-kpi-label">En Seguimiento</div>
            </div>
            <div className="crm-kpi-card">
              <div className="crm-kpi-val" style={{ color: "#00CC66" }}>{completedLeads}</div>
              <div className="crm-kpi-label">Cerrados / Listos</div>
            </div>
          </div>

          {/* Toolbar */}
          <div className="crm-toolbar">
            <div className="mono-dim">Mostrando {leads.length} registros de clientes</div>
            <button className="btn btn-ghost" onClick={handleExportCSV}>
              📥 Exportar a CSV (Excel)
            </button>
          </div>

          {/* Leads Table */}
          <div className="crm-table-container">
            {leads.length === 0 ? (
              <div className="crm-empty-state">NO SE DETECTAN LEADS EN BASE DE DATOS LOCAL</div>
            ) : (
              <table className="crm-table">
                <thead>
                  <tr>
                    <th>Fecha</th>
                    <th>Nombre / Empresa</th>
                    <th>Contacto</th>
                    <th>Tipo</th>
                    <th>Mensaje</th>
                    <th>Estado de Lead</th>
                    <th>Acción</th>
                  </tr>
                </thead>
                <tbody>
                  {leads.map((l) => (
                    <tr key={l.id}>
                      <td className="mono" style={{ fontSize: "11px", color: "var(--fg-3)" }}>
                        {new Date(l.date).toLocaleString("es-PE", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" })}
                      </td>
                      <td>
                        <div style={{ fontWeight: "600", color: "var(--fg-1)" }}>{l.name}</div>
                        <div className="mono" style={{ fontSize: "11px", color: "var(--pen-mint)" }}>{l.company}</div>
                      </td>
                      <td>
                        <div style={{ fontSize: "12px" }}>{l.email}</div>
                        <div className="mono" style={{ fontSize: "11px", color: "var(--fg-3)" }}>{l.phone}</div>
                      </td>
                      <td>
                        <span className={`crm-badge crm-badge-${l.type}`}>
                          {l.type === "diagnostico" ? "Auditoría" : "Consulta"}
                        </span>
                      </td>
                      <td>
                        <div className="crm-lead-msg" title={l.message}>
                          {l.message || "(Sin mensaje)"}
                        </div>
                      </td>
                      <td>
                        <select 
                          value={l.status}
                          onChange={(e) => handleStatusChange(l.id, e.target.value)}
                          className={`crm-status-select status-${l.status.toLowerCase()}`}
                        >
                          <option value="NUEVO">Nuevo</option>
                          <option value="CONTACTADO">Contactado</option>
                          <option value="AGENDADO">Agendado</option>
                          <option value="COMPLETADO">Completado</option>
                          <option value="DESCARTADO">Descartado</option>
                        </select>
                      </td>
                      <td>
                        <div className="crm-actions">
                          <button 
                            className="crm-btn-icon" 
                            title="Copiar detalles"
                            onClick={() => handleCopy(l)}
                          >
                            📋
                          </button>
                          <a 
                            href={`mailto:${l.email}?subject=PEN%20Security%20-%20Contacto&body=Hola%20${encodeURIComponent(l.name)},`}
                            className="crm-btn-icon"
                            title="Enviar correo"
                          >
                            ✉️
                          </a>
                          <button 
                            className="crm-btn-icon crm-delete-btn" 
                            title="Eliminar"
                            onClick={() => handleDelete(l.id)}
                          >
                            🗑️
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SectionComo, SectionClientes, SectionFAQ, SectionFinalCta, FooterPen, SectionAbout, SectionBlog, SectionContact, SectionPlatforms, DiagnosticModal, SectionCRM });