// Page builder shared between service and blog pages
const { useState: pUS, useEffect: pUE } = React;

// Service definitions with full content per service
const SVC_DATA = {
  geomatica: {
    ic: "layers",
    crumb: "INICIO / SERVICIOS / GEOMÁTICA",
    title1: "Geomática y", title2: "Geoinformación",
    titleGreen: "Geoinformación",
    sub: "Levantamientos aerofotogramétricos con dron, GPS RTK, LiDAR y análisis geoespacial avanzado para proyectos que exigen precisión submétrica.",
    img: "Geomatica",
    vp: [
      ["01","Precisión RTK","Levantamientos georreferenciados con corrección RTK y red GNSS, error < 3 cm en X-Y."],
      ["02","Dron + LiDAR","Captura aérea con sensores RGB, multiespectral y LiDAR para terrenos complejos."],
      ["03","Modelos 3D","Generación de DEM, DTM, ortofotos, curvas de nivel y nubes de puntos."],
      ["04","Cumplimiento IGAC","Productos cartográficos en sistemas de referencia oficiales (MAGNA-SIRGAS)."],
    ],
    do_h: "Cartografía precisa que da soporte técnico a sus decisiones",
    do_p: ["Diseñamos y ejecutamos vuelos fotogramétricos con drones RTK y procesamos los datos en flujos certificados de fotogrametría digital. Cada producto se valida con puntos de control terrestre (GCP) y se entrega listo para integrarse en plataformas SIG.","Trabajamos para entidades públicas, sector hidrocarburos, infraestructura vial, minería y proyectos ambientales — donde la precisión cartográfica es la base de todo."],
    do_list: ["Levantamientos topográficos con GPS RTK","Vuelos fotogramétricos con drones DJI Phantom 4 RTK / Matrice","Generación de ortofotos georreferenciadas","Modelos digitales de elevación (DEM/DTM)","Curvas de nivel y secciones transversales","Cálculo de volúmenes y movimiento de tierras"],
    proc: [
      ["FASE 01","Planificación de vuelo","Definición del área, altura de vuelo, traslapes y red de GCP según resolución requerida."],
      ["FASE 02","Captura en campo","Vuelo con dron RTK + levantamiento topográfico de puntos de control con GPS de doble frecuencia."],
      ["FASE 03","Procesamiento","Aerotriangulación, ajuste de bloque, generación de ortofotos, MDE y nubes de puntos densas."],
      ["FASE 04","Entregables","Productos cartográficos, informe técnico de precisión y carga en plataforma SIG."],
    ],
    tech: ["DJI Phantom 4 RTK","DJI Matrice 300","Pix4D","Agisoft Metashape","Trimble R2","ArcGIS Pro","QGIS","CloudCompare","Global Mapper","Civil 3D","ERDAS","ENVI"],
    related: ["sig","monitoreo","ingenieria"],
  },
  "estudios-ambientales": {
    ic: "pin",
    crumb: "INICIO / SERVICIOS / ESTUDIOS AMBIENTALES",
    title1: "Estudios y Gestión", title2: "Ambiental",
    titleGreen: "Ambiental",
    sub: "Elaboramos estudios de impacto ambiental, planes de manejo, PGIRS y trámites de licenciamiento que pasan los filtros de la autoridad ambiental.",
    img: "EIA",
    vp: [
      ["01","EIA Term. de Referencia","Estudios estructurados según los TdR vigentes de ANLA y autoridades ambientales regionales."],
      ["02","PMA y PMS","Planes de manejo ambiental con medidas preventivas, correctivas y compensatorias."],
      ["03","PGIRS y PGIRSH","Planes de gestión integral de residuos sólidos municipales y hospitalarios."],
      ["04","Licenciamiento","Acompañamiento integral en trámites ante ANLA, CARs y autoridades distritales."],
    ],
    do_h: "Estudios técnicos que sostienen su licencia ambiental",
    do_p: ["Hemos elaborado más de 24 estudios y planes ambientales para municipios, departamentos, hospitales y empresas operadoras. Conocemos los términos de referencia, los protocolos de campo y la documentación que las autoridades exigen — eso reduce los tiempos de revisión y aumenta la probabilidad de aprobación al primer intento.","Equipo multidisciplinar: biólogos, ingenieros sanitarios, sociólogos, ingenieros forestales y abogados ambientales."],
    do_list: ["Estudios de Impacto Ambiental (EIA)","Diagnósticos Ambientales de Alternativas (DAA)","Planes de Manejo Ambiental (PMA)","Planes de Gestión Integral de Residuos Sólidos (PGIRS)","Plan de Gestión Integral de Residuos Hospitalarios (PGIRSH)","Permisos de vertimientos, captación, ocupación de cauce","Plan de Uso Eficiente y Ahorro de Agua (PUEAA)","Plan de Contingencia y Emergencia"],
    proc: [
      ["FASE 01","Diagnóstico","Caracterización abiótica, biótica y socioeconómica del área de influencia."],
      ["FASE 02","Evaluación de impactos","Identificación, valoración y jerarquización de impactos significativos."],
      ["FASE 03","Plan de manejo","Diseño de medidas de prevención, mitigación, corrección y compensación."],
      ["FASE 04","Trámite y seguimiento","Radicación, acompañamiento durante la evaluación y respuesta a requerimientos."],
    ],
    tech: ["ArcGIS Pro","QGIS","RIAM","Conesa","HEC-RAS","SoundPLAN","Aermod","Excel","Word","Project","R Statistics","Power BI"],
    related: ["monitoreo","consultoria","sig"],
  },
  monitoreo: {
    ic: "leaf",
    crumb: "INICIO / SERVICIOS / MONITOREO",
    title1: "Monitoreo y", title2: "Seguimiento",
    titleGreen: "Seguimiento",
    sub: "Programas de monitoreo ambiental, social y predial con trazabilidad documental y reportes que cumplen los protocolos de la autoridad ambiental.",
    img: "Monitoreo",
    vp: [
      ["01","Tiempo real","Estaciones telemétricas para calidad de aire, ruido, agua y meteorología."],
      ["02","Trazabilidad","Cadena de custodia de muestras, laboratorios IDEAM-acreditados y reportes auditables."],
      ["03","Cumplimiento","Reportes ICA con la frecuencia y formato exigidos por ANLA / CARs."],
      ["04","Tableros visuales","Dashboards web con indicadores y alertas para el equipo del cliente."],
    ],
    do_h: "Información ambiental confiable, en el momento que la necesita",
    do_p: ["Operamos programas de monitoreo en operaciones activas de relleno sanitario, infraestructura vial, hidrocarburos y agroindustria. Combinamos sensores fijos, campañas periódicas y monitoreo con drones para entregar información que sirve tanto al cumplimiento normativo como a la toma de decisiones operativas.","Cada programa incluye muestreo certificado, laboratorios acreditados ante el IDEAM, análisis estadístico y reportes ICA listos para radicar."],
    do_list: ["Calidad del aire (PM2.5, PM10, gases)","Niveles de presión sonora (ruido ambiental y de fuentes fijas)","Calidad del agua superficial y subterránea","Vertimientos industriales y domésticos","Monitoreo de fauna y flora (avifauna, mastofauna, herpetofauna)","Monitoreo predial y social","Monitoreo de cierres de relleno sanitario","Reportes ICA trimestrales y anuales"],
    proc: [
      ["FASE 01","Diseño del programa","Definición de puntos, parámetros, frecuencia y protocolos según normatividad."],
      ["FASE 02","Operación de campo","Muestreo con personal calificado, equipos calibrados y cadena de custodia."],
      ["FASE 03","Análisis","Procesamiento en laboratorio acreditado y análisis estadístico de tendencias."],
      ["FASE 04","Reporte","Informes ICA, dashboards web y atención de requerimientos de la autoridad."],
    ],
    tech: ["Sonómetros Tipo 1","Estaciones meteo Davis","Multiparamétricos YSI","Drones DJI","Power BI","Grafana","ArcGIS Online","Survey123","R","Python","Excel","SAP"],
    related: ["estudios-ambientales","sig","consultoria"],
  },
  sig: {
    ic: "chart",
    crumb: "INICIO / SERVICIOS / SIG",
    title1: "Sistemas de Información", title2: "Geográfica",
    titleGreen: "Geográfica",
    sub: "Diseñamos e implementamos plataformas SIG, geodatabases corporativas y visores web para que sus datos espaciales se conviertan en decisiones.",
    img: "SIG",
    vp: [
      ["01","Geodatabases","Modelos de datos corporativos (file/SDE) con versionamiento y control de calidad."],
      ["02","Visores web","Aplicaciones web con ArcGIS Online, GeoServer y Leaflet para clientes y operativos."],
      ["03","Análisis espacial","Modelos de aptitud, vulnerabilidad, riesgo, dispersión y rutas óptimas."],
      ["04","Integración","Conectamos SIG con BPM, ERP, IoT y sensores para flujo de información en tiempo real."],
    ],
    do_h: "Sus datos espaciales, organizados y al alcance del equipo",
    do_p: ["Construimos infraestructuras de datos espaciales (IDE) corporativas: desde el modelo de datos y la geodatabase hasta el visor web que el equipo de campo usa cada día. Trabajamos con licencias ESRI o stack open source según el caso.","La cartografía deja de ser un archivo perdido y se convierte en una capa viva del negocio: actualizada, consultable y conectada con el resto de los sistemas de la organización."],
    do_list: ["Diseño de modelos de datos espaciales","Implementación de geodatabases (Geodatabase, PostGIS)","Desarrollo de visores web con ArcGIS Online / Experience Builder","Aplicaciones de captura en campo (Survey123, Field Maps)","Análisis espacial avanzado (Network Analyst, Spatial Analyst)","Migraciones de datos cartográficos","Capacitación y transferencia de conocimiento","Soporte y mantenimiento de plataformas"],
    proc: [
      ["FASE 01","Diagnóstico","Inventario de datos, sistemas existentes y necesidades del cliente."],
      ["FASE 02","Diseño","Modelo de datos, arquitectura de servicios y mock-ups de visores."],
      ["FASE 03","Implementación","Carga de datos, configuración de servicios y desarrollo de aplicaciones."],
      ["FASE 04","Operación","Capacitación, transferencia, soporte y evolución continua."],
    ],
    tech: ["ArcGIS Pro","ArcGIS Online","ArcGIS Enterprise","QGIS","PostGIS","GeoServer","Leaflet","Mapbox","Survey123","Field Maps","Power BI","Python (geopandas)"],
    related: ["geomatica","consultoria","monitoreo"],
  },
  consultoria: {
    ic: "doc",
    crumb: "INICIO / SERVICIOS / CONSULTORÍA",
    title1: "Consultoría y Gestión", title2: "Integral",
    titleGreen: "Integral",
    sub: "Acompañamiento técnico y estratégico durante todo el ciclo del proyecto: estructuración, ejecución, supervisión e interventoría.",
    img: "Consultoria",
    vp: [
      ["01","Estructuración","Apoyo en formulación de proyectos, presupuestos y matrices de riesgos."],
      ["02","Interventoría","Supervisión técnica, administrativa, financiera y ambiental de contratos públicos."],
      ["03","Gestión SST","Acompañamiento en SG-SST, plan de emergencias y reportes a la ARL."],
      ["04","Capacitación","Talleres y entrenamientos a equipos técnicos y comunidades."],
    ],
    do_h: "Conocimiento técnico al servicio de su organización",
    do_p: ["Más de 20 años trabajando con alcaldías, gobernaciones, hospitales públicos y operadores privados nos han enseñado el camino real de los proyectos ambientales en Colombia. Sabemos cómo se estructura un contrato, cómo se ejecuta y cómo se cierra — y dónde están las trampas.","Ofrecemos asesoría puntual o acompañamiento permanente, según la necesidad y la fase del proyecto."],
    do_list: ["Estructuración de proyectos ambientales","Interventoría de obras y servicios","Auditorías ambientales","Gestión de Seguridad y Salud en el Trabajo (SG-SST)","Implementación de SafeHoriz para gestión SST","Plan de emergencias y contingencias","Capacitación a equipos técnicos","Acompañamiento en certificaciones (ISO 14001, 45001)"],
    proc: [
      ["FASE 01","Diagnóstico","Reunión con el equipo del cliente para mapear necesidades y entregables."],
      ["FASE 02","Plan de trabajo","Cronograma, productos, responsables e indicadores de éxito."],
      ["FASE 03","Acompañamiento","Reuniones periódicas, productos parciales y retroalimentación continua."],
      ["FASE 04","Cierre","Entregables finales, transferencia de conocimiento y plan de seguimiento."],
    ],
    tech: ["MS Project","SafeHoriz","Power BI","Excel","Bizagi","ISO 14001","ISO 45001","ISO 9001","SECOP II","Word","Visio","SAP"],
    related: ["estudios-ambientales","monitoreo","ingenieria"],
  },
  ingenieria: {
    ic: "helmet",
    crumb: "INICIO / SERVICIOS / INGENIERÍA",
    title1: "Ingeniería y Diseño", title2: "de Proyectos",
    titleGreen: "de Proyectos",
    sub: "Diseño y formulación de proyectos de infraestructura sanitaria y ambiental: rellenos sanitarios, acueductos, alcantarillados, plantas de tratamiento.",
    img: "Ingenieria",
    vp: [
      ["01","Rellenos sanitarios","Diseño de celdas, sistema de drenaje de lixiviados y manejo de biogás."],
      ["02","Saneamiento","Acueductos rurales, alcantarillados, plantas de tratamiento de agua potable y residual."],
      ["03","Estudios y diseños","Topografía, geotecnia, hidráulica, estructural y eléctrico — paquete técnico completo."],
      ["04","Optimización","Rehabilitación y ampliación de infraestructura existente con criterios de sostenibilidad."],
    ],
    do_h: "Diseños sólidos que se traducen en obras que duran",
    do_p: ["Hemos diseñado rellenos sanitarios regionales, plantas de tratamiento, acueductos rurales y obras de saneamiento básico para municipios y departamentos del Caribe colombiano. Todos nuestros diseños se entregan con memorias técnicas, planos firmados, presupuesto, especificaciones y APU.","El diseño no es un papel — es la primera forma del proyecto. Por eso integramos los componentes técnico, ambiental, social y financiero desde la primera línea."],
    do_list: ["Diseño de rellenos sanitarios y celdas de disposición","Diseño de acueductos y redes de distribución","Diseño de alcantarillados sanitarios y pluviales","Plantas de tratamiento de agua potable (PTAP)","Plantas de tratamiento de aguas residuales (PTAR)","Estudios hidráulicos e hidrológicos","Estudios geotécnicos y de suelos","Presupuesto, APU y especificaciones técnicas"],
    proc: [
      ["FASE 01","Estudios previos","Topografía, geotecnia, hidrología, demanda y línea base ambiental."],
      ["FASE 02","Diseño conceptual","Alternativas, evaluación técnica-económica y selección de la solución."],
      ["FASE 03","Diseño detallado","Memorias, planos, especificaciones, presupuesto y APU para construcción."],
      ["FASE 04","Acompañamiento","Apoyo durante construcción para ajustes y supervisión técnica."],
    ],
    tech: ["AutoCAD","Civil 3D","Revit","Epanet","SewerCAD","HEC-RAS","SAP2000","S10 Presupuestos","ArcGIS","Excel","Word","Project"],
    related: ["estudios-ambientales","geomatica","sig"],
  },
};

