/* global React, ReactDOM, RouterCtx,
   HomePage,
   GeneralLanding, GeneralDatos, GeneralTendencias, GeneralEntidades, GeneralDEI,
   BuscoLanding, BuscoQueNecesito, BuscoAreas, BuscoCategorias, BuscoOfertas, BuscoComoBuscar,
   BuscoSoftSkills, BuscoCV, BuscoCarta, BuscoEmail, BuscoEntrevista, BuscoPortal,
   OngLanding, OngContexto, OngPerfiles, OngValoran, OngOfertas, OngSeleccion,
   OngTransparencia, OngInclusion, OngTalento, OngPublicar,
   TopBar, publicHref, utmLink, trackPdfDownload
*/

const ROUTES = {
  "/": () => <HomePage />,
  "/general": () => <GeneralLanding />,
  "/general/datos": () => <GeneralDatos />,
  "/general/tendencias": () => <GeneralTendencias />,
  "/general/entidades": () => <GeneralEntidades />,
  "/general/dei": () => <GeneralDEI />,
  "/busco-empleo": () => <BuscoLanding />,
  "/busco-empleo/que-necesito": () => <BuscoQueNecesito />,
  "/busco-empleo/areas": () => <BuscoAreas />,
  "/busco-empleo/categorias": () => <BuscoCategorias />,
  "/busco-empleo/ofertas": () => <BuscoOfertas />,
  "/busco-empleo/como-buscar": () => <BuscoComoBuscar />,
  "/busco-empleo/soft-skills": () => <BuscoSoftSkills />,
  "/busco-empleo/cv": () => <BuscoCV />,
  "/busco-empleo/carta": () => <BuscoCarta />,
  "/busco-empleo/email": () => <BuscoEmail />,
  "/busco-empleo/entrevista": () => <BuscoEntrevista />,
  "/busco-empleo/portal": () => <BuscoPortal />,
  "/ong": () => <OngLanding />,
  "/ong/contexto": () => <OngContexto />,
  "/ong/perfiles": () => <OngPerfiles />,
  "/ong/valoran": () => <OngValoran />,
  "/ong/ofertas": () => <OngOfertas />,
  "/ong/seleccion": () => <OngSeleccion />,
  "/ong/transparencia": () => <OngTransparencia />,
  "/ong/inclusion": () => <OngInclusion />,
  "/ong/talento": () => <OngTalento />,
  "/ong/publicar": () => <OngPublicar />,
};

function go(to) { window.location.href = publicHref(to); }

function App() {
  const path = (window.__ROUTE || "/");
  const render = ROUTES[path];
  const Body = render ? render() : <NotFound path={path} />;
  return (
    <RouterCtx.Provider value={{ path, go }}>
      <a href="#main-content" className="skip-link">Saltar al contenido</a>
      <TopBar />
      <div id="main-content" tabIndex={-1} style={{ outline: "none" }}>{Body}</div>
      <SiteFooter />
    </RouterCtx.Provider>
  );
}

function NotFound({ path }) {
  return (
    <main className="wrap" style={{ paddingTop: 80, paddingBottom: 120 }}>
      <div style={{ fontFamily: "JetBrains Mono, monospace", color: "var(--ink-3)", fontSize: 12, letterSpacing: ".08em", textTransform: "uppercase" }}>404</div>
      <h1 style={{ marginTop: 12 }}>Página no encontrada</h1>
      <p style={{ color: "var(--ink-2)" }}>La ruta <code>{path}</code> no existe. Vuelve al <a href={publicHref("/")}>inicio</a> o usa el menú de arriba.</p>
    </main>
  );
}

function SiteFooter() {
  return (
    <footer className="site-footer">
      <div className="footer-inner wrap">
        <div className="footer-col">
          <div className="footer-brand">
            <img src="assets/logo-hazloposible-25.png" alt="Fundación Hazloposible · 25 años" />
          </div>
          <p>El portal de empleo, voluntariado y solidaridad del Tercer Sector en España. Una iniciativa de Fundación Hazloposible.</p>
        </div>
        <div className="footer-col">
          <h5>La guía</h5>
          <ul>
            <li><a href={publicHref("/general/datos")}>Datos del sector</a></li>
            <li><a href={publicHref("/busco-empleo")}>Busco empleo</a></li>
            <li><a href={publicHref("/ong")}>Soy una ONG</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Más de Hacesfalta</h5>
          <ul>
            <li><a href={utmLink("https://www.hacesfalta.org/")} target="_blank" rel="noopener noreferrer">Hacesfalta.org</a></li>
            <li><a href={utmLink("https://www.hazloposible.org/")} target="_blank" rel="noopener noreferrer">Fundación Hazloposible</a></li>
            <li><a href={utmLink("https://hazloinclusivo.org/")} target="_blank" rel="noopener noreferrer">Hazloinclusivo.org</a></li>
            <li><a href={utmLink("https://www.hacesfalta.org/transparencia-ong/")} target="_blank" rel="noopener noreferrer">TransparenciaONG</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Contacto</h5>
          <ul>
            <li><a href="mailto:hacesfalta@hazloposible.org">hacesfalta@hazloposible.org</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom wrap">
        <span>Versión web · <a href="assets/guia-empleo-2026.pdf" target="_blank" rel="noopener noreferrer" onClick={trackPdfDownload}>Documento original disponible en PDF</a></span>
        <span>Accesibilidad conforme con WCAG 2.1 nivel AA</span>
        <span>© 2026 Fundación Hazloposible. Guía de Empleo en el Tercer Sector · Edición 2026.</span>
      </div>
    </footer>
  );
}

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