// El Mirador — Nav (sticky header) and Mobile drawer
// Globals: EMNav, EMDrawer

const { useState, useEffect } = React;

function EMNav({ variant = "on-dark", onOpenDrawer }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const cls = `em-nav ${variant} ${scrolled ? "is-scrolled" : ""}`;

  const links = [
    { label: "Mañanas", href: "#mananas" },
    { label: "Caminar", href: "#caminar" },
    { label: "Historias", href: "#historias" },
    { label: "Mapa", href: "map.html" },
    { label: "Comunidad", href: "#comunidad" }
  ];

  return (
    <header className={cls}>
      <a href="index.html" className="em-nav__wordmark">El Mirador</a>
      <nav className="em-nav__links">
        {links.map(l => (
          <a key={l.label} href={l.href} className="em-nav__link">{l.label}</a>
        ))}
      </nav>
      <button
        className="em-nav__icon-btn"
        aria-label="Abrir menú"
        onClick={onOpenDrawer}
        style={{ display: "none" }}
        data-mobile-only="true"
      >
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
          <line x1="4" y1="9" x2="20" y2="9"/>
          <line x1="4" y1="16" x2="20" y2="16"/>
        </svg>
      </button>
      <style>{`@media (max-width: 980px) { .em-nav__icon-btn[data-mobile-only='true'] { display: inline-flex !important; } }`}</style>
    </header>
  );
}

function EMDrawer({ open, onClose }) {
  return (
    <div className={`em-drawer ${open ? "is-open" : ""}`}>
      <button className="em-drawer__close" onClick={onClose} aria-label="Cerrar">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">
          <line x1="6" y1="6" x2="18" y2="18"/>
          <line x1="18" y1="6" x2="6" y2="18"/>
        </svg>
      </button>
      <div style={{
        fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.14em",
        textTransform: "uppercase", color: "var(--brass)", marginTop: 8
      }}>
        Maneras de habitar
      </div>
      <nav className="em-drawer__links">
        <a href="#mananas">Mañanas</a>
        <a href="#caminar"><em>Caminar</em></a>
        <a href="#trabajo">Trabajo</a>
        <a href="#noche">Noche</a>
        <a href="#historias"><em>Historias</em></a>
        <a href="map.html">Mapa vivo</a>
      </nav>
      <div style={{ marginTop: "auto", display: "flex", justifyContent: "space-between", alignItems: "center",
        fontFamily: "var(--font-sans)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase",
        color: "rgba(244,239,230,0.5)" }}>
        <span>Puebla · México</span>
        <span>2025</span>
      </div>
    </div>
  );
}

Object.assign(window, { EMNav, EMDrawer });