// NUON multi-page · shared layout (PageNav, PageHero, MiniCta, Footer for pages)

(function (NUON) {
  const { Clock } = NUON;

  const { useState: useSt, useEffect: useEf } = React;

  // ============================================================
  // MOVIMIENTO REDUCIDO
  // ============================================================
  // El CSS ya frena sus propias animaciones y transiciones (ver styles/base.css), pero
  // las animaciones SMIL de los SVG —<animate>, <animateTransform>— quedan fuera
  // del alcance de cualquier media query: hay 17 repartidas por los diagramas y
  // sólo se detienen llamando a pauseAnimations() en cada <svg aria-hidden="true">.
  //
  // Vive aquí porque src/components/layout.jsx es, junto a src/components/hero.jsx, lo único que cargan las
  // nueve páginas.
  NUON.prefersReducedMotion = () =>
    typeof window.matchMedia === "function" &&
    window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  (function respectReducedMotion() {
    if (typeof window.matchMedia !== "function") return;
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    let observer = null;

    const forEachSvg = (method) => {
      document.querySelectorAll("svg").forEach((svg) => {
        if (typeof svg[method] === "function") svg[method]();
      });
    };

    const apply = () => {
      if (observer) {
        observer.disconnect();
        observer = null;
      }
      if (!mq.matches) {
        forEachSvg("unpauseAnimations");
        return;
      }
      forEachSvg("pauseAnimations");
      // React monta los SVG después de que corra este script, así que hay que
      // vigilar hasta que termine. pauseAnimations() no muta el DOM, de modo que
      // el observer no se reactiva a sí mismo.
      observer = new MutationObserver(() => forEachSvg("pauseAnimations"));
      observer.observe(document.documentElement, { childList: true, subtree: true });
      setTimeout(() => {
        if (observer) {
          observer.disconnect();
          observer = null;
        }
      }, 8000);
    };

    if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", apply);
    else apply();
    mq.addEventListener("change", apply);
  })();

  // ============================================================
  // PAGE NAV (multi-page version with real href links + active highlight)
  // ============================================================
  function PageNav({ copy, lang, setLang, currentPage }) {
    const [menuOpen, setMenuOpen] = useSt(false);
    const links = NUON.EXTRA[lang].pageNav;
    const handleLang = (value) => {
      setLang(value);
      setMenuOpen(false);
    };
    return (
      <>
        {/* Primer elemento enfocable de la página: con 10 entradas de nav por
          delante, quien navega con teclado las atravesaba todas en cada carga.
          Sólo se ve al recibir foco (ver .skip-link en styles/base.css). */}
        <a className="skip-link" href="#contenido">
          {NUON.EXTRA[lang].skipLink}
        </a>
        <nav className="nav">
          <div className="container nav__inner">
            <a href="index.html" className="nav__logo" onClick={() => setMenuOpen(false)}>
              <img src="assets/nuon-logo.svg" alt="NUON" />
            </a>
            <button
              className={`nav__toggle ${menuOpen ? "is-open" : ""}`}
              type="button"
              aria-label="Abrir menú"
              aria-expanded={menuOpen}
              onClick={() => setMenuOpen((v) => !v)}
            >
              <span></span>
              <span></span>
              <span></span>
            </button>
            <div className={`nav__panel ${menuOpen ? "is-open" : ""}`}>
              <div className="nav__links">
                {links.map((l) => (
                  <a
                    key={l.id}
                    className={`nav__link ${currentPage === l.id ? "is-current" : ""}`}
                    href={l.href}
                    onClick={() => setMenuOpen(false)}
                  >
                    {l.label}
                  </a>
                ))}
              </div>
              <div className="nav__spacer"></div>
              <div className="nav__right">
                <div className="nav__lang" role="group" aria-label="Language">
                  <button className={lang === "es" ? "is-on" : ""} onClick={() => handleLang("es")}>
                    ES
                  </button>
                  <button className={lang === "en" ? "is-on" : ""} onClick={() => handleLang("en")}>
                    EN
                  </button>
                </div>
                <a
                  className="btn btn--primary"
                  href="contacto.html"
                  onClick={() => setMenuOpen(false)}
                >
                  <span>{copy.nav.cta}</span>
                  <span className="arr"></span>
                </a>
              </div>
            </div>
          </div>
        </nav>
      </>
    );
  }

  // ============================================================
  // PAGE HERO (smaller than home hero — title + lede + breadcrumb)
  // ============================================================
  function PageHero({ breadcrumb, title, lede, lang }) {
    const homeLabel = NUON.EXTRA[lang].breadcrumb.home;
    // Allow JSX in title
    return (
      <section className="page-hero" id="contenido" tabIndex="-1">
        <div className="container">
          <div className="page-hero__breadcrumb">
            <a href="index.html">{homeLabel}</a>
            <span className="sep">/</span>
            <span className="current">{breadcrumb}</span>
          </div>
          <div className="page-hero__inner">
            <div>
              <h1 className="page-hero__title">{title}</h1>
            </div>
            <div>
              <p className="page-hero__lede">{lede}</p>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // ============================================================
  // MINI CTA
  // ============================================================
  function MiniCta({ lang }) {
    const t = NUON.EXTRA[lang].miniCta;
    return (
      <section className="mini-cta">
        <div className="container mini-cta__inner">
          <h3 className="mini-cta__title">
            <span className="grad">{t.title}</span>
          </h3>
          <div className="mini-cta__lede">{t.lede}</div>
          <div>
            <a className="btn btn--primary btn--lg" href="contacto.html">
              <span>{t.btn}</span>
              <span className="arr"></span>
            </a>
          </div>
        </div>
      </section>
    );
  }

  // ============================================================
  // PAGE FOOTER (slightly enriched)
  // ============================================================
  function PageFooter({ copy }) {
    return (
      <footer className="footer">
        <div className="container">
          <div className="footer__top">
            <div className="footer__brand">
              <img src="assets/nuon-logo.svg" alt="NUON" />
              <p>{copy.tagline}</p>
            </div>
            {copy.columns.map((column) => (
              <div className="footer__col" key={column.title}>
                <h4>{column.title}</h4>
                <ul>
                  {column.links.map((link) => (
                    <li key={link.href}>
                      <a href={link.href}>{link.label}</a>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
          <div className="footer__bottom">
            <div>{copy.legal}</div>
            <div style={{ display: "flex", gap: 24, alignItems: "center" }}>
              <span className="live">
                <span className="dot"></span>
                {copy.live}
              </span>
              <Clock prefix="↻" />
            </div>
          </div>
        </div>
      </footer>
    );
  }

  // ============================================================
  // PAGE WRAPPER (composes everything; pages just provide currentPage + children)
  // ============================================================
  function Page({ currentPage, lang, setLang, children }) {
    const copy = NUON.COPY[lang];
    useEf(() => {
      document.documentElement.lang = lang;
    }, [lang]);

    return (
      <>
        <PageNav copy={copy} lang={lang} setLang={setLang} currentPage={currentPage} />
        {typeof children === "function"
          ? children({ copy, lang, extra: NUON.EXTRA[lang] })
          : children}
        <MiniCta lang={lang} />
        <PageFooter copy={copy.footer} lang={lang} />
      </>
    );
  }

  Object.assign(NUON, {
    PageNav,
    PageHero,
    MiniCta,
    PageFooter,
    Page,
  });
})((window.NUON ??= {}));