/* global React, Logo */
// ====================================================================
// Top navigation with tabs + animated active indicator.
// ====================================================================

const TABS = [
  { id: "inicio", label: "Inicio" },
  { id: "nosotros", label: "Nosotros" },
  { id: "productos", label: "Productos" },
  { id: "servicios", label: "Servicios" },
  { id: "contacto", label: "Contacto" },
];

function Nav({ tab, go }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const handle = (id) => { go(id); setOpen(false); };

  return (
    <nav className={"nav" + (scrolled ? " nav-scrolled" : "")}>
      <div className="wrap nav-inner">
        <Logo onClick={() => handle("inicio")} />

        <div className="nav-tabs">
          {TABS.map((t) => (
            <button
              key={t.id}
              className={"nav-tab" + (tab === t.id ? " active" : "")}
              onClick={() => handle(t.id)}
            >
              {t.label}
              <span className="nav-tab-dot" />
            </button>
          ))}
        </div>

        <button className="btn btn-primary nav-cta" onClick={() => handle("contacto")}>
          Inicia tu proyecto
        </button>

        <button
          className={"nav-burger" + (open ? " open" : "")}
          onClick={() => setOpen((o) => !o)}
          aria-label="Menú"
        >
          <span /><span /><span />
        </button>
      </div>

      <div className={"nav-mobile" + (open ? " show" : "")}>
        {TABS.map((t) => (
          <button
            key={t.id}
            className={"nav-mobile-tab" + (tab === t.id ? " active" : "")}
            onClick={() => handle(t.id)}
          >
            {t.label}
          </button>
        ))}
        <button className="btn btn-sun" onClick={() => handle("contacto")}>
          Inicia tu proyecto →
        </button>
      </div>
    </nav>
  );
}

window.Nav = Nav;