const { useState } = React;

const Navbar = ({ onNavigate, activePage }) => {
  const [showMenu, setShowMenu] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  
  const handleNav = (page) => {
    setMobileOpen(false);
    onNavigate(page);
  };
  
  return (
    <nav className={`navbar ${mobileOpen ? 'menu-open' : ''}`}>
      <div className="nav-brand-container">
        <div style={{ cursor: 'pointer' }} onClick={() => handleNav('landing')}>
          <BrandLogo />
        </div>
        <button 
          className="mobile-menu-toggle" 
          onClick={() => setMobileOpen(!mobileOpen)}
          aria-label="Toggle navigation"
        >
          {mobileOpen ? (
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
          ) : (
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
          )}
        </button>
      </div>
      
      <div className="nav-links">
        <span className={`nav-link ${activePage === 'landing' ? 'active' : ''}`} onClick={() => handleNav('landing')}>Product</span>
        <span className="nav-link" onClick={() => handleNav('playground')}>Features</span>
        <span className="nav-link">Pricing</span>
        <span className="nav-link" onClick={() => handleNav('playground')}>Resources</span>
      </div>
      
      <div className="nav-actions">
        <div style={{ position: 'relative', width: mobileOpen ? '100%' : 'auto' }}>
          <span className="nav-link" onClick={() => setShowMenu(!showMenu)}>Login</span>
          
          {showMenu && (
            <div className="login-dropdown">
              <div>
                <div style={{ color: '#4ade80', fontWeight: 'bold', marginBottom: '4px' }}>30 OR Model (Enterprise)</div>
                <div style={{ color: '#94a3b8', fontSize: '0.85rem' }}>User: admin_30@orflow.com</div>
                <div style={{ color: '#94a3b8', fontSize: '0.85rem', marginBottom: '8px' }}>Pass: EntFlow2026!</div>
                <button 
                  className="btn btn-primary" 
                  style={{ width: '100%', padding: '0.5rem', fontSize: '0.9rem' }} 
                  onClick={() => { 
                    setShowMenu(false); 
                    handleNav('playground31');
                  }}
                >
                  Login
                </button>
              </div>
              <div style={{ borderTop: '1px solid #223248', margin: '1rem 0' }}></div>
              <div>
                <div style={{ color: '#60a5fa', fontWeight: 'bold', marginBottom: '4px' }}>4 OR Model (Standard)</div>
                <div style={{ color: '#94a3b8', fontSize: '0.85rem' }}>User: admin_4@orflow.com</div>
                <div style={{ color: '#94a3b8', fontSize: '0.85rem', marginBottom: '8px' }}>Pass: StdFlow2026!</div>
                <button 
                  className="btn btn-primary" 
                  style={{ width: '100%', padding: '0.5rem', fontSize: '0.9rem' }} 
                  onClick={() => { 
                    setShowMenu(false); 
                    handleNav('playground');
                  }}
                >
                  Login
                </button>
              </div>
            </div>
          )}
        </div>
        <button className="btn btn-primary" onClick={() => handleNav('playground')}>Try Live OR Dashboard</button>
      </div>
    </nav>
  );
};

window.Navbar = Navbar;