"use client";
const { useState } = React;

function Navbar({ currentPage, onNavigate }) {
  const [menuOpen, setMenuOpen] = useState(false);

  const links = [
    { label: 'Home',     page: 'home' },
    { label: 'Work',     page: 'work' },
    { label: 'Services', page: 'services' },
    { label: 'About',    page: 'about' },
  ];

  const s = {
    nav: {
      position: 'sticky', top: 0, zIndex: 999,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 5%', minHeight: '68px',
      backgroundColor: 'var(--color-neutral-darkest)',
      borderBottom: '1px solid rgba(255,255,255,0.08)',
    },
    logo:    { cursor: 'pointer', display: 'flex', alignItems: 'center' },
    logoImg: { height: '44px', display: 'block' },
    logoTxt: { display: 'none', fontFamily: 'var(--font-heading)', fontSize: '20px', color: '#fff', fontWeight: 400, letterSpacing: '0.02em' },
    links:   { display: 'flex', alignItems: 'center' },
    link: {
      background: 'none', border: 'none', cursor: 'pointer',
      padding: '8px 16px', fontSize: '14px',
      fontFamily: 'var(--font-body)', color: 'rgba(255,255,255,0.65)',
      borderBottom: '2px solid transparent',
    },
    ctas:    { display: 'flex', alignItems: 'center', gap: '10px' },
    btnOut: {
      padding: '7px 16px', fontSize: '13px', fontWeight: 500,
      fontFamily: 'var(--font-body)', background: 'transparent',
      border: '2px solid rgba(255,255,255,0.4)', color: '#fff',
      cursor: 'pointer', borderRadius: 0,
    },
    btnFill: {
      padding: '7px 16px', fontSize: '13px', fontWeight: 500,
      fontFamily: 'var(--font-body)',
      background: 'linear-gradient(135deg,#2563EB 20%,#D94F4F)',
      color: '#fff', border: 'none', cursor: 'pointer', borderRadius: 0,
    },
    hamburger: {
      display: 'none', background: 'none', border: 'none',
      cursor: 'pointer', padding: '8px', flexDirection: 'column', gap: '5px',
    },
    bar: { width: '22px', height: '2px', background: '#fff', display: 'block' },
    mobileMenu: {
      position: 'absolute', top: '68px', left: 0, right: 0,
      background: 'var(--color-neutral-darkest)',
      borderBottom: '1px solid rgba(255,255,255,0.1)',
      padding: '16px 5% 24px', zIndex: 998,
      display: menuOpen ? 'flex' : 'none', flexDirection: 'column', gap: '4px',
    },
    mobileLink: {
      background: 'none', border: 'none', cursor: 'pointer',
      padding: '10px 0', fontSize: '16px', fontFamily: 'var(--font-body)',
      color: 'rgba(255,255,255,0.8)', textAlign: 'left',
    },
  };

  const activeStyle = { color: '#fff', fontWeight: 600, borderBottom: '2px solid rgba(255,255,255,0.5)' };

  return (
    <React.Fragment>
      <nav style={s.nav}>
        {/* Logo */}
        <a style={s.logo} onClick={() => { onNavigate('home'); setMenuOpen(false); }}>
          <img src="./assets/logo-aso-hq.png" alt="ASO HQ" style={s.logoImg}
            onError={e => { e.target.style.display='none'; e.target.nextSibling.style.display='block'; }} />
          <span style={s.logoTxt}>ASO HQ</span>
        </a>

        {/* Desktop nav links */}
        <div style={s.links} className="aso-nav-desktop">
          {links.map(({ label, page }) => (
            <button key={page}
              style={{ ...s.link, ...(currentPage === page ? activeStyle : {}) }}
              onClick={() => onNavigate(page)}>
              {label}
            </button>
          ))}
        </div>

        {/* Desktop CTAs */}
        <div style={s.ctas} className="aso-nav-desktop">
          <button style={s.btnOut}  onClick={() => onNavigate('contact')}>Contact</button>
          <button style={s.btnFill} onClick={() => onNavigate('contact')}>Book call</button>
        </div>

        {/* Mobile hamburger */}
        <button style={{ ...s.hamburger, display: 'flex' }} className="aso-nav-mobile"
          onClick={() => setMenuOpen(o => !o)} aria-label="Menu">
          <span style={s.bar}></span>
          <span style={s.bar}></span>
          <span style={s.bar}></span>
        </button>
      </nav>

      {/* Mobile menu */}
      <div style={s.mobileMenu}>
        {links.map(({ label, page }) => (
          <button key={page} style={s.mobileLink}
            onClick={() => { onNavigate(page); setMenuOpen(false); }}>
            {label}
          </button>
        ))}
        <div style={{ display:'flex', gap:'10px', marginTop:'16px', flexWrap:'wrap' }}>
          <button style={s.btnOut}  onClick={() => { onNavigate('contact'); setMenuOpen(false); }}>Contact</button>
          <button style={s.btnFill} onClick={() => { onNavigate('contact'); setMenuOpen(false); }}>Book call</button>
        </div>
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { Navbar });