/* Nav — floating glass navbar with theme toggle + mobile menu */
function Nav({ onDemo, theme, onToggleTheme }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 20);
    window.addEventListener("scroll", fn); fn();
    return () => window.removeEventListener("scroll", fn);
  }, []);
  const links = [
    ["Início", "#hero"], ["Produtos", "#produtos"], ["Sobre", "#visao"],
    ["Blog", "#blog"], ["Contato", "#footer"],
  ];
  return (
    <>
      <div className={`lab-nav-wrap ${scrolled ? "scrolled" : ""}`}>
        <div className="lab-container">
          <nav className="lab-nav">
            <a className="lab-brand" href="#hero"><span className="mk" /> <span className="lab-wm"><span className="g">Lab</span> MicroSaaS</span></a>
            <div className="lab-nav-links">
              {links.map(([l, h], i) => <a key={l} href={h} className={i === 0 ? "active" : ""}>{l}</a>)}
            </div>
            <div className="lab-nav-right">
              <button className="lab-icon-btn" onClick={onToggleTheme} aria-label="Alternar tema">
                <Icon name={theme === "dark" ? "sun" : "moon"} size={17} />
              </button>
              <div className="lab-nav-cta">
                <Button onClick={onDemo}>Agendar Demonstração</Button>
              </div>
              <button className="lab-icon-btn lab-burger" onClick={() => setOpen(true)} aria-label="Menu">
                <Icon name="menu" size={18} />
              </button>
            </div>
          </nav>
        </div>
      </div>
      {open && (
        <div className="lab-mobile">
          <button className="lab-icon-btn" style={{ position: "absolute", top: 26, right: 28 }} onClick={() => setOpen(false)}>
            <Icon name="x" size={18} />
          </button>
          {links.map(([l, h]) => <a key={l} href={h} onClick={() => setOpen(false)}>{l}</a>)}
          <Button onClick={() => { setOpen(false); onDemo(); }} style={{ marginTop: 18 }}>Agendar Demonstração</Button>
        </div>
      )}
    </>
  );
}
window.Nav = Nav;