const NAV_I18N = {
  EN: {
    items: [
      { label: 'About', href: 'about.html' },
      { label: 'Services', dropdown: true, href: 'services.html' },
      { label: 'Case Studies', href: 'case-studies.html' },
      { label: 'Insights', href: 'insights.html' },
      { label: 'Contact Us', href: 'contact.html' },
    ],
    services: [
      { name: 'Managed IT Services', desc: 'Cloud, security & end-user support', href: 'services/managed-it.html' },
      { name: 'Database Management', desc: 'SQL, Oracle, SAP HANA, PostgreSQL', href: 'services/database.html' },
      { name: 'AI Solutions & Simulation', desc: 'GPU CFD, FEA, multiphysics', href: 'services/ai-simulation.html' },
      { name: 'Medical Device Integration', desc: 'HL7, EMR/EHR, MIS/LIS', href: 'services/medical-devices.html' },
      { name: 'ServiceNow', desc: 'Implementation, ITSM, AI workflows', href: 'services/servicenow.html' },
      { name: 'Digital Services', desc: 'Web, SEO, social, content', href: 'services/digital.html' },
    ],
    servicesEyebrow: 'Services',
    servicesTitle: 'Six practice areas, one accountable team.',
    allServices: 'All services',
    bookCall: 'Book a call',
  },
  DE: {
    items: [
      { label: 'Über uns', href: 'about.html' },
      { label: 'Leistungen', dropdown: true, href: 'services.html' },
      { label: 'Case Studies', href: 'case-studies.html' },
      { label: 'Insights', href: 'insights.html' },
      { label: 'Kontakt', href: 'contact.html' },
    ],
    services: [
      { name: 'Managed IT Services', desc: 'Cloud, Sicherheit & End-User-Support', href: 'services/managed-it.html' },
      { name: 'Datenbankmanagement', desc: 'SQL, Oracle, SAP HANA, PostgreSQL', href: 'services/database.html' },
      { name: 'KI-Lösungen & Simulation', desc: 'GPU CFD, FEA, Multiphysik', href: 'services/ai-simulation.html' },
      { name: 'Integration Medizintechnik', desc: 'HL7, EMR/EHR, MIS/LIS', href: 'services/medical-devices.html' },
      { name: 'ServiceNow', desc: 'Implementierung, ITSM, KI-Workflows', href: 'services/servicenow.html' },
      { name: 'Digital Services', desc: 'Web, SEO, Social, Content', href: 'services/digital.html' },
    ],
    servicesEyebrow: 'Leistungen',
    servicesTitle: 'Sechs Praxisfelder, ein verantwortliches Team.',
    allServices: 'Alle Leistungen',
    bookCall: 'Termin buchen',
  },
};
const SERVICES_MENU = NAV_I18N.EN.services;
const NAV_ITEMS = NAV_I18N.EN.items;

function Nav({ lang, setLang, base, current }) {
  const N = NAV_I18N[lang] || NAV_I18N.EN;
  const navItems = N.items;
  const servicesMenu = N.services;
  const [hovered, setHovered] = React.useState(null);
  const [open, setOpen] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [mobileServicesOpen, setMobileServicesOpen] = React.useState(false);
  const closeT = React.useRef(null);
  const B = base || '';

  const onEnter = (label) => {
    setHovered(label);
    if (closeT.current) clearTimeout(closeT.current);
    if (label === 'Services') setOpen(true);
    else setOpen(false);
  };
  const onLeave = () => {
    setHovered(null);
    closeT.current = setTimeout(() => setOpen(false), 120);
  };

  // Close mobile menu on resize to desktop
  React.useEffect(() => {
    const handler = () => { if (window.innerWidth > 1024) setMobileOpen(false); };
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);

  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(246,246,247,0.92)',
      backdropFilter: 'blur(14px)',
      WebkitBackdropFilter: 'blur(14px)',
      borderBottom: '1px solid var(--border)',
    }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'auto 1fr auto',
        alignItems: 'center',
        padding: '16px var(--page-px, 40px)',
        maxWidth: 1440,
        margin: '0 auto',
        gap: 16,
      }}>
        {/* Logo */}
        <a href={B + 'index.html'} style={{display:'inline-flex', alignItems:'center'}}>
          <img src={B + 'assets/logo-light.svg'} alt="Grey Space IT" style={{height:30, display:'block'}} />
        </a>

        {/* Desktop nav links */}
        <div
          className="gs-nav-links"
          onMouseLeave={onLeave}
          style={{display: 'flex', justifyContent: 'flex-end', gap: 0}}>
          {navItems.map((item) => {
            const isCurrent = current === item.label;
            return (
              <a
                key={item.label}
                href={B + item.href}
                onMouseEnter={() => onEnter(item.dropdown ? 'Services' : item.label)}
                style={{
                  fontSize: 13.5, fontWeight: 500, whiteSpace: 'nowrap',
                  color: hovered === item.label || isCurrent ? 'var(--gs-900)' : 'var(--gs-700)',
                  padding: '10px 9px', borderRadius: 8,
                  transition: 'background 160ms var(--ease-standard), color 160ms var(--ease-standard)',
                  background: hovered === item.label || isCurrent ? 'var(--gs-100)' : 'transparent',
                  letterSpacing: '-0.005em', cursor: 'pointer',
                  display: 'inline-flex', alignItems: 'center', gap: 6,
                }}>
                {item.label}
                {item.dropdown && (
                  <span style={{fontSize: 10, opacity: 0.6, transition: 'transform 200ms', transform: open ? 'rotate(180deg)' : 'rotate(0deg)'}}>▾</span>
                )}
              </a>
            );
          })}
        </div>

        {/* Right side: lang + CTA + hamburger */}
        <div style={{display:'flex', alignItems:'center', gap: 10, whiteSpace:'nowrap'}}>
          {/* Language switcher */}
          <div style={{
            display: 'inline-flex', alignItems: 'center',
            background: 'var(--gs-100)', border: '1px solid var(--border)',
            borderRadius: 999, padding: 3, position: 'relative',
          }}>
            <div style={{
              position: 'absolute', top: 3, bottom: 3,
              left: lang === 'EN' ? 3 : 'calc(50%)',
              width: 'calc(50% - 4px)',
              background: '#fff', borderRadius: 999, boxShadow: 'var(--shadow-xs)',
              transition: 'left 220ms var(--ease-standard)',
            }}/>
            {['EN','DE'].map((code) => (
              <button key={code} onClick={() => setLang(code)} style={{
                position: 'relative', zIndex: 1, border: 'none', background: 'transparent',
                padding: '6px 10px', fontFamily: 'var(--font-mono)', fontSize: 11,
                letterSpacing: '0.12em', fontWeight: 500,
                color: lang === code ? 'var(--gs-900)' : 'var(--gs-500)',
                cursor: 'pointer', transition: 'color 160ms',
              }}>{code}</button>
            ))}
          </div>

          {/* Book a call — hidden on small mobile */}
          <a href={B + 'book-a-call.html'} style={{
            display:'inline-flex', alignItems:'center', gap: 8,
            height: 40, padding:'0 16px', borderRadius: 999,
            background: 'var(--gs-900)', color:'#fff',
            fontSize: 13.5, whiteSpace: 'nowrap', fontWeight: 500,
            letterSpacing: '-0.005em',
            transition: 'background 160ms var(--ease-standard)',
          }}
          onMouseEnter={(e) => e.currentTarget.style.background = 'var(--accent)'}
          onMouseLeave={(e) => e.currentTarget.style.background = 'var(--gs-900)'}
          className="gs-hide-xs">
            {N.bookCall}
            <span style={{fontSize: 13, opacity: 0.85}}>→</span>
          </a>

          {/* Hamburger */}
          <button
            className="gs-nav-hamburger"
            onClick={() => setMobileOpen(m => !m)}
            aria-label="Toggle menu"
            style={{
              width: 40, height: 40, borderRadius: 8,
              border: '1px solid var(--border)', background: '#fff',
              cursor: 'pointer', alignItems: 'center', justifyContent: 'center',
              flexDirection: 'column', gap: 5, padding: 0,
            }}>
            <span style={{display:'block', width:18, height:1.5, background: mobileOpen ? 'transparent' : 'var(--gs-900)', transition:'all 200ms'}}/>
            <span style={{display:'block', width:18, height:1.5, background:'var(--gs-900)', transform: mobileOpen ? 'rotate(45deg) translate(3px,3px)' : 'none', transition:'all 200ms'}}/>
            <span style={{display:'block', width:18, height:1.5, background:'var(--gs-900)', transform: mobileOpen ? 'rotate(-45deg) translate(3px,-3px)' : 'none', transition:'all 200ms'}}/>
          </button>
        </div>
      </div>

      {/* Desktop mega menu */}
      <div
        onMouseEnter={() => { if (closeT.current) clearTimeout(closeT.current); setOpen(true); }}
        onMouseLeave={onLeave}
        style={{
          position: 'absolute', left: 0, right: 0, top: '100%',
          background: '#fff', borderBottom: '1px solid var(--border)',
          boxShadow: 'var(--shadow-md)',
          opacity: open ? 1 : 0, pointerEvents: open ? 'auto' : 'none',
          transform: open ? 'translateY(0)' : 'translateY(-6px)',
          transition: 'opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard)',
        }}>
        <div style={{
          maxWidth: 1440, margin: '0 auto',
          padding: '32px 40px 36px',
          display: 'grid', gridTemplateColumns: '240px 1fr', gap: 48,
        }}>
          <div>
            <div style={{fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: 'var(--fg-muted)', textTransform: 'uppercase', marginBottom: 12}}>{N.servicesEyebrow}</div>
            <h4 style={{fontSize: 22, fontWeight: 500, lineHeight: 1.15, letterSpacing: '-0.015em', margin: 0, color: 'var(--gs-900)'}}>{N.servicesTitle}</h4>
            <a href={B + 'services.html'} style={{marginTop: 16, display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, fontWeight: 500, color: 'var(--accent)'}}>{N.allServices} <span>→</span></a>
          </div>
          <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 4}}>
            {servicesMenu.map((s, i) => (
              <a key={s.name} href={B + s.href} style={{padding: '14px 16px', borderRadius: 8, display: 'block', transition: 'background 160ms'}}
                onMouseEnter={(e) => e.currentTarget.style.background = 'var(--gs-50)'}
                onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
                <div style={{fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', color: 'var(--gs-400)', marginBottom: 6}}>0{i+1}</div>
                <div style={{fontSize: 14, fontWeight: 600, color: 'var(--gs-900)', letterSpacing: '-0.005em', marginBottom: 4}}>{s.name}</div>
                <div style={{fontSize: 13, color: 'var(--gs-500)', lineHeight: 1.4}}>{s.desc}</div>
              </a>
            ))}
          </div>
        </div>
      </div>

      {/* Mobile menu — React controlled */}
      <div style={{
        display: mobileOpen ? 'flex' : 'none',
        position: 'fixed',
        top: 62, left: 0, right: 0, bottom: 0,
        height: 'calc(100vh - 62px)',
        background: 'rgba(246,246,247,0.98)',
        backdropFilter: 'blur(16px)',
        WebkitBackdropFilter: 'blur(16px)',
        zIndex: 49,
        flexDirection: 'column',
        padding: '24px var(--page-px, 20px)',
        gap: 4,
        borderTop: '1px solid var(--border)',
        overflowY: 'auto',
      }}>
        {navItems.map((item) => (
          <div key={item.label}>
            {item.dropdown ? (
              <>
                <button onClick={() => setMobileServicesOpen(s => !s)} style={{
                  width: '100%', textAlign: 'left', background: 'transparent', border: 'none',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  padding: '14px 16px', borderRadius: 10, fontSize: 16, fontWeight: 500,
                  color: 'var(--gs-900)', cursor: 'pointer', fontFamily: 'inherit',
                }}>
                  {item.label}
                  <span style={{transform: mobileServicesOpen ? 'rotate(180deg)' : 'none', transition: '200ms'}}>▾</span>
                </button>
                {mobileServicesOpen && (
                  <div style={{paddingLeft: 16, paddingBottom: 8}}>
                    {servicesMenu.map((s) => (
                      <a key={s.name} href={B + s.href} onClick={() => setMobileOpen(false)} style={{
                        display: 'block', padding: '10px 16px', borderRadius: 8,
                        fontSize: 14, color: 'var(--gs-700)', fontWeight: 500,
                      }}>{s.name}</a>
                    ))}
                  </div>
                )}
              </>
            ) : (
              <a href={B + item.href} onClick={() => setMobileOpen(false)} style={{
                display: 'block', padding: '14px 16px', borderRadius: 10,
                fontSize: 16, fontWeight: 500, color: 'var(--gs-900)',
                background: current === item.label ? 'var(--gs-100)' : 'transparent',
              }}>{item.label}</a>
            )}
          </div>
        ))}
        <div style={{marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--border)'}}>
          <a href={B + 'book-a-call.html'} onClick={() => setMobileOpen(false)} style={{
            display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 8,
            height: 48, borderRadius: 999, background: 'var(--gs-900)', color: '#fff',
            fontSize: 15, fontWeight: 500,
          }}>{N.bookCall} →</a>
        </div>
      </div>

      <style>{`
        .gs-nav-hamburger { display: none; }
        @media (max-width: 1024px) {
          .gs-nav-links { display: none !important; }
          .gs-nav-hamburger { display: flex !important; }
        }
        @media (max-width: 480px) {
          .gs-hide-xs { display: none !important; }
        }
      `}</style>
    </nav>
  );
}

window.Nav = Nav;
window.SERVICES_MENU = SERVICES_MENU;