/* Navbar, fixed, with scroll shadow + mobile drawer */

function Navbar() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

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

  // Lock body scroll when drawer open
  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  const links = [
    { label: 'Metodologia',  href: '#metodologia' },
    { label: 'Resultados',   href: '#retornos' },
    { label: 'Depoimentos',  href: '#depoimentos' },
    { label: 'Investimento', href: '#investimento' },
  ];

  return (
    <React.Fragment>
      <header
        className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 ${
          scrolled
            ? 'bg-ink-800/85 backdrop-blur-xl border-b border-white/[0.06] shadow-[0_8px_30px_-12px_rgba(0,0,0,0.5)]'
            : 'bg-transparent'
        }`}
      >
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-10 h-[72px] flex items-center justify-between">
          {/* Logo */}
          <a href="#top" className="flex items-center gap-3 group" aria-label="IA Vertical for Business, Mentoria Douglas Madeira">
            <BrandMark size="md" />
          </a>

          {/* Desktop nav */}
          <nav className="hidden lg:flex items-center gap-9" aria-label="Principal">
            {links.map(l => (
              <a key={l.href} href={l.href}
                 className="text-[14px] text-fog-200 hover:text-fog-100 transition-colors duration-200">
                {l.label}
              </a>
            ))}
          </nav>

          {/* Desktop CTAs */}
          <div className="hidden lg:flex items-center gap-3">
            <CTAButton variant="secondary" size="sm" icon={false} href="#contato">Análise Gratuita</CTAButton>
            <CTAButton variant="primary"   size="sm" icon={false} href="#investimento">Solicitar vaga para Mentoria</CTAButton>
          </div>

          {/* Mobile hamburger */}
          <button
            onClick={() => setOpen(true)}
            aria-label="Abrir menu"
            className="lg:hidden p-2 -mr-2 text-fog-100 hover:text-white transition"
          >
            <IconMenu size={26} strokeWidth={1.6} />
          </button>
        </div>
      </header>

      {/* Drawer */}
      <div
        onClick={() => setOpen(false)}
        className={`drawer-backdrop ${open ? 'open' : ''} fixed inset-0 bg-black/60 backdrop-blur-sm z-[60] lg:hidden`}
        aria-hidden="true"
      />
      <aside
        className={`drawer ${open ? 'open' : ''} fixed top-0 right-0 h-full w-[85%] max-w-sm bg-ink-900 border-l border-white/10 z-[70] lg:hidden flex flex-col`}
        role="dialog" aria-modal="true" aria-label="Menu"
      >
        <div className="flex items-center justify-between px-6 h-[72px] border-b border-white/[0.06]">
          <BrandMark size="sm" />
          <button onClick={() => setOpen(false)} aria-label="Fechar menu" className="p-2 -mr-2 text-fog-200 hover:text-white">
            <IconClose size={22} strokeWidth={1.6} />
          </button>
        </div>

        <nav className="flex-1 overflow-y-auto px-6 py-8 flex flex-col gap-1">
          {links.map((l, i) => (
            <a key={l.href} href={l.href} onClick={() => setOpen(false)}
               className="flex items-center justify-between py-4 border-b border-white/[0.05] text-[18px] text-fog-100 hover:text-accent-500 transition-colors">
              <span>{l.label}</span>
              <IconArrowRight size={18} className="opacity-40" />
            </a>
          ))}
        </nav>

        <div className="p-6 border-t border-white/[0.06] flex flex-col gap-3">
          <CTAButton variant="secondary" size="md" icon={false} href="#contato">Análise Gratuita</CTAButton>
          <CTAButton variant="primary"   size="md" icon={false} href="#investimento">Solicitar vaga para Mentoria</CTAButton>
        </div>
      </aside>
    </React.Fragment>
  );
}

window.Navbar = Navbar;