const { useState, useEffect } = React;

function Nav() {
  const [scrolled, setScrolled]   = useState(false);
  const [menuOpen, setMenuOpen]   = useState(false);
  const [isMobile, setIsMobile]   = useState(window.innerWidth < 640);
  const [isTablet, setIsTablet]   = useState(window.innerWidth < 1024);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    const onResize = () => {
      setIsMobile(window.innerWidth < 640);
      setIsTablet(window.innerWidth < 1024);
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onResize);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onResize);
    };
  }, []);

  const px = isMobile ? '20px' : isTablet ? '32px' : '52px';

  const navStyle = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: `16px ${px}`,
    background: scrolled || menuOpen ? 'rgba(243,248,242,0.95)' : 'transparent',
    backdropFilter: scrolled || menuOpen ? 'blur(20px)' : 'none',
    borderBottom: scrolled || menuOpen ? '0.5px solid rgba(194,212,190,0.6)' : '0.5px solid transparent',
    transition: 'all 0.4s ease',
  };

  const logoStyle = {
    fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.16em',
    textTransform: 'uppercase',
    color: scrolled || menuOpen ? 'var(--ink)' : '#F3F8F2',
    transition: 'color 0.4s', zIndex: 101,
  };

  const linkColor = scrolled ? 'var(--mid)' : 'rgba(243,248,242,0.75)';

  return (
    React.createElement(React.Fragment, null,
      React.createElement('nav', { style: navStyle },
        /* LOGO */
        React.createElement('div', { style: logoStyle },
          React.createElement('em', { style: { color: scrolled || menuOpen ? 'var(--pine)' : '#A8D4C8', fontStyle: 'normal', transition: 'color 0.4s' } }, 'Z'),
          'ueta Media'
        ),

        /* DESKTOP LINKS */
        !isMobile && React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: isTablet ? 20 : 28 } },
          ['Work','Services','Writing','About'].map(l =>
            React.createElement('a', {
              key: l, href: `#${l.toLowerCase()}`,
              style: { fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.1em', color: linkColor, transition: 'color 0.3s' }
            }, l)
          ),
          !isTablet && React.createElement('div', {
            style: { display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: scrolled ? 'var(--pine)' : 'rgba(180,230,200,0.85)', transition: 'color 0.4s' }
          },
            React.createElement('div', { style: { width: 5, height: 5, borderRadius: '50%', background: 'var(--amber)', animation: 'pulse 2.5s ease-in-out infinite', flexShrink: 0 } }),
            'Available'
          ),
          React.createElement('button', {
            style: {
              fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.12em',
              textTransform: 'uppercase', padding: '8px 16px', border: 'none',
              background: scrolled ? 'var(--pine)' : 'rgba(255,255,255,0.1)',
              color: '#F3F8F2',
              outline: scrolled ? 'none' : '0.5px solid rgba(255,255,255,0.28)',
              backdropFilter: 'blur(12px)', transition: 'all 0.3s',
            }
          }, 'Contact')
        ),

        /* MOBILE HAMBURGER */
        isMobile && React.createElement('button', {
          onClick: () => setMenuOpen(o => !o),
          style: {
            background: 'none', border: 'none', padding: 4, cursor: 'pointer',
            display: 'flex', flexDirection: 'column', gap: 5, zIndex: 101,
          }
        },
          [0,1,2].map(i => React.createElement('div', {
            key: i,
            style: {
              width: 22, height: 1.5,
              background: scrolled || menuOpen ? 'var(--ink)' : '#F3F8F2',
              transition: 'all 0.3s',
              transform: menuOpen
                ? (i === 0 ? 'rotate(45deg) translate(4.5px, 4.5px)' : i === 2 ? 'rotate(-45deg) translate(4.5px, -4.5px)' : 'scaleX(0)')
                : 'none',
            }
          }))
        )
      ),

      /* MOBILE MENU DRAWER */
      isMobile && menuOpen && React.createElement('div', {
        style: {
          position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
          background: 'rgba(243,248,242,0.97)', backdropFilter: 'blur(20px)',
          zIndex: 99, display: 'flex', flexDirection: 'column',
          alignItems: 'center', justifyContent: 'center', gap: 32,
        }
      },
        ['Work','Services','Writing','About','Contact'].map(l =>
          React.createElement('a', {
            key: l, href: `#${l.toLowerCase()}`,
            onClick: () => setMenuOpen(false),
            style: {
              fontFamily: 'var(--serif)', fontSize: 32, fontWeight: 400,
              color: 'var(--ink)', letterSpacing: '-0.02em',
            }
          }, l)
        ),
        React.createElement('div', {
          style: { display: 'flex', alignItems: 'center', gap: 6, fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--pine)', marginTop: 8 }
        },
          React.createElement('div', { style: { width: 5, height: 5, borderRadius: '50%', background: 'var(--amber)', animation: 'pulse 2.5s ease-in-out infinite' } }),
          'Available for work'
        )
      )
    )
  );
}