/* global React */
/* =============================================================
   VzdelAI — SEKCIA: Navigácia (header)
   -------------------------------------------------------------
   Fixed top header. Pri scrollovaní sa pozadie mení z transparentného
   na biele. Na mobiloch sa otvára/zatvára drawer cez hamburger button
   (s ESC, click-outside a body-scroll lock-om pre a11y).

   Závislosti (window): V2_LogoMark
   ============================================================= */

/* ────── DÁTA: hlavné navigačné odkazy ────── */
const NAV_LINKS = [
  ['O projekte', '#for-whom'],
  ['Ako funguje VzdelAI', '#how'],
  ['Projekt v číslach', '#stats'],
  ['Aktivity', '#activities'],
  ['Výstupy', '#outputs'],
  ['Konzorcium', '#consortium'],
  ['Kontakt', '#kontakt'],
];

/* ────── HLAVNÝ KOMPONENT ────── */
function V2_Nav() {
  const { V2_LogoMark } = window;
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  // Sledovanie scrollu — prepne style hlavičky pri y > 80
  React.useEffect(() => {
    const onScroll = () => {
      const next = window.scrollY > 80;
      setScrolled((cur) => cur === next ? cur : next);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Lock body scroll keď je mobilné menu otvorené
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  // ESC zatvára mobilné menu (a11y)
  React.useEffect(() => {
    if (!menuOpen) return;
    const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [menuOpen]);

  const linkColor = scrolled ? 'var(--vz-ink)' : 'rgba(255,255,255,0.92)';

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      background: scrolled || menuOpen ? '#ffffff' : 'transparent',
      backdropFilter: scrolled || menuOpen ? 'blur(12px)' : 'none',
      WebkitBackdropFilter: scrolled || menuOpen ? 'blur(12px)' : 'none',
      borderBottom: scrolled || menuOpen ? '1px solid var(--border)' : '1px solid transparent',
      transition: 'background 220ms ease, border-color 220ms ease'
    }}>
      <div className="vz-container vz-nav-row">
        <a href="#" className="vz-nav-brand" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', minWidth: 0, flexShrink: 1 }}>
          <V2_LogoMark size={36} radius={10} />
          <span className="vz-nav-brand-text" style={{
            fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 19,
            color: scrolled || menuOpen ? 'var(--vz-ink)' : '#fff', letterSpacing: '-0.02em',
            whiteSpace: 'nowrap'
          }}>
            Vzdel<span style={{
              background: 'var(--grad-ai)',
              WebkitBackgroundClip: 'text', backgroundClip: 'text',
              WebkitTextFillColor: 'transparent', color: 'transparent'
            }}>AI</span>
          </span>
        </a>
        <nav className="vz-nav-links">
          {NAV_LINKS.map(([l, href]) =>
            <a key={l} href={href} style={{
              fontSize: 14, fontWeight: 500,
              color: linkColor,
              textDecoration: 'none'
            }}>{l}</a>
          )}
        </nav>
        <a href="#kontakt" className="vz-nav-cta" style={{
          borderRadius: 999,
          background: 'var(--vz-violet)', color: '#fff',
          fontSize: 14, fontWeight: 600, textDecoration: 'none',
          boxShadow: 'var(--shadow-violet)'
        }}>
          {/* Plný text na desktope/tablet, krátky "Kontakt" na malých telefónoch — riadi sa cez CSS .vz-nav-cta-full / .vz-nav-cta-short */}
          <span className="vz-nav-cta-full">Kontaktovať tím</span>
          <span className="vz-nav-cta-short">Kontakt</span>
        </a>
        <button
          className="vz-nav-menu-btn"
          onClick={() => setMenuOpen((o) => !o)}
          aria-label={menuOpen ? 'Zavrieť menu' : 'Otvoriť menu'}
          aria-expanded={menuOpen}
          aria-controls="vz-mobile-menu"
          type="button"
          style={{
            width: 44, height: 44, borderRadius: 10,
            background: 'transparent',
            border: '1px solid ' + (scrolled || menuOpen ? 'var(--border)' : 'rgba(255,255,255,0.28)'),
            placeItems: 'center', cursor: 'pointer', padding: 0,
            color: scrolled || menuOpen ? 'var(--vz-ink)' : '#fff'
          }}>
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
            {menuOpen ? <><path d="M6 6l12 12" /><path d="M6 18L18 6" /></> : <><path d="M4 7h16" /><path d="M4 12h16" /><path d="M4 17h16" /></>}
          </svg>
        </button>
      </div>

      {/* Mobile menu drawer */}
      {menuOpen &&
        <React.Fragment>
          <div
            id="vz-mobile-menu"
            style={{
              position: 'absolute', top: '100%', left: 0, right: 0,
              background: 'rgba(255,255,255,0.98)',
              backdropFilter: 'blur(12px)', WebkitBackdropFilter: 'blur(12px)',
              borderBottom: '1px solid var(--border)',
              padding: '20px 0 24px',
              zIndex: 2,
              maxHeight: 'calc(100dvh - 64px)',
              overflowY: 'auto',
              WebkitOverflowScrolling: 'touch'
            }}>
            <nav className="vz-container" style={{ display: 'grid', gap: 4 }}>
              {NAV_LINKS.map(([l, href]) =>
                <a key={l} href={href} onClick={() => setMenuOpen(false)}
                  className="vz-nav-drawer-link"
                  style={{
                    fontWeight: 600,
                    color: 'var(--vz-ink)', textDecoration: 'none',
                    borderBottom: '1px solid var(--border)'
                  }}>{l}</a>
              )}
            </nav>
          </div>
          {/* Click-outside backdrop: pokrýva viewport pod drawerom */}
          <div
            onClick={() => setMenuOpen(false)}
            aria-hidden="true"
            style={{
              position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
              background: 'rgba(15,23,42,0.25)',
              zIndex: 1
            }}
          />
        </React.Fragment>
      }
    </header>);
}

/* ────── EXPORT ────── */
window.V2_Nav = V2_Nav;