function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [activeHref, setActiveHref] = React.useState('#top');

  React.useEffect(() => {
    const sections = [
      { id: 'pricing', href: '#pricing' },
      { id: 'process', href: '#process' },
      { id: 'top', href: '#top' },
    ];
    const onScroll = () => {
      setScrolled(window.scrollY > 20);
      const scrollY = window.scrollY + 120;
      let current = '#top';
      for (const s of sections) {
        const el = document.getElementById(s.id);
        if (el && el.offsetTop <= scrollY) { current = s.href; break; }
      }
      setActiveHref(current);
    };
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { ko: '포트폴리오', en: 'Portfolio', href: '#top' },
    { ko: '진행방법', en: 'Process', href: '#process' },
    { ko: '단가', en: 'Pricing', href: '#pricing' },
  ];

  const navStyle = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
    padding: '18px 56px',
    background: scrolled ? 'rgba(250,247,242,0.88)' : 'transparent',
    backdropFilter: scrolled ? 'blur(12px)' : 'none',
    borderBottom: scrolled ? '1px solid var(--line-soft)' : '1px solid transparent',
    transition: 'all .25s ease',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  };

  return (
    <nav style={navStyle}>
      <a href="#top" style={{ display: 'flex', alignItems: 'center', gap: 10 }}
         onClick={e => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
        <div style={{ width: 24, height: 24, position: 'relative' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'var(--ink)', borderRadius: 2, transform: 'rotate(-8deg)' }} />
          <div style={{ position: 'absolute', inset: 3, background: 'var(--coral)', borderRadius: 1, transform: 'rotate(6deg)' }} />
        </div>
        <div style={{ lineHeight: 1 }}>
          <div style={{ fontSize: 15, fontWeight: 600, letterSpacing: '-0.02em' }}>모두의 포트폴리오</div>
          <div className="eng" style={{ fontSize: 9.5, color: 'var(--muted)', marginTop: 2, letterSpacing: '0.08em' }}>PORTFOLIO FOR EVERYONE</div>
        </div>
      </a>

      <div style={{ display: 'flex', alignItems: 'center', gap: 30 }}>
        {links.map(l => {
          const isActive = activeHref === l.href;
          return (
            <a key={l.href} href={l.href}
               style={{ fontSize: 13.5, color: isActive ? 'var(--ink)' : 'var(--ink-soft)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2, position: 'relative', paddingBottom: 4, textDecoration: 'none' }}
               onMouseEnter={e => { if (!isActive) e.currentTarget.style.color = 'var(--coral)'; }}
               onMouseLeave={e => { if (!isActive) e.currentTarget.style.color = 'var(--ink-soft)'; }}
               onClick={e => {
                 e.preventDefault();
                 const id = l.href.replace('#', '');
                 const el = document.getElementById(id);
                 if (el) el.scrollIntoView({ behavior: 'smooth' });
                 else window.scrollTo({ top: 0, behavior: 'smooth' });
               }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                <span style={{ fontWeight: isActive ? 600 : 400 }}>{l.ko}</span>
                <span className="eng" style={{ fontSize: 10, color: 'var(--muted)' }}>{l.en}</span>
              </div>
              <div style={{
                position: 'absolute', bottom: 0, left: 0, right: 0,
                height: 2, borderRadius: 1,
                background: 'var(--coral)',
                transform: isActive ? 'scaleX(1)' : 'scaleX(0)',
                transition: 'transform .25s ease',
                transformOrigin: 'center',
              }} />
            </a>
          );
        })}
      </div>

      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <button className="btn-primary" style={{ padding: '10px 18px', fontSize: 13 }} onClick={() => window.location.href = 'consultation.html'}>
          상담 신청
          <span style={{ opacity: 0.7 }}>→</span>
        </button>
      </div>
    </nav>
  );
}
window.Nav = Nav;