function ServicePage({ slug }) {
  const data = SVC_DATA[slug];
  if (!data) return <div>Servicio no encontrado</div>;

  const ImgComp = window["Img" + data.img];
  const useGeoportalImage = slug === "sig";
  const openContact = (source) => (event) => {
    event.preventDefault();
    window.openContactModal?.({ service: `${data.title1} ${data.title2}`, source });
  };

  pUE(() => {
    document.title = `${data.title1} ${data.title2} — Enfoque Ambiental`;
  }, []);

  return (
    <div className="ea-root">
      <window.NavBar active="services"/>

      {/* Hero */}
      <section className="svc-hero">
        <div className="svc-hero-inner">
          <div className="svc-hero-text">
            <div className="svc-crumb">{data.crumb}</div>
            <div className="ea-kicker">SERVICIOS</div>
            <h1>
              {data.title1}<br/>
              <span className="green">{data.title2}</span>
            </h1>
            <p>{data.sub}</p>
            <div className="svc-hero-actions">
              <a href="#contacto" onClick={openContact("Hero servicio")} className="ea-btn ea-btn-green">SOLICITAR COTIZACIÓN <span className="ea-arrow">→</span></a>
              <a href="#proceso" className="ea-btn ea-btn-outline">VER METODOLOGÍA</a>
            </div>
          </div>
          <div className="svc-hero-img">
            {ImgComp && <ImgComp/>}
          </div>
        </div>
      </section>

      {/* Value props */}
      <section className="svc-vp">
        {data.vp.map((v,i) => (
          <div key={i} className="svc-vp-card">
            <div className="num">{v[0]}</div>
            <h4>{v[1]}</h4>
            <p>{v[2]}</p>
          </div>
        ))}
      </section>

      {/* What we do */}
      <section className={`svc-do${useGeoportalImage ? " svc-do-with-geoportal-image" : ""}`} id="que-hacemos">
        <div className={`svc-do-img${useGeoportalImage ? " svc-do-geoportal-image" : ""}`}>
          {useGeoportalImage ? <window.ImgGeoportal/> : ImgComp && <ImgComp/>}
        </div>
        <div>
          <div className="ea-kicker green-kicker">QUÉ HACEMOS</div>
          <h2>{data.do_h}</h2>
          {data.do_p.map((p,i) => <p key={i}>{p}</p>)}
          <ul>{data.do_list.map((l,i) => <li key={i}>{l}</li>)}</ul>
        </div>
      </section>

      {/* CTA mid */}
      <section className="svc-cta-mid">
        <div className="svc-cta-mid-inner">
          <h2>¿Necesita un equipo técnico que <span className="green">entienda su proyecto</span>?</h2>
          <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("CTA servicio")} className="ea-btn ea-btn-green">SOLICITAR PROPUESTA <span className="ea-arrow">→</span></a>
            <a href={window.COMPANY.emailHref} className="ea-btn ea-btn-outline">ENVIAR EMAIL</a>
          </div>
        </div>
      </section>

      {/* Process */}
      <section className="svc-proc" id="proceso">
        <div className="svc-proc-inner">
          <div className="ea-kicker green-kicker">METODOLOGÍA</div>
          <h2>Cómo trabajamos</h2>
          <div className="svc-proc-grid">
            {data.proc.map((s,i) => (
              <div key={i} className="svc-proc-step">
                <div className="step">{s[0]}</div>
                <h4>{s[1]}</h4>
                <p>{s[2]}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Tech */}
      <section className="svc-tech">
        <div className="svc-tech-head">
          <div className="ea-kicker green-kicker">HERRAMIENTAS</div>
          <h2>Tecnología que usamos</h2>
          <p>Combinamos software comercial líder con soluciones open-source para entregar productos confiables y costo-efectivos.</p>
        </div>
        <div className="svc-tech-grid">
          {data.tech.map((t,i) => (
            <div key={i} className="svc-tech-card">
              <div className="ic">
                <svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M 8 12 L 11 15 L 16 9"/></svg>
              </div>
              <div className="name">{t}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Related */}
      <section className="svc-related">
        <div className="ea-kicker green-kicker">SERVICIOS RELACIONADOS</div>
        <h2>Soluciones que se complementan</h2>
        <div className="svc-related-grid">
          {data.related.map((r,i) => {
            const rs = window.SERVICES.find(s => s.slug === r);
            return (
              <a key={i} href={`/servicio-${r}`} className="svc-related-card">
                <window.SvcIcon kind={rs.ic} size={40}/>
                <h4>{rs.name}</h4>
                <p>{rs.short}</p>
                <span className="arrow">VER SERVICIO →</span>
              </a>
            );
          })}
        </div>
      </section>

      <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.ServicePage = ServicePage;
window.SVC_DATA = SVC_DATA;
