// Navbar fixa — transparente no topo, marsala após scroll
window.Navbar = function Navbar() {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { href: "#evento",    label: "O Evento"  },
    { href: "#galeria",   label: "Galeria"   },
    { href: "#presentes", label: "Presentes" },
    { href: "#rsvp",      label: "Confirmar", gold: true }
  ];

  const navStyle = {
    position: 'fixed', top: 0, left: 0, right: 0, height: 56,
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '0 28px', zIndex: 50,
    background: (scrolled || open) ? '#711312' : 'transparent',
    boxShadow: (scrolled || open) ? '0 2px 18px rgba(107,26,38,0.18)' : 'none',
    borderBottom: (scrolled || open) ? '1px solid rgba(184,134,11,0.25)' : '1px solid transparent',
    transition: 'background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease'
  };

  const sideStyle = { display: 'flex', alignItems: 'center', gap: 28, flex: 1 };

  const linkStyle = {
    fontFamily: 'Lato, sans-serif', fontSize: 11, fontWeight: 400,
    color: scrolled ? '#FAF3E8' : '#711312', letterSpacing: 2, textTransform: 'uppercase',
    padding: '6px 0', borderBottom: '1px solid transparent',
    transition: 'border-color 0.25s ease, color 0.25s ease'
  };

  return (
    <>
      <nav style={navStyle} aria-label="Navegação principal">
        {/* Desktop: links à esquerda — ocultos no topo */}
        {scrolled && (
          <div style={{ ...sideStyle, justifyContent: 'flex-start' }} className="nav-left-desktop">
            {links.slice(0, 2).map(l => (
              <a key={l.href} href={l.href} style={linkStyle}
                 onMouseEnter={e => e.currentTarget.style.borderColor = '#ADADAD'}
                 onMouseLeave={e => e.currentTarget.style.borderColor = 'transparent'}>
                {l.label}
              </a>
            ))}
          </div>
        )}

        {/* Logo central — oculto no topo */}
        {scrolled && (
          <a href="#hero" style={{ display: 'flex', alignItems: 'center' }}>
            <img src="assets/led-header.png" alt="L&D" style={{ height: 36, width: 'auto' }} />
          </a>
        )}

        {/* Desktop: links à direita — ocultos no topo */}
        {scrolled && (
          <div style={{ ...sideStyle, justifyContent: 'flex-end' }} className="nav-right-desktop">
            {links.slice(2).map(l => (
              <a key={l.href} href={l.href} style={l.href === '#rsvp' ? { ...linkStyle, color: '#ADADAD', borderBottom: '1px solid #ADADAD' } : linkStyle}
                 onMouseEnter={e => { if (l.href !== '#rsvp') e.currentTarget.style.borderColor = '#ADADAD'; }}
                 onMouseLeave={e => { if (l.href !== '#rsvp') e.currentTarget.style.borderColor = 'transparent'; }}>
                {l.label}
              </a>
            ))}
          </div>
        )}

        {/* Hamburguer — sempre visível no topo, apenas mobile quando scrollado */}
        <button
          className={scrolled ? 'nav-burger' : ''}
          onClick={() => setOpen(o => !o)}
          aria-label="Abrir menu"
          aria-expanded={open}
          style={{
            display: scrolled ? undefined : 'flex',
            width: 32, height: 32,
            color: 'rgba(0,0,0,0.32)', alignItems: 'center', justifyContent: 'center',
            background: 'transparent', border: 'none', cursor: 'pointer',
            marginLeft: 'auto'
          }}
        >
          <Icon name="menu" size={22} />
        </button>
      </nav>

      {/* Drawer mobile */}
      {open && (
        <div className="nav-drawer" onClick={() => setOpen(false)}>
          <div className="nav-drawer-inner" onClick={e => e.stopPropagation()}>
            {links.map(l => (
              <a key={l.href} href={l.href} onClick={() => setOpen(false)}
                 className={`nav-drawer-link${l.gold ? ' nav-drawer-link--gold' : ''}`}>
                {l.label}
              </a>
            ))}
            <img src="assets/led-header.png" alt="L&D" style={{ height: 40, width: 'auto', marginTop: 12 }} />
          </div>
        </div>
      )}

      <style>{`
        @media (max-width: 768px) {
          .nav-left-desktop, .nav-right-desktop { display: none !important; }
          .nav-burger { display: inline-flex !important; }
        }
        .nav-drawer {
          position: fixed; inset: 56px 0 0 0; z-index: 49;
          background: rgba(0,0,0,0.35);
          backdrop-filter: blur(2px);
        }
        .nav-drawer-inner {
          background: #711312;
          padding: 32px 24px 40px;
          display: flex; flex-direction: column; align-items: center; gap: 18px;
          animation: drawerIn 0.35s ease-out;
          border-bottom: 1px solid rgba(184,134,11,0.3);
        }
        .nav-drawer-link {
          font-family: 'Lato', sans-serif; font-size: 14px;
          letter-spacing: 3px; text-transform: uppercase; color: #FAF3E8;
          padding: 8px 4px;
        }
        .nav-drawer-link--gold { color: #ADADAD; }
      `}</style>
    </>
  );
};