/* Wisdom — chrome compartido: Nav (multi-página, con dropdown) + Footer.
   Cada página monta <WNav active="..." /> y <WFooter />. */
(function () {
  const { useState, useRef, useEffect } = React;

  const Arrow = () => (
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M2.5 8h10M8.5 4l4 4-4 4" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
  window.WArrow = Arrow;

  const Chevron = () => (
    <svg viewBox="0 0 16 16" width="12" height="12" fill="none" aria-hidden="true" style={{ marginLeft: 5 }}>
      <path d="M4 6l4 4 4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );

  const LOGO_GOLD = "assets/logos/wisdom-lockup-gold-trim.png";

  const PRIMARY = [
    { key: "metodologia", label: "Metodología", href: "metodologia.html" },
    { key: "impacto", label: "Impacto", href: "impacto.html" },
  ];
  const ACERCA = [
    { key: "acerca-wisdom", label: "Acerca de Wisdom", href: "acerca-wisdom.html" },
    { key: "acerca-sumate", label: "¿Querés ser parte de Wisdom?", href: "acerca-sumate.html" },
  ];

  function Nav({ active }) {
    const [open, setOpen] = useState(false);       // mobile
    const [ddOpen, setDdOpen] = useState(false);    // acerca dropdown
    const ddRef = useRef(null);
    const acercaActive = active === "acerca-wisdom" || active === "acerca-sumate";

    useEffect(() => {
      const onDoc = (e) => { if (ddRef.current && !ddRef.current.contains(e.target)) setDdOpen(false); };
      document.addEventListener("click", onDoc);
      return () => document.removeEventListener("click", onDoc);
    }, []);

    return (
      <header className="nav">
        <div className="nav-inner">
          <a className="nav-brand" href="Wisdom.html" aria-label="Wisdom — inicio">
            <img src={LOGO_GOLD} alt="Wisdom" />
          </a>

          <nav className="nav-links">
            <div className="nav-dd" ref={ddRef}
                 onMouseEnter={() => setDdOpen(true)} onMouseLeave={() => setDdOpen(false)}>
              <button
                className={"nav-dd-btn" + (acercaActive ? " is-active" : "")}
                aria-expanded={ddOpen}
                onClick={() => setDdOpen((v) => !v)}
              >
                Acerca de Wisdom<Chevron />
              </button>
              <div className={"nav-dd-menu" + (ddOpen ? " open" : "")}>
                {ACERCA.map((l) => (
                  <a key={l.key} href={l.href} className={active === l.key ? "is-active" : ""}>{l.label}</a>
                ))}
              </div>
            </div>
            {PRIMARY.map((l) => (
              <a key={l.key} href={l.href} className={active === l.key ? "is-active" : ""}>{l.label}</a>
            ))}
            <a href="contacto.html" className={"nav-cta" + (active === "contacto" ? " is-active" : "")}>Contacto</a>
          </nav>

          <button className="nav-menu-btn" aria-label="Menú" onClick={() => setOpen((v) => !v)}>
            <svg viewBox="0 0 20 20" width="18" height="18" fill="none"><path d={open ? "M5 5l10 10M15 5L5 15" : "M3 6h14M3 10h14M3 14h14"} stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" /></svg>
          </button>
        </div>

        {open && (
          <div className="nav-mobile">
            <span className="nav-mobile-group">Acerca de Wisdom</span>
            {ACERCA.map((l) => <a key={l.key} href={l.href} className="nav-mobile-sub">{l.label}</a>)}
            {PRIMARY.map((l) => <a key={l.key} href={l.href}>{l.label}</a>)}
            <a href="contacto.html">Contacto</a>
          </div>
        )}
      </header>
    );
  }

  function Footer() {
    const col = (title, items) => (
      <div className="footer-col">
        <h4>{title}</h4>
        {items.map(([label, href], i) => <a key={i} href={href}>{label}</a>)}
      </div>
    );
    return (
      <footer className="footer">
        <div className="footer-top">
          <div className="footer-brand">
            <img src={LOGO_GOLD} alt="Wisdom" />
            <p>Automatización con método. Del aprendizaje a la operación, con y sin IA.</p>
            <p className="footer-office">
              Oficina: Av. Corrientes 800 · CABA, Argentina
            </p>
          </div>
          {col("Metodología", [
            ["El framework", "metodologia.html"],
            ["Foundation Stack", "metodologia.html#stack"],
            ["Criterio técnico", "metodologia.html#criterio"],
          ])}
          {col("Acerca", [
            ["Acerca de Wisdom", "acerca-wisdom.html"],
            ["Sumate al equipo", "acerca-sumate.html"],
          ])}
          {col("Contacto", [
            ["contacto@wisdomdai.com", "mailto:contacto@wisdomdai.com"],
            ["LinkedIn", "https://www.linkedin.com/company/wisdom-dai"],
          ])}
        </div>
        <div className="footer-bottom">
          <span>© 2026 Wisdom — Data and Artificial Intelligence. Todos los derechos reservados.</span>
        </div>
      </footer>
    );
  }

  Object.assign(window, { WNav: Nav, WFooter: Footer });
})();