/* global React, Logo, useLocale, LanguageSwitch */
// Jullia — site header. Kit-local (not the DS-bundled SiteNav): five tabs
// (Home, Car Audio, Home Audio, Philosophy, Contact), the real logo mark, a
// language switch, and a small mobile menu. Fixed to the top, transparent
// over black, a hairline once scrolled.

function SiteHeader({ active, scrolled = false, onNavigate }) {
  const { t } = useLocale();
  const [hoverKey, setHoverKey] = React.useState(null);
  const [aHover, setAHover] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  const navItems = [
    { key: 'Home', label: t('nav.home') },
    { key: 'CarAudio', label: t('nav.carAudio') },
    { key: 'HomeAudio', label: t('nav.homeAudio') },
    { key: 'Philosophy', label: t('nav.philosophy') },
    { key: 'Contacts', label: t('nav.contacts') },
  ];

  const go = (key) => { setMenuOpen(false); onNavigate && onNavigate(key); };

  // Close on Escape, and lock the page's own scroll container while the
  // mobile menu is open (the app scrolls a div, not the window).
  React.useEffect(() => {
    if (!menuOpen) return undefined;
    const scrollRoot = document.getElementById('jx-scroll-root');
    const prevOverflow = scrollRoot ? scrollRoot.style.overflow : '';
    if (scrollRoot) scrollRoot.style.overflow = 'hidden';
    const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); };
    document.addEventListener('keydown', onKey);
    return () => {
      if (scrollRoot) scrollRoot.style.overflow = prevOverflow;
      document.removeEventListener('keydown', onKey);
    };
  }, [menuOpen]);

  // If the viewport crosses back into desktop width, drop the mobile state
  // so it can't linger (and keep the scroll lock) behind the hidden burger.
  React.useEffect(() => {
    const onResize = () => { if (window.innerWidth > 780) setMenuOpen(false); };
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  return (
    <nav
      style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '20px var(--margin-page)',
        borderBottom: `1px solid ${scrolled || menuOpen ? 'var(--hairline)' : 'transparent'}`,
        background: scrolled || menuOpen ? 'rgba(0,0,0,0.72)' : 'transparent',
        backdropFilter: scrolled || menuOpen ? 'blur(8px)' : 'none',
        transition: 'background var(--dur-med) var(--ease-quiet), border-color var(--dur-med) var(--ease-quiet)',
        position: 'relative',
      }}
    >
      <a href="#" onClick={(e) => { e.preventDefault(); go('Home'); }} style={{ textDecoration: 'none' }}>
        <Logo height={52} />
      </a>

      {/* Desktop links */}
      <div className="site-nav-links" style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-7)' }}>
        {navItems.map((item) => {
          const on = active === item.key || hoverKey === item.key;
          return (
            <a
              key={item.key}
              href="#"
              onClick={(e) => { e.preventDefault(); go(item.key); }}
              onMouseEnter={() => setHoverKey(item.key)}
              onMouseLeave={() => setHoverKey(null)}
              style={{
                fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)',
                letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase',
                textDecoration: 'none',
                color: on ? 'var(--text-emphasis)' : 'var(--text-tertiary)',
                transition: 'var(--t-hover)',
              }}
            >
              {item.label}
            </a>
          );
        })}
      </div>

      <div className="site-nav-cta" style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-7)' }}>
        <LanguageSwitch />
        <a
          href="#"
          onMouseEnter={() => setAHover(true)}
          onMouseLeave={() => setAHover(false)}
          style={{
            fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)',
            letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase',
            textDecoration: 'none', color: 'var(--text-primary)',
            display: 'inline-flex', alignItems: 'center', gap: '0.8em',
            borderBottom: `1px solid ${aHover ? 'var(--accent)' : 'var(--hairline-strong)'}`,
            paddingBottom: 6, transition: 'var(--t-hover)', whiteSpace: 'nowrap',
          }}
        >
          {t('nav.cta')}
          <span aria-hidden="true" style={{ color: 'var(--accent)' }}>→</span>
        </a>
      </div>

      {/* Mobile hamburger — a 44px touch target, three hairlines that
          converge into a close mark with a single damped motion */}
      <button
        className="site-nav-burger site-nav-burger-btn"
        aria-label={menuOpen ? 'Close menu' : 'Open menu'}
        aria-expanded={menuOpen}
        aria-controls="site-nav-mobile-panel"
        onClick={() => setMenuOpen((v) => !v)}
      >
        <span className="site-nav-burger-line" style={{ top: menuOpen ? 21 : 15, transform: menuOpen ? 'rotate(45deg)' : 'none' }} />
        <span className="site-nav-burger-line" style={{ top: 21, opacity: menuOpen ? 0 : 1, transform: menuOpen ? 'scale(0.4)' : 'none' }} />
        <span className="site-nav-burger-line" style={{ top: menuOpen ? 21 : 27, transform: menuOpen ? 'rotate(-45deg)' : 'none' }} />
      </button>

      {/* Mobile panel — always mounted; a CSS grid-rows transition drops it
          open to its real content height, no fixed guess, no JS measuring */}
      <div className="site-nav-mobile" data-open={menuOpen}>
        <div className="site-nav-mobile-inner">
          <div id="site-nav-mobile-panel" className="site-nav-mobile-panel" aria-hidden={!menuOpen}>
            {navItems.map((item) => (
              <a
                key={item.key}
                href="#"
                tabIndex={menuOpen ? 0 : -1}
                onClick={(e) => { e.preventDefault(); go(item.key); }}
                style={{
                  fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'var(--text-2xl)',
                  letterSpacing: '-0.02em', textDecoration: 'none',
                  color: active === item.key ? 'var(--text-emphasis)' : 'var(--text-secondary)',
                }}
              >
                {item.label}
              </a>
            ))}
            <a
              href="#"
              tabIndex={menuOpen ? 0 : -1}
              onClick={(e) => { e.preventDefault(); setMenuOpen(false); }}
              style={{
                marginTop: 'var(--space-4)', fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)',
                letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', textDecoration: 'none',
                color: 'var(--text-primary)', display: 'inline-flex', alignItems: 'center', gap: '0.8em',
                borderBottom: '1px solid var(--hairline-strong)', paddingBottom: 6, alignSelf: 'flex-start',
              }}
            >
              {t('nav.cta')} <span aria-hidden="true" style={{ color: 'var(--accent)' }}>→</span>
            </a>
            <LanguageSwitch size="lg" align="left" style={{ marginTop: 'var(--space-3)' }} />
          </div>
        </div>
      </div>
    </nav>
  );
}

window.SiteHeader = SiteHeader;