const navStyles = {
  wrap: {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
    background: 'rgba(8,8,8,0.88)',
    backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
    borderBottom: '1px solid var(--border-subtle)',
    height: 64,
  },
  inner: {
    maxWidth: 1200, margin: '0 auto', padding: '0 24px',
    height: '100%', display: 'flex', alignItems: 'center',
    justifyContent: 'space-between', gap: 16,
  },
  brand: { display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0 },
  wordmark: {
    fontFamily: 'var(--font-display)',
    fontSize: 15, fontWeight: 700, letterSpacing: '-0.01em',
    color: 'var(--fg-1)',
  },
  links: { display: 'flex', gap: 4, alignItems: 'center' },
  link: {
    fontSize: 13, color: 'var(--fg-2)',
    padding: '8px 12px', borderRadius: 6,
    transition: 'color 150ms, background 150ms',
    cursor: 'pointer', textDecoration: 'none',
  },
  // Hamburger button (oculto no desktop via mobile.css)
  hamburger: {
    background: 'transparent',
    border: '1px solid var(--border-default)',
    borderRadius: 8,
    color: 'var(--fg-1)',
    width: 40, height: 40,
    cursor: 'pointer',
    fontSize: 18,
    lineHeight: 1,
    flexShrink: 0,
  },
  // Menu mobile fullscreen
  mobileMenu: {
    position: 'fixed',
    top: 64, left: 0, right: 0,
    zIndex: 99,
    background: 'rgba(8,8,8,0.97)',
    backdropFilter: 'blur(24px)', WebkitBackdropFilter: 'blur(24px)',
    borderBottom: '1px solid var(--border-subtle)',
    flexDirection: 'column',
    padding: '24px 24px 32px',
    gap: 8,
  },
  mobileLink: {
    display: 'block',
    fontSize: 17, fontWeight: 500,
    color: 'var(--fg-1)',
    padding: '14px 0',
    borderBottom: '1px solid var(--border-subtle)',
    textDecoration: 'none',
    cursor: 'pointer',
  },
  mobileCta: {
    marginTop: 16, width: '100%',
  },
};

function Nav() {
  const [hovered, setHovered] = React.useState(null);
  const [menuOpen, setMenuOpen] = React.useState(false);

  const items = [
    ['Soluções',      '#solucoes'],
    ['Como funciona', '#processo'],
    ['Resultados',    '#resultados'],
    ['Abordagem',     '#abordagem'],
  ];

  const scrollToForm = (e) => {
    e?.preventDefault();
    setMenuOpen(false);
    document.getElementById('contato')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  const handleMobileLink = (href) => {
    setMenuOpen(false);
    setTimeout(() => {
      const id = href.replace('#', '');
      document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
    }, 80);
  };

  return (
    <React.Fragment>
      <nav style={navStyles.wrap}>
        <div style={navStyles.inner}>

          {/* Brand */}
          <a href="#top" style={{ ...navStyles.brand, textDecoration: 'none' }}>
            <img src="assets/logo-bear-cream.svg"
              className="nav-logo-img"
              style={{ width: 34, height: 34 }} alt="Black Bear AI" />
            <span style={navStyles.wordmark}>Black Bear AI</span>
          </a>

          {/* Desktop links */}
          <div style={navStyles.links} className="nav-desktop-links">
            {items.map(([label, href]) => (
              <a key={label} href={href} style={{
                ...navStyles.link,
                color: hovered === label ? 'var(--fg-1)' : 'var(--fg-2)',
                background: hovered === label ? 'var(--border-subtle)' : 'transparent',
              }}
                onMouseEnter={() => setHovered(label)}
                onMouseLeave={() => setHovered(null)}>
                {label}
              </a>
            ))}
          </div>

          {/* Desktop CTA */}
          <div className="nav-desktop-cta" style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            <ThemeToggle size={36} />
            <button className="btn btn-sm btn-gold" onClick={scrollToForm}>
              Solicitar diagnóstico <IconArrowRight size={13} />
            </button>
          </div>

          {/* Hamburger mobile */}
          <button
            className="nav-hamburger"
            style={navStyles.hamburger}
            onClick={() => setMenuOpen(!menuOpen)}
            aria-label={menuOpen ? 'Fechar menu' : 'Abrir menu'}
          >
            {menuOpen ? '✕' : '☰'}
          </button>

        </div>
      </nav>

      {/* Menu mobile */}
      <div
        className="nav-mobile-menu"
        style={{
          ...navStyles.mobileMenu,
          display: menuOpen ? 'flex' : 'none',
        }}
      >
        {items.map(([label, href]) => (
          <a key={label}
            href={href}
            style={navStyles.mobileLink}
            onClick={(e) => { e.preventDefault(); handleMobileLink(href); }}
          >
            {label}
          </a>
        ))}
        <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginTop: 20 }}>
          <ThemeToggle size={44} />
          <button
            className="btn btn-lg btn-gold"
            style={{ ...navStyles.mobileCta, marginTop: 0, flex: 1 }}
            onClick={scrollToForm}
          >
            Solicitar diagnóstico <IconArrowRight size={16} />
          </button>
        </div>
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { Nav });