/* ═══════════════════════════════════════════════════════════
   NAV — logo + âncoras + CTA, com menu mobile
   ═══════════════════════════════════════════════════════════ */

const navStyles = {
  // reservado para overrides pontuais; o visual vive em sections.css
};

const NAV_ITEMS = [
  { href: '#funcionalidades', label: 'Funcionalidades' },
  { href: '#planos', label: 'Planos' },
  { href: '#por-dentistas', label: 'Quem faz' },
  { href: '#faq', label: 'FAQ' },
];

function Nav() {
  const [open, setOpen] = React.useState(false);
  const scrollY = useScrollY();
  const scrolled = scrollY > 12;

  // Trava o scroll do body enquanto o menu mobile está aberto
  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => {
      document.body.style.overflow = '';
    };
  }, [open]);

  // Fecha com Esc
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => e.key === 'Escape' && setOpen(false);
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open]);

  const close = () => setOpen(false);

  return (
    <React.Fragment>
      <nav className={`navbar${scrolled ? ' scrolled' : ''}`} style={navStyles.root}>
        <div className="container">
          <Logo />

          <ul className="nav-links">
            {NAV_ITEMS.map((item) =>
              item.children ? (
                <li className="nav-dropdown" key={item.label}>
                  <button className="nav-dropdown-trigger" aria-haspopup="true">
                    {item.label}
                    <Icon d="m6 9 6 6 6-6" size={14} strokeWidth={2.5} />
                  </button>
                  <ul className="nav-dropdown-panel">
                    {item.children.map((child) => (
                      <li key={child.href}>
                        <a href={child.href} onClick={(e) => scrollToSection(child.href, e)}>
                          {child.label}
                        </a>
                      </li>
                    ))}
                  </ul>
                </li>
              ) : (
                <li key={item.href}>
                  <a href={item.href} onClick={(e) => scrollToSection(item.href, e)}>
                    {item.label}
                  </a>
                </li>
              )
            )}
          </ul>

          <div className="nav-actions">
            <a
              href={LINKS.login}
              className="btn btn-outline btn-sm"
              onClick={() => track('login_clicked', { placement: 'navigation' })}
            >
              Entrar
            </a>
            <a
              href={LINKS.cadastro}
              className="btn btn-primary btn-sm"
              onClick={(e) => trackCta('cta_start_free_trial', { placement: 'navigation' }, e)}
            >
              Teste grátis 15 dias
            </a>
          </div>

          <button
            className={`hamburger${open ? ' open' : ''}`}
            onClick={() => setOpen((v) => !v)}
            aria-label={open ? 'Fechar menu' : 'Abrir menu'}
            aria-expanded={open}
            aria-controls="mobile-menu"
          >
            <span />
            <span />
            <span />
          </button>
        </div>
      </nav>

      <div id="mobile-menu" className={`mobile-menu${open ? ' open' : ''}`}>
        {NAV_ITEMS.flatMap((item) =>
          item.children
            ? item.children.map((child) => (
                <a
                  key={child.href}
                  href={child.href}
                  onClick={(e) => {
                    close();
                    scrollToSection(child.href, e);
                  }}
                >
                  {child.label}
                </a>
              ))
            : [
                <a
                  key={item.href}
                  href={item.href}
                  onClick={(e) => {
                    close();
                    scrollToSection(item.href, e);
                  }}
                >
                  {item.label}
                </a>,
              ]
        )}
        <a
          href={LINKS.login}
          onClick={() => {
            close();
            track('login_clicked', { placement: 'mobile-menu' });
          }}
        >
          Entrar
        </a>
        <a
          href={LINKS.cadastro}
          className="btn btn-primary btn-lg"
          onClick={(e) => {
            close();
            trackCta('cta_start_free_trial', { placement: 'mobile-menu' }, e);
          }}
        >
          Teste grátis 15 dias
        </a>
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { Nav });