// Nav.jsx — Mobile-first nav with hamburger drawer
const Nav = ({ scrolled, onCTA }) => {
  const [open, setOpen] = React.useState(false);
  const isMobile = useIsMobile();

  const navStyle = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 200,
    height: '80px',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: isMobile ? '0 20px' : '0 48px',
    transition: `background 400ms ${EASE}, border-color 400ms, backdrop-filter 400ms`,
    background: scrolled || open ? 'rgba(255,255,255,0.92)' : 'transparent',
    backdropFilter: scrolled || open ? 'blur(16px)' : 'none',
    borderBottom: scrolled && !open ? '1px solid #E5E5E5' : '1px solid transparent',
  };
  const logoStyle = { display: 'flex', alignItems: 'center', gap: '9px', textDecoration: 'none', zIndex: 201 };
  const logoImgStyle = { height: '48px', objectFit: 'contain' };

  // Desktop links
  const linksStyle = { display: 'flex', alignItems: 'center', gap: '28px', listStyle: 'none' };
  const linkStyle = {
    fontFamily: "'DM Sans', sans-serif", fontSize: '14px', fontWeight: 500,
    color: '#6B6B6B', textDecoration: 'none', transition: 'color 200ms', cursor: 'pointer',
  };
  const ctaStyle = {
    fontFamily: "'DM Sans', sans-serif", fontSize: '14px', fontWeight: 500,
    background: '#0A0A0A', color: '#fff', padding: '9px 20px', borderRadius: '8px',
    border: 'none', cursor: 'pointer', transition: `all 250ms ${EASE}`,
  };

  // Burger button
  const burgerStyle = {
    background: 'none', border: 'none', cursor: 'pointer',
    width: '36px', height: '36px', display: 'flex', flexDirection: 'column',
    alignItems: 'center', justifyContent: 'center', gap: '5px', zIndex: 201, padding: 0,
  };
  const barStyle = (rotate, ty, opacity = 1) => ({
    width: '22px', height: '1.5px', background: '#0A0A0A',
    transition: `all 350ms ${EASE}`,
    transform: `rotate(${rotate}deg) translateY(${ty}px)`,
    opacity,
  });

  // Mobile drawer
  const drawerStyle = {
    position: 'fixed', inset: 0, background: '#fff', zIndex: 199,
    display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
    gap: '8px',
    opacity: open ? 1 : 0,
    pointerEvents: open ? 'all' : 'none',
    transition: `opacity 400ms ${EASE}`,
  };
  const drawerLinkStyle = (i) => ({
    fontFamily: "'Space Grotesk', sans-serif", fontSize: '28px', fontWeight: 700,
    letterSpacing: '-0.03em', color: '#0A0A0A', textDecoration: 'none',
    opacity: open ? 1 : 0,
    transform: open ? 'translateY(0)' : 'translateY(20px)',
    transition: `opacity 500ms ${EASE} ${i * 60 + 100}ms, transform 500ms ${EASE} ${i * 60 + 100}ms`,
    padding: '10px 0',
  });
  const drawerCta = {
    fontFamily: "'DM Sans', sans-serif", fontSize: '16px', fontWeight: 500,
    background: '#0A0A0A', color: '#fff', padding: '14px 40px', borderRadius: '10px',
    border: 'none', cursor: 'pointer', marginTop: '24px',
    opacity: open ? 1 : 0,
    transform: open ? 'translateY(0)' : 'translateY(20px)',
    transition: `opacity 500ms ${EASE} 380ms, transform 500ms ${EASE} 380ms`,
  };

  const navItems = [
    ...(scrolled ? [{ label: 'Início', href: '#' }] : []),
    { label: 'Como funciona', href: '#como-funciona' },
    { label: 'Resultados', href: '#resultados' },
    { label: 'Preços', href: '#precos' },
    { label: 'Dúvidas', href: '#faq' }
  ];

  return (
    <>
      <nav style={navStyle}>
        <a style={logoStyle} href="#">
          <img src="./assets/logo.png" style={logoImgStyle} alt="Logotipo" />
        </a>

        {isMobile ? (
          <button style={burgerStyle} onClick={() => setOpen(o => !o)} aria-label="Menu">
            <div style={barStyle(open ? 45 : 0, open ? 6.5 : 0)}></div>
            <div style={barStyle(0, 0, open ? 0 : 1)}></div>
            <div style={barStyle(open ? -45 : 0, open ? -6.5 : 0)}></div>
          </button>
        ) : (
          <>
            <ul style={linksStyle}>
              {navItems.map(item => (
                <li key={item.label}><a style={linkStyle} href={item.href}
                  onMouseEnter={e => e.target.style.color = '#0A0A0A'}
                  onMouseLeave={e => e.target.style.color = '#6B6B6B'}>{item.label}</a></li>
              ))}
            </ul>
            <button style={ctaStyle} onClick={onCTA}
              onMouseEnter={e => { e.target.style.background = '#1A1A1A'; e.target.style.transform = 'translateY(-1px)'; }}
              onMouseLeave={e => { e.target.style.background = '#0A0A0A'; e.target.style.transform = 'translateY(0)'; }}>
              Começar agora
            </button>
          </>
        )}
      </nav>

      {/* Mobile Drawer */}
      {isMobile && (
        <div style={drawerStyle}>
          {navItems.map((item, i) => (
            <a key={item.label} style={drawerLinkStyle(i)} href={item.href} onClick={() => setOpen(false)}>{item.label}</a>
          ))}
          <button style={drawerCta} onClick={() => { setOpen(false); onCTA(); }}>Começar agora →</button>
        </div>
      )}
    </>
  );
};

Object.assign(window, { Nav });