function NavBar({ page, setPage }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const links = [
    { id: 'home', label: 'Home' },
    { id: 'order', label: 'Order Now' },
    { id: 'custom', label: 'Custom Orders' },
    { id: 'about', label: 'About' },
    { id: 'contact', label: 'Contact / FAQ' },
  ];

  function go(id) {
    setMenuOpen(false);
    setPage(id);
  }

  function Icon({ name, size = 20, color }) {
    const pascal = name.split('-').map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join('');
    const node = window.lucide && window.lucide.icons[pascal];
    if (!node) return null;
    const el = window.lucide.createElement(node);
    el.setAttribute('width', size);
    el.setAttribute('height', size);
    el.setAttribute('stroke', color || 'currentColor');
    return <span style={{ width: size, height: size, display: 'flex', flexShrink: 0 }} dangerouslySetInnerHTML={{ __html: el.outerHTML }} />;
  }

  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 20, background: 'var(--surface-page)', borderBottom: '1px solid var(--border-hairline)' }}>
      <style>{`
        .los-nav-links, .los-nav-cta { display: flex; }
        .los-nav-burger { display: none; }
        @media (max-width: 820px) {
          .los-nav-links, .los-nav-cta { display: none; }
          .los-nav-burger { display: flex; }
        }
      `}</style>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '14px var(--page-gutter)',
      }}>
        <div
          onClick={() => go('home')}
          style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', flexShrink: 0 }}
        >
          <img src="assets/logo-mark.jpg" style={{ width: 40, height: 40, borderRadius: 10, objectFit: 'cover', flexShrink: 0 }} />
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 19, color: 'var(--text-primary)', whiteSpace: 'nowrap' }}>Little Olive Street</span>
        </div>
        <div className="los-nav-links" style={{ gap: 24, alignItems: 'center' }}>
          {links.map((l) => (
            <span
              key={l.id}
              onClick={() => go(l.id)}
              style={{
                fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 14.5, cursor: 'pointer', whiteSpace: 'nowrap',
                color: page === l.id ? 'var(--accent-primary)' : 'var(--text-primary)',
              }}
            >
              {l.label}
            </span>
          ))}
          <button
            className="snipcart-checkout"
            aria-label="Cart"
            style={{
              display: 'flex', alignItems: 'center', gap: 6, background: 'none', border: 'none', cursor: 'pointer', padding: 4,
              fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 14, color: 'var(--text-primary)',
            }}
          >
            <Icon name="shopping-bag" size={19} color="var(--text-primary)" />
            <span className="snipcart-items-count"></span>
          </button>
        </div>
        <button className="los-nav-cta" onClick={() => go('order')} style={{
          fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 14,
          padding: '10px 22px', borderRadius: 'var(--radius-pill)', border: 'none',
          background: 'var(--accent-primary)', color: '#fff', cursor: 'pointer',
          boxShadow: 'var(--shadow-button)', whiteSpace: 'nowrap', alignItems: 'center',
        }}>
          Order Now
        </button>
        <button
          className="los-nav-burger"
          onClick={() => setMenuOpen((o) => !o)}
          aria-label="Menu"
          style={{
            flexDirection: 'column', gap: 5, background: 'none', border: 'none', cursor: 'pointer', padding: 8, flexShrink: 0,
          }}
        >
          <span style={{ width: 22, height: 2, background: 'var(--text-primary)', borderRadius: 2 }} />
          <span style={{ width: 22, height: 2, background: 'var(--text-primary)', borderRadius: 2 }} />
          <span style={{ width: 22, height: 2, background: 'var(--text-primary)', borderRadius: 2 }} />
        </button>
      </div>
      {menuOpen && (
        <div style={{ borderTop: '1px solid var(--border-hairline)', padding: '8px var(--page-gutter) 20px', display: 'flex', flexDirection: 'column', gap: 4 }}>
          {links.map((l) => (
            <span
              key={l.id}
              onClick={() => go(l.id)}
              style={{
                fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 16, cursor: 'pointer', padding: '10px 4px',
                color: page === l.id ? 'var(--accent-primary)' : 'var(--text-primary)',
              }}
            >
              {l.label}
            </span>
          ))}
          <button onClick={() => go('order')} style={{
            marginTop: 8, fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 15,
            padding: '12px 22px', borderRadius: 'var(--radius-pill)', border: 'none',
            background: 'var(--accent-primary)', color: '#fff', cursor: 'pointer',
            boxShadow: 'var(--shadow-button)', width: '100%',
          }}>
            Order Now
          </button>
        </div>
      )}
    </div>
  );
}