// Fixed/sticky nav with scroll-aware background — transparent over hero,
// solid blurred dark once the user scrolls past a threshold.
// Mobile: collapses into a hamburger menu under 900px.

const { useState: useStateN, useEffect: useEffectN } = React;

function VantuzMark({ size = 32, onPaper = false }) {
  return (
    <img
      src="assets/vantuz-icon-white.png"
      alt="Vantuz"
      style={{
        height: size, width: 'auto', display: 'block',
        filter: onPaper ? 'invert(1)' : 'none',
      }}
    />
  );
}

function VantuzWordmark({ height = 46, onPaper = false }) {
  return (
    <img
      src="assets/vantuz-logo-landscape-white.png"
      alt="Vantuz"
      style={{
        height, width: 'auto', display: 'block',
        filter: onPaper ? 'invert(1)' : 'none',
      }}
    />
  );
}

// "How it works" replaces the old separate "Platform" link — they were the same page.
const NAV_ITEMS = [
  { label: 'How it works',  href: '/platform' },
  { label: 'NIS2',          href: '/nis2' },
  { label: 'Pricing',       href: '/pricing' },
  { label: 'Blog',          href: '/blog' },
  { label: 'Contact',       href: '/contact' },
];

const APP_LOGIN_URL = 'https://app.vantuz.co/login';

function Hamburger({ open, onClick }) {
  return (
    <button
      onClick={onClick}
      aria-label={open ? 'Close menu' : 'Open menu'}
      aria-expanded={open}
      className="nav-hamburger"
      style={{
        width: 44, height: 44, display: 'none',
        alignItems: 'center', justifyContent: 'center',
        border: '1px solid rgba(255,255,255,.2)', borderRadius: 999,
        background: 'rgba(255,255,255,.04)', flexShrink: 0,
      }}
    >
      <span style={{position:'relative', width:18, height:14, display:'block'}}>
        <span style={{
          position:'absolute', left:0, right:0, height:1.5, background:'#fff', borderRadius:1,
          top: open ? '50%' : 0,
          transform: open ? 'translateY(-50%) rotate(45deg)' : 'translateY(0) rotate(0)',
          transition: 'top .25s ease, transform .25s ease',
        }}/>
        <span style={{
          position:'absolute', left:0, right:0, height:1.5, background:'#fff', borderRadius:1,
          top: '50%', marginTop: -0.75,
          opacity: open ? 0 : 1, transition: 'opacity .15s ease',
        }}/>
        <span style={{
          position:'absolute', left:0, right:0, height:1.5, background:'#fff', borderRadius:1,
          bottom: open ? '50%' : 0,
          transform: open ? 'translateY(50%) rotate(-45deg)' : 'translateY(0) rotate(0)',
          transition: 'bottom .25s ease, transform .25s ease',
        }}/>
      </span>
    </button>
  );
}

