/* tecnicosApp.jsx — composition of the Servicios Técnicos internal page.
 * Per brief: Desarrollo Organizacional, Capacitaciones a la Medida,
 * Investigación y Proyectos with monitoreo/evaluación/aprendizaje/gestión-de-fondos
 * y financiero, Fortalecimiento Institucional. No cost mentions. Big methodology.
 */
function TecnicosApp() {
  const [themisxOpen, setThemisxOpen] = React.useState(false);

  React.useEffect(() => {
    if (window.lucide) window.lucide.createIcons();
  });
  React.useEffect(() => {
    document.body.style.overflow = themisxOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [themisxOpen]);
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") setThemisxOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);
  React.useEffect(() => {
    const onOpen = () => setThemisxOpen(true);
    window.addEventListener("themisx:open", onOpen);
    return () => window.removeEventListener("themisx:open", onOpen);
  }, []);

  const TRES_CAMINOS = [
    { icon: "users-2",   title: "Diagnóstico Inicial", desc: "Conversamos sobre la situación y necesidades de asesoría de tu organización.", cta: "Agendar diagnóstico", action: "cita" },
    { icon: "briefcase", title: "Propuesta Técnica",   desc: "Definimos entregables, cronograma y metodología de trabajo conjunto.",            cta: "Solicitar propuesta",  action: "cita" },
  ];

  // Real photography from Unsplash — each image matches the service line context.
  const AREAS = [
    {
      icon: "target",
      title: "Planificación Estratégica",
      desc: "Acompañamos a organizaciones en el diseño de estrategias, estructuras y modelos que garantizan resultados sostenibles.",
      bullets: [
        "Planes estratégicos institucionales",
        "Desarrollo organizacional (ONGs, sector público)",
        "Modelos de sostenibilidad financiera",
        "Marcos de resultados (Results Frameworks)",
      ],
      image: "https://images.unsplash.com/photo-1542626991-cbc4e32524cc?auto=format&fit=crop&w=480&q=80",
    },
    {
      icon: "activity",
      title: "Monitoreo, Evaluación y Aprendizaje (MEL / M&E)",
      desc: "Diseñamos sistemas robustos para medir impacto, generar aprendizajes y rendir cuentas a donantes con rigor técnico.",
      bullets: [
        "Sistemas de monitoreo y evaluación",
        "Indicadores y KPIs",
        "Evaluaciones externas de proyectos",
        "Outcome Harvesting / evaluaciones cualitativas",
        "Sistemas de reporte para donantes",
      ],
      image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=480&q=80",
    },
    {
      icon: "wallet",
      title: "Finanzas y Presupuestos",
      desc: "Asesoramos en el diseño, gestión y control de presupuestos institucionales para una administración transparente y eficiente de los recursos.",
      bullets: [
        "Elaboración y análisis de presupuestos",
        "Control y seguimiento financiero",
        "Planificación financiera institucional",
        "Gestión de fondos y cumplimiento normativo",
      ],
      image: "https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&w=480&q=80",
    },
    {
      icon: "landmark",
      title: "Gobernanza, Democracia y Políticas Públicas",
      desc: "Fortalecemos la toma de decisiones institucionales con análisis sectoriales, asistencia técnica y facilitación de diálogos.",
      bullets: [
        "Análisis de políticas públicas",
        "Estudios sectoriales (seguridad, salud, educación, transparencia)",
        "Asistencia técnica a gobiernos y congresos",
        "Facilitación de diálogo multiactor",
        "Estrategias de incidencia",
      ],
      image: "https://images.unsplash.com/photo-1529107386315-e1a2ed48a620?auto=format&fit=crop&w=480&q=80",
    },
    {
      icon: "globe-2",
      title: "Gestión de Cooperación Internacional y Movilización de Recursos",
      desc: "Apoyamos el ciclo completo de la cooperación: desde el diseño de propuestas hasta el cumplimiento y reporte a donantes.",
      bullets: [
        "Diseño de propuestas para donantes",
        "Estrategias de fundraising",
        "Gestión de grants (ciclo completo)",
        "Cumplimiento y reporting a donantes",
      ],
      image: "https://images.unsplash.com/photo-1573164713988-8665fc963095?auto=format&fit=crop&w=480&q=80",
    },
    {
      icon: "search",
      title: "Investigación Aplicada y Generación de Conocimiento",
      desc: "Producimos investigaciones rigurosas que alimentan el diseño de políticas, estrategias organizacionales y diálogos de política pública.",
      bullets: [
        "Estudios país y regionales",
        "Investigaciones comparadas",
        "Diagnósticos sectoriales",
        "Sistematización de experiencias",
        "Insumos para policy dialogue",
      ],
      image: "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=480&q=80",
    },
  ];

  const METHOD_STEPS = [
    { title: "Diagnóstico", desc: "Conversamos sobre la situación y necesidades de asesoría de tu organización." },
    { title: "Diseño",      desc: "Definimos un plan de trabajo con entregables, cronograma y métricas claras." },
    { title: "Ejecución",   desc: "Acompañamos cada hito con monitoreo, evaluación y aprendizaje continuo." },
    { title: "Cierre",      desc: "Transferimos capacidad instalada y documentamos resultados verificables." },
  ];

  const handleCita = () => {
    window.location.href = "contacto.html";
  };

  return (
    <>
      <Header onThemisXClick={() => setThemisxOpen(true)} activePath="tecnicos" />

      <ServiceHero
        variant="tecnico"
        eyebrow=""
        title="Asistencia integral que"
        titleAccent="transforma"
        lede="Brindamos asistencia técnica especializada a gobierno, organizaciones de la sociedad civil y organismos de cooperación con metodologías rigurosas, evidencia y entregables claros."
        primaryLabel="Solicita una reunión"
        onPrimary={handleCita}
        secondaryLabel="Ver líneas de servicio"
        onSecondary={() => document.getElementById("areas")?.scrollIntoView({ behavior: "smooth", block: "start" })}
      />

      <AreasGrid
        variant="tecnico"
        eyebrow="Líneas de servicio"
        heading="Servicios técnicos especializados"
        lede="Seis líneas de trabajo especializadas. Tu organización puede contratarnos por área o combinarlas en un programa integral."
        areas={AREAS}
        tint={true}
      />

      <TresCaminos
        variant="tecnico"
        paths={TRES_CAMINOS}
        onThemisXClick={() => setThemisxOpen(true)}
        onCitaClick={() => window.location.href = "contacto.html"}
        tint={false}
      />

      <Methodology
        variant="tecnico"
        eyebrow="NUESTRA METODOLOGÍA"
        heading="Un proceso riguroso y cercano"
        steps={METHOD_STEPS}
        ctaLabel="Solicita tu cita"
      />

      <ContactCTA
        variant="tecnico"
        heading="Hablemos de tu proyecto"
        lede="Cuéntanos qué busca tu organización y coordinamos una primera conversación para entender alcance, tiempos y necesidades."
      />

      <CTABanner
        variant="tecnico"
        headline="¿Listo para arrancar un proyecto técnico? Conversemos."
        primaryLabel="Solicita una reunión"
        onPrimary={handleCita}
        secondaryLabel="Consultar a ThemisX"
        onSecondary={() => setThemisxOpen(true)}
      />

      <SiteFooter />

      <ThemisXModal open={themisxOpen} onClose={() => setThemisxOpen(false)} />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<TecnicosApp />);