// Hadid Group — top navigation
const { Logo, Button, Icon } = window.HadidGroupDesignSystem_9f7d08;

function Nav() {
  const { useState, useEffect } = React;
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const S = window.SITE;

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

  const go = (label) => { window.scrollToId(label.toLowerCase()); setOpen(false); };

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      background: scrolled ? 'rgba(10,23,38,0.92)' : 'linear-gradient(180deg, rgba(5,16,28,0.55) 0%, rgba(5,16,28,0) 100%)',
      backdropFilter: scrolled ? 'blur(14px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--border-hair-dark)' : '1px solid transparent',
      transition: 'background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out)',
    }}>
      <div style={{
        maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)',
        height: scrolled ? 70 : 84, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        transition: 'height var(--dur) var(--ease-out)',
      }}>
        <a href="#home" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }} style={{ textDecoration: 'none' }}>
          <Logo variant="light" size="sm" />
        </a>

        {/* desktop nav */}
        <nav className="hg-desktop-nav" style={{ display: 'flex', alignItems: 'center', gap: 30 }}>
          {S.nav.map((l) => (
            <a key={l} href={`#${l.toLowerCase()}`} onClick={(e) => { e.preventDefault(); go(l); }}
              style={{
                fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: '0.78rem',
                letterSpacing: '0.1em', textTransform: 'uppercase', textDecoration: 'none',
                color: 'rgba(255,255,255,0.82)', transition: 'color var(--dur-fast)',
              }}
              onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--gold-400)')}
              onMouseLeave={(e) => (e.currentTarget.style.color = 'rgba(255,255,255,0.82)')}
            >{l}</a>
          ))}
        </nav>

        <div className="hg-desktop-nav" style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 6, padding: '8px 12px',
            border: '1px solid var(--border-hair-dark)', borderRadius: 'var(--radius-sm)',
            color: 'rgba(255,255,255,0.8)', fontSize: '0.72rem', fontWeight: 700, letterSpacing: '0.08em',
          }}>EN <Icon name="chevron-down" size={13} strokeWidth={2} /></span>
          <Button variant="primary" size="sm" onClick={() => go('Contact')}>Get in touch</Button>
        </div>

        {/* mobile toggle */}
        <button className="hg-mobile-toggle" onClick={() => setOpen(!open)} aria-label="Menu" style={{
          display: 'none', background: 'none', border: 'none', color: '#fff', cursor: 'pointer', padding: 6,
        }}>
          <Icon name={open ? 'x' : 'menu'} size={26} />
        </button>
      </div>

      {/* mobile drawer */}
      <div style={{
        overflow: 'hidden', maxHeight: open ? 460 : 0,
        transition: 'max-height var(--dur) var(--ease-out)',
        background: 'var(--navy-950)', borderTop: open ? '1px solid var(--border-hair-dark)' : 'none',
      }}>
        <nav style={{ display: 'flex', flexDirection: 'column', padding: '12px var(--gutter) 24px' }}>
          {S.nav.map((l) => (
            <a key={l} href={`#${l.toLowerCase()}`} onClick={(e) => { e.preventDefault(); go(l); }}
              style={{
                padding: '14px 0', borderBottom: '1px solid rgba(255,255,255,0.06)',
                fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: '0.92rem',
                letterSpacing: '0.06em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.85)', textDecoration: 'none',
              }}>{l}</a>
          ))}
          <div style={{ marginTop: 18 }}><Button variant="primary" size="md" onClick={() => go('Contact')} style={{ width: '100%' }}>Get in touch</Button></div>
        </nav>
      </div>
    </header>
  );
}
window.Nav = Nav;