/* ============================================================
   Nav — sticky cream top bar with brand mark + section links.
   ============================================================ */
const { useState: useStateNav, useEffect: useEffectNav } = React;

function Nav({ accent }) {
  const { Button } = window.EditorialCSDesignSystem_8c71a4;
  const { BrandMark, Container } = window;
  const links = [
    ['Work', 'work'], ['How we work', 'how-we-work'], ['Services', 'services'],
    ['Contact', 'contact'],
  ];
  const [open, setOpen] = useStateNav(false);
  const [scrolled, setScrolled] = useStateNav(false);

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

  const go = (id) => {
    setOpen(false);
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 72, behavior: 'smooth' });
  };

  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(245,241,236,0.82)' : 'rgba(245,241,236,0)',
      backdropFilter: scrolled ? 'blur(12px)' : 'none',
      borderBottom: `1px solid ${scrolled ? 'var(--hairline)' : 'transparent'}`,
      transition: 'background 200ms ease, border-color 200ms ease',
    }}>
      <Container style={{ height: 72, display: 'flex', alignItems: 'center', gap: 'var(--space-xl)' }}>
        <a href="#top" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}
          style={{ textDecoration: 'none', flex: '0 0 auto' }}>
          <BrandMark height={24} />
        </a>
        <nav className="nav-links" style={{ display: 'flex', gap: 'var(--space-lg)', flex: 1, justifyContent: 'center' }}>
          {links.map(([label, id]) => (
            <button key={id} onClick={() => go(id)} className="nav-link" style={{
              background: 'none', border: 'none', cursor: 'pointer', padding: '6px 2px',
              fontFamily: 'var(--font-body)', fontSize: 'var(--type-body-sm-size)',
              fontWeight: 500, color: 'var(--ink-muted)',
            }}>{label}</button>
          ))}
        </nav>
        <div className="nav-cta" style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-md)', flex: '0 0 auto' }}>
          <Button size="sm" onClick={() => go('contact')}>Get in touch</Button>
        </div>
        <button className="nav-burger" onClick={() => setOpen((o) => !o)} aria-label="Menu" style={{
          display: 'none', background: 'none', border: 'none', cursor: 'pointer', color: 'var(--ink)', padding: 6,
        }}>
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.85" strokeLinecap="round">
            {open ? <g><line x1="6" y1="6" x2="18" y2="18" /><line x1="18" y1="6" x2="6" y2="18" /></g>
                  : <g><line x1="3" y1="7" x2="21" y2="7" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="17" x2="21" y2="17" /></g>}
          </svg>
        </button>
      </Container>
      {open && (
        <div style={{ borderTop: '1px solid var(--hairline)', background: 'var(--canvas)' }}>
          <Container style={{ display: 'flex', flexDirection: 'column', padding: '12px 24px 20px' }}>
            {links.map(([label, id]) => (
              <button key={id} onClick={() => go(id)} style={{
                background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left',
                padding: '13px 0', borderBottom: '1px solid var(--hairline-soft)',
                fontFamily: 'var(--font-body)', fontSize: 'var(--type-body-lg-size)', fontWeight: 500, color: 'var(--ink)',
              }}>{label}</button>
            ))}
            <button onClick={() => go('contact')} style={{
              marginTop: 16, background: 'var(--ink)', color: 'var(--on-primary)', border: 'none',
              borderRadius: 'var(--radius-md)', padding: '13px', cursor: 'pointer',
              fontFamily: 'var(--font-body)', fontSize: 15, fontWeight: 500,
            }}>Get in touch</button>
          </Container>
        </div>
      )}
    </header>
  );
}

window.Nav = Nav;