const { useState, useEffect } = React;

const VelaNav = ({ currentPage, navigate }) => {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

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

  const links = [
    { label: 'Services', page: 'services' },
    { label: 'Work',     page: 'work' },
    { label: 'Process',  page: 'process' },
    { label: 'Pricing',  page: 'pricing' },
  ];

  const go = (page) => { navigate(page); setMobileOpen(false); };

  return (
    <nav className={`nav${scrolled ? ' scrolled' : ''}`} style={{ position: 'fixed' }}>
      <div className="container">
        <button className="nav-logo" onClick={() => go('home')}>
          <div className="nav-logo-mark">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
              stroke="#fff" strokeWidth="2.2" strokeLinecap="round">
              <circle cx="12" cy="12" r="10"/>
              <path d="M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20M2 12h20"/>
            </svg>
          </div>
          VELA
        </button>

        <div className="nav-links">
          {links.map(({ label, page }) => (
            <button key={page}
              className={`nav-link${currentPage === page ? ' active' : ''}`}
              onClick={() => go(page)}>
              {label}
            </button>
          ))}
          <button className="nav-cta" onClick={() => go('contact')}>
            Start a Project →
          </button>
        </div>

        <button className="menu-btn" onClick={() => setMobileOpen(o => !o)}
          aria-label="Toggle menu">
          <span style={{ transform: mobileOpen ? 'rotate(45deg) translate(4px,4px)' : 'none' }} />
          <span style={{ opacity: mobileOpen ? 0 : 1 }} />
          <span style={{ transform: mobileOpen ? 'rotate(-45deg) translate(4px,-4px)' : 'none' }} />
        </button>
      </div>

      {mobileOpen && (
        <div className="mobile-menu">
          {links.map(({ label, page }) => (
            <button key={page} className="mobile-nav-link" onClick={() => go(page)}>
              {label}
            </button>
          ))}
          <button className="btn btn-primary"
            style={{ marginTop: 16, alignSelf: 'flex-start' }}
            onClick={() => go('contact')}>
            Start a Project →
          </button>
        </div>
      )}
    </nav>
  );
};

window.VelaNav = VelaNav;