// Services index page + Blog system
const { useState: bUS } = React;

function ServicesIndex() {
  return (
    <div className="ea-root">
      <window.NavBar active="services"/>
      <section className="svcidx-hero">
        <div className="ea-kicker">NUESTROS SERVICIOS</div>
        <h1>Soluciones integrales en<br/>ingeniería ambiental</h1>
        <p>Seis líneas de servicio que cubren el ciclo completo de un proyecto ambiental — desde el levantamiento geoespacial hasta la operación, el monitoreo y la interventoría.</p>
      </section>
      <div className="svcidx-grid">
        {window.SERVICES.map((s,i) => {
          const data = window.SVC_DATA[s.slug];
          const ImgComp = window["Img" + (data?.img || "")];
          return (
            <a key={i} href={`/servicio-${s.slug}`} className="svcidx-card">
              <div className="img">{ImgComp && <ImgComp/>}</div>
              <div className="body">
                <h3>{s.name}</h3>
                <p>{s.short}</p>
                <span className="more">VER SERVICIO →</span>
              </div>
            </a>
          );
        })}
      </div>
      <window.FooterFull/>
      <window.ContactModal/>
      <a href={window.COMPANY.whatsapp} target="_blank" rel="noopener" className="wa-float" aria-label="WhatsApp">
        <svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.1 3.2 5.1 4.5 2.5 1.1 3 .9 3.5.8.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.2-.3-.3-.5-.4zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.4 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/></svg>
      </a>
    </div>
  );
}

const POSTS = [
  {
    slug: "ortofoto-relleno-loma-cocos",
    tag: "GEOMÁTICA",
    title: "Ortofoto del Relleno Sanitario Loma de los Cocos: cómo el dron cambió la forma de planificar",
    excerpt: "Un vuelo aerofotogramétrico con dron RTK permitió generar una ortofoto a 4 cm/píxel del relleno regional de Cartagena, transformando la manera en que el operador planifica celdas y monitorea el avance del frente activo.",
    img: "BlogImgRelleno",
    author: "Equipo técnico Enfoque Ambiental",
    date: "Octubre 2024",
    read: "6 min",
  },
  {
    slug: "monitoreo-pgirs-municipios",
    tag: "MONITOREO",
    title: "PGIRS municipales: tres errores que pueden bloquear su actualización ante la autoridad ambiental",
    excerpt: "Después de actualizar PGIRS para Cartagena, Arjona y Becerril, hemos identificado los tres puntos donde más proyectos quedan atascados en la revisión — y cómo prevenirlos desde la formulación.",
    img: "BlogImgMonitor",
    author: "Equipo técnico Enfoque Ambiental",
    date: "Septiembre 2024",
    read: "8 min",
  },
  {
    slug: "drones-monitoreo-ambiental",
    tag: "INNOVACIÓN",
    title: "Por qué los drones ya no son opcionales en el monitoreo ambiental de proyectos lineales",
    excerpt: "Vías, líneas de transmisión y oleoductos generan obligaciones de seguimiento que la fotogrametría con dron resuelve más rápido y a menor costo que el levantamiento topográfico tradicional.",
    img: "BlogImgDrone",
    author: "Equipo técnico Enfoque Ambiental",
    date: "Agosto 2024",
    read: "5 min",
  },
];

function BlogIndex() {
  return (
    <div className="ea-root">
      <window.NavBar active="blog"/>
      <section className="blog-hero">
        <div className="ea-kicker">BLOG</div>
        <h1>Conocimiento técnico,<br/>experiencia compartida</h1>
        <p>Artículos, guías y casos de estudio sobre ingeniería ambiental, geomática y gestión territorial — escritos por el equipo que ejecuta los proyectos.</p>
      </section>
      <div className="blog-grid">
        {POSTS.map((p,i) => {
          const ImgComp = window[p.img];
          return (
            <a key={i} href={`/blog-${p.slug}`} className="blog-card">
              <div className="img">{ImgComp && <ImgComp/>}</div>
              <div className="body">
                <span className="tag">{p.tag}</span>
                <h3>{p.title}</h3>
                <p>{p.excerpt}</p>
                <div className="meta">
                  <span>{p.date}</span>
                  <span>{p.read} de lectura</span>
                </div>
              </div>
            </a>
          );
        })}
      </div>
      <window.FooterFull/>
      <window.ContactModal/>
      <a href={window.COMPANY.whatsapp} target="_blank" rel="noopener" className="wa-float" aria-label="WhatsApp">
        <svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.1 3.2 5.1 4.5 2.5 1.1 3 .9 3.5.8.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.2-.3-.3-.5-.4zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.4 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/></svg>
      </a>
    </div>
  );
}

