/* sobreNosotrosApp.jsx — Página "Sobre Nosotros".
 * Diseño editorial: tipografía protagonista, sin tarjetas, hairlines y números
 * Lora display como acento. Reutiliza Header/ServiceHero/CTABanner/SiteFooter.
 */
function SobreNosotrosApp() {
  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 para las tarjetas de principios
  React.useEffect(() => {
    const targets = document.querySelectorAll(".sn-principio");
    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 VALORES = [
    { icon: "shield-check", title: "Transparencia", desc: "Comunicación honesta en cada etapa del proceso. Sin letra pequeña, sin sorpresas." },
    { icon: "award",        title: "Experiencia",   desc: "Conocimiento jurídico, estratégico y técnico respaldado por resultados concretos." },
    { icon: "handshake",    title: "Compromiso",    desc: "Nos involucramos como socios reales — tu problema es nuestro problema." },
  ];

  const DIFERENCIADORES = [
    { icon: "layers",   title: "Integración Legal + Técnica", desc: "Unimos experiencia legal, visión estratégica y capacidades técnicas para transformar desafíos complejos en soluciones efectivas." },
    { icon: "users-2",  title: "Equipo Multidisciplinario",   desc: "Abogados, consultores y especialistas técnicos trabajando de forma coordinada para entregar soluciones integrales." },
  ];

  const handleServicios = () => {
    window.location.href = "servicios-legales.html";
  };

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

      <section className="int-hero sn-hero-centered">
        <div className="int-container">
          <nav className="int-breadcrumb" aria-label="Breadcrumb">
            <a href="index.html">Inicio</a>
            <span className="sep">/</span>
            <span className="current">Sobre Nosotros</span>
          </nav>
          <div className="sn-centered-body">
            <h1>Una firma multidisciplinaria <br />para un mundo <em>interconectado</em></h1>
            <p className="lede">
              Combinamos experiencia legal, empresarial y técnica para diseñar
              soluciones efectivas que respondan a las necesidades de clientes
              en Honduras, la región y el ámbito internacional.
            </p>
            <div className="actions">
              <button className="btn-primary" onClick={handleServicios}>
                Ver nuestros servicios
                <i data-lucide="arrow-right"></i>
              </button>
              <button className="btn-secondary" onClick={() => setThemisxOpen(true)}>
                Consultar a ThemisX
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* ── MISIÓN & VISIÓN — Editorial split con pull-quotes ── */}
      <section className="int-section tint sn-mv-section" id="mision-vision">
        <div className="int-container">
          <div className="sn-mv-grid">

            <article className="sn-mv">
              <span className="sn-mv-eyebrow"><span className="sn-mv-dot" />MISIÓN</span>
              <h2 className="sn-mv-quote">
                Transformamos problemas complejos en <em>soluciones integrales</em>.
              </h2>
              <p className="sn-mv-text">
                Brindamos servicios legales, consultoría estratégica y asistencia técnica
                especializada para fortalecer organizaciones, impulsar proyectos y proteger
                los intereses de nuestros clientes. Combinamos conocimiento, experiencia
                y un acompañamiento profesional cercano y transparente.
              </p>
            </article>

            <span className="sn-mv-divider" aria-hidden="true" />

            <article className="sn-mv">
              <span className="sn-mv-eyebrow"><span className="sn-mv-dot" />VISIÓN</span>
              <h2 className="sn-mv-quote">
                Ser una firma innovadora en <em>soluciones integrales</em>.
              </h2>
              <p className="sn-mv-text">
                Reconocidos por transformar desafíos complejos en oportunidades de crecimiento,
                generar confianza en nuestros clientes y contribuir al desarrollo sostenible
                de Honduras y su diáspora.
              </p>
            </article>

          </div>
        </div>
      </section>

      {/* ── PRINCIPIOS — Tarjetas premium navy con spotlight ── */}
      <section className="int-section sn-principios-section" id="valores">
        <div className="int-container">
          <div className="int-section-head center">
            <span className="eyebrow"><span className="dot" />NUESTROS VALORES</span>
            <h2>Los principios <em className="sn-italic-accent">que nos guían</em></h2>
            <p>Cada decisión, cada proceso y cada relación con nuestros clientes nace de estos pilares.</p>
          </div>
          <div className="sn-principios-grid">
            {VALORES.map((v, i) => (
              <article
                className="sn-principio"
                key={v.title}
                style={{ "--delay": (i * 80) + "ms" }}
              >
                <div className="sn-principio-icon">
                  <i data-lucide={v.icon} />
                </div>
                <div className="sn-principio-body">
                  <h3 className="sn-principio-title">{v.title}</h3>
                  <p className="sn-principio-desc">{v.desc}</p>
                </div>
                <span className="sn-principio-rule" aria-hidden="true" />
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ── POR QUÉ HONDULEGAL — Editorial alternado ── */}
      <section className="int-section tint sn-diff-section" id="por-que">
        <div className="int-container">
          <div className="int-section-head center">
            <span className="eyebrow"><span className="dot" />POR QUÉ HONDULEGAL</span>
            <h2>Lo que nos <em className="sn-italic-accent">distingue</em></h2>
            <p>No solo lo que hacemos, sino cómo lo hacemos — y para quién.</p>
          </div>
          <div className="sn-diff-list">
            {DIFERENCIADORES.map(d => (
              <article className="sn-diff" key={d.title}>
                <div className="sn-diff-icon"><i data-lucide={d.icon} /></div>
                <div className="sn-diff-body">
                  <h3>{d.title}</h3>
                  <p>{d.desc}</p>
                </div>
              </article>
            ))}
          </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(<SobreNosotrosApp />);