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

function Nav({ onOpenContact }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const navStyle = {
    position: 'sticky', top: 0, zIndex: 50,
    transition: 'background 200ms var(--ease-out), border-color 200ms var(--ease-out)',
    borderBottom: scrolled ? '1px solid var(--border)' : '1px solid transparent',
  };
  const innerStyle = {
    display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center', gap: '32px',
    padding: '20px 0',
  };
  const linkRow = { display: 'flex', gap: '32px', justifySelf: 'center' };
  const link = {
    fontFamily: 'var(--font-mono)', fontSize: '12px', letterSpacing: '0.14em',
    textTransform: 'uppercase', color: 'var(--warm-700)', textDecoration: 'none',
    borderBottom: 'none', paddingBottom: '2px', cursor: 'pointer',
  };

  const logo = {
    fontFamily: 'var(--font-sans)', fontSize: '22px', fontWeight: 500,
    letterSpacing: '-0.03em', color: 'var(--ink)',
    display: 'inline-flex', alignItems: 'center', gap: '12px',
  };

  const scrollTo = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <nav style={navStyle} className={scrolled ? 'nav-blur' : ''}>
      <div className="container">
        <div style={innerStyle}>
          <a href="#top" style={logo} onClick={scrollTo('top')}>
            <img src="assets/mark.svg" alt="" width="28" height="28" style={{ display: 'block' }} />
            <span>Moore<span style={{ color: 'var(--graphite)' }}>.</span></span>
          </a>
          <div style={linkRow}>
            <a href="#fazemos" style={link} onClick={scrollTo('fazemos')}>O que fazemos</a>
            <a href="#processo" style={link} onClick={scrollTo('processo')}>Processo</a>
            <a href="#time" style={link} onClick={scrollTo('time')}>Time</a>
            <a href="#contato" style={link} onClick={scrollTo('contato')}>Contato</a>
          </div>
          <button className="btn primary" onClick={onOpenContact}>
            Conversar <span>→</span>
          </button>
        </div>
      </div>
    </nav>
  );
}

window.Nav = Nav;