function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [lang, setLang] = useLang();
  const C = window.FUSE_CONTENT.nav;

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 10);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      height: 'var(--nav-h)',
      background: scrolled ? 'rgba(244,239,229,0.86)' : 'transparent',
      backdropFilter: scrolled ? 'blur(20px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(20px) saturate(140%)' : 'none',
      borderBottom: scrolled ? '1px solid var(--border)' : '1px solid transparent',
      transition: 'background 240ms var(--ease-in-out), border-color 240ms',
    }}>
      <div className="container" style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32 }}>
        <a href="#top" style={{ textDecoration: 'none', display: 'flex', alignItems: 'baseline', gap: 0 }}>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 24, letterSpacing: '-0.02em' }}>Fuse</span>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 24, letterSpacing: '-0.02em', color: 'var(--accent)', fontStyle: 'italic' }}>Studio</span>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--accent)', marginLeft: 6, alignSelf: 'center' }} />
        </a>

        <div className="nav-links">
          {C.items[lang].map(([label, href], i) => (
            <a key={href} href={href} className="nav-link">
              <span className="nav-link__num">{String(i + 1).padStart(2, '0')}</span>
              <span className="nav-link__lbl">{label}</span>
            </a>
          ))}
        </div>

        <div className="nav-right">
          <a href="#cta" className="nav-cta-link">
            <span>{C.cta[lang]}</span>
            <span className="nav-cta-link__arrow" aria-hidden="true">→</span>
          </a>
          <span className="nav-divider" aria-hidden="true" />
          <div className="lang-switch">
            <button
              onClick={() => setLang('es')}
              aria-pressed={lang === 'es'}
              className="lang-btn"
              data-active={lang === 'es'}
            >ES</button>
            <button
              onClick={() => setLang('en')}
              aria-pressed={lang === 'en'}
              className="lang-btn"
              data-active={lang === 'en'}
            >EN</button>
          </div>
        </div>
      </div>

      <style>{`
        .nav-links {
          display: flex;
          align-items: center;
          gap: 22px;
          font-family: var(--font-sans);
          font-size: 13px;
        }
        .nav-link {
          position: relative;
          text-decoration: none;
          color: var(--ink);
          padding: 6px 0;
          display: inline-flex;
          align-items: baseline;
          gap: 6px;
          white-space: nowrap;
          transition: color 180ms var(--ease-in-out);
        }
        .nav-link__num {
          font-family: var(--font-mono);
          font-size: 10px;
          letter-spacing: 0.04em;
          color: var(--fg-mute);
          transition: color 180ms;
        }
        .nav-link__lbl { letter-spacing: -0.005em; }
        .nav-link::after {
          content: "";
          position: absolute;
          left: 0; right: 0;
          bottom: 0;
          height: 1px;
          background: var(--ink);
          transform: scaleX(0);
          transform-origin: left center;
          transition: transform 240ms var(--ease-out);
        }
        .nav-link:hover::after { transform: scaleX(1); }
        .nav-link:hover .nav-link__num { color: var(--accent); }

        .nav-right {
          display: flex;
          align-items: center;
          gap: 18px;
        }
        .nav-cta-link {
          font-family: var(--font-sans);
          font-size: 13px;
          font-weight: 500;
          color: var(--ink);
          text-decoration: none;
          white-space: nowrap;
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 6px 0;
          position: relative;
          transition: gap 220ms var(--ease-out);
        }
        .nav-cta-link__arrow {
          font-family: var(--font-display);
          font-size: 17px;
          color: var(--accent);
          line-height: 1;
          transition: transform 220ms var(--ease-out);
        }
        .nav-cta-link::after {
          content: "";
          position: absolute;
          left: 0; right: 0;
          bottom: 0;
          height: 1px;
          background: var(--ink);
          transform: scaleX(0);
          transform-origin: left center;
          transition: transform 240ms var(--ease-out);
        }
        .nav-cta-link:hover::after { transform: scaleX(1); }
        .nav-cta-link:hover .nav-cta-link__arrow { transform: translateX(3px); }

        .nav-divider {
          width: 1px;
          height: 14px;
          background: var(--border-strong, var(--ink));
          opacity: 0.18;
        }

        .lang-switch {
          display: flex;
          align-items: center;
          gap: 10px;
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.08em;
          text-transform: uppercase;
        }
        .lang-btn {
          background: transparent;
          border: none;
          padding: 0;
          font: inherit;
          letter-spacing: inherit;
          text-transform: inherit;
          color: var(--fg-mute);
          cursor: pointer;
          transition: color 180ms var(--ease-in-out);
          position: relative;
        }
        .lang-btn::after {
          content: "";
          position: absolute;
          left: 0; right: 0;
          bottom: -4px;
          height: 1px;
          background: var(--ink);
          transform: scaleX(0);
          transform-origin: left center;
          transition: transform 220ms var(--ease-out);
        }
        .lang-btn:hover { color: var(--ink); }
        .lang-btn:hover::after { transform: scaleX(1); }
        .lang-btn[data-active="true"] { color: var(--ink); }

        /* Below 1100px the side-progress hides too — keep the section index
           visible there.  Below 900px we drop the inline section index and
           rely on the floating side-progress (which re-appears on tap). */
        @media (max-width: 1080px) {
          .nav-link__num { display: none; }
          .nav-links { gap: 20px; }
        }
        @media (max-width: 900px) {
          .nav-links { display: none; }
        }
        @media (max-width: 540px) {
          .nav-cta-link span:first-child { display: none; }
          .nav-divider { display: none; }
        }
      `}</style>
    </nav>
  );
}

window.Nav = Nav;