/* Top navigation. glass pill, centered links, mobile hamburger */

const NavLogo = () => (
  <a href="#" className="tf-nav-logo">
    <img src={(typeof window !== 'undefined' && window.__resources && window.__resources.iconSvg) || "../../assets/icon.svg"} alt="" />
    <span>TechFala</span>
  </a>
);

const HamburgerIcon = ({ open }) => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
    {open
      ? <><path d="M6 6l12 12"/><path d="M18 6L6 18"/></>
      : <><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></>}
  </svg>
);

const TopNav = () => {
  const [open, setOpen] = React.useState(false);
  const loginUrl = (typeof window !== 'undefined' && window.LOGIN_URL) || "https://app.techfala.com.br";

  React.useEffect(() => {
    const handler = () => setOpen(false);
    if (open) window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, [open]);

  return (
    <nav className={"tf-nav" + (open ? " open" : "")}>
      <div className="tf-nav-inner">
        <NavLogo />
        <div className="tf-nav-links">
          <a href="#features" onClick={() => setOpen(false)}>Recursos</a>
          <a href="#how" onClick={() => setOpen(false)}>Como funciona</a>
          <a href="#economy" onClick={() => setOpen(false)}>Economia</a>
          <a href="#pricing" onClick={() => setOpen(false)}>Planos</a>
          <a href="#faq" onClick={() => setOpen(false)}>FAQ</a>
        </div>
        <a href={loginUrl} target="_blank" rel="noopener" className="tf-nav-cta">
          Área de Login
        </a>
        <button
          className="tf-nav-burger"
          aria-label={open ? "Fechar menu" : "Abrir menu"}
          aria-expanded={open}
          onClick={() => setOpen(o => !o)}
        >
          <HamburgerIcon open={open} />
        </button>
      </div>
    </nav>
  );
};

window.TopNav = TopNav;
