function Nav() {
  const [active, setActive] = React.useState('about');
  const { t, lang, setLang } = window.useT();

  const links = [
    { id: 'about',        href: '#about',        label: t('nav.about') },
    { id: 'capabilities', href: '#capabilities', label: t('nav.capabilities') },
    { id: 'cases',        href: '#cases',        label: t('nav.cases') },
    { id: 'shelf',        href: '#shelf',        label: t('nav.tools') },
    { id: 'process',      href: '#process',      label: t('nav.process') },
    { id: 'contact',      href: '#contact',      label: t('nav.contact') },
  ];

  return (
    <nav style={navStyles.bar}>
      <a href="#top" style={navStyles.brand}>
        <img
          src="./assets/logo-am-digital-solutions-brand.svg"
          alt="AM Digital Solutions"
          style={navStyles.brandMark}
        />
        <div>
          <div style={navStyles.name}>ALFREDO A. MARTÍNEZ</div>
          <div style={navStyles.tag}>{t('nav.tagline')}</div>
        </div>
      </a>

      <div style={navStyles.links}>
        {links.map(l => (
          <a key={l.id}
             href={l.href}
             onClick={() => setActive(l.id)}
             style={{...navStyles.link, color: active === l.id ? 'var(--fg-1)' : 'var(--fg-2)'}}>
            {l.label}
          </a>
        ))}
      </div>

      <div style={navStyles.right}>
        {/* Language toggle */}
        <div style={navStyles.langToggle} role="group" aria-label="Language">
          <button
            type="button"
            onClick={() => setLang('en')}
            aria-pressed={lang === 'en'}
            style={{
              ...navStyles.langBtn,
              ...(lang === 'en' ? navStyles.langBtnActive : {}),
            }}
          >EN</button>
          <span style={navStyles.langDivider} aria-hidden="true">|</span>
          <button
            type="button"
            onClick={() => setLang('es')}
            aria-pressed={lang === 'es'}
            style={{
              ...navStyles.langBtn,
              ...(lang === 'es' ? navStyles.langBtnActive : {}),
            }}
          >ES</button>
        </div>

        <a href="mailto:mtzstrategies@gmail.com?subject=Discovery%20call%20request" style={navStyles.cta}>
          {t('nav.cta')} <span style={{marginLeft:6}}>→</span>
        </a>
      </div>
    </nav>
  );
}

const navStyles = {
  bar: {
    position: 'sticky', top: 0, zIndex: 50,
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '14px 32px',
    background: 'rgba(10,18,32,0.72)', backdropFilter: 'blur(14px)',
    WebkitBackdropFilter: 'blur(14px)',
    borderBottom: '1px solid var(--border-default)',
    gap: 24,
  },
  brand: { display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none' },
  brandMark: {
    width: 38, height: 38,
    display: 'block',
    borderRadius: '50%',
  },
  name: { fontFamily: 'Montserrat', fontWeight: 700, fontSize: 13, letterSpacing: '0.005em', color: 'var(--fg-1)' },
  tag: { fontFamily: 'JetBrains Mono, monospace', fontSize: 9, color: 'var(--fg-3)', letterSpacing: '0.14em', marginTop: 2 },

  links: { display: 'flex', gap: 28 },
  link: { fontFamily: 'Inter', fontWeight: 500, fontSize: 13, textDecoration: 'none', cursor: 'pointer', letterSpacing: '0.005em' },

  right: { display: 'flex', alignItems: 'center', gap: 14 },

  // Language toggle — visible segmented control
  langToggle: {
    display: 'inline-flex', alignItems: 'center', gap: 2,
    padding: '3px', borderRadius: 8,
    border: '1px solid rgba(255,255,255,0.20)',
    background: 'rgba(255,255,255,0.07)',
  },
  langBtn: {
    fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
    color: 'rgba(255,255,255,0.60)', letterSpacing: '0.08em',
    padding: '5px 10px', borderRadius: 6,
    background: 'transparent', border: 'none',
    cursor: 'pointer',
    fontWeight: 600,
    transition: 'color 180ms, background 180ms',
  },
  langBtnActive: {
    color: '#ffffff',
    background: 'rgba(45,206,255,0.25)',
  },
  langDivider: {
    color: 'rgba(255,255,255,0.20)', fontSize: 12,
    fontFamily: 'JetBrains Mono, monospace',
    userSelect: 'none',
  },

  cta: {
    fontFamily: 'Montserrat', fontWeight: 600, fontSize: 13, letterSpacing: '0.005em',
    background: 'var(--yellow-400)', color: 'var(--fg-on-yellow)',
    padding: '10px 18px', borderRadius: 8, border: 'none',
    cursor: 'pointer', boxShadow: 'var(--shadow-cta)',
    textDecoration: 'none', display: 'inline-block',
  },
};