const Navbar = ({ currentPage, navigate }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { id: 'home', label: 'Home' },
    { id: 'metodologia', label: 'Metodologia' },
    { id: 'servicos', label: 'Serviços' },
    { id: 'tecnologia', label: 'Tecnologia' },
    { id: 'diagnostico', label: 'Diagnóstico Comercial' },
  ];

  const navStyle = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1000,
    background: scrolled ? 'rgba(10,10,10,0.97)' : 'rgba(10,10,10,0.85)',
    backdropFilter: 'blur(12px)',
    borderBottom: '1px solid rgba(255,255,255,0.07)',
    transition: 'background 0.3s',
  };

  const innerStyle = {
    maxWidth: 1280, margin: '0 auto',
    padding: '0 32px',
    height: 68,
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  };

  const logoStyle = {
    display: 'flex',
    alignItems: 'center',
    gap: 10,
    cursor: 'pointer',
    textDecoration: 'none',
  };

  const logoTextStyle = {
    fontFamily: 'Montserrat, sans-serif',
    fontWeight: 800,
    fontSize: 19,
    color: '#FFFFFF',
    letterSpacing: '-0.3px',
    lineHeight: 1,
  };

  const logoAccentStyle = { color: '#fc6466' };

  const linkStyle = (active) => ({
    fontFamily: 'Montserrat, sans-serif',
    fontWeight: active ? 600 : 500,
    fontSize: 13,
    color: active ? '#FFFFFF' : '#A6A6A6',
    cursor: 'pointer',
    letterSpacing: '0.3px',
    padding: '6px 2px',
    borderBottom: active ? '2px solid #fc6466' : '2px solid transparent',
    transition: 'color 0.2s, border-color 0.2s',
    textDecoration: 'none',
    whiteSpace: 'nowrap',
  });

  const ctaStyle = {
    fontFamily: 'Montserrat, sans-serif',
    fontWeight: 700,
    fontSize: 13,
    background: '#fc6466',
    color: '#000',
    border: 'none',
    padding: '10px 20px',
    borderRadius: 6,
    cursor: 'pointer',
    letterSpacing: '0.3px',
    whiteSpace: 'nowrap',
    transition: 'background 0.2s, transform 0.1s',
  };

  return (
    <nav style={navStyle}>
      <div style={innerStyle}>
        <div style={logoStyle} onClick={() => navigate('home')}>
          <img
            src={window.__resources && window.__resources.barpesLogo ? window.__resources.barpesLogo : "uploads/barpes-logo-full.png"}
            alt="BARPES DIGITAL"
            style={{ height: 38, width: 'auto', display: 'block' }}
          />
        </div>

        {/* Desktop menu */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 28, '@media(max-width:768px)': { display: 'none' } }} className="nav-desktop">
          {links.map(l => (
            <span
              key={l.id}
              style={linkStyle(currentPage === l.id)}
              onClick={() => navigate(l.id)}
            >{l.label}</span>
          ))}
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <button
            style={ctaStyle}
            className="nav-desktop"
            onClick={() => navigate('diagnostico')}
            onMouseEnter={e => e.target.style.background = '#ff4f51'}
            onMouseLeave={e => e.target.style.background = '#fc6466'}
          >
            Agendar Diagnóstico
          </button>

          {/* Hamburger */}
          <button
            className="nav-mobile"
            onClick={() => setMenuOpen(!menuOpen)}
            style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#fff', padding: 4 }}
          >
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
              {menuOpen ? (
                <path d="M6 6L18 18M6 18L18 6" stroke="#fff" strokeWidth="2" strokeLinecap="round"/>
              ) : (
                <path d="M4 6h16M4 12h16M4 18h16" stroke="#fff" strokeWidth="2" strokeLinecap="round"/>
              )}
            </svg>
          </button>
        </div>
      </div>

      {/* Mobile menu */}
      {menuOpen && (
        <div style={{
          background: '#111111',
          borderTop: '1px solid rgba(255,255,255,0.07)',
          padding: '12px 0',
        }} className="nav-mobile">
          {links.map(l => (
            <div
              key={l.id}
              onClick={() => { navigate(l.id); setMenuOpen(false); }}
              style={{
                fontFamily: 'Montserrat, sans-serif',
                fontWeight: currentPage === l.id ? 700 : 500,
                fontSize: 15,
                color: currentPage === l.id ? '#fc6466' : '#D9D9D9',
                padding: '14px 32px',
                cursor: 'pointer',
                borderBottom: '1px solid rgba(255,255,255,0.04)',
              }}
            >{l.label}</div>
          ))}
          <div style={{ padding: '16px 32px' }}>
            <button
              onClick={() => { navigate('diagnostico'); setMenuOpen(false); }}
              style={{ ...ctaStyle, width: '100%', padding: '14px 20px', fontSize: 14 }}
            >Agendar Diagnóstico</button>
          </div>
        </div>
      )}
    </nav>
  );
};

Object.assign(window, { Navbar });