// Nav.jsx — Anika Williams Design navigation
function AWNav({ currentPage, onNavigate, scrolled, lightBg }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const links = ['Home', 'Portfolio', 'Gallery', 'Shop', 'About'];

  // When the page is light AND we're at the top (transparent nav), invert ink.
  const useDarkInk = lightBg && !scrolled;
  const fg = useDarkInk ? '#0a0a0a' : '#F2EADB';
  const fgMuted = useDarkInk ? '#666666' : '#888888';

  const navStyle = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 200,
    background: scrolled ? 'rgba(134, 151, 158, 0.95)' : 'transparent',
    borderBottom: scrolled ? '1px solid rgba(255,255,255,0.15)' : 'none',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '0 48px', height: 68,
    transition: 'background 300ms ease-out, border-color 300ms ease-out',
    backdropFilter: scrolled ? 'blur(12px)' : 'none'
  };

  const linkStyle = (active) => ({
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: 11, letterSpacing: '2px', textTransform: 'uppercase',
    color: active ? fg : fgMuted, textDecoration: 'none',
    cursor: 'pointer', background: 'none', border: 'none', padding: 0,
    transition: 'color 200ms ease-out',
    borderBottom: active ? `1px solid ${fg}` : '1px solid transparent',
    paddingBottom: 2
  });

  const leftLinks = links.slice(0, 2);
  const rightLinks = links.slice(2);

  return (
    <nav style={navStyle}>
      {/* Left */}
      <div style={{ display: 'flex', gap: 32 }}>
        {leftLinks.map((l) =>
        <button key={l} onClick={() => onNavigate(l)} style={linkStyle(currentPage === l)}
        onMouseEnter={(e) => {if (currentPage !== l) e.currentTarget.style.color = fg;}}
        onMouseLeave={(e) => {if (currentPage !== l) e.currentTarget.style.color = fgMuted;}}>
          {l}</button>
        )}
      </div>

      {/* Center wordmark */}
      <button onClick={() => onNavigate('Home')} style={{
        position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)',
        background: 'none', border: 'none', cursor: 'pointer',
        padding: 0, lineHeight: 0
      }}>
        <div role="img" aria-label="Anika Williams"
        style={{
          height: 32, width: 400, display: 'block',
          background: useDarkInk ? '#0a0a0a' : '#F2EADB',
          WebkitMaskImage: `url(${currentPage === 'Home' ? "assets/anika-williams-handwritten.svg" : "assets/anika-williams-handwritten-v2.svg"})`,
          maskImage: `url(${currentPage === 'Home' ? "assets/anika-williams-handwritten.svg" : "assets/anika-williams-handwritten-v2.svg"})`,
          WebkitMaskSize: 'contain', maskSize: 'contain',
          WebkitMaskRepeat: 'no-repeat', maskRepeat: 'no-repeat',
          WebkitMaskPosition: 'center', maskPosition: 'center'
        }} />
      </button>

      {/* Right */}
      <div style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
        {rightLinks.map((l) =>
        <button key={l} onClick={() => onNavigate(l)} style={linkStyle(currentPage === l)}
        onMouseEnter={(e) => {if (currentPage !== l) e.currentTarget.style.color = fg;}}
        onMouseLeave={(e) => {if (currentPage !== l) e.currentTarget.style.color = fgMuted;}}>
          {l}</button>
        )}
      </div>
    </nav>);

}

Object.assign(window, { AWNav });