function MobileMenu({ open, onClose, current }) {
  // Lock body scroll while open.
  useEffectN(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  return (
    <div
      className="nav-mobile-panel"
      aria-hidden={!open}
      style={{
        position:'fixed', inset:0, zIndex: 90,
        background:'rgba(5,6,8,.96)',
        backdropFilter:'blur(20px) saturate(1.2)',
        WebkitBackdropFilter:'blur(20px) saturate(1.2)',
        display:'flex', flexDirection:'column',
        transform: open ? 'translateY(0)' : 'translateY(-100%)',
        transition: 'transform .35s cubic-bezier(.4, 0, .2, 1)',
        pointerEvents: open ? 'auto' : 'none',
      }}
    >
      {/* spacer for nav bar height */}
      <div style={{height: 76, flex:'0 0 auto'}}/>

      <div style={{flex:1, padding:'24px 24px 32px', overflowY:'auto', display:'flex', flexDirection:'column'}}>
        {/* Nav links */}
        <div style={{display:'flex', flexDirection:'column', gap:0, marginBottom:32}}>
          {NAV_ITEMS.map((it, i) => (
            <a
              key={it.label}
              href={it.href}
              onClick={onClose}
              style={{
                display:'flex', alignItems:'center', justifyContent:'space-between',
                padding: '22px 4px', borderTop: i === 0 ? '1px solid var(--ink-line)' : 'none',
                borderBottom:'1px solid var(--ink-line)',
                fontSize: 28, fontWeight: 500, letterSpacing:'-.02em',
                color: current === it.label ? '#fff' : 'rgba(255,255,255,.78)',
                fontFamily:'var(--f-display)',
              }}
            >
              <span>{it.label}</span>
              <span style={{fontFamily:'var(--f-mono)', fontSize:14, color: current === it.label ? 'var(--aurora-2)' : 'var(--txt-3)'}}>
                {current === it.label ? '●' : '→'}
              </span>
            </a>
          ))}
        </div>

        {/* CTAs */}
        <div style={{display:'flex', flexDirection:'column', gap:10, marginTop:'auto'}}>
          <a href="/contact" onClick={onClose} className="btn btn-white btn-lg" style={{justifyContent:'center'}}>
            Contact us <span aria-hidden>→</span>
          </a>
          <a href={APP_LOGIN_URL} onClick={onClose} className="btn btn-outline-white btn-lg" style={{justifyContent:'center'}}>
            Sign in
          </a>
        </div>

        {/* Footer mark */}
        <div style={{
          marginTop: 32, paddingTop: 24, borderTop:'1px solid var(--ink-line)',
          display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap:8,
        }}>
          <div className="mono" style={{fontSize:10, letterSpacing:'.2em', color:'var(--txt-4)', textTransform:'uppercase'}}>
            © 2026 · Made in EU
          </div>
          <div className="mono" style={{fontSize:10, letterSpacing:'.2em', color:'var(--txt-4)', textTransform:'uppercase'}}>
            hello@vantuz.co
          </div>
        </div>
      </div>
    </div>
  );
}

function Nav({ onPaper = false, current = '' }) {
  const [scrolled, setScrolled] = useStateN(false);
  const [mobileOpen, setMobileOpen] = useStateN(false);

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

  // Force solid background while mobile menu is open, so the nav reads against the panel.
  const navBg = mobileOpen || scrolled;

  return (
    <>
      <nav className={`site-nav ${navBg ? 'is-scrolled' : ''} ${onPaper ? 'on-paper' : ''}`} style={{zIndex: 100}}>
        <div className="site-nav-inner">
          <a href="/" className="mark" aria-label="Vantuz home" onClick={() => setMobileOpen(false)}>
            <VantuzWordmark height={46} onPaper={onPaper} />
          </a>

          <div className="nav-links">
            {NAV_ITEMS.map(it => (
              <a
                key={it.label}
                href={it.href}
                style={{
                  color: current === it.label ? '#fff' : undefined,
                  fontWeight: current === it.label ? 500 : undefined,
                  position: 'relative',
                }}
              >
                {it.label}
                {current === it.label && (
                  <span aria-hidden style={{
                    position: 'absolute', left: 0, right: 0, bottom: -6, height: 1,
                    background: 'rgba(255,255,255,.55)',
                  }}/>
                )}
              </a>
            ))}
          </div>

          <div className="nav-cta-group" style={{display:'flex', alignItems:'center', gap:10}}>
            <a href={APP_LOGIN_URL} className="btn btn-outline-white nav-cta-sign-in">Sign in</a>
            <a href="/contact" className="btn btn-white nav-cta-primary">
              Contact us <span aria-hidden>→</span>
            </a>
            <Hamburger open={mobileOpen} onClick={() => setMobileOpen(o => !o)} />
          </div>
        </div>
      </nav>

      <MobileMenu open={mobileOpen} onClose={() => setMobileOpen(false)} current={current} />
    </>
  );
}

window.Nav = Nav;
window.VantuzMark = VantuzMark;
window.VantuzWordmark = VantuzWordmark;