/* equipoApp.jsx — Página "Equipo" de HONDULegal.
 * Editorial alternado con brand-geometry. IntersectionObserver para
 * revelar perfiles al hacer scroll.
 */
function EquipoApp() {
  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);
  }, []);

  // Reveal-on-scroll using IntersectionObserver
  React.useEffect(() => {
    const targets = document.querySelectorAll(".eq-reveal");
    if (!("IntersectionObserver" in window)) {
      targets.forEach(t => t.classList.add("is-visible"));
      return;
    }
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add("is-visible");
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.18, rootMargin: "0px 0px -60px 0px" });
    targets.forEach(t => io.observe(t));
    return () => io.disconnect();
  }, []);

  const EQUIPO = [
    {
      photo: "assets/team-lester.jpg",
      name: "Lester Ramírez",
      role: "Socio Fundador",
      tag: "Derecho · Gobernanza · Investigación",
      bio: "Abogado, máster en Negocios Internacionales y doctor en Gobierno y Economía. Con más de 25 años de trayectoria, ha trabajado con gobiernos, empresas, organizaciones sociales y universidades en Honduras y en el ámbito internacional, liderando proyectos legales, reformas institucionales e investigaciones en educación, seguridad, salud, migración, contrataciones públicas e innovación.",
      stats: [
        { value: "25+", label: "Años de trayectoria" },
        { value: "PhD", label: "Gobierno y Economía" },
      ],
    },
    {
      photo: "assets/team-maribel.jpg",
      name: "Maribel Muñoz",
      role: "Consultora Senior",
      tag: "Cooperación Internacional · Fortalecimiento Institucional",
      bio: "Consultora senior con más de 25 años de experiencia en cooperación internacional, movilización de recursos, fortalecimiento institucional, planificación estratégica y gestión orientada a resultados. Ha liderado programas y portafolios superiores a USD 35 millones financiados por organismos multilaterales, agencias de cooperación, fundaciones internacionales y organizaciones de la sociedad civil. Su trabajo combina visión estratégica, gestión de alianzas y análisis basado en evidencia para diseñar soluciones sostenibles. Ha colaborado con la Unión Europea, PNUD, USAID, GIZ y Transparencia Internacional.",
      stats: [
        { value: "25+", label: "Años de experiencia" },
        { value: "USD 35M+", label: "Portafolio gestionado" },
      ],
    },
    {
      photo: "assets/team-christian.jpg",
      name: "Christian Estrada",
      role: "Socio Fundador",
      tag: "Derecho Corporativo · Cumplimiento · Litigio",
      bio: "Abogado con más de veinte años de experiencia en el sector público y privado, con una sólida trayectoria en derecho corporativo, cumplimiento normativo, asuntos regulatorios, litigio y asesoría empresarial. Inició su carrera en el Poder Judicial de Honduras y posteriormente se especializó en la asesoría de empresas nacionales e internacionales en sectores como combustibles, salud, industria farmacéutica, banca, construcción y comercio. Cuenta con un MBA y una Maestría en Derecho Procesal Civil, complementadas con estudios en políticas públicas, derecho constitucional y derecho mercantil.",
      stats: [
        { value: "20+", label: "Años de experiencia" },
        { value: "MBA", label: "+ Maestría Procesal Civil" },
      ],
    },
    {
      photo: "assets/team-thelma.jpg",
      name: "Thelma Martínez",
      role: "Consultora Senior",
      tag: "Monitoreo, Evaluación e Investigación Aplicada",
      bio: "Consultora senior con más de 30 años de experiencia en planificación estratégica, monitoreo, evaluación, aprendizaje e investigación aplicada para programas y proyectos de desarrollo en Honduras y Centroamérica. Ha liderado evaluaciones, diagnósticos institucionales, estudios especializados y procesos de fortalecimiento organizacional para organismos internacionales, agencias de cooperación, el sector público y organizaciones de la sociedad civil. Combina rigor técnico, visión estratégica y gestión del conocimiento para transformar información compleja en soluciones prácticas.",
      stats: [
        { value: "30+", label: "Años de experiencia" },
        { value: "MEL", label: "Especialista regional" },
      ],
    },
    {
      photo: "assets/team-oscar.jpg",
      name: "Oscar Rodríguez",
      role: "Consultor Senior",
      tag: "Finanzas · Gestión de Fondos · Cooperación Internacional",
      bio: "Licenciado en Administración de Empresas con Maestría en Dirección Empresarial con orientación en Finanzas. Cuenta con más de diez años de experiencia en gestión financiera de proyectos financiados por organismos de cooperación internacional y ONGs. Especializado en análisis presupuestario, seguimiento financiero, elaboración de informes para donantes y cumplimiento normativo de fondos multilaterales. Su enfoque riguroso y orientado a resultados garantiza la transparencia y eficiencia en la administración de recursos.",
      stats: [
        { value: "10+", label: "Años de experiencia" },
        { value: "MBA", label: "Dirección Empresarial / Finanzas" },
      ],
    },
  ];

  const Profile = ({ p, i, total, sectionStart = 0 }) => {
    const idx = sectionStart + i;
    const flip = idx % 2 === 1;
    return (
      <article className={"eq-profile eq-reveal " + (flip ? "is-flipped" : "")}>
        <div className="eq-photo-wrap">
          <span className="eq-shape eq-shape-1" aria-hidden="true" />
          <span className="eq-shape eq-shape-2" aria-hidden="true" />
          <span className="eq-shape eq-shape-3" aria-hidden="true" />
          <div className="eq-photo" style={{ backgroundImage: `url(${p.photo})` }} role="img" aria-label={p.name} />
        </div>
        <div className="eq-body">
          <h2 className="eq-name">{p.name}</h2>
          <p className="eq-tag">{p.tag}</p>
          <div className="eq-divider" aria-hidden="true" />
          <p className="eq-bio">{p.bio}</p>
          {p.stats && (
            <div className="eq-stats">
              {p.stats.map((s, j) => (
                <div className="eq-stat" key={j}>
                  <span className="eq-stat-val">{s.value}</span>
                  <span className="eq-stat-label">{s.label}</span>
                </div>
              ))}
            </div>
          )}
        </div>
      </article>
    );
  };

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

      <div className="int-container">
        <nav className="int-breadcrumb" aria-label="Breadcrumb" style={{ paddingTop: 28 }}>
          <a href="index.html">Inicio</a>
          <span className="sep">/</span>
          <span className="current">Equipo</span>
        </nav>
      </div>

      {/* ── EQUIPO — todos los perfiles intercalados ────── */}
      <section className="int-section eq-section" id="equipo">
        <div className="int-container">
          <div className="int-section-head center eq-reveal">
            <h2>Liderazgo <em className="sn-italic-accent">que Transforma</em></h2>
            <p>Visión jurídica y estratégica que define la dirección de HONDULegal.</p>
          </div>
          <div className="eq-profiles">
            {EQUIPO.map((p, i) => (
              <Profile key={p.name} p={p} i={i} total={EQUIPO.length} sectionStart={0} />
            ))}
          </div>
        </div>
      </section>

      <CTABanner
        variant="legal"
        primaryLabel="Solicita tu cita"
        onPrimary={() => window.location.href = "contacto.html"}
        secondaryLabel="Consultar a ThemisX"
        onSecondary={() => setThemisxOpen(true)}
      />

      <SiteFooter />

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

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