// Blog article content
const ARTICLES = {
  "ortofoto-relleno-loma-cocos": {
    tag: "GEOMÁTICA · CASO DE ESTUDIO",
    title: "Ortofoto del Relleno Sanitario Loma de los Cocos: cómo el dron cambió la forma de planificar",
    meta: "Octubre 2024 · 6 min de lectura",
    cover: "BlogImgRelleno",
    body: [
      ["lead", "El relleno sanitario regional Loma de los Cocos atiende a Cartagena y municipios vecinos. Con celdas activas en expansión, el operador necesitaba una base cartográfica actualizada que le permitiera planificar la disposición sin recurrir cada mes al levantamiento topográfico tradicional."],
      ["p", "Voló nuestro equipo con un DJI Phantom 4 RTK sobre 82,4 hectáreas, capturando 1.247 imágenes con 80% de traslape longitudinal y 70% lateral. La red de control terrestre se materializó con 12 GCP medidos con GPS de doble frecuencia, distribuidos para cubrir variaciones de elevación entre 18 y 64 m.s.n.m."],
      ["h2", "Resultado: una ortofoto operativa a 4 cm por píxel"],
      ["p", "El procesamiento en flujo Pix4D con ajuste de bloque entregó una ortofoto georreferenciada en MAGNA-SIRGAS 18N con un error medio cuadrático horizontal de 2,8 cm y vertical de 4,1 cm. Sobre esa misma base se generó el modelo digital del terreno (MDT) y curvas de nivel cada 50 cm para los frentes activos."],
      ["pull", "Lo que antes tomaba dos semanas y un equipo de cinco topógrafos, ahora lo resolvemos en dos días con un piloto, un operador y los datos en la nube."],
      ["h2", "Tres usos inmediatos para el operador"],
      ["p", "La cartografía no es un fin — es un insumo. El equipo del relleno empezó a usar la ortofoto en tres frentes desde la primera semana:"],
      ["ul", ["**Planificación de celdas**: comparación volumétrica entre vuelos sucesivos para calcular el avance del relleno y proyectar la fecha de cierre de cada celda.","**Control de drenajes y chimeneas de gas**: localización exacta de la red de captación de lixiviados sobre la imagen para mantenimiento y ampliación.","**Monitoreo del cierre**: verificación del estado de la cobertura final en celdas clausuradas, detectando puntos de erosión o deslizamiento."]],
      ["h2", "Lo que viene: vuelos periódicos como serie de tiempo"],
      ["p", "Con el modelo de costos validado, el operador agendó vuelos cada cuatro meses durante el próximo año. El objetivo es construir una serie temporal que permita medir tasas de relleno, detectar asentamientos diferenciales en celdas clausuradas y respaldar los reportes ICA con evidencia cartográfica de calidad."],
      ["p", "Para Enfoque Ambiental, este caso confirma una hipótesis que veníamos trabajando hace años: el dron RTK no compite con la topografía tradicional — la complementa. La topografía sigue siendo la red maestra de control. El dron es la forma rápida de actualizar lo que pasa entre dos campañas topográficas."],
      ["cta", null],
    ],
  },
  "monitoreo-pgirs-municipios": {
    tag: "MONITOREO · GUÍA TÉCNICA",
    title: "PGIRS municipales: tres errores que pueden bloquear su actualización ante la autoridad ambiental",
    meta: "Septiembre 2024 · 8 min de lectura",
    cover: "BlogImgMonitor",
    body: [
      ["lead", "El Plan de Gestión Integral de Residuos Sólidos (PGIRS) es la columna vertebral de la política de aseo de un municipio. Después de actualizar PGIRS para Cartagena, Arjona, Becerril, San Jacinto y Ariguaní, identificamos tres puntos donde más proyectos se quedan atascados en la fase de revisión."],
      ["h2", "Error 1: caracterización de residuos sin trazabilidad"],
      ["p", "La caracterización es el corazón del PGIRS. La autoridad ambiental no acepta cifras agregadas sin la documentación que las soporta — pesajes diarios firmados, fotografías del proceso, planillas de muestreo y cadena de custodia. Si la caracterización no está documentada paso a paso, todas las metas que se derivan de ella quedan en el aire."],
      ["pull", "Una caracterización bien hecha vale más que un PGIRS de 200 páginas: define el techo y el piso de todo lo que vendrá después."],
      ["p", "Recomendación: ejecute caracterización por cuatro estaciones (al menos una en temporada turística si aplica) con muestreo aleatorio mínimo de 200 kg por estrato socioeconómico. Documente con GPS, fotografía, planilla y firma del operador."],
      ["h2", "Error 2: programas sin presupuesto realista"],
      ["p", "Un PGIRS con 14 programas y un presupuesto vago no se aprueba. La autoridad ambiental quiere ver costos detallados año por año, fuente de financiación identificada y responsable institucional con nombre y cargo. Sin eso, los programas se leen como buenas intenciones."],
      ["p", "Lo que funciona: matriz cruzada de programa × año × actividad × costo unitario × cantidad × fuente. Con esa matriz se puede defender cada cifra ante la revisión y, más importante, ejecutar el plan después."],
      ["h2", "Error 3: indicadores sin línea base"],
      ["p", "El error más frecuente es plantear indicadores ('reducir disposición final en 20%') sin declarar el valor base contra el cual se medirá. La autoridad pide línea base + meta + frecuencia + medio de verificación. Cuatro datos por indicador. Si falta uno, la observación llega y el plazo se alarga."],
      ["h2", "Cómo lo abordamos en proyectos recientes"],
      ["ul", ["Diagnóstico documental + recorrido de campo en las dos primeras semanas, con foto-bitácora y entrevistas grabadas.","Caracterización supervisada por ingeniero sanitario y validada con laboratorio acreditado.","Reuniones quincenales con la oficina de servicios públicos del municipio para validar metas y presupuesto.","Radicación con anexos digitales y físicos, y acompañamiento durante la respuesta a requerimientos."]],
      ["p", "Con esa metodología, los cinco PGIRS que ejecutamos en los últimos seis años fueron aprobados sin requerimientos de fondo — en algunos casos con observaciones menores de forma. El estándar es replicable y mejora con cada proyecto."],
      ["cta", null],
    ],
  },
  "drones-monitoreo-ambiental": {
    tag: "INNOVACIÓN · INFRAESTRUCTURA LINEAL",
    title: "Por qué los drones ya no son opcionales en el monitoreo ambiental de proyectos lineales",
    meta: "Agosto 2024 · 5 min de lectura",
    cover: "BlogImgDrone",
    body: [
      ["lead", "Vías, líneas de transmisión y oleoductos comparten una característica difícil para el monitoreo ambiental tradicional: longitud kilométrica con accesos limitados. Para esos proyectos, el dron dejó de ser una novedad — es la herramienta económica obvia."],
      ["h2", "El cambio en los números"],
      ["p", "Un kilómetro de vía levantado con cuadrilla de topografía toma de 1 a 2 días, requiere 3 a 5 personas y deja una franja de información acotada. El mismo kilómetro con dron RTK se vuela en menos de 30 minutos, con 2 personas, y entrega una franja de 200-300 metros con resolución de 3-5 cm/píxel."],
      ["p", "El cálculo cambia cuando entran 50, 100 o 300 kilómetros. Lo que antes tomaba meses, hoy se ejecuta en una sola campaña de pocos días."],
      ["pull", "El dron no reemplaza al topógrafo. Le permite cubrir más territorio y dedicar el levantamiento de precisión a los puntos críticos."],
      ["h2", "Tres aplicaciones que hoy son rutinarias"],
      ["ul", ["**Línea base ambiental**: caracterización de coberturas, geomorfología y cuerpos de agua a lo largo del corredor del proyecto.","**Seguimiento de obra**: vuelos periódicos para verificar avance, identificación de afectaciones no autorizadas y apoyo a interventoría.","**Cierre y compensaciones**: verificación de áreas restauradas, sembrados y obras de manejo después del retiro de la maquinaria."]],
      ["h2", "Lo que viene: multiespectral y LiDAR"],
      ["p", "Las cámaras multiespectrales abren la puerta al monitoreo del estrés vegetal en compensaciones forestales — un parámetro que antes solo se medía en parcelas físicas. El LiDAR aerotransportado, por su parte, está bajando de precio y permite levantamientos bajo cobertura vegetal densa, escenario donde la fotogrametría tradicional falla."],
      ["p", "En Enfoque Ambiental ya integramos cámaras multiespectrales en proyectos puntuales. La curva de adopción es la esperable: lo que hace dos años era piloto, este año es práctica estándar para los clientes que entienden el ahorro de tiempo y la calidad del dato."],
      ["cta", null],
    ],
  },
};

function ArticlePage({ slug }) {
  const a = ARTICLES[slug];
  if (!a) return <div>Artículo no encontrado</div>;
  const Cover = window[a.cover];
  const openContact = (event) => {
    event.preventDefault();
    window.openContactModal?.({ source: `Artículo: ${a.title}` });
  };
  return (
    <div className="ea-root">
      <window.NavBar active="blog"/>
      <section className="art-hero">
        <div className="art-hero-inner">
          <span className="tag">{a.tag}</span>
          <h1>{a.title}</h1>
          <div className="meta">{a.meta}</div>
        </div>
      </section>
      <div className="art-cover">{Cover && <Cover/>}</div>
      <article className="art-body">
        {a.body.map(([kind, content], i) => {
          if (kind === "lead") return <p key={i} className="lead">{content}</p>;
          if (kind === "p") return <p key={i} dangerouslySetInnerHTML={{__html: content.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")}}/>;
          if (kind === "h2") return <h2 key={i}>{content}</h2>;
          if (kind === "h3") return <h3 key={i}>{content}</h3>;
          if (kind === "pull") return <div key={i} className="art-pull">"{content}"</div>;
          if (kind === "ul") return <ul key={i}>{content.map((li,j) => <li key={j} dangerouslySetInnerHTML={{__html: li.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>")}}/>)}</ul>;
          if (kind === "cta") return null;
          return null;
        })}
      </article>
      <div className="art-cta">
        <h3>¿Tiene un proyecto que necesita esta capacidad?</h3>
        <p>Coordinamos una visita técnica sin costo y le entregamos una propuesta detallada en menos de 5 días hábiles.</p>
        <div className="row">
          <a href="#contacto" onClick={openContact} className="ea-btn ea-btn-green">SOLICITAR ASESORÍA <span className="ea-arrow">→</span></a>
          <a href="/blog" className="ea-btn ea-btn-outline">VER MÁS ARTÍCULOS</a>
        </div>
      </div>
      <window.FooterFull/>
      <window.ContactModal/>
      <a href={window.COMPANY.whatsapp} target="_blank" rel="noopener" className="wa-float" aria-label="WhatsApp">
        <svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.4-1.5-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5-.1-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.2.2 2.1 3.2 5.1 4.5 2.5 1.1 3 .9 3.5.8.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.2-.3-.3-.5-.4zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.4 1.3 4.9L2 22l5.3-1.4c1.4.8 3 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2z"/></svg>
      </a>
    </div>
  );
}

window.ServicesIndex = ServicesIndex;
window.BlogIndex = BlogIndex;
window.ArticlePage = ArticlePage;
window.POSTS = POSTS;
window.ARTICLES = ARTICLES;