// Nav v3 — minimalist, updated chapters for new structure
function NavV3() {
  const [scrolled, setScrolled] = React.useState(false);
  const [active, setActive] = React.useState('');
  React.useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 40);
      const sections = ['top', 'them', 'works', 'prints', 'about', 'commission'];
      let cur = 'top';
      for (const id of sections) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top < window.innerHeight * 0.4) cur = id;
      }
      setActive(cur);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const items = [
    { id: 'them', label: 'them' },
    { id: 'works', label: 'works' },
    { id: 'prints', label: 'prints' },
    { id: 'about', label: 'about' },
    { id: 'commission', label: 'commission' },
  ];
  const onClick = (e, id) => {
    e.preventDefault();
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <nav className="site-nav" style={{
      position: 'fixed', top: 0, left: 0, right: 0,
      padding: '20px 40px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      zIndex: 100,
      background: scrolled ? 'rgba(239,233,221,.55)' : 'transparent',
      backdropFilter: scrolled ? 'blur(18px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(18px) saturate(140%)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(26,24,18,.06)' : '1px solid transparent',
      transition: 'all .6s var(--e-out)',
    }}>
      <a href="#top" onClick={e => onClick(e, 'top')} data-hover style={{
        display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0,
      }}>
        <img src="assets/logo-orb.png" alt="" style={{
          width: 32, height: 32, flexShrink: 0,
          objectFit: 'contain', display: 'block',
        }} />
        <span className="nav-logo-text" style={{
          fontFamily: 'var(--display)', fontWeight: 300, fontStyle: 'italic',
          fontSize: 15, letterSpacing: '-.01em', position: 'relative', display: 'inline-block',
          color: 'var(--ink)', whiteSpace: 'nowrap',
        }}>
          <span style={{ position: 'absolute', inset: '-2px -8px', filter: 'blur(14px)', opacity: .45, color: 'var(--ink)' }}>petra voice</span>
          <span style={{ position: 'absolute', inset: 0, filter: 'blur(4px)', opacity: .25, color: 'var(--ink)' }}>petra voice</span>
          <span style={{ position: 'relative' }}>petra voice</span>
        </span>
      </a>

      <ul className="nav-list" style={{ display: 'flex', gap: 32, listStyle: 'none', alignItems: 'center' }}>
        {items.map(it => (
          <li key={it.id}>
            <a href={`#${it.id}`} onClick={e => onClick(e, it.id)} data-hover
              style={{
                fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '.2em',
                textTransform: 'uppercase',
                color: active === it.id ? 'var(--vermilion)' : 'var(--ink)',
                opacity: active === it.id ? 1 : .78,
                transition: 'all .4s',
                padding: '5px 10px',
                position: 'relative', display: 'inline-block',
              }}>
                <span style={{
                  position: 'absolute', left: 1, right: -3, top: 2, bottom: 1,
                  borderRadius: '42% 58% 51% 49% / 58% 43% 57% 42%',
                  background: 'radial-gradient(ellipse 72% 58% at 48% 52%, rgba(255,255,255,.78), rgba(255,255,255,.34) 48%, transparent 78%)',
                  filter: 'blur(8px)', opacity: active === it.id ? .9 : .62,
                  transform: 'rotate(-1.5deg) scaleX(1.08)',
                  pointerEvents: 'none',
                }}></span>
                <span style={{
                  position: 'absolute', left: -4, right: 2, top: 0, bottom: 3,
                  borderRadius: '55% 45% 62% 38% / 42% 62% 38% 58%',
                  background: 'rgba(255,255,255,.34)', filter: 'blur(5px)',
                  opacity: active === it.id ? .55 : .34, transform: 'rotate(2deg)',
                  pointerEvents: 'none',
                }}></span>
                <span style={{ position: 'relative' }}>{it.label}</span>
              </a>
          </li>
        ))}
      </ul>

      <div className="nav-status mono-meta" style={{ fontSize: 9, display: 'flex', gap: 6, alignItems: 'center', opacity: .6, color: 'var(--ink)' }}>
        <span style={{
          width: 5, height: 5, borderRadius: '50%',
          background: 'var(--vermilion)',
          animation: 'pulse 2s ease-in-out infinite',
        }}></span>
        <span>them — may '26</span>
      </div>
      <style>{`
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
      `}</style>
    </nav>
  );
}

window.NavV3 = NavV3;