/* global React, ReactDOM, PAX_I18N */
// app.jsx — Header, Footer y routing

const { useState, useEffect, useRef } = React;

/* ─── Header ─── */
function Header({ lang, onLang, route }) {
  const [open, setOpen] = useState(false);
  const t = PAX_I18N[lang];

  const navLinks = [
    { id: "tesis", label: t.nav.tesis, kind: "scroll" },
    { id: "modelo", label: t.nav.modelo, kind: "scroll" },
    { id: "enfoque", label: t.nav.enfoque, kind: "scroll" },
    { id: "portfolio", label: t.nav.portfolio, kind: "scroll" },
    { id: "equipo", label: t.nav.equipo, kind: "scroll" },
    { id: "prensa", label: t.nav.prensa, kind: "route", href: "#/prensa" },
  ];

  const goScroll = (id) => (e) => {
    e.preventDefault();
    if (route !== "home") {
      window.location.hash = "#/";
      setTimeout(() => {
        document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
      }, 100);
    } else {
      document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });
    }
    setOpen(false);
  };

  return (
    <header className="site-header">
      <div className="container">
        <a href="#/" className="brand" aria-label="Pax Capital Partners">
          <img src={(window.__resources && window.__resources.paxLogo) || "assets/pax-logo.png"} alt="Pax Capital Partners" />
        </a>
        <nav className="nav primary" aria-label="Primary">
          {navLinks.map((l) =>
            l.kind === "scroll" ? (
              <a key={l.id} href={`#${l.id}`} onClick={goScroll(l.id)}>{l.label}</a>
            ) : (
              <a key={l.id} href={l.href} className={route === l.id ? "is-active" : ""}>{l.label}</a>
            )
          )}
        </nav>
        <div className="nav-actions">
          <div className="lang-toggle" role="group" aria-label="Language">
            <button className={lang === "es" ? "is-on" : ""} onClick={() => onLang("es")}>ES</button>
            <button className={lang === "en" ? "is-on" : ""} onClick={() => onLang("en")}>EN</button>
          </div>
          <button className="btn" onClick={goScroll("contacto")} style={{ padding: "10px 18px", fontSize: 12 }}>
            {t.nav.contacto}
          </button>
        </div>
      </div>
    </header>
  );
}

/* ─── Footer ─── */
function Footer({ lang, onLang }) {
  const t = PAX_I18N[lang];

  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer__grid">
          <div className="footer__brand">
            <a href="#/" className="brand" aria-label="Pax Capital Partners">
              <img src={(window.__resources && window.__resources.paxLogoCream) || "assets/pax-logo-cream.png"} alt="Pax Capital Partners" />
            </a>
            <p>{t.footer.tagline}</p>
          </div>
          <div>
            <h4>{t.footer.explore}</h4>
            <ul>
              <li><a href="#tesis">{t.nav.tesis}</a></li>
              <li><a href="#modelo">{t.nav.modelo}</a></li>
              <li><a href="#portfolio">{t.nav.portfolio}</a></li>
              <li><a href="#equipo">{t.nav.equipo}</a></li>
              <li><a href="#/prensa">{t.nav.prensa}</a></li>
              <li><a href="#contacto">{t.nav.contacto}</a></li>
            </ul>
          </div>
          <div>
            <h4>{t.footer.legal}</h4>
            <ul>
              {t.footer.legal_links.map((l, i) => (
                <li key={i}><a href={l.href}>{l.t}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <h4>{t.footer.contact}</h4>
            <ul>
              <li style={{ color: "var(--on-dark-muted)", fontSize: 13 }}>{t.footer.address}</li>
              <li><a href="mailto:info@paxcp.com">info@paxcp.com</a></li>
            </ul>
          </div>
        </div>
        <div className="footer__legal">
          <div>{t.footer.rights}</div>
          <div style={{ color: "var(--on-dark-muted)", maxWidth: 380 }}>{t.footer.disclosure}</div>
        </div>
      </div>
    </footer>
  );
}

/* ─── Routing por hash ─── */
function useHashRoute() {
  const [hash, setHash] = useState(() => window.location.hash || "#/");
  useEffect(() => {
    const h = () => setHash(window.location.hash || "#/");
    window.addEventListener("hashchange", h);
    return () => window.removeEventListener("hashchange", h);
  }, []);

  if (hash.startsWith("#/aviso-legal")) return "aviso-legal";
  if (hash.startsWith("#/privacidad")) return "privacidad";
  if (hash.startsWith("#/cookies")) return "cookies";
  if (hash.startsWith("#/prensa")) return "prensa";
  return "home";
}

/* ─── Home ─── */
function Home({ lang }) {
  const t = PAX_I18N[lang];
  t.lang = lang;
  const onCTA = () => {
    document.getElementById("contacto")?.scrollIntoView({ behavior: "smooth", block: "start" });
  };
  return (
    <React.Fragment>
      <Hero t={t} onCTA={onCTA} />
      <hr className="divider" />
      <Tesis t={t} />
      <Modelo t={t} />
      <Enfoque t={t} />
      <Pilares t={t} />
      <Proceso t={t} />
      <Comparativa t={t} />
      <Portfolio t={t} />
      <Equipo t={t} />
      <Contacto t={t} lang={lang} />
    </React.Fragment>
  );
}

/* ─── App ─── */
function App() {
  const [lang, setLangState] = useState(() => localStorage.getItem("pax_lang") || "es");
  const setLang = (l) => { setLangState(l); localStorage.setItem("pax_lang", l); };

  const route = useHashRoute();
  const tx = PAX_I18N[lang];
  tx.lang = lang;

  useEffect(() => {
    if (route !== "home") {
      window.scrollTo(0, 0);
    }
  }, [route]);

  const openCookieConfig = () => window.dispatchEvent(new CustomEvent("pax:open-cookies"));

  return (
    <React.Fragment>
      <Header lang={lang} onLang={setLang} route={route} />
      <main>
        {route === "home" && <Home lang={lang} />}
        {route === "prensa" && <Prensa lang={lang} />}
        {route === "aviso-legal" && <AvisoLegal lang={lang} />}
        {route === "privacidad" && <Privacidad lang={lang} />}
        {route === "cookies" && <Cookies lang={lang} onOpenConfig={openCookieConfig} />}
      </main>
      <Footer lang={lang} onLang={setLang} />
      <CookiesManager t={tx} />
    </React.Fragment>
  );
}

const root = ReactDOM.createRoot(document.getElementById("app"));
root.render(<App />);