/* eslint-disable */
const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(255,255,255,.92)' : 'transparent',
      backdropFilter: scrolled ? 'blur(8px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(8px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--rule)' : '1px solid transparent',
      transition: 'background .2s cubic-bezier(.2,0,0,1), border-color .2s cubic-bezier(.2,0,0,1)',
    }}>
      <div style={{
        maxWidth: 'var(--container)', margin: '0 auto',
        padding: 'var(--s-4) var(--gutter)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <a href="#top" style={{
          display: 'flex', alignItems: 'center', gap: 12,
          fontWeight: 600, fontSize: 20, letterSpacing: '-0.02em',
          color: 'var(--ink)', textDecoration: 'none',
        }}>
          <span>AI</span>
          <span style={{ width: 22, height: 3, background: 'var(--ink)', display: 'inline-block' }} />
          <span>Cycle</span>
        </a>
        <div style={{ display: 'flex', gap: 32, alignItems: 'center', whiteSpace: 'nowrap' }}>
          {[
            { l: 'Cycle', h: '#cycle' },
            { l: 'Versprechen', h: '#versprechen' },
            { l: 'Cases', h: '#cases' },
            { l: 'Über uns', h: '#ueber' },
            { l: 'FAQ', h: '#faq' },
          ].map(item => (
            <a key={item.l} href={item.h} style={{
              fontSize: 14, color: 'var(--fg-2)', textDecoration: 'none',
              whiteSpace: 'nowrap',
            }}>{item.l}</a>
          ))}
          <a href="#kontakt" style={{
            fontSize: 14, padding: '10px 18px', background: 'var(--ink)',
            color: 'var(--bone)', borderRadius: 2, textDecoration: 'none',
            whiteSpace: 'nowrap',
            transition: 'background .2s cubic-bezier(.2,0,0,1)',
          }}
          onMouseOver={e => e.currentTarget.style.background = 'var(--ocher)'}
          onMouseOut={e => e.currentTarget.style.background = 'var(--ink)'}>
            Gespräch buchen →
          </a>
        </div>
      </div>
    </nav>
  );
};
window.Nav = Nav;