const Navbar = () => {
  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 links = ['Programas', 'Empresas', 'Método', 'Experiencias'];

  return (
    <nav className="fixed top-0 left-0 right-0 z-50 flex justify-center pointer-events-none"
         style={{ paddingTop: 'clamp(14px, 1.6vw, 22px)' }}>
      <div className={"pointer-events-auto flex items-center gap-3 sm:gap-6 rounded-full transition-all duration-300 " +
        (scrolled ? "border border-white/10 backdrop-blur-xl bg-black/55" : "border border-transparent bg-transparent")}
           style={{ padding: '8px 8px 8px 18px' }}>
        {/* Logo */}
        <a href="#top" className="flex items-center pr-2" aria-label="ECOOIA inicio">
          <img src="assets/ecooia-horizontal-dark.svg" alt="ECOOIA"
               style={{ height: 26, width: 'auto', display: 'block' }} />
        </a>

        {/* Center links */}
        <ul className="hidden md:flex items-center gap-1 text-[14px]">
          {links.map(l => (
            <li key={l}>
              <a href={"#" + l.toLowerCase().replace('é','e')}
                 className="px-3 py-1.5 rounded-full text-fg/80 hover:text-fg hover:bg-white/5 transition">{l}</a>
            </li>
          ))}
        </ul>

        {/* CTA */}
        <a href="#comenzar"
           className="hidden md:inline-flex items-center gap-2 rounded-full px-4 py-2 text-[13.5px] font-medium border-grad hover:bg-transparent hover:[background:linear-gradient(135deg,#6B5CFF_0%,#2EC4F1_100%)] transition-colors">
          Comenzar
        </a>

        {/* Mobile hamburger */}
        <button className="md:hidden ml-1 mr-1 p-2 rounded-full hover:bg-white/5"
                onClick={() => setOpen(o => !o)} aria-label="Menú">
          {open ? <IconX size={20} /> : <IconMenu size={20} />}
        </button>
      </div>

      {/* Mobile sheet */}
      {open && (
        <div className="md:hidden pointer-events-auto absolute top-[78px] left-4 right-4 rounded-2xl border border-white/10 bg-black/85 backdrop-blur-xl p-4">
          <ul className="flex flex-col gap-1">
            {links.map(l => (
              <li key={l}>
                <a href={"#" + l.toLowerCase().replace('é','e')}
                   onClick={() => setOpen(false)}
                   className="block px-3 py-2 rounded-lg text-fg/90 hover:bg-white/5">{l}</a>
              </li>
            ))}
            <li className="pt-2">
              <a href="#comenzar" onClick={() => setOpen(false)}
                 className="block text-center rounded-full px-4 py-2.5 font-medium btn-grad">
                Comenzar
              </a>
            </li>
          </ul>
        </div>
      )}
    </nav>
  );
};

window.Navbar = Navbar;