const { useState, useEffect } = React;

function WebsiteNav({ showLinks = true } = {}) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const { isMobile } = useViewport();

  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > window.innerHeight * 0.8);
    window.addEventListener('scroll', fn, { passive: true });
    fn();
    return () => window.removeEventListener('scroll', fn);
  }, []);

  // lock page scroll while the overlay menu is open
  useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  // close menu if we grow back to desktop
  useEffect(() => { if (!isMobile) setMenuOpen(false); }, [isMobile]);

  const links = [['#portfolio', 'trabalhos'], ['#servicos', 'serviços'], ['#sobre', 'sobre'], ['#contato', 'contato']];

  if (isMobile) {
    if (!showLinks) {
      return (
        <nav style={{
          position: 'fixed', top: 0, left: 0, right: 0, zIndex: 200,
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '0 20px', height: 60,
          background: scrolled ? '#F6F3F0' : 'transparent',
          borderBottom: scrolled ? '1px solid #DDD9D4' : '1px solid transparent',
          transition: 'background 200ms ease, border-color 200ms ease',
        }}>
          <a href="index.html#inicio" style={{display:'flex', alignItems:'center', gap:12, textDecoration:'none'}}>
            <img src="assets/logo-icon-dark.png" alt="LSQ" style={{height:40, width:'auto'}} />
          </a>
        </nav>
      );
    }
    const bar = (rot, ty) => ({
      width: 22, height: 2, borderRadius: 2,
      background: menuOpen ? '#1D1D1B' : '#fff',
      transition: 'transform .35s cubic-bezier(.76,0,.24,1), background .2s',
      transform: menuOpen ? 'translateY(' + ty + 'px) rotate(' + rot + 'deg)' : 'none',
    });
    return (
      <React.Fragment>
        {/* Hamburger — always reachable on mobile; mix-blend so it reads on dark hero & light sections */}
        <button aria-label="Menu" onClick={() => setMenuOpen((o) => !o)} style={{
          position: 'fixed', top: 16, right: 16, zIndex: 300,
          width: 48, height: 48, borderRadius: '50%',
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6,
          background: menuOpen ? '#E3DDD8' : 'transparent',
          border: 'none', cursor: 'pointer', padding: 0,
          mixBlendMode: menuOpen ? 'normal' : 'difference',
          WebkitTapHighlightColor: 'transparent',
        }}>
          <span style={bar(45, 4)}></span>
          <span style={bar(-45, -4)}></span>
        </button>

        {/* Full-screen overlay menu */}
        <div style={{
          position: 'fixed', inset: 0, zIndex: 250,
          background: '#111110',
          display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
          padding: '92px 26px 40px',
          transform: menuOpen ? 'translateY(0)' : 'translateY(-101%)',
          transition: 'transform .6s cubic-bezier(.76,0,.24,1)',
          pointerEvents: menuOpen ? 'auto' : 'none',
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {links.map(([href, label]) => (
              <a key={label} href={href} onClick={() => setMenuOpen(false)} style={{
                fontFamily: 'HelveticaCompressed, "Arial Narrow", Arial, sans-serif', fontWeight: 700,
                fontSize: 'clamp(42px, 14vw, 76px)', textTransform: 'uppercase', lineHeight: 1.05,
                color: '#E3DDD8', textDecoration: 'none', letterSpacing: '-.01em',
              }}>{label}</a>
            ))}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, borderTop: '1px solid #2C2C2A', paddingTop: 24 }}>
            <a href="mailto:lucasqueiroz@gmail.com" style={{ fontFamily: 'Helvetica, Arial, sans-serif', fontSize: 14, letterSpacing: '.06em', color: '#E3DDD8', textDecoration: 'none' }}>lucasqueiroz@gmail.com</a>
            <a href="https://wa.me/5511975514667?text=Quero%20trabalhar%20com%20a%20LSQ." target="_blank" style={{ fontFamily: 'Helvetica, Arial, sans-serif', fontSize: 14, letterSpacing: '.06em', color: '#5A5A57', textDecoration: 'none' }}>+55 11 97551 4667</a>
          </div>
        </div>
      </React.Fragment>
    );
  }

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 200,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 56px', height: 60,
      background: scrolled ? '#F6F3F0' : 'transparent',
      borderBottom: scrolled ? '1px solid #DDD9D4' : '1px solid transparent',
      transform: scrolled ? 'translateY(0)' : 'translateY(-100%)',
      transition: 'transform 280ms ease, background 200ms ease, border-color 200ms ease',
      pointerEvents: scrolled ? 'auto' : 'none',
    }}>
      <a href={showLinks ? '#inicio' : 'index.html#inicio'} style={{display:'flex', alignItems:'center', gap:12, textDecoration:'none'}}>
        <img src="assets/logo-icon-dark.png" alt="LSQ" style={{height:48, width:'auto'}} />
      </a>

      {showLinks &&
      <div style={{display:'flex', alignItems:'center', gap:36}}>
        {links.map(([href, label]) => (
          <a key={label} href={href} style={{
            fontFamily:'Helvetica, Arial, sans-serif', fontWeight:400, fontSize:14,
            color:'#1D1D1B', textDecoration:'none', letterSpacing:'.01em',
            display:'flex', alignItems:'center', gap:4,
            transition:'opacity 150ms',
          }}
          onMouseEnter={e => e.currentTarget.style.opacity='.5'}
          onMouseLeave={e => e.currentTarget.style.opacity='1'}
          >{label} <span style={{fontWeight:400}}>→</span></a>
        ))}
      </div>}
    </nav>
  );
}

Object.assign(window, { WebsiteNav });