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

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

// ============================================================
// PAGE NAV (multi-page version with real href links + active highlight)
// ============================================================
function PageNav({ copy, lang, setLang, currentPage }) {
  const links = window.EXTRA[lang].pageNav;
  return (
    <nav className="nav">
      <div className="container nav__inner">
        <a href="index.html" className="nav__logo">
          <img src="assets/nuon-wordmark.svg" alt="NUON" />
        </a>
        <div className="nav__links">
          {links.map((l) => (
            <a
              key={l.id}
              className={`nav__link ${currentPage === l.id ? "is-current" : ""}`}
              href={l.href}
            >
              {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={() => setLang("es")}>ES</button>
            <button className={lang === "en" ? "is-on" : ""} onClick={() => setLang("en")}>EN</button>
          </div>
          <a className="btn btn--primary" href="contacto.html">
            <span>{copy.nav.cta}</span>
            <span className="arr"></span>
          </a>
        </div>
      </div>
    </nav>
  );
}

// ============================================================
// PAGE HERO (smaller than home hero — title + lede + breadcrumb)
// ============================================================
function PageHero({ breadcrumb, title, lede, accent, lang }) {
  const homeLabel = window.EXTRA[lang].breadcrumb.home;
  // Allow JSX in title
  return (
    <section className="page-hero">
      <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 = window.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, lang }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__top">
          <div className="footer__brand">
            <img src="assets/nuon-wordmark.svg" alt="NUON" />
            <p>{copy.tagline}</p>
          </div>
          <div className="footer__col">
            <h4>{lang === "es" ? "Producto" : "Product"}</h4>
            <ul>
              <li><a href="producto.html">{lang === "es" ? "Cómo funciona" : "How it works"}</a></li>
              <li><a href="producto.html#consola">{lang === "es" ? "La Consola" : "The Console"}</a></li>
              <li><a href="producto.html#api">API</a></li>
              <li><a href="#">Status</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>{lang === "es" ? "Empresa" : "Company"}</h4>
            <ul>
              <li><a href="empresa.html">{lang === "es" ? "Sobre NUON" : "About NUON"}</a></li>
              <li><a href="mercados.html">{lang === "es" ? "Mercados" : "Markets"}</a></li>
              <li><a href="casos.html">{lang === "es" ? "Casos" : "Customers"}</a></li>
              <li><a href="carreras.html">{lang === "es" ? "Carreras" : "Careers"}</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>{lang === "es" ? "Recursos" : "Resources"}</h4>
            <ul>
              <li><a href="insights.html">Insights</a></li>
              <li><a href="contacto.html">{lang === "es" ? "Contacto" : "Contact"}</a></li>
              <li><a href="#">{lang === "es" ? "Documentación" : "Documentation"}</a></li>
              <li><a href="#">{lang === "es" ? "Prensa" : "Press"}</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 = window.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: window.EXTRA[lang] }) : children}
      <MiniCta lang={lang} />
      <PageFooter copy={copy.footer} lang={lang} />
    </>
  );
}

// ============================================================
// SECTION HEAD (multi-page reuse)
// ============================================================
function SectionHead2({ overline, title, lede }) {
  return (
    <div className="section__head">
      <div>
        <div className="section__overline">
          <span className="num mono-label">{overline}</span>
        </div>
        <h2 className="section__title">{title}</h2>
      </div>
      <div>
        {lede && <p className="section__lede">{lede}</p>}
      </div>
    </div>
  );
}

Object.assign(window, {
  PageNav, PageHero, MiniCta, PageFooter, Page, SectionHead2,
});