/* global React */
const { useState, useEffect } = React;

// ============================================================
// NAV — top bar with language, dark mode, CTA
// Responsive: hides centre links + EN/DE + dark + CTA at ≤900px,
// replaces with a burger that opens a fullscreen drawer.
// ============================================================
function Nav({ t, lang, setLang, dark, setDark, activeUnit, setActiveUnit, onCta }) {
  const [scrolled, setScrolled] = useState(false);
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [isNarrow, setIsNarrow] = useState(
    typeof window !== 'undefined' && window.matchMedia('(max-width: 900px)').matches
  );

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });

    const mql = window.matchMedia('(max-width: 900px)');
    const onMql = (e) => setIsNarrow(e.matches);
    mql.addEventListener ? mql.addEventListener('change', onMql) : mql.addListener(onMql);

    return () => {
      window.removeEventListener('scroll', onScroll);
      mql.removeEventListener ? mql.removeEventListener('change', onMql) : mql.removeListener(onMql);
    };
  }, []);

  // Lock body scroll when drawer open
  useEffect(() => {
    if (drawerOpen) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = 'hidden';
      return () => { document.body.style.overflow = prev; };
    }
  }, [drawerOpen]);

  // Close drawer when leaving narrow mode
  useEffect(() => { if (!isNarrow) setDrawerOpen(false); }, [isNarrow]);

  const unitColor = {
    parent: 'var(--prodct-500)',
    cx: 'var(--cx-500)',
    labs: 'var(--labs-500)',
    elements: 'var(--elements-500)',
    skills: 'var(--skills-500)',
  }[activeUnit];

  const navLinks = [
    { href: '#units',                    label: t.nav.units },
    { href: '#approach',                 label: t.nav.work },
    { href: 'prodct Clients.html',       label: t.nav.clients },
    { href: 'prodct Insights.html',      label: t.nav.insights },
    { href: '#principles',               label: t.nav.principles },
    { href: '#faq',                      label: t.nav.faq },
  ];

  const closeDrawer = () => setDrawerOpen(false);

  return (
    <React.Fragment>
      <nav style={{
        ...navStyles.root,
        padding: isNarrow ? '14px 18px' : '16px 40px',
        background: scrolled ? 'color-mix(in srgb, var(--bg) 86%, transparent)' : 'transparent',
        borderBottomColor: scrolled ? 'var(--border)' : 'transparent',
      }}>
        <a href="#top" style={navStyles.brand}>
          <img
            src={dark ? 'assets/wordmark-v5-light.svg' : 'assets/wordmark-v5.svg'}
            style={{ height: 22 }}
            alt="prodct"
          />
        </a>

        {!isNarrow && (
          <div style={navStyles.center}>
            {navLinks.map((l) => (
              <a key={l.href} href={l.href} style={navStyles.link}>{l.label}</a>
            ))}
          </div>
        )}

        <div style={navStyles.right}>
          {!isNarrow && (
            <React.Fragment>
              <div style={navStyles.langWrap}>
                <button
                  style={{ ...navStyles.langBtn, color: lang === 'en' ? 'var(--fg-strong)' : 'var(--fg-subtle)' }}
                  onClick={() => setLang('en')}
                >EN</button>
                <span style={navStyles.langSep}>/</span>
                <button
                  style={{ ...navStyles.langBtn, color: lang === 'de' ? 'var(--fg-strong)' : 'var(--fg-subtle)' }}
                  onClick={() => setLang('de')}
                >DE</button>
              </div>
              <button
                onClick={() => setDark(!dark)}
                style={navStyles.iconBtn}
                title={dark ? 'Switch to light' : 'Switch to dark'}
                aria-label="Toggle dark mode"
              >
                {dark
                  ? <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
                  : <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z"/></svg>
                }
              </button>
              <button onClick={onCta} style={{ ...navStyles.cta, background: unitColor, color: '#fff' }}>
                {t.nav.cta}  →
              </button>
            </React.Fragment>
          )}

          {isNarrow && (
            <button
              onClick={() => setDrawerOpen(true)}
              aria-label="Open menu"
              aria-expanded={drawerOpen}
              style={navStyles.burger}
            >
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M3 6h14M3 10h14M3 14h14"/></svg>
            </button>
          )}
        </div>
      </nav>

      {isNarrow && drawerOpen && (
        <div style={navStyles.drawer} role="dialog" aria-modal="true" aria-label="Menu">
          <div style={navStyles.drawerTop}>
            <a href="#top" style={navStyles.brand} onClick={closeDrawer}>
              <img
                src={dark ? 'assets/wordmark-v5-light.svg' : 'assets/wordmark-v5.svg'}
                style={{ height: 22 }}
                alt="prodct"
              />
            </a>
            <button
              onClick={closeDrawer}
              aria-label="Close menu"
              style={navStyles.burger}
            >
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M5 5l10 10M15 5L5 15"/></svg>
            </button>
          </div>

          {navLinks.map((l) => (
            <a key={l.href} href={l.href} style={navStyles.drawerLink} onClick={closeDrawer}>
              {l.label}
            </a>
          ))}

          <div style={navStyles.drawerControls}>
            <div style={navStyles.langWrap}>
              <button
                style={{ ...navStyles.langBtn, fontSize: 14, color: lang === 'en' ? 'var(--fg-strong)' : 'var(--fg-subtle)' }}
                onClick={() => setLang('en')}
              >EN</button>
              <span style={navStyles.langSep}>/</span>
              <button
                style={{ ...navStyles.langBtn, fontSize: 14, color: lang === 'de' ? 'var(--fg-strong)' : 'var(--fg-subtle)' }}
                onClick={() => setLang('de')}
              >DE</button>
            </div>
            <button
              onClick={() => setDark(!dark)}
              style={{ ...navStyles.iconBtn, width: 38, height: 38 }}
              aria-label="Toggle dark mode"
              title={dark ? 'Switch to light' : 'Switch to dark'}
            >
              {dark
                ? <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
                : <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z"/></svg>
              }
            </button>
          </div>

          <button
            onClick={() => { closeDrawer(); onCta && onCta(); }}
            style={{
              ...navStyles.cta,
              background: unitColor, color: '#fff',
              padding: '14px 18px', fontSize: 14, marginTop: 24, textAlign: 'center',
            }}
          >
            {t.nav.cta}  →
          </button>
        </div>
      )}
    </React.Fragment>
  );
}

const navStyles = {
  root: {
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    position: 'sticky', top: 0, zIndex: 50,
    backdropFilter: 'blur(10px)',
    WebkitBackdropFilter: 'blur(10px)',
    borderBottom: '1px solid transparent',
    transition: 'background 200ms var(--ease-out), border-color 200ms var(--ease-out)',
    gap: 16,
  },
  brand: { display: 'flex', alignItems: 'center', gap: 9, textDecoration: 'none' },
  center: { display: 'flex', gap: 28, alignItems: 'center' },
  link: { color: 'var(--fg-muted)', fontSize: 14, textDecoration: 'none', cursor: 'pointer', fontWeight: 500, fontFamily: 'var(--font-sans)' },
  right: { display: 'flex', alignItems: 'center', gap: 14 },
  langWrap: { display: 'flex', alignItems: 'center', gap: 4, fontFamily: 'var(--font-mono)', fontSize: 12 },
  langBtn: { background: 'transparent', border: 'none', cursor: 'pointer', fontFamily: 'inherit', fontSize: 'inherit', padding: '4px 2px' },
  langSep: { color: 'var(--fg-subtle)' },
  iconBtn: {
    width: 32, height: 32, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    background: 'transparent', border: '1px solid var(--border)', borderRadius: 'var(--r-full)',
    color: 'var(--fg-muted)', cursor: 'pointer',
  },
  cta: {
    border: 'none', padding: '10px 16px', borderRadius: 6, fontWeight: 500, fontSize: 13,
    cursor: 'pointer', fontFamily: 'var(--font-sans)', whiteSpace: 'nowrap',
    transition: 'background 240ms var(--ease-out)',
  },
  burger: {
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    width: 40, height: 40, borderRadius: 6,
    background: 'transparent', border: '1px solid var(--border)',
    color: 'var(--fg-strong)', cursor: 'pointer', padding: 0,
  },
  drawer: {
    position: 'fixed', inset: 0, zIndex: 100,
    background: 'var(--bg)',
    padding: '20px 24px',
    display: 'flex', flexDirection: 'column', gap: 4,
    overflowY: 'auto',
  },
  drawerTop: {
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    paddingBottom: 16, borderBottom: '1px solid var(--border)', marginBottom: 16,
  },
  drawerLink: {
    display: 'block', padding: '18px 0',
    fontSize: 22, fontWeight: 500, letterSpacing: '-0.015em',
    color: 'var(--fg-strong)', textDecoration: 'none',
    borderBottom: '1px solid var(--border)',
    fontFamily: 'var(--font-sans)',
  },
  drawerControls: {
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    paddingTop: 24, gap: 16,
  },
};

Object.assign(window, { Nav });