/* global React */
const { useEffect, useState } = React;

const headerStyles = {
  wrap: {
    position: 'sticky', top: 0, zIndex: 50,
    background: 'rgba(250,250,250,0.85)',
    backdropFilter: 'blur(10px)',
    WebkitBackdropFilter: 'blur(10px)',
    transition: 'border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out)',
  },
  inner: {
    maxWidth: 'var(--content-max)', margin: '0 auto',
    padding: '14px var(--gutter)',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24,
  },
  brand: { display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none', color: 'var(--fg-1)' },
  brandName: { fontWeight: 500, fontSize: 15, letterSpacing: '-0.01em', lineHeight: 1 },
  brandRole: { fontWeight: 400, fontSize: 13, color: 'var(--fg-3)', lineHeight: 1, marginTop: 3 },
  nav: { display: 'flex', alignItems: 'center', gap: 28 },
  link: {
    fontSize: 13, fontWeight: 400, color: 'var(--fg-2)',
    textDecoration: 'none', letterSpacing: 0,
    transition: 'color var(--dur-fast) var(--ease-out)',
  },
};

const NAV = [
  { id: 'stack',      label: 'Stack' },
  { id: 'experience', label: 'Experience' },
  { id: 'work',       label: 'Featured work' },
  { id: 'process',    label: 'How I work' },
  { id: 'background', label: 'Background' },
  { id: 'contact',    label: 'Contact' },
];

function Header() {
  const [scrolled, setScrolled] = useState(false);
  const [active, setActive] = useState('');
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll(); window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffect(() => {
    const ids = NAV.map(n => n.id);
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) setActive(e.target.id);
      });
    }, { rootMargin: '-40% 0px -55% 0px' });
    ids.forEach(id => { const el = document.getElementById(id); if (el) obs.observe(el); });
    return () => obs.disconnect();
  }, []);

  return (
    <header className="no-print" style={{
      ...headerStyles.wrap,
      borderBottom: scrolled ? 'var(--border-hair)' : '1px solid transparent',
    }}>
      <div style={headerStyles.inner}>
        <a href="#top" style={headerStyles.brand}>
          <img src="assets/icon-medium.png" alt="" width="20" height="20" style={{ display: 'block' }}/>
          <span style={{ ...headerStyles.brandName, fontWeight: 500 }}>Latus</span>
          <span aria-hidden="true" style={{
            display: 'inline-block', width: 1, height: 16,
            background: 'var(--line-2)', margin: '0 4px',
          }}/>
          <span style={{ ...headerStyles.brandName, fontWeight: 400, color: 'var(--fg-2)' }}>De Vos Meaker</span>
        </a>
        <nav style={headerStyles.nav} aria-label="Section navigation">
          {NAV.map(n => (
            <a key={n.id} href={`#${n.id}`}
              style={{
                ...headerStyles.link,
                color: active === n.id ? 'var(--fg-1)' : 'var(--fg-2)',
                fontWeight: active === n.id ? 500 : 400,
              }}
              onMouseEnter={(e) => e.currentTarget.style.color = 'var(--fg-1)'}
              onMouseLeave={(e) => e.currentTarget.style.color = active === n.id ? 'var(--fg-1)' : 'var(--fg-2)'}
            >{n.label}</a>
          ))}
        </nav>
        <a href="#contact"
          style={{
            fontSize: 13, fontWeight: 500,
            padding: '10px 16px', borderRadius: 'var(--r-1)',
            background: 'var(--latus-dark-blue)', color: 'var(--latus-off-white)',
            textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8,
            transition: 'background var(--dur-base) var(--ease-out)',
            whiteSpace: 'nowrap',
          }}
          onMouseEnter={(e) => e.currentTarget.style.background = '#01153D'}
          onMouseLeave={(e) => e.currentTarget.style.background = 'var(--latus-dark-blue)'}
        >Book a call <ArrowRight/></a>
      </div>
      <style>{`
        @media (max-width: 980px) {
          header nav { display: none; }
        }
      `}</style>
    </header>
  );
}

window.Header = Header;