function Nav() {
  const { Logo } = window.ellarideDesignSystem_c64d4a || {};
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [, force] = React.useState(0);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    const onLang = () => force(n => n + 1);
    window.addEventListener('scroll', onScroll);
    window.addEventListener('langchange', onLang);
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('langchange', onLang); };
  }, []);

  const t = window.t;
  const lang = window.__LANG__ || 'el';
  const links = [
    [t('nav.who'), '#who'],
    [t('nav.how'), '#how'],
    [t('nav.trust'), '#trust'],
    [t('nav.calc'), '#calc'],
    [lang === 'el' ? 'Υποστήριξη' : 'Support', 'support']
  ];

  const LangBtn = ({ code }) => {
    const active = lang === code;
    return (
      <button onClick={() => window.setLang(code)}
        className={`px-2.5 py-1 text-xs font-semibold rounded-md transition-all ${
          active ? 'bg-[#121212] text-white' : 'text-[#6a6a6a] hover:text-[#171717]'
        }`}>
        {code.toUpperCase()}
      </button>
    );
  };

  return (
    <React.Fragment>
      <header className={`fixed top-0 left-0 right-0 z-[1030] transition-all duration-200 ${
        scrolled ? 'bg-white/80 backdrop-blur-md border-b border-[#e5e5e5]' : 'bg-transparent'
      }`}>
        <nav className="max-w-[1240px] mx-auto px-4 md:px-10 py-3 flex items-center justify-between">
          
          {/* Logo */}
          <a href="#" className="flex items-center no-underline group">
            <span className="text-2xl tracking-tight" style={{fontFamily:"'DM Sans',sans-serif"}}>
              <span className="font-extrabold text-[#0096F7]">ella</span>
              <span className="font-normal text-[#171717]">ride</span>
            </span>
          </a>

          {/* Hitch-style Floating Center Nav Pill */}
          <div className="hidden md:flex flex-col rounded-[12px] backdrop-blur-[16px] overflow-hidden transition-all duration-200 border border-[rgba(0,0,0,0.08)] bg-white/70 shadow-sm">
            <div className="flex justify-center gap-1 items-center px-2 py-[4px]">
              {links.map(([l, h]) => (
                <a key={h} href={h}
                  className="text-sm font-medium text-[#171717] no-underline px-[12px] py-[6px] rounded-lg hover:bg-[#1212120F] transition-colors">
                  {l}
                </a>
              ))}
            </div>
          </div>

          {/* Right Actions */}
          <div className="hidden md:flex items-center gap-3">
            <div className="inline-flex gap-1 p-1 rounded-lg bg-[#f3f3f3] border border-[#e5e5e5]">
              <LangBtn code="el" />
              <LangBtn code="en" />
            </div>
            <a href="#download"
              className="bg-[#0096F7] hover:bg-[#0080d4] text-white rounded-full px-6 py-2.5 text-sm font-medium transition-colors no-underline shadow-sm flex items-center justify-center">
              {t('nav.waitlist')}
            </a>
          </div>

          {/* Mobile Hamburger */}
          <button onClick={() => setMenuOpen(!menuOpen)}
            className="md:hidden flex flex-col gap-1.5 p-2 rounded-lg bg-[#f3f3f3] border border-[#e5e5e5]">
            <span className="w-5 h-0.5 bg-[#171717] rounded-full"></span>
            <span className="w-5 h-0.5 bg-[#171717] rounded-full"></span>
            <span className="w-5 h-0.5 bg-[#171717] rounded-full"></span>
          </button>
        </nav>
      </header>

      {/* Mobile Drawer */}
      {menuOpen && (
        <div className="fixed inset-0 z-[1040] md:hidden">
          <div onClick={() => setMenuOpen(false)} className="absolute inset-0 bg-black/40 backdrop-blur-sm"></div>
          <div className="absolute top-0 right-0 bottom-0 w-[280px] bg-white p-6 flex flex-col shadow-2xl">
            <div className="flex justify-between items-center mb-6">
              <a href="#" className="flex items-center no-underline">
                <span className="text-xl tracking-tight" style={{fontFamily:"'DM Sans',sans-serif"}}>
                  <span className="font-extrabold text-[#0096F7]">ella</span>
                  <span className="font-normal text-[#171717]">ride</span>
                </span>
              </a>
              <button onClick={() => setMenuOpen(false)} className="text-xl font-bold text-[#171717]">✕</button>
            </div>
            <nav className="flex flex-col gap-3">
              {links.map(([l, h]) => (
                <a key={h} href={h} onClick={() => setMenuOpen(false)}
                  className="text-base font-medium text-[#171717] py-2 border-b border-[#f0f0f0] no-underline">
                  {l}
                </a>
              ))}
            </nav>
            <div className="mt-8 flex flex-col gap-4">
              <div className="inline-flex gap-1 p-1 rounded-lg bg-[#f3f3f3] border border-[#e5e5e5] w-fit">
                <LangBtn code="el" />
                <LangBtn code="en" />
              </div>
              <a href="#founding" onClick={() => setMenuOpen(false)}
                className="bg-[#0096F7] hover:bg-[#0080d4] text-white rounded-full py-3 text-center text-sm font-medium transition-colors no-underline">
                {t('nav.waitlist')}
              </a>
            </div>
          </div>
        </div>
      )}
    </React.Fragment>
  );
}

window.Nav = Nav;