// Top navigation. Transparent over hero, white otherwise. Mobile drawer.
(function () {
  const { useState, useEffect } = React;
  const { Icons, Link } = window.GR;
  const { Hamburger, Close } = Icons;

  const LINKS = [
    ['Home', '/'],
    ['About', '/about'],
    ['Mission', '/mission'],
    ['Chemicals', '/chemicals'],
    ['Commodities', '/commodities'],
    ['Industries', '/industries'],
    ['Logistics', '/logistics'],
    ['Advantages', '/advantages'],
    ['Contact', '/contact'],
  ];

  function Nav({ route, openQuote }) {
    const [scrolled, setScrolled] = useState(false);
    const [mobile, setMobile] = useState(false);

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

    useEffect(() => { setMobile(false); }, [route]);

    useEffect(() => {
      document.body.style.overflow = mobile ? 'hidden' : '';
    }, [mobile]);

    const overHero = route === '/' && !scrolled;

    const linkColor = overHero ? 'rgba(255,255,255,0.92)' : 'var(--color-navy)';

    return (
      <React.Fragment>
        <nav
          style={{
            position: 'fixed', top: 0, left: 0, right: 0,
            height: 'var(--nav-h)', zIndex: 90,
            background: overHero ? 'transparent' : '#FFFFFF',
            borderBottom: overHero ? '1px solid transparent' : '1px solid var(--color-rule)',
            transition: 'background 0.32s var(--ease-out), border-color 0.32s var(--ease-out)',
            backdropFilter: overHero ? 'none' : 'saturate(180%) blur(6px)',
            WebkitBackdropFilter: overHero ? 'none' : 'saturate(180%) blur(6px)',
          }}
        >
          <div
            style={{
              maxWidth: 'var(--container-wide)', margin: '0 auto', height: '100%',
              padding: '0 var(--gutter)',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            }}
          >
            <Link to="/" style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }} aria-label="GR Unity Trading Home">
              <img
                src={overHero ? 'assets/mark-white-on-navy.png' : 'assets/mark-navy-on-white.png'}
                alt="GR Unity Trading"
                style={{ height: 32, width: 'auto', display: 'block' }}
              />
              <span style={{
                fontFamily: 'var(--font-display)', fontSize: 18,
                letterSpacing: '0.06em',
                color: overHero ? '#fff' : 'var(--color-navy)',
                whiteSpace: 'nowrap',
              }}>
                GR Unity Trading
              </span>
            </Link>

            <div className="gr-nav__links" style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
              {LINKS.map(([label, path]) => {
                const isActive = path === '/' ? route === '/' : route.startsWith(path);
                return (
                  <Link
                    key={path}
                    to={path}
                    className="gr-link"
                    data-active={isActive ? 'true' : 'false'}
                    style={{
                      fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 500,
                      letterSpacing: '0.18em', textTransform: 'uppercase',
                      color: linkColor, paddingBottom: 4,
                    }}
                  >
                    {label.toUpperCase()}
                  </Link>
                );
              })}
              <button
                type="button" onClick={openQuote}
                className="gr-btn gr-btn-primary gr-btn-sm"
                style={{ marginLeft: 4 }}
              >
                Request Quote
              </button>
            </div>

            <button
              type="button"
              className="gr-nav__burger"
              onClick={() => setMobile(true)}
              aria-label="Open menu"
              style={{
                display: 'none',
                background: 'transparent', border: 0,
                color: overHero ? '#fff' : 'var(--color-navy)',
                padding: 8, cursor: 'pointer',
              }}
            >
              <Hamburger size={22} />
            </button>
          </div>
        </nav>

        {/* Mobile menu */}
        <div
          className="bg-hex"
          aria-hidden={!mobile}
          style={{
            position: 'fixed', inset: 0, zIndex: 110,
            background: 'var(--color-navy)', color: '#fff',
            display: 'flex', flexDirection: 'column',
            padding: '24px var(--gutter)',
            transform: mobile ? 'translateY(0)' : 'translateY(-100%)',
            transition: 'transform 0.45s var(--ease-out)',
            overflowY: 'auto',
          }}
        >
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <img src="assets/mark-white-on-navy.png" alt="GR Unity Trading" style={{ height: 32 }} />
            <button
              type="button"
              onClick={() => setMobile(false)}
              aria-label="Close menu"
              style={{
                background: 'transparent', border: '1px solid rgba(255,255,255,0.25)',
                color: '#fff', width: 40, height: 40, cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}
            >
              <Close size={20} />
            </button>
          </div>
          <div style={{ marginTop: 56, display: 'flex', flexDirection: 'column', gap: 14 }}>
            {LINKS.map(([label, path], i) => (
              <Link
                key={path}
                to={path}
                onClick={() => setMobile(false)}
                style={{
                  fontFamily: 'var(--font-display)',
                  fontSize: 'clamp(36px, 8vw, 56px)',
                  letterSpacing: '0.02em', textTransform: 'uppercase',
                  color: route === path ? 'var(--color-green)' : '#fff',
                  lineHeight: 1,
                  opacity: mobile ? 1 : 0,
                  transform: mobile ? 'translateY(0)' : 'translateY(8px)',
                  transitionDelay: `${i * 40}ms`,
                  transition: 'opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out)',
                }}
              >
                {label}
              </Link>
            ))}
          </div>
          <div style={{ marginTop: 'auto', paddingTop: 32 }}>
            <button
              type="button"
              onClick={() => { setMobile(false); openQuote(); }}
              className="gr-btn gr-btn-primary"
              style={{ width: '100%' }}
            >
              Request a Quote
            </button>
            <div style={{
              marginTop: 24,
              fontFamily: 'var(--font-mono)', fontSize: 10,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              color: 'rgba(255,255,255,0.5)',
            }}>
              Florida, USA · LATAM Distribution
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }

  window.GR = Object.assign(window.GR || {}, { Nav });
})();