// Nav.jsx — Top navigation bar
const Nav = ({ currentPage, navigate }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

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

  const links = [
    { id: 'home', label: 'Home' },
    { id: 'browse', label: 'Find a Farm' },
    { id: 'about', label: 'About' },
  ];

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: scrolled ? 'rgba(253,246,236,0.97)' : 'transparent',
      backdropFilter: scrolled ? 'blur(12px)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(180,140,80,0.15)' : 'none',
      transition: 'all 0.3s ease',
      padding: '0 clamp(1rem, 4vw, 3rem)',
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        height: 68,
      }}>
        {/* Logo */}
        <button onClick={() => navigate('home')} style={{
          background: 'none', border: 'none', cursor: 'pointer',
          display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <div style={{
            width: 36, height: 36, borderRadius: '50%',
            background: 'linear-gradient(135deg, var(--orange), var(--gold))',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 18, flexShrink: 0,
            boxShadow: '0 2px 8px rgba(200,98,42,0.3)',
          }}>🌾</div>
          <div style={{ textAlign: 'left' }}>
            <div style={{
              fontFamily: 'Playfair Display, serif',
              fontWeight: 700, fontSize: 17, lineHeight: 1.1,
              color: 'var(--bark)',
              letterSpacing: '-0.01em',
            }}>Prairie Pickin'</div>
            <div style={{
              fontFamily: 'DM Mono, monospace',
              fontSize: 9, letterSpacing: '0.12em',
              color: 'var(--bark-light)', textTransform: 'uppercase',
            }}>Guide</div>
          </div>
        </button>

        {/* Desktop links */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          {links.map(link => (
            <button key={link.id} onClick={() => navigate(link.id)} style={{
              background: 'none', border: 'none', cursor: 'pointer',
              padding: '8px 16px', borderRadius: 6,
              fontFamily: 'Source Serif 4, serif',
              fontSize: 15, fontWeight: currentPage === link.id ? 600 : 400,
              color: currentPage === link.id ? 'var(--orange)' : 'var(--bark)',
              transition: 'all 0.2s',
              position: 'relative',
            }}
            onMouseEnter={e => { if (currentPage !== link.id) e.currentTarget.style.color = 'var(--orange)'; }}
            onMouseLeave={e => { if (currentPage !== link.id) e.currentTarget.style.color = 'var(--bark)'; }}
            >{link.label}</button>
          ))}
          <button onClick={() => navigate('browse')} style={{
            marginLeft: 8,
            background: 'var(--orange)', color: '#fff',
            border: 'none', cursor: 'pointer',
            padding: '9px 20px', borderRadius: 8,
            fontFamily: 'Source Serif 4, serif',
            fontSize: 14, fontWeight: 600,
            transition: 'all 0.2s',
            boxShadow: '0 2px 8px rgba(200,98,42,0.3)',
          }}
          onMouseEnter={e => { e.currentTarget.style.background = 'var(--orange-light)'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
          onMouseLeave={e => { e.currentTarget.style.background = 'var(--orange)'; e.currentTarget.style.transform = 'none'; }}
          >Search Farms</button>
        </div>
      </div>
    </nav>
  );
};

Object.assign(window, { Nav });