function Nav({ dark = false, page = 'home', onNav = () => {} }) {
  const { isPhone } = window.useIsMobile();
  const [menuOpen, setMenuOpen] = React.useState(false);
  // close the mobile menu whenever we leave phone width or navigate away
  React.useEffect(() => { if (!isPhone) setMenuOpen(false); }, [isPhone]);
  const links = [
    { label: 'Our product', to: 'product' },
    { label: 'Why Synth', to: 'changing' },
    { label: 'Newsletters', to: 'newsletters' },
    { label: 'Our team', to: 'team' },
    { label: 'FAQ', to: 'faq' },
  ];
  const outlineDark = '../assets/synth-logo-mono-outline.svg';
  const outlineLight = '../assets/synth-logo-mono-outline-light.svg';
  const outlineBlack = '../assets/synth-logo-mono-outline-black.svg';
  const black = page === 'changing';
  const ink = dark ? '#FBF7F1' : (black ? '#000000' : 'var(--syn-navy)');
  const nav = (to) => { onNav(to); setMenuOpen(false); };
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 20,
      background: dark ? 'var(--syn-navy)' : 'var(--syn-paper)',
      borderBottom: dark ? '1px solid rgba(251,247,241,0.13)' : '1px solid var(--syn-rule)',
      height: 64,
      display: 'flex', alignItems: 'center',
      padding: isPhone ? '0 18px' : '0 48px',
      transition: 'background-color 520ms cubic-bezier(0.2,0.7,0.2,1), border-color 520ms cubic-bezier(0.2,0.7,0.2,1)',
    }}>
      <div style={{
        maxWidth: 1120, margin: '0 auto', width: '100%',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        position: 'relative',
      }}>
        <a onClick={() => nav('home')} style={{
          display: 'flex', alignItems: 'center', gap: 11, textDecoration: 'none', cursor: 'pointer',
        }}>
          <span style={{ position: 'relative', height: 44, width: 44, flexShrink: 0 }}>
            <img src={black ? outlineBlack : outlineDark} alt="Synth" style={{
              position: 'absolute', left: 0, top: '50%', transform: 'translateY(-50%)',
              height: 44, width: 44, opacity: dark ? 0 : 1,
              transition: 'opacity 360ms cubic-bezier(0.2,0.7,0.2,1)',
            }} />
            <img src={outlineLight} alt="Synth" style={{
              position: 'absolute', left: 0, top: '50%', transform: 'translateY(-50%)',
              height: 44, width: 44, opacity: dark ? 1 : 0,
              transition: 'opacity 360ms cubic-bezier(0.2,0.7,0.2,1)',
            }} />
          </span>
          <span style={{
            fontFamily: 'var(--syn-font-display)', fontWeight: 800, fontSize: 22,
            letterSpacing: '0.04em', lineHeight: 1, fontVariationSettings: "'opsz' 72",
            marginTop: 7,
            color: ink,
            transition: 'color 360ms cubic-bezier(0.2,0.7,0.2,1)',
          }}>SYNTH</span>
        </a>

        {isPhone ? (
          /* ---- PHONE: Sign-up + hamburger; links live in a dropdown ---- */
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <button onClick={() => nav('onboarding')} style={{
              background: dark ? 'var(--syn-paper)' : (black ? '#000000' : 'var(--syn-navy)'),
              color: dark ? 'var(--syn-navy)' : 'var(--syn-paper)',
              border: 0, borderRadius: 10, padding: '8px 14px', flexShrink: 0,
              fontFamily: 'var(--syn-font-body)', fontSize: 13, fontWeight: 500, cursor: 'pointer',
            }}>Sign up</button>
            <button onClick={() => setMenuOpen(o => !o)} aria-label="Menu" aria-expanded={menuOpen} style={{
              background: 'transparent', border: 0, cursor: 'pointer', padding: 6,
              display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 5,
              width: 32, height: 32, flexShrink: 0,
            }}>
              {[0, 1, 2].map(i => (
                <span key={i} style={{
                  display: 'block', height: 2, width: 20, borderRadius: 2, background: ink,
                  transition: 'transform 240ms ease, opacity 240ms ease',
                  transform: menuOpen ? (i === 0 ? 'translateY(7px) rotate(45deg)'
                    : i === 2 ? 'translateY(-7px) rotate(-45deg)' : 'none') : 'none',
                  opacity: menuOpen && i === 1 ? 0 : 1,
                }} />
              ))}
            </button>

            {menuOpen && (
              /* invisible full-screen backdrop: tap anywhere off the menu to close it */
              <div onClick={() => setMenuOpen(false)} style={{
                position: 'fixed', inset: 0, zIndex: 25, background: 'transparent',
              }} />
            )}
            {menuOpen && (
              <div style={{
                position: 'absolute', top: 'calc(100% + 12px)', right: 0, zIndex: 30,
                background: dark ? 'var(--syn-navy)' : 'var(--syn-paper)',
                border: dark ? '1px solid rgba(251,247,241,0.14)' : '1px solid var(--syn-rule)',
                borderRadius: 14, padding: 8, minWidth: 200,
                boxShadow: '0 24px 48px -24px rgba(20,43,77,0.45)',
                display: 'flex', flexDirection: 'column',
              }}>
                {links.map(l => {
                  const active = l.to && page === l.to;
                  return (
                    <a key={l.label} onClick={() => l.to && nav(l.to)} style={{
                      fontFamily: 'var(--syn-font-body)', fontSize: 16,
                      color: active ? ink : (dark ? 'var(--syn-navy-300)' : 'var(--syn-fg-muted)'),
                      fontWeight: active ? 600 : 400,
                      textDecoration: 'none', cursor: 'pointer',
                      padding: '12px 14px', borderRadius: 9,
                    }}>{l.label}</a>
                  );
                })}
              </div>
            )}
          </div>
        ) : (
          /* ---- DESKTOP / TABLET: inline links + Sign-up (unchanged) ---- */
          <div style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
            {links.map(l => {
              const active = l.to && page === l.to;
              return (
                <a key={l.label} onClick={() => l.to && nav(l.to)} style={{
                  fontFamily: 'var(--syn-font-body)', fontSize: 14, whiteSpace: 'nowrap',
                  color: active ? (dark ? '#FBF7F1' : ink) : (dark ? 'var(--syn-navy-300)' : 'var(--syn-fg-muted)'),
                  fontWeight: active ? 600 : 400,
                  textDecoration: 'none', cursor: 'pointer',
                  transition: 'color 360ms cubic-bezier(0.2,0.7,0.2,1)',
                }}>{l.label}</a>
              );
            })}
            <button onClick={() => nav('onboarding')} style={{
              background: dark ? 'var(--syn-paper)' : (black ? '#000000' : 'var(--syn-navy)'),
              color: dark ? 'var(--syn-navy)' : 'var(--syn-paper)',
              border: 0, borderRadius: 10, padding: '9px 16px', flexShrink: 0,
              fontFamily: 'var(--syn-font-body)', fontSize: 14, fontWeight: 500, cursor: 'pointer',
              transition: 'background-color 360ms cubic-bezier(0.2,0.7,0.2,1), color 360ms cubic-bezier(0.2,0.7,0.2,1)',
            }}>Sign up</button>
          </div>
        )}
      </div>
    </nav>
  );
}
window.Nav = Nav;