/* Navbar (sticky + blur al hacer scroll, drawer móvil slide desde la derecha) y Footer. */
(function () {
  const { useState, useEffect } = React;

  const NAV = [
    { id: "home",     label: "Inicio" },
    { id: "libros",   label: "Libros" },
    { id: "sobre",    label: "Sobre nosotros" },
    { id: "contacto", label: "Contacto" },
  ];

  function Logo({ onClick }) {
    return (
      <a href="#/home" onClick={onClick} className="logo" aria-label="Fun Editorial — inicio">
        <img src="assets/logo-fun-editorial.png" alt="Fun Editorial" className="logo-img" />
      </a>
    );
  }

  function Navbar({ route, navigate }) {
    const [scrolled, setScrolled] = useState(false);
    const [open, setOpen] = useState(false);

    useEffect(() => {
      const f = () => setScrolled(window.scrollY > 12);
      f(); window.addEventListener("scroll", f, { passive: true });
      return () => window.removeEventListener("scroll", f);
    }, []);
    useEffect(() => { document.body.style.overflow = open ? "hidden" : ""; }, [open]);

    const base = route.split("/")[0];
    const go = (e, id) => { e.preventDefault(); setOpen(false); navigate(id); };

    return (
      <>
        <header className={"nav" + (scrolled ? " nav-scrolled" : "")}>
          <div className="wrap nav-inner">
            <Logo onClick={(e) => go(e, "home")} />
            <nav className="nav-links" aria-label="Principal">
              {NAV.map(n => (
                <a key={n.id} href={`#/${n.id}`} onClick={(e) => go(e, n.id)}
                  className={"nav-link" + (base === n.id ? " active" : "")}>
                  {n.label}
                </a>
              ))}
            </nav>
            <div className="nav-right">
              <a href="#/libros" onClick={(e) => go(e, "libros")} className="btn nav-cta">Ver catálogo</a>
              <button className="nav-burger" aria-label="Abrir menú" aria-expanded={open} onClick={() => setOpen(true)}>
                <Icon name="menu" size={26} />
              </button>
            </div>
          </div>
        </header>

        {/* Drawer móvil */}
        <div className={"drawer-scrim" + (open ? " show" : "")} onClick={() => setOpen(false)} aria-hidden={!open}></div>
        <aside className={"drawer" + (open ? " open" : "")} aria-hidden={!open}>
          <div className="drawer-top">
            <img src="assets/logo-fun-editorial.png" alt="Fun Editorial" className="logo-img" style={{ height: 40 }} />
            <button className="drawer-close" aria-label="Cerrar menú" onClick={() => setOpen(false)}>
              <Icon name="x" size={24} />
            </button>
          </div>
          <nav className="drawer-links" aria-label="Móvil">
            {NAV.map(n => (
              <a key={n.id} href={`#/${n.id}`} onClick={(e) => go(e, n.id)}
                className={"drawer-link" + (base === n.id ? " active" : "")}>
                {n.label}
                <Icon name="chevron-right" size={20} />
              </a>
            ))}
          </nav>
          <a href="#/libros" onClick={(e) => go(e, "libros")} className="btn btn-lg" style={{ margin: "8px 22px" }}>
            Ver catálogo <Icon name="arrow-right" size={18} />
          </a>
        </aside>
      </>
    );
  }

  function Footer({ navigate }) {
    const go = (e, id) => { e.preventDefault(); navigate(id); };
    return (
      <footer className="footer">
        <Deco.Wave color="var(--carbon)" />
        <div className="footer-main">
          <div className="wrap footer-grid">
            <div className="footer-brand">
              <img src="assets/logo-fun-editorial.png" alt="Fun Editorial" className="footer-logo" />
              <p className="footer-tag">Editorial independiente española de libros infantiles. Hacemos pocos libros y los cuidamos mucho.</p>
              <div className="footer-social">
                <a href="#" aria-label="Instagram de Fun Editorial" className="footer-soc"><Icon name="instagram" size={20} /></a>
                <a href="#" aria-label="Facebook de Fun Editorial" className="footer-soc"><Icon name="facebook" size={20} /></a>
                <a href="mailto:funeditorial@funeditorial.com" aria-label="Email de Fun Editorial" className="footer-soc"><Icon name="mail" size={20} /></a>
              </div>
            </div>
            <div className="footer-col">
              <h4 className="footer-h">Explora</h4>
              {[["libros","Catálogo"],["sobre","Sobre nosotros"],["contacto","Contacto"],["privacidad","Privacidad"]].map(([id,l]) => (
                <a key={id} href={`#/${id}`} onClick={(e) => go(e, id)} className="footer-link">{l}</a>
              ))}
            </div>
            <div className="footer-col">
              <h4 className="footer-h">Hablemos</h4>
              <a href="mailto:funeditorial@funeditorial.com" className="footer-link">funeditorial@funeditorial.com</a>
              <a href="#/contacto" onClick={(e) => go(e, "contacto")} className="footer-link">Recomendaciones para aulas y bibliotecas</a>
              <p className="footer-small">Hecho en España, con cariño.</p>
            </div>
          </div>
          <div className="wrap footer-bottom">
            <p className="footer-aff">Como Asociados de Amazon, podemos recibir una pequeña comisión por las compras que cumplan los requisitos, sin coste extra para ti.</p>
            <p className="footer-copy">© {new Date().getFullYear()} Fun Editorial. Todos los derechos reservados.</p>
          </div>
        </div>
      </footer>
    );
  }

  window.Navbar = Navbar;
  window.Footer = Footer;
})();