/* Shared chrome — Header (con menú móvil) + Footer.
 * Each page calls <Chrome active="..." transparent={true|false}><Content/></Chrome>.
 * Tipografías fijas (2): Instrument Serif (display) + IBM Plex Sans (sans), definidas en styles.css.
 */
/* global React, ReactDOM */
const { useState: chromeUseState, useEffect: chromeUseEffect } = React;

const NAV_ITEMS = [
  { key: "theorema",    label: "Theorema4H", href: "Theorema4H.html" },
  { key: "soluciones",  label: "Soluciones", href: "Soluciones.html", children: [
    { key: "cost4h",   label: "Cost4H",    color: "var(--c-cost)",    desc: "Tarifas y costes",     href: "Cost4H.html" },
    { key: "market4h", label: "Market4H",  color: "var(--c-market)",  desc: "Mercado farmacéutico",       href: "Soluciones.html#market4h" },
    { key: "digital4h",label: "Digital4H", color: "var(--c-digital)", desc: "Terapias digitales",    href: "Soluciones.html#digital4h" },
    { key: "social4h", label: "Social4H",  color: "var(--c-social)",  desc: "Experiencia paciente",  href: "Soluciones.html#social4h" },
  ]},
  { key: "contacto",    label: "Contacto",   href: "Contacto.html" },
];

/* Selector de idioma — ES activo. EN queda preparado para la versión en inglés (próximamente). */
function LangSwitcher() {
  return (
    <div className="lang" role="group" aria-label="Idioma">
      <span className="lang__opt is-active" aria-current="true">ES</span>
      <span className="lang__sep">/</span>
      <button
        type="button"
        className="lang__opt lang__opt--soon"
        title="English version — coming soon"
        onClick={(e) => e.preventDefault()}
      >EN</button>
    </div>
  );
}

function ChromeHeader({ active, transparent }) {
  const [scrolled, setScrolled] = chromeUseState(false);
  const [menuOpen, setMenuOpen] = chromeUseState(false);

  chromeUseEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Bloquear scroll del body + cerrar con Escape mientras el menú móvil está abierto
  chromeUseEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    const onKey = (e) => { if (e.key === "Escape") setMenuOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [menuOpen]);

  const stuck = scrolled || !transparent || menuOpen;
  const closeMenu = () => setMenuOpen(false);

  return (
    <header className={"header" + (stuck ? " is-scrolled" : "") + (menuOpen ? " is-menu-open" : "")}>
      <div className="page header__inner">
        <a className="header__brand" href="Insight4H Home.html" onClick={closeMenu}>
          <img src="assets/logos/Logo-Insight4h.webp" alt="Insight4H — powered by Theorema4H" />
        </a>

        <nav className="nav">
          {NAV_ITEMS.map((it) => {
            const isActive = active === it.key || (it.children && it.children.some(c => c.key === active));
            if (it.children) {
              return (
                <div key={it.key} className={"nav__item" + (isActive ? " is-active" : "")}>
                  <a href={it.href} style={{ color: "inherit", textDecoration: "none" }}>
                    <span>{it.label}</span>
                  </a>
                  <span className="nav__caret">▾</span>
                  <div className="submenu">
                    {it.children.map(c => (
                      <a key={c.key} className="submenu__row" href={c.href}>
                        <span className="dot" style={{ background: c.color }} />
                        <span>{c.label}</span>
                        <span className="mono">{c.desc}</span>
                      </a>
                    ))}
                  </div>
                </div>
              );
            }
            return (
              <a key={it.key} className={"nav__item" + (isActive ? " is-active" : "")} href={it.href}>
                <span>{it.label}</span>
              </a>
            );
          })}
        </nav>

        <div className="header__cta">
          <LangSwitcher />
          <a className="btn btn--primary header__cta-btn" href="Contacto.html">
            Solicitar acceso <span className="arrow">→</span>
          </a>
          <button
            type="button"
            className="hamburger"
            aria-label={menuOpen ? "Cerrar menú" : "Abrir menú"}
            aria-expanded={menuOpen}
            aria-controls="mobile-menu"
            onClick={() => setMenuOpen(o => !o)}
          >
            <span /><span /><span />
          </button>
        </div>
      </div>

      {/* Menú móvil (drawer a pantalla completa) */}
      <div id="mobile-menu" className={"mobile-menu" + (menuOpen ? " is-open" : "")} role="dialog" aria-modal="true" aria-hidden={!menuOpen}>
        <nav className="mobile-menu__nav">
          <div className="mobile-menu__lang"><LangSwitcher /></div>
          {NAV_ITEMS.map((it) => (
            <React.Fragment key={it.key}>
              <a
                className={"mobile-menu__link" + ((active === it.key || (it.children && it.children.some(c => c.key === active))) ? " is-active" : "")}
                href={it.href}
                onClick={closeMenu}
              >{it.label}</a>
              {it.children && (
                <div className="mobile-menu__sub">
                  {it.children.map(c => (
                    <a key={c.key} className="mobile-menu__sublink" href={c.href} onClick={closeMenu}>
                      <span className="dot" style={{ background: c.color }} />
                      <span>{c.label}</span>
                      <span className="mobile-menu__subdesc">{c.desc}</span>
                    </a>
                  ))}
                </div>
              )}
            </React.Fragment>
          ))}
        </nav>
        <div className="mobile-menu__foot">
          <a className="btn btn--primary mobile-menu__cta" href="Contacto.html" onClick={closeMenu}>
            Solicitar acceso <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </header>
  );
}

function ChromeFooter() {
  return (
    <footer className="footer">
      <div className="page">
        <div className="footer__grid">
          <div className="footer__brand">
            <img src="assets/logos/Logo-Insight4h.webp" alt="Insight4H" />
            <p>
              Plataforma digital de evaluación económica en salud.
              Powered by Theorema4H. Madrid · 2026.
            </p>
          </div>
          <div className="footer__col">
            <h4>Plataforma</h4>
            <a href="Cost4H.html">Cost4H</a>
            <a href="Soluciones.html#market4h">Market4H</a>
            <a href="Soluciones.html#digital4h">Digital4H</a>
            <a href="Soluciones.html#social4h">Social4H</a>
          </div>
          <div className="footer__col">
            <h4>Empresa</h4>
            <a href="Theorema4H.html">Theorema4H</a>
            <a href="Contacto.html">Contacto</a>
            <a href="Contacto.html">Solicitar acceso</a>
          </div>
          <div className="footer__col">
            <h4>Síguenos</h4>
            <a href="https://www.linkedin.com/company/theorema-for-health" target="_blank" rel="noreferrer">LinkedIn ↗</a>
            <a href="mailto:insight4h@theorema4h.com">insight4h@theorema4h.com</a>
          </div>
        </div>
        <div className="footer__base">
          <span>© 2026 Insight4H — Powered by Theorema4H</span>
          <span className="footer__legal">
            <a href="https://theorema4h.com/politica-de-privacidad/" target="_blank" rel="noreferrer">Política de privacidad</a>
            <a href="https://theorema4h.com/aviso-legal/" target="_blank" rel="noreferrer">Aviso legal</a>
            <a href="https://theorema4h.com/politica-de-cookies/" target="_blank" rel="noreferrer">Cookies</a>
          </span>
        </div>
      </div>
    </footer>
  );
}

function Chrome({ active, transparent, children }) {
  return (
    <>
      <ChromeHeader active={active} transparent={transparent} />
      {children}
      <ChromeFooter />
    </>
  );
}

Object.assign(window, { Chrome, ChromeHeader, ChromeFooter, NAV_ITEMS });