/* Nav component */
(function() {
const { useState, useEffect } = React;

function WebsiteNav() {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

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

  const navStyle = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 300,
    height: '60px',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '0 40px',
    background: scrolled ? 'rgba(10,11,13,0.92)' : 'transparent',
    borderBottom: scrolled ? '1px solid rgba(255,255,255,0.06)' : '1px solid transparent',
    backdropFilter: scrolled ? 'blur(20px)' : 'none',
    transition: 'all 320ms cubic-bezier(0.4,0,0.2,1)',
  };

  const logoStyle = { display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer', textDecoration: 'none' };
  const markStyle = { width: '24px', height: '24px', border: '1.5px solid #2E8FFF', borderRadius: '3px', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 };
  const markInner = { width: '8px', height: '8px', background: '#2E8FFF', borderRadius: '1px' };
  const wordStyle = { fontFamily: 'DM Sans, sans-serif', fontSize: '16px', fontWeight: 600, letterSpacing: '-0.025em', color: '#F0F2F5' };

  const links = [
    { label: 'Warehouse', href: '#warehouse' },
    { label: 'Procurement', href: '#procurement' },
    { label: 'CO Pilot', href: '#copilot' },
    { label: 'Industries', href: '#industries' },
  ];

  const linkStyle = {
    fontFamily: 'Inter, sans-serif', fontSize: '13px', color: '#8A9BB0',
    textDecoration: 'none', cursor: 'pointer', transition: 'color 180ms',
    padding: '4px 0',
  };

  const btnGhost = {
    fontFamily: 'Inter, sans-serif', fontSize: '13px', fontWeight: 500,
    color: '#2E8FFF', background: 'transparent',
    border: '1px solid rgba(46,143,255,0.35)', borderRadius: '5px',
    padding: '7px 16px', cursor: 'pointer', transition: 'all 200ms',
  };
  const btnFill = {
    fontFamily: 'Inter, sans-serif', fontSize: '13px', fontWeight: 500,
    color: '#fff', background: '#2E8FFF', border: 'none', borderRadius: '5px',
    padding: '7px 16px', cursor: 'pointer', transition: 'all 200ms',
    boxShadow: '0 0 20px rgba(46,143,255,0.25)',
  };

  return (
    <nav style={navStyle}>
      <a style={logoStyle} href="#top">
        <div style={markStyle}><div style={markInner}></div></div>
        <span style={wordStyle}>operasis</span>
      </a>

      <div style={{ display: 'flex', alignItems: 'center', gap: '32px' }}>
        {links.map(l => (
          <a key={l.label} href={l.href} style={linkStyle}
            onMouseEnter={e => e.target.style.color = '#F0F2F5'}
            onMouseLeave={e => e.target.style.color = '#8A9BB0'}
          >{l.label}</a>
        ))}
      </div>

      <div style={{ display: 'flex', gap: '10px' }}>
        <button style={btnGhost}
          onMouseEnter={e => { e.target.style.background = 'rgba(46,143,255,0.08)'; }}
          onMouseLeave={e => { e.target.style.background = 'transparent'; }}>
          Sign in
        </button>
        <a href="#contact" style={{ ...btnFill, textDecoration: 'none' }}
          onMouseEnter={e => { e.target.style.filter = 'brightness(1.12)'; e.target.style.boxShadow = '0 0 28px rgba(46,143,255,0.45)'; }}
          onMouseLeave={e => { e.target.style.filter = ''; e.target.style.boxShadow = '0 0 20px rgba(46,143,255,0.25)'; }}>
          Request Demo
        </a>
      </div>
    </nav>
  );
}

Object.assign(window, { WebsiteNav });